@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] { display: none !important; }

/* RTF-area: list/text formatting for both editor and read-only views */
.rtf-area ul  { list-style-type: disc;    padding-left: 1.5rem; margin: .25rem 0 }
.rtf-area ol  { list-style-type: decimal; padding-left: 1.5rem; margin: .25rem 0 }
.rtf-area li  { margin: .1rem 0 }
.rtf-area b, .rtf-area strong { font-weight: 600 }
.rtf-area i, .rtf-area em    { font-style: italic }
.rtf-area u   { text-decoration: underline }
.rtf-area p   { margin-bottom: .25rem }
.rtf-area a[href] {
    color: #4f46e5;
    text-decoration: underline;
    word-break: break-all;
}
.rtf-area a[href]:hover { color: #3730a3; }
.dark .rtf-area a[href] { color: #818cf8; }
.dark .rtf-area a[href]:hover { color: #a5b4fc; }

/* OpenDyslexic @font-face is injected via app.blade.php using asset() for correct subpath support */

html.font-opendyslexic,
html.font-opendyslexic body,
html.font-opendyslexic * {
    font-family: 'OpenDyslexic', sans-serif !important;
}
html.font-opendyslexic .font-preview-default {
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif !important;
}

html.font-lexend,
html.font-lexend body,
html.font-lexend * {
    font-family: 'Lexend', sans-serif !important;
}
html.font-lexend .font-preview-default {
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif !important;
}

html.font-inter,
html.font-inter body,
html.font-inter * {
    font-family: 'Inter', sans-serif !important;
}
html.font-inter .font-preview-default {
    font-family: Figtree, ui-sans-serif, system-ui, sans-serif !important;
}

html.text-bold,
html.text-bold body,
html.text-bold * {
    font-weight: 700 !important;
}

@layer base {
    html, body { min-height: 100%; overflow-x: hidden; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ACCENT COLOUR VARIABLES
   --a4…a7  main accent ramp (light → dark), muted/desaturated
   --abg    softest main tint (card/panel backgrounds)
   --c1     complementary accent (decorative borders, secondary highlights)
   --c2     darker complement
   --cbg    softest complement tint
   ═══════════════════════════════════════════════════════════════════════ */
:root,
html[data-theme="blue"] {
    --a4:  120 132 198; /* dusty indigo */
    --a5:   92 106 175;
    --a6:   68  82 152;
    --a7:   50  62 126;
    --abg: 235 238 252;
    --c1:  188 148  72; /* warm amber complement */
    --c2:  156 118  48;
    --cbg: 254 249 236
}
html[data-theme="gray"] {
    --a4:  148 158 172; /* blue-gray slate */
    --a5:  108 118 134;
    --a6:   78  88 105;
    --a7:   58  68  85;
    --abg: 240 242 246;
    --c1:  172 132 118; /* dusty clay-rose complement */
    --c2:  142 104  90;
    --cbg: 252 244 240
}
html[data-theme="red"] {
    --a4:  188  98  98; /* brick rose */
    --a5:  160  72  72;
    --a6:  134  50  50;
    --a7:  110  34  34;
    --abg: 253 236 236;
    --c1:   48 126 120; /* soft teal complement */
    --c2:   34 100  96;
    --cbg: 232 250 248
}
html[data-theme="orange"] {
    --a4:  196 118  70; /* terracotta */
    --a5:  168  90  46;
    --a6:  142  68  28;
    --a7:  116  50  16;
    --abg: 254 240 226;
    --c1:   62  94 158; /* muted slate-blue complement */
    --c2:   44  72 128;
    --cbg: 234 240 254
}
html[data-theme="green"] {
    --a4:   78 148 106; /* sage forest */
    --a5:   54 122  82;
    --a6:   36  98  60;
    --a7:   24  76  42;
    --abg: 228 248 236;
    --c1:  162  80 112; /* dusty rose complement */
    --c2:  130  58  86;
    --cbg: 252 234 244
}
html[data-theme="purple"] {
    --a4:  148 108 188; /* dusty mauve */
    --a5:  120  82 162;
    --a6:   94  58 136;
    --a7:   72  38 110;
    --abg: 242 236 255;
    --c1:  112 152  86; /* sage green complement */
    --c2:   86 122  62;
    --cbg: 238 250 228
}
html[data-theme="colorful"] {
    --a4:  120 132 198;
    --a5:   92 106 175;
    --a6:   68  82 152;
    --a7:   50  62 126;
    --abg: 235 238 252;
    --c1:  188 148  72;
    --c2:  156 118  48;
    --cbg: 254 249 236
}
html[data-theme="pastel"] {
    --a4:  208 140 170; /* dusty rose */
    --a5:  180 110 142;
    --a6:  152  82 114;
    --a7:  126  58  88;
    --abg: 255 240 250;
    --c1:   88 155 136; /* soft sage-teal complement */
    --c2:   64 126 108;
    --cbg: 230 250 244
}

/* ═══════════════════════════════════════════════════════════════════════
   MAP THEME VARS ONTO EXISTING TAILWIND INDIGO CLASSES
   ═══════════════════════════════════════════════════════════════════════ */
.border-indigo-400              { border-color: rgb(var(--a4)/var(--tw-border-opacity,1)) }
.focus\:border-indigo-700:focus { border-color: rgb(var(--a7)/var(--tw-border-opacity,1)) }
.text-indigo-600                { color: rgb(var(--a6)/var(--tw-text-opacity,1)) }
.text-indigo-700                { color: rgb(var(--a6)/var(--tw-text-opacity,1)) }
.text-indigo-800                { color: rgb(var(--a7)/var(--tw-text-opacity,1)) }
.bg-indigo-50                   { background-color: rgb(var(--abg)/var(--tw-bg-opacity,1)) }
.bg-indigo-100                  { background-color: rgb(var(--abg)/var(--tw-bg-opacity,1)) }
.bg-indigo-600                  { background-color: rgb(var(--a6)/var(--tw-bg-opacity,1)) }
.hover\:bg-indigo-700:hover     { background-color: rgb(var(--a7)/var(--tw-bg-opacity,1)) }
.focus\:ring-indigo-500:focus   { --tw-ring-color: rgb(var(--a5)/var(--tw-ring-opacity,1)) }
.focus\:border-indigo-500:focus { border-color: rgb(var(--a5)/var(--tw-border-opacity,1)) }
.focus\:border-indigo-300:focus { border-color: rgb(var(--a4)/var(--tw-border-opacity,1)) }
.focus\:bg-indigo-100:focus     { background-color: rgb(var(--abg)/var(--tw-bg-opacity,1)) }
.border-indigo-300              { border-color: rgb(var(--a4)/var(--tw-border-opacity,1)) }
.border-indigo-200              { border-color: rgb(var(--a4)/.4) }
.bg-indigo-500                  { background-color: rgb(var(--a5)/var(--tw-bg-opacity,1)) }
.hover\:bg-indigo-600:hover     { background-color: rgb(var(--a6)/var(--tw-bg-opacity,1)) }
.text-indigo-500                { color: rgb(var(--a5)/var(--tw-text-opacity,1)) }
.hover\:text-indigo-700:hover   { color: rgb(var(--a6)/var(--tw-text-opacity,1)) }

/* Suggestion pills: already-added state */
.sugg-pill[disabled]            { opacity: 0.4; cursor: default; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════════════
   THEMED NAVBAR  (light mode only — dark mode keeps its own dark bg)
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.dark) nav {
    background-color: rgb(var(--a6));
    border-bottom-color: rgb(var(--a7));
}
/* All text in the nav bar → white */
html:not(.dark) nav .text-gray-900,
html:not(.dark) nav .text-gray-800    { color: rgb(255 255 255) }
html:not(.dark) nav .text-gray-700    { color: rgba(255,255,255,.9) }
html:not(.dark) nav .text-gray-600,
html:not(.dark) nav .text-gray-500    { color: rgba(255,255,255,.75) }
html:not(.dark) nav .text-gray-400    { color: rgba(255,255,255,.6) }
html:not(.dark) nav .fill-current     { color: rgb(255 255 255) }
html:not(.dark) nav .hover\:text-gray-900:hover,
html:not(.dark) nav .hover\:text-gray-700:hover,
html:not(.dark) nav .hover\:text-gray-500:hover { color: rgb(255 255 255) }
/* Bg overrides */
html:not(.dark) nav .bg-white          { background-color: transparent }
html:not(.dark) nav .bg-gray-50             { background-color: rgba(255,255,255,.12) }
html:not(.dark) nav .bg-gray-100            { background-color: rgba(255,255,255,.18) }
html:not(.dark) nav .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,.18) }
html:not(.dark) nav .hover\:bg-gray-50:hover  { background-color: rgba(255,255,255,.12) }
/* Active nav link border → white */
html:not(.dark) nav .border-indigo-400 { border-color: rgb(255 255 255) }
html:not(.dark) nav .hover\:border-gray-300:hover { border-color: rgba(255,255,255,.5) }
html:not(.dark) nav .border-gray-200,
html:not(.dark) nav .border-gray-100   { border-color: rgba(255,255,255,.2) }
html:not(.dark) nav .border-t          { border-color: rgba(255,255,255,.2) }
/* Mobile active link */
html:not(.dark) nav .text-indigo-700,
html:not(.dark) nav .text-indigo-800   { color: rgb(255 255 255) }
html:not(.dark) nav .bg-indigo-50,
html:not(.dark) nav .bg-indigo-100,
html:not(.dark) nav .focus\:bg-indigo-100:focus { background-color: rgba(255,255,255,.2) }

/* ── Floating panels: preferences panel uses accent bg, user dropdown stays white */
html:not(.dark) nav .nd-pref-panel                          { background-color: rgb(var(--abg)); border-color: rgb(var(--a4)/.4) }
.dark           nav .nd-pref-panel                          { background-color: rgb(31 41 55);   border-color: rgb(55 65 81) }
/* Restore normal text/border/bg colors inside the preferences panel */
html:not(.dark) nav .nd-pref-panel .text-gray-900,
html:not(.dark) nav .nd-pref-panel .text-gray-800          { color: rgb(17 24 39) }
html:not(.dark) nav .nd-pref-panel .text-gray-700          { color: rgb(55 65 81) }
html:not(.dark) nav .nd-pref-panel .text-gray-600,
html:not(.dark) nav .nd-pref-panel .text-gray-500          { color: rgb(107 114 128) }
html:not(.dark) nav .nd-pref-panel .text-gray-400          { color: rgb(156 163 175) }
html:not(.dark) nav .nd-pref-panel .text-sm                { color: rgb(55 65 81) }
html:not(.dark) nav .nd-pref-panel .border-gray-200        { border-color: rgb(229 231 235) }
html:not(.dark) nav .nd-pref-panel .hover\:border-gray-400:hover { border-color: rgb(156 163 175) }
html:not(.dark) nav .nd-pref-panel .text-indigo-700        { color: rgb(var(--a7)) }
html:not(.dark) nav .absolute.bg-white      { background-color: rgb(var(--abg)); border-color: rgb(var(--a4)/.4) }
html:not(.dark) nav .absolute .bg-white     { background-color: rgb(255 255 255) }
html:not(.dark) nav .absolute .text-gray-900,
html:not(.dark) nav .absolute .text-gray-800 { color: rgb(17 24 39) }
html:not(.dark) nav .absolute .text-gray-700 { color: rgb(55 65 81) }
html:not(.dark) nav .absolute .text-gray-600,
html:not(.dark) nav .absolute .text-gray-500 { color: rgb(107 114 128) }
html:not(.dark) nav .absolute .text-gray-400 { color: rgb(156 163 175) }
html:not(.dark) nav .absolute .fill-current  { color: rgb(17 24 39) }
html:not(.dark) nav .absolute .hover\:text-gray-900:hover,
html:not(.dark) nav .absolute .hover\:text-gray-700:hover { color: rgb(17 24 39) }
html:not(.dark) nav .absolute .hover\:bg-gray-100:hover { background-color: rgb(243 244 246) }
html:not(.dark) nav .absolute .border-gray-100 { border-color: rgb(243 244 246) }
html:not(.dark) nav .absolute .border-gray-200 { border-color: rgb(229 231 235) }
html:not(.dark) nav .absolute .text-indigo-700,
html:not(.dark) nav .absolute .text-indigo-800 { color: rgb(var(--a7)) }
html:not(.dark) nav .absolute .bg-indigo-50,
html:not(.dark) nav .absolute .bg-indigo-100   { background-color: rgb(var(--abg)) }

/* Colorful: rainbow gradient nav */
html[data-theme="colorful"]:not(.dark) nav {
    background: linear-gradient(90deg,#e11d48,#ea580c,#ca8a04,#16a34a,#2563eb,#7c3aed);
    border-bottom-color: #7c3aed;
}
/* Colorful: rainbow active-link border */
html[data-theme="colorful"] .border-indigo-400 {
    border-image: linear-gradient(90deg,#f43f5e,#f97316,#eab308,#22c55e,#3b82f6,#a855f7) 1;
    border-image-slice: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   THEMED APP HEADER BAR  (the white bar below nav with page title)
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.dark) header.bg-white {
    background-color: rgb(var(--a5));
    box-shadow: 0 2px 8px rgb(var(--a7)/.3);
}
/* Target only the page-level header (has bg-white), not semantic <header> tags inside panels */
html:not(.dark) header.bg-white .text-gray-900,
html:not(.dark) header.bg-white .text-gray-800    { color: rgb(255 255 255) }
html:not(.dark) header.bg-white .text-gray-700    { color: rgba(255,255,255,.9) }
html:not(.dark) header.bg-white .text-gray-500    { color: rgba(255,255,255,.7) }
html:not(.dark) header.bg-white .hover\:text-gray-700:hover { color: rgb(255 255 255) }

/* ═══════════════════════════════════════════════════════════════════════
   GUIDED TOUR  — highlight ring + tooltip
   ═══════════════════════════════════════════════════════════════════════ */
.nd-tour-highlight {
    position: fixed;
    border-radius: 10px;
    border: 2px solid rgb(var(--a5));
    box-shadow: 0 0 0 3px rgb(var(--a5)/.25);
    pointer-events: none;
    transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
    z-index: 52;
}

/* ═══════════════════════════════════════════════════════════════════════
   SAFETY TIPS BANNER  (chat inbox)
   ═══════════════════════════════════════════════════════════════════════ */
.safety-banner                  { background-color: rgb(var(--cbg)); border-color: rgb(var(--c1)/.35) }
.safety-banner summary          { color: rgb(var(--c2)) }
.safety-banner .safety-tips-body { border-color: rgb(var(--c1)/.2); color: rgb(var(--c2)) }
.dark .safety-banner            { background-color: rgb(31 41 55); border-color: rgb(var(--c1)/.25) }
.dark .safety-banner summary    { color: white }
.dark .safety-banner .safety-tips-body { border-color: rgb(var(--c1)/.2); color: white }

/* ═══════════════════════════════════════════════════════════════════════
   PROFILE TYPE PILLS
   Light  — Ouder: header colour (--a5)  ·  Partner: navbar colour (--a6)
   Dark   — shift one step lighter so pills stand out against dark cards
   ═══════════════════════════════════════════════════════════════════════ */
.pill-parent,
.pill-partner,
.pill-pro          { border: 1px solid }
.pill-parent       { background-color: rgb(var(--c1)); border-color: rgb(var(--c2)); color: white }
.pill-partner      { background-color: rgb(var(--a6)); border-color: rgb(var(--a7)); color: white }
.pill-pro          { background-color: rgb(var(--cbg)); border-color: rgb(var(--c1)); color: rgb(var(--c2)) }


/* ═══════════════════════════════════════════════════════════════════════
   PROFILE LIST CARDS  (.profile-card)
   Left border uses complement colour for a tasteful two-tone contrast.
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.dark) .profile-card {
    background-color: rgb(var(--abg));
    border-left: 3px solid rgb(var(--c1)/.55);
    border-color: rgb(var(--a4)/.3);
}
html:not(.dark) .profile-card:hover {
    background-color: rgb(var(--abg));
    border-left-color: rgb(var(--c1));
    border-color: rgb(var(--a4)/.55);
}
html:not(.dark) .profile-card .profile-thumb {
    background-color: rgb(var(--abg));
}

/* ═══════════════════════════════════════════════════════════════════════
   WHITE CONTENT PANELS  — subtle complement top stripe
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.dark) .bg-white.shadow.sm\:rounded-lg {
    border-top: 3px solid rgb(var(--c1)/.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   PRIMARY BUTTONS  — complement-tinted bottom edge for depth
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.dark) .bg-indigo-600 {
    box-shadow: inset 0 -2px 0 rgb(var(--c2)/.45);
}
html:not(.dark) .bg-indigo-600:hover,
html:not(.dark) .hover\:bg-indigo-700:hover {
    box-shadow: inset 0 -2px 0 rgb(var(--c2)/.6);
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPLEMENT UTILITY — reusable for views that opt in
   ═══════════════════════════════════════════════════════════════════════ */
.border-complement   { border-color: rgb(var(--c1)) }
.text-complement     { color: rgb(var(--c1)) }
.bg-complement-soft  { background-color: rgb(var(--cbg)) }

/* ═══════════════════════════════════════════════════════════════════════
   FILTER PANEL + OTHER WHITE CARD PANELS  (details, bg-white panels)
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.dark) details.bg-white {
    background-color: rgb(var(--abg));
    border-color: rgb(var(--a4)/.4);
}

/* ═══════════════════════════════════════════════════════════════════════
   DETAIL CARD INFO PANEL  (.detail-info)
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.dark) .detail-info {
    background-color: rgb(var(--abg));
}

/* ═══════════════════════════════════════════════════════════════════════
   DETAIL CARD GALLERY  (.nd-gallery)
   ═══════════════════════════════════════════════════════════════════════ */
html:not(.dark) .nd-gallery {
    background-color: rgb(var(--abg));
}

/* ═══════════════════════════════════════════════════════════════════════
   PASTEL: softer page background
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="pastel"]:not(.dark) body { background-color: rgb(var(--abg)) }

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE STRUCTURAL OVERRIDES
   ═══════════════════════════════════════════════════════════════════════ */
/* Dropdown hover/focus: override Tailwind's light hover:bg in dark mode */
.dark .hover\:bg-gray-100:hover  { background-color: rgb(55 65 81) }
.dark .focus\:bg-gray-100:focus  { background-color: rgb(55 65 81) }
.dark .hover\:bg-gray-50:hover   { background-color: rgb(55 65 81) }
/* Nav text hover: Tailwind hover:text-gray-600/700 is dark on dark — make it light */
.dark nav .hover\:text-gray-700:hover,
.dark nav .hover\:text-gray-600:hover { color: rgb(229 231 235) }
.dark nav                    { background-color: rgb(17 24 39);  border-color: rgb(55 65 81) }
.dark .bg-white              { background-color: rgb(31 41 55) }
.dark .bg-gray-50            { background-color: rgb(31 41 55) }
.dark .bg-gray-100           { background-color: rgb(17 24 39) }
.dark .border-gray-100       { border-color: rgb(55 65 81) }
.dark .border-gray-200       { border-color: rgb(75 85 99) }
.dark .text-gray-900         { color: rgb(249 250 251) }
.dark .text-gray-800         { color: rgb(243 244 246) }
.dark .text-gray-700         { color: rgb(229 231 235) }
.dark .text-gray-600         { color: rgb(209 213 219) }
.dark .text-gray-500         { color: rgb(156 163 175) }
.dark .text-gray-400         { color: rgb(107 114 128) }
.dark .text-gray-300         { color: rgb(75 85 99) }
.dark .shadow-sm             { box-shadow: 0 1px 3px 0 rgb(0 0 0/.4) }
.dark .shadow-md             { box-shadow: 0 4px 6px -1px rgb(0 0 0/.5) }
.dark input, .dark select, .dark textarea {
    background-color: rgb(55 65 81);
    border-color: rgb(75 85 99);
    color: rgb(243 244 246);
}
.dark input::placeholder { color: rgb(107 114 128) }

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE NAV DROPDOWN  — own background, restores normal text/hover colors
   that the global themed-nav rules would otherwise override
   ═══════════════════════════════════════════════════════════════════════ */
nav .mobile-nav-menu                        { background-color: rgb(255 255 255) }
.dark nav .mobile-nav-menu                  { background-color: rgb(17 24 39) }

/* Restore normal text colors inside the mobile panel (light mode) */
html:not(.dark) nav .mobile-nav-menu .text-gray-900,
html:not(.dark) nav .mobile-nav-menu .text-gray-800  { color: rgb(17 24 39) }
html:not(.dark) nav .mobile-nav-menu .text-gray-700  { color: rgb(55 65 81) }
html:not(.dark) nav .mobile-nav-menu .text-gray-600,
html:not(.dark) nav .mobile-nav-menu .text-gray-500  { color: rgb(107 114 128) }
html:not(.dark) nav .mobile-nav-menu .text-gray-400  { color: rgb(156 163 175) }
html:not(.dark) nav .mobile-nav-menu .fill-current   { color: rgb(17 24 39) }
html:not(.dark) nav .mobile-nav-menu .hover\:text-gray-900:hover,
html:not(.dark) nav .mobile-nav-menu .hover\:text-gray-700:hover,
html:not(.dark) nav .mobile-nav-menu .hover\:text-gray-500:hover { color: rgb(17 24 39) }

/* Restore normal background/hover colors (light mode) */
html:not(.dark) nav .mobile-nav-menu .bg-white           { background-color: rgb(255 255 255) }
html:not(.dark) nav .mobile-nav-menu .hover\:bg-gray-100:hover { background-color: rgb(243 244 246) }
html:not(.dark) nav .mobile-nav-menu .hover\:bg-gray-50:hover  { background-color: rgb(249 250 251) }
html:not(.dark) nav .mobile-nav-menu .focus\:bg-indigo-100:focus { background-color: rgb(var(--abg)) }

/* Restore border colors (light mode) */
html:not(.dark) nav .mobile-nav-menu .border-gray-100  { border-color: rgb(243 244 246) }
html:not(.dark) nav .mobile-nav-menu .border-gray-200  { border-color: rgb(229 231 235) }
html:not(.dark) nav .mobile-nav-menu .border-t         { border-color: rgb(229 231 235) }
html:not(.dark) nav .mobile-nav-menu .border-indigo-400 { border-color: rgb(var(--a4)) }

/* Active link accent colors (light mode) */
html:not(.dark) nav .mobile-nav-menu .text-indigo-700,
html:not(.dark) nav .mobile-nav-menu .text-indigo-800   { color: rgb(var(--a7)) }
html:not(.dark) nav .mobile-nav-menu .bg-indigo-50,
html:not(.dark) nav .mobile-nav-menu .bg-indigo-100     { background-color: rgb(var(--abg)) }

/* Hamburger button: keep the icon white against the themed nav bar at all times */
html:not(.dark) nav .hamburger-btn                      { color: rgb(255 255 255) }
html:not(.dark) nav .hamburger-btn:hover,
html:not(.dark) nav .hamburger-btn:focus                { background-color: rgba(255,255,255,.18); color: rgb(255 255 255) }

/* ═══════════════════════════════════════════════════════════════════════
   BOTTOM BAR — themed, matches navbar
   CSS custom properties cascade through the DOM, bypassing class specificity.
   The inline style="background-color:var(--bar-bg)" on the div picks these up.
   ═══════════════════════════════════════════════════════════════════════ */
:root  { --bar-bg: rgb(var(--a6)); --bar-border: rgb(var(--a7)) }
.dark  { --bar-bg: rgb(17 24 39);  --bar-border: rgb(55 65 81) }
html[data-theme="colorful"]:not(.dark) { --bar-bg: rgb(var(--a6)) } /* gradient not possible in custom property */

/* ── Bottom bar action buttons ─────────────────────────────── */
.bottom-bar-btn {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.75rem; border-radius: 0.375rem;
    font-size: 0.75rem; font-weight: 500; border: 1px solid;
    white-space: nowrap; transition: background-color 0.15s;
}
html:not(.dark) .bottom-bar-btn              { color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.4); background: transparent }
html:not(.dark) .bottom-bar-btn:hover        { background: rgba(255,255,255,.15) }
.dark .bottom-bar-btn                        { color: rgb(209 213 219); border-color: rgb(75 85 99); background: transparent }
.dark .bottom-bar-btn:hover                  { background: rgb(55 65 81) }

/* Primary (Save) button */
.bottom-bar-btn-primary {
    display: inline-flex; align-items: center;
    padding: 0.375rem 1rem; border-radius: 0.375rem;
    font-size: 0.75rem; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase;
    border: 1px solid; white-space: nowrap; transition: background-color 0.15s;
}
html:not(.dark) .bottom-bar-btn-primary                       { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55); color: white }
html:not(.dark) .bottom-bar-btn-primary:hover:not([disabled]) { background: rgba(255,255,255,.32) }
html:not(.dark) .bottom-bar-btn-primary[disabled]             { opacity: 0.4; cursor: not-allowed }
.dark .bottom-bar-btn-primary                                 { background: rgb(55 65 81); border-color: rgb(75 85 99); color: white }
.dark .bottom-bar-btn-primary:hover:not([disabled])           { background: rgb(75 85 99) }
.dark .bottom-bar-btn-primary[disabled]                       { opacity: 0.4; cursor: not-allowed }

/* ── Pagination links inside the bottom bar (light mode only) ─ */
html:not(.dark) .site-bottom-bar .text-gray-500,
html:not(.dark) .site-bottom-bar .text-gray-600   { color: rgba(255,255,255,.85) }
html:not(.dark) .site-bottom-bar .text-gray-700   { color: rgb(255 255 255) }
html:not(.dark) .site-bottom-bar .text-gray-400   { color: rgba(255,255,255,.4) }
html:not(.dark) .site-bottom-bar .border-gray-200,
html:not(.dark) .site-bottom-bar .border-gray-300 { border-color: rgba(255,255,255,.25) }
html:not(.dark) .site-bottom-bar .hover\:bg-gray-50:hover { background: rgba(255,255,255,.14) }
/* Active pagination page: white overlay so it stands out on the accent background */
html:not(.dark) .site-bottom-bar .pagination-active-page  { background: rgba(255,255,255,.28) !important }
/* Hide "Showing X to Y of Z results" — no room in the bar */
.site-bottom-bar .pagination-info { display: none !important }

/* ── Safe-area insets: Android system nav bar + iOS notch ────────────────
   Requires viewport-fit=cover in the meta viewport tag.
   The inner content div keeps a fixed h-16 height so buttons never shift
   into the safe area; only the background colour extends behind it.      */
#nd-bottom-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
nav.fixed {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Spinner used in photo editor loading state */
@keyframes ndSpin { to { transform: rotate(360deg); } }

/* PRO list card — mobile: square photo left, logo/extra-photo right */
@media (max-width: 639px) {
    .nd-pro-media {
        display: flex;
        flex-direction: row;
        height: 9rem; /* ~h-36 */
    }
    .nd-pro-media-photo {
        flex: 1 1 0%;
        min-width: 0;
        height: 100%;
    }
    /* Square photo when a right panel is present */
    .nd-pro-split .nd-pro-media-photo {
        flex: none;
        width: 9rem; /* same as height → perfect square */
    }
    .nd-pro-media-logo {
        flex: 1 1 0%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid;
    }
    /* Second photo fallback right panel (mobile only) */
    .nd-pro-media-photo2 {
        flex: 1 1 0%;
        min-width: 0;
        height: 100%;
        overflow: hidden;
        border-left: 1px solid;
    }
}

/*
 * Mobile only: lock nav + bottom-bar text to fixed px so the user's
 * Weergave font-size preference (set on <html>) does not affect chrome UI.
 * Values mirror Tailwind's defaults at a 16px root.
 */
@media (max-width: 639px) {
    nav .text-xs,  #nd-bottom-bar .text-xs,  #nd-bottom-bar .bottom-bar-btn  { font-size: 12px !important; line-height: 16px !important; }
    nav .text-sm,  #nd-bottom-bar .text-sm                                   { font-size: 14px !important; line-height: 20px !important; }
    nav .text-base,#nd-bottom-bar .text-base                                  { font-size: 16px !important; line-height: 24px !important; }
    nav .text-lg,  #nd-bottom-bar .text-lg                                    { font-size: 18px !important; line-height: 28px !important; }
    nav .text-xl,  #nd-bottom-bar .text-xl                                    { font-size: 20px !important; line-height: 28px !important; }
    nav .text-2xl, #nd-bottom-bar .text-2xl                                   { font-size: 24px !important; line-height: 32px !important; }
    nav .text-3xl, #nd-bottom-bar .text-3xl                                   { font-size: 30px !important; line-height: 36px !important; }
    /* Keep bottom-bar buttons compact on mobile regardless of user font-size setting */
    #nd-bottom-bar .bottom-bar-btn, #nd-bottom-bar .bottom-bar-btn-primary    { font-size: 13px !important; padding: 0.3rem 0.5rem !important; }
}