/* Custom Nova theme - clean, modern, emoji-friendly */
/* Respects dark mode */

/* ─── Shape & Layout (both modes) ─── */

/* Sidebar menu items - more padding, rounder */
[dusk="sidebar"] a {
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 8px 12px !important;
    transition: all 0.15s ease !important;
}

/* Cards - rounder corners */
.card, [class*="card"] {
    border-radius: 12px !important;
}

/* Buttons - rounder */
button, .btn, [class*="btn-"] {
    border-radius: 8px !important;
}

/* Action buttons - pill style */
.inline-action-button, [dusk*="action"] button {
    border-radius: 20px !important;
}

/* Input fields - rounder */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], input[type="search"],
textarea, select, .form-control {
    border-radius: 8px !important;
}

/* Search bar - rounder */
[dusk="global-search-component"] input {
    border-radius: 12px !important;
}

/* Modal - rounder */
.modal, [role="dialog"] {
    border-radius: 16px !important;
}

/* Breadcrumbs - subtle */
nav[aria-label="breadcrumb"] {
    opacity: 0.7;
}

/* ─── Light mode ─── */

:root:not(.dark) body,
:root:not(.dark) .min-h-screen {
    background-color: #ffffff !important;
}

:root:not(.dark) [dusk="sidebar"] {
    background-color: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
}

:root:not(.dark) [dusk="sidebar"] a:hover {
    background-color: #f1f5f9 !important;
}

:root:not(.dark) .card,
:root:not(.dark) [class*="card"] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #f1f5f9 !important;
}

:root:not(.dark) table tbody tr {
    border-color: #f1f5f9 !important;
}

:root:not(.dark) table tbody tr:hover {
    background-color: #f8fafc !important;
}

:root:not(.dark) input[type="text"],
:root:not(.dark) input[type="email"],
:root:not(.dark) input[type="password"],
:root:not(.dark) input[type="number"],
:root:not(.dark) input[type="url"],
:root:not(.dark) input[type="search"],
:root:not(.dark) textarea,
:root:not(.dark) select {
    border-color: #e2e8f0 !important;
}

:root:not(.dark) input:focus,
:root:not(.dark) textarea:focus,
:root:not(.dark) select:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

:root:not(.dark) header,
:root:not(.dark) nav[dusk="content"] {
    border-bottom: 1px solid #f1f5f9 !important;
}

/* ─── Dark mode ─── */

/* Override Nova's brand + gray palettes for dark mode */
.dark {
    /* Gold brand colors (buttons, links, accents) - !important to beat Nova's inline :root styles */
    --colors-primary-50: 254, 247, 236 !important;
    --colors-primary-100: 253, 233, 200 !important;
    --colors-primary-200: 251, 207, 137 !important;
    --colors-primary-300: 245, 185, 77 !important;
    --colors-primary-400: 240, 171, 62 !important;
    --colors-primary-500: 233, 162, 59 !important;
    --colors-primary-600: 212, 146, 47 !important;
    --colors-primary-700: 176, 117, 34 !important;
    --colors-primary-800: 141, 93, 27 !important;
    --colors-primary-900: 107, 71, 21 !important;

    /* Warm charcoal grays */
    --colors-gray-50: 248, 246, 243;    /* #F8F6F3 - primary text */
    --colors-gray-100: 225, 222, 218;   /* #E1DEDA */
    --colors-gray-200: 180, 177, 172;   /* #B4B1AC - secondary text */
    --colors-gray-300: 130, 127, 122;   /* #827F7A */
    --colors-gray-400: 92, 89, 85;      /* #5C5955 */
    --colors-gray-500: 72, 69, 65;      /* #484541 - border */
    --colors-gray-600: 56, 53, 50;      /* #383532 - cards/blocks */
    --colors-gray-700: 46, 44, 41;      /* #2E2C29 - sidebar */
    --colors-gray-800: 36, 34, 31;      /* #24221F */
    --colors-gray-900: 28, 26, 24;      /* #1C1A18 - page bg */
    --colors-gray-950: 18, 17, 15;      /* #12110F - deepest bg */
}

/* User menu button hover - lighter to match dropdown item hovers */
.dark .dark\:hover\:\[\&\:not\(\:disabled\)\]\:bg-gray-950:not(:disabled):hover {
    background-color: rgba(var(--colors-gray-700)) !important;
}

.dark [dusk="sidebar"] a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .card,
.dark [class*="card"] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: #E9A23B !important;
    box-shadow: 0 0 0 3px rgba(233, 162, 59, 0.15) !important;
}

/* ─── Two Factor Auth page ─── */

/* 2FA pages — shared layout */
.tw-grid.tw-grid-cols-2 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    gap: 0 !important;
    text-align: center !important;
    padding: 40px 0 !important;
}

.tw-grid.tw-grid-cols-2 > div {
    width: 100% !important;
}

/* Register page: QR code first */
.tw-grid.tw-grid-cols-2 > div:last-child:has(img) {
    order: -1 !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 32px !important;
}

/* Settings page: radio layout — undo centering */
.tw-grid.tw-grid-cols-2:has(input[type="radio"]) {
    text-align: left !important;
    max-width: 320px !important;
}

.tw-grid.tw-grid-cols-2 .tw-flex.tw-items-center.tw-mb-4 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.tw-grid.tw-grid-cols-2 .tw-flex.tw-items-center.tw-mb-4 label {
    margin: 0 !important;
}

.tw-grid.tw-grid-cols-2 input[type="radio"] {
    width: 18px !important;
    height: 18px !important;
    accent-color: rgb(var(--colors-primary-500)) !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
}

.dark .tw-grid.tw-grid-cols-2 .tw-flex.tw-items-center label {
    color: rgb(var(--colors-gray-200)) !important;
}

/* QR code styling */
.tw-grid.tw-grid-cols-2 img {
    border-radius: 16px !important;
    padding: 16px !important;
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
    max-width: 180px !important;
}

/* Hide the long description paragraph */
.tw-grid.tw-grid-cols-2 > div:first-child > p:first-child {
    display: none !important;
}

/* Section headings */
.tw-grid.tw-grid-cols-2 h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 20px !important;
    margin-bottom: 4px !important;
}

/* Description text */
.tw-grid.tw-grid-cols-2 p {
    font-size: 13px !important;
    line-height: 1.6 !important;
    opacity: 0.6 !important;
    margin-bottom: 12px !important;
}

/* Step labels */
.tw-grid.tw-grid-cols-2 span.border.rounded,
.tw-grid.tw-grid-cols-2 span.tw-bg-gray-100 {
    display: inline-block !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    background: none !important;
    margin-bottom: 6px !important;
    margin-top: 28px !important;
}

.dark .tw-grid.tw-grid-cols-2 span.border.rounded,
.dark .tw-grid.tw-grid-cols-2 span.tw-bg-gray-100 {
    color: inherit !important;
}

:root:not(.dark) .tw-grid.tw-grid-cols-2 span.border.rounded,
:root:not(.dark) .tw-grid.tw-grid-cols-2 span.tw-bg-gray-100 {
    color: inherit !important;
}

/* Recovery code box */
.tw-grid.tw-grid-cols-2 .border-dashed {
    border-style: solid !important;
    border-radius: 12px !important;
    padding: 20px 28px !important;
    border-width: 1px !important;
    margin: 12px 0 20px !important;
}

.dark .tw-grid.tw-grid-cols-2 .border-dashed {
    border-color: rgba(var(--colors-gray-500)) !important;
    background: rgba(var(--colors-gray-800), 0.5) !important;
}

:root:not(.dark) .tw-grid.tw-grid-cols-2 .border-dashed {
    border-color: #e2e8f0 !important;
    background: #f8fafc !important;
}

/* Recovery code text */
.tw-grid.tw-grid-cols-2 .tw-text-2xl {
    font-family: ui-monospace, monospace !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    opacity: 1 !important;
}

/* OTP input */
.tw-grid.tw-grid-cols-2 input[type="text"],
.tw-grid.tw-grid-cols-2 input {
    display: block !important;
    width: 180px !important;
    margin: 16px auto 0 !important;
    padding: 12px !important;
    font-size: 14px !important;
    line-height: 14px !important;
    font-family: ui-monospace, monospace !important;
    letter-spacing: 6px !important;
    text-align: center !important;
    border-radius: 8px !important;
    border: 1px solid rgba(var(--colors-gray-400)) !important;
    background: transparent !important;
    color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

.tw-grid.tw-grid-cols-2 input:focus {
    border-color: rgb(var(--colors-primary-500)) !important;
    box-shadow: 0 0 0 3px rgba(var(--colors-primary-500), 0.15) !important;
}

.tw-grid.tw-grid-cols-2 input::placeholder {
    font-size: 13px !important;
    letter-spacing: 0px !important;
    line-height: 14px !important;
    opacity: 0.3 !important;
}

/* 2FA action buttons */
.tw-grid.tw-grid-cols-2 button,
.tw-grid.tw-grid-cols-2 a[data-inertia-button],
.tw-grid.tw-grid-cols-2 .btn {
    display: inline-block !important;
    width: auto !important;
    padding: 8px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    margin: 8px 4px !important;
}

/* Primary action button */
.tw-grid.tw-grid-cols-2 button.btn-primary,
.tw-grid.tw-grid-cols-2 .btn.btn-default.btn-primary,
.tw-grid.tw-grid-cols-2 button.btn {
    background: rgb(var(--colors-primary-500)) !important;
    border: none !important;
    color: #fff !important;
}

.dark .tw-grid.tw-grid-cols-2 button.btn-primary,
.dark .tw-grid.tw-grid-cols-2 .btn.btn-default.btn-primary,
.dark .tw-grid.tw-grid-cols-2 button.btn {
    color: #1a1a1a !important;
}

.tw-grid.tw-grid-cols-2 button:hover,
.tw-grid.tw-grid-cols-2 .btn:hover {
    opacity: 0.9 !important;
}

/* Download link */
.tw-grid.tw-grid-cols-2 a {
    color: rgb(var(--colors-primary-500)) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* 2FA Clear settings page */
div.p-4:has(> form.max-w-\[25rem\]) {
    max-width: 400px !important;
    margin: 0 auto !important;
}

/* Builder logs container */
.dark .builder-logs-container {
    background: rgba(var(--colors-gray-900)) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(var(--colors-gray-700)) !important;
}

:root:not(.dark) .builder-logs-container {
    background: #f8fafc !important;
    color: #1e293b !important;
    border: 1px solid #e2e8f0 !important;
}

/* Log entry text colors — light mode overrides */
:root:not(.dark) .builder-logs-container span[style*="color:#e2e8f0"],
:root:not(.dark) .builder-logs-container span[style*="color: #e2e8f0"] {
    color: #1e293b !important;
}

:root:not(.dark) .builder-logs-container span[style*="color:#7dd3fc"] {
    color: #0369a1 !important;
}

:root:not(.dark) .builder-logs-container span[style*="color:#86efac"] {
    color: #15803d !important;
}

:root:not(.dark) .builder-logs-container span[style*="color:#6b7280"] {
    color: #9ca3af !important;
}

/* Center login/auth pages vertically */
div.py-6:has(> .max-w-sm > [class*="AppLogo"], > .max-w-sm > img, > .max-w-sm > svg) {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Fallback: target auth layout by form structure */
div.py-6.px-1:has(> div.mx-auto.py-8) {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: -40px !important;
}

/* Fix file uploader button vertical alignment */
.flex.items-center.space-x-4.pointer-events-none {
    align-items: center !important;
}
.flex.items-center.space-x-4.pointer-events-none > p {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    margin-right: 8px !important;
    text-align: left !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
.flex.items-center.space-x-4.pointer-events-none > p button,
.flex.items-center.space-x-4.pointer-events-none > p [class*="btn"] {
    white-space: nowrap !important;
}