/* ============================================================================
 * Rawabi Notes — consolidated styles
 * ----------------------------------------------------------------------------
 * The custom layer that complements the Tailwind tokens in
 * js/tailwind.config.js. Holds the app shell (sidebar + top bar), shared
 * component classes referenced across screens, toasts, modals and the mobile
 * drawer. Kept intentionally lean — the design system does the heavy lifting.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * Design tokens as CSS variables.
 *
 * Two parallel sets, both themeable:
 *   --tw-*   RGB triplets consumed by Tailwind utilities (see tailwind.config.js).
 *   --* hex  full colours consumed by the custom rules in this file (shell, etc).
 *
 * Light values live in :root; html[data-theme="dark"] overrides them. This is
 * the single source of truth behind the Settings → Appearance controls.
 * ------------------------------------------------------------------------- */
:root {
  /* Shell / custom-CSS colours (hex) */
  --primary: #6e517a;
  --primary-container: #886994;
  --on-primary: #ffffff;
  --nav-accent: #6e517a;            /* sidebar active + brand accent */
  --surface: #fff7fd;
  --surface-lowest: #ffffff;
  --surface-low: #faf1fa;
  --surface-container: #f4ebf4;
  --surface-high: #efe5ee;
  --surface-highest: #e9e0e8;
  --on-surface: #1e1a20;
  --on-surface-variant: #4b444d;
  --outline: #7d747d;
  --outline-variant: #cec3cd;
  --inverse-surface: #342f35;
  --inverse-on-surface: #f7eef7;
  --primary-fixed: #f7d8ff;
  --error: #ba1a1a;

  --shadow-sm: 0 1px 2px rgba(30, 26, 32, .05), 0 1px 3px rgba(30, 26, 32, .04);
  --shadow-md: 0 4px 20px rgba(26, 22, 28, .07);

  --sidebar-w: 280px;
  --topbar-h: 64px;

  /* Tailwind token triplets (light) */
  --tw-surface: 255 247 253;
  --tw-surface-dim: 224 215 224;
  --tw-surface-bright: 255 247 253;
  --tw-surface-container-lowest: 255 255 255;
  --tw-surface-container-low: 250 241 250;
  --tw-surface-container: 244 235 244;
  --tw-surface-container-high: 239 229 238;
  --tw-surface-container-highest: 233 224 232;
  --tw-surface-variant: 233 224 232;
  --tw-on-surface: 30 26 32;
  --tw-on-surface-variant: 75 68 77;
  --tw-inverse-surface: 52 47 53;
  --tw-inverse-on-surface: 247 238 247;
  --tw-outline: 125 116 125;
  --tw-outline-variant: 206 195 205;
  --tw-surface-tint: 113 84 125;
  --tw-background: 255 247 253;
  --tw-on-background: 30 26 32;
  --tw-primary: 110 81 122;
  --tw-on-primary: 255 255 255;
  --tw-primary-container: 136 105 148;
  --tw-on-primary-container: 255 251 255;
  --tw-inverse-primary: 222 186 234;
  --tw-secondary: 94 94 97;
  --tw-on-secondary: 255 255 255;
  --tw-secondary-container: 225 223 226;
  --tw-on-secondary-container: 98 98 101;
  --tw-tertiary: 108 83 118;
  --tw-on-tertiary: 255 255 255;
  --tw-tertiary-container: 134 107 144;
  --tw-on-tertiary-container: 255 251 255;
  --tw-error: 186 26 26;
  --tw-on-error: 255 255 255;
  --tw-error-container: 255 218 214;
  --tw-on-error-container: 147 0 10;
  --tw-primary-fixed: 247 216 255;
  --tw-primary-fixed-dim: 222 186 234;
  --tw-on-primary-fixed: 41 16 54;
  --tw-on-primary-fixed-variant: 88 60 100;
  --tw-secondary-fixed: 228 226 229;
  --tw-secondary-fixed-dim: 199 198 201;
  --tw-on-secondary-fixed: 27 27 30;
  --tw-on-secondary-fixed-variant: 70 71 73;
  --tw-tertiary-fixed: 247 217 255;
  --tw-tertiary-fixed-dim: 219 188 229;
  --tw-on-tertiary-fixed: 40 19 50;
  --tw-on-tertiary-fixed-variant: 86 62 96;
}

/* ---------------------------------------------------------------------------
 * Dark theme — a tasteful, accessible amethyst dark scheme.
 * Overrides both variable sets. Fixed accent tones (primary-fixed, …) stay
 * constant by design, matching Material's "fixed" role behaviour.
 * ------------------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Shell / custom-CSS colours (hex). Filled primary stays mid-amethyst so the
     hard-coded white text on the sidebar's New Note / brand / avatar stays legible;
     --nav-accent goes light for text/icon accents on dark surfaces. */
  --primary: #886994;
  --primary-container: #6a4f76;
  --on-primary: #ffffff;
  --nav-accent: #debaea;
  --surface: #14111a;
  --surface-lowest: #0e0b13;
  --surface-low: #1c1822;
  --surface-container: #201c26;
  --surface-high: #2b2731;
  --surface-highest: #36313c;
  --on-surface: #e8e0e8;
  --on-surface-variant: #cfc3ce;
  --outline: #988e98;
  --outline-variant: #4b444d;
  --inverse-surface: #e8e0e8;
  --inverse-on-surface: #322e36;
  --primary-fixed: #f7d8ff;
  --error: #ffb4ab;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .30);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, .55);

  /* Tailwind token triplets (dark) */
  --tw-surface: 20 17 26;
  --tw-surface-dim: 20 17 26;
  --tw-surface-bright: 59 54 64;
  --tw-surface-container-lowest: 14 11 19;
  --tw-surface-container-low: 28 24 34;
  --tw-surface-container: 32 28 38;
  --tw-surface-container-high: 43 39 49;
  --tw-surface-container-highest: 54 49 60;
  --tw-surface-variant: 75 68 77;
  --tw-on-surface: 232 224 232;
  --tw-on-surface-variant: 207 195 206;
  --tw-inverse-surface: 232 224 232;
  --tw-inverse-on-surface: 50 46 54;
  --tw-outline: 152 142 152;
  --tw-outline-variant: 75 68 77;
  --tw-surface-tint: 222 186 234;
  --tw-background: 20 17 26;
  --tw-on-background: 232 224 232;
  --tw-primary: 222 186 234;
  --tw-on-primary: 63 42 75;
  --tw-primary-container: 136 105 148;
  --tw-on-primary-container: 247 216 255;
  --tw-inverse-primary: 110 81 122;
  --tw-secondary: 203 195 206;
  --tw-on-secondary: 50 47 53;
  --tw-secondary-container: 74 70 78;
  --tw-on-secondary-container: 228 226 229;
  --tw-tertiary: 223 188 232;
  --tw-on-tertiary: 63 40 67;
  --tw-tertiary-container: 106 79 118;
  --tw-on-tertiary-container: 247 217 255;
  --tw-error: 255 180 171;
  --tw-on-error: 105 0 5;
  --tw-error-container: 147 0 10;
  --tw-on-error-container: 255 218 214;
  /* Fixed tones remain constant */
}

/* Literal white surfaces (bg-white / bg-white/80) must recede in dark mode. */
html[data-theme="dark"] .bg-white { background-color: #1c1822 !important; }
html[data-theme="dark"] .bg-white\/80 { background-color: rgba(28, 24, 34, .8) !important; }
/* Growth badges read on-theme in dark. */
html[data-theme="dark"] .bg-green-50 { background-color: rgba(74, 222, 128, .14) !important; }
html[data-theme="dark"] .text-green-600 { color: #6ee7a0 !important; }

/* ---------------------------------------------------------------------------
 * Accent colour — recolours the primary family (light theme). Selected in
 * Settings → Appearance; the swatch order there matches these names.
 * ------------------------------------------------------------------------- */
html[data-accent="plum"]   { --primary: #886994; --primary-container: #6e517a; --nav-accent: #6e517a; --tw-primary: 136 105 148; --tw-primary-container: 110 81 122; }
html[data-accent="violet"] { --primary: #6c5376; --primary-container: #866b90; --nav-accent: #6c5376; --tw-primary: 108 83 118; --tw-primary-container: 134 107 144; }
html[data-accent="soft"]   { --primary: #8a6d97; --primary-container: #a184ad; --nav-accent: #7d5a8a; --tw-primary: 138 109 151; --tw-primary-container: 161 132 173; }

/* ---------------------------------------------------------------------------
 * Compact density — trims the airier paddings for higher information density.
 * Conservative, so nothing collapses; toggled in Settings → Appearance.
 * ------------------------------------------------------------------------- */
html[data-density="compact"] .p-xl { padding: 26px !important; }
html[data-density="compact"] .py-xl { padding-top: 26px !important; padding-bottom: 26px !important; }
html[data-density="compact"] .p-lg { padding: 18px !important; }
html[data-density="compact"] .gap-lg { gap: 18px !important; }
html[data-density="compact"] .gap-xl { gap: 26px !important; }
html[data-density="compact"] .mb-xl { margin-bottom: 26px !important; }

/* ---------------------------------------------------------------------------
 * Material Symbols base rule.
 * The Google Fonts request supplies the @font-face; this rule guarantees the
 * icon glyphs render (so an icon never shows up as the literal word "search").
 * ------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --------------------------------- Base ---------------------------------- */
html { scroll-behavior: smooth; }
body {
  background: var(--surface);
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--primary-fixed); color: #291036; }

/* Thin, on-brand scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--outline-variant) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: 9999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--outline); }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ----------------------- App layout offsets ------------------------------ */
/* Pages inject the shell into #app-shell and wrap content in <main class="app-main">. */
.app-main { padding-top: var(--topbar-h); min-height: 100vh; }
@media (min-width: 1024px) { .app-main { margin-left: var(--sidebar-w); } }

/* ------------------------------ Sidebar ---------------------------------- */
.rw-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--surface-lowest);
  border-right: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px;
  z-index: 60;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.rw-sidebar.open { transform: none; box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }
@media (min-width: 1024px) { .rw-sidebar { transform: none; } }

.rw-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: var(--nav-accent); }
.rw-brand-mark {
  background: var(--primary); color: #fff; border-radius: 12px;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
}

.rw-newnote {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--primary); color: #fff; border-radius: 12px;
  padding: 11px 14px; margin-bottom: 8px;
  transition: opacity .2s, transform .05s;
}
.rw-newnote:hover { opacity: .92; }
.rw-newnote:active { transform: scale(.98); }

.rw-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.rw-nav-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--on-surface-variant);
  transition: background .15s, color .15s;
}
.rw-nav-item .material-symbols-outlined { font-size: 22px; }
.rw-nav-item:hover { background: var(--surface-container); color: var(--on-surface); }
.rw-nav-item.active { background: var(--surface-high); color: var(--nav-accent); font-weight: 600; }
.rw-nav-item.active::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 9999px; background: var(--nav-accent);
}

.rw-sidebar-foot { border-top: 1px solid var(--outline-variant); padding-top: 12px; margin-top: 4px; }
.rw-userchip { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; }
.rw-usermeta { display: flex; flex-direction: column; min-width: 0; }
.rw-username { color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-useremail { color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rw-avatar {
  width: 38px; height: 38px; border-radius: 9999px;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: Geist, sans-serif; font-weight: 600; flex: none;
}
.rw-avatar-sm { width: 34px; height: 34px; font-size: 14px; cursor: pointer; border: none; }

/* ------------------------------ Top bar ---------------------------------- */
.rw-topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); z-index: 50;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--surface-lowest);
  background: color-mix(in srgb, var(--surface-lowest) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--outline-variant);
}
@media (min-width: 1024px) { .rw-topbar { left: var(--sidebar-w); padding: 0 24px; } }
.rw-title { color: var(--on-surface); white-space: nowrap; flex: none; }
@media (max-width: 480px) { .rw-title { display: none; } }

.rw-search {
  flex: 1; max-width: 420px; margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-container); border: 1px solid transparent; border-radius: 10px;
  padding: 8px 12px; transition: border-color .15s, background .15s;
}
.rw-search:focus-within { border-color: var(--primary); background: var(--surface-lowest); }
.rw-search .material-symbols-outlined { font-size: 20px; color: var(--on-surface-variant); }
.rw-search input { flex: 1; background: transparent; border: none; outline: none; color: var(--on-surface); min-width: 0; }
.rw-search input::placeholder { color: var(--outline); }

.rw-topbar-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.rw-iconbtn {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--on-surface-variant); transition: background .15s, color .15s;
}
.rw-iconbtn:hover { background: var(--surface-container); color: var(--primary); }

.rw-menu { position: relative; }
.rw-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); width: 236px;
  background: var(--surface-lowest); border: 1px solid var(--outline-variant);
  border-radius: 14px; box-shadow: var(--shadow-md); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s; z-index: 70;
}
.rw-dropdown.open { opacity: 1; visibility: visible; transform: none; }
.rw-dropdown-head {
  padding: 10px 12px 8px; display: flex; flex-direction: column;
  border-bottom: 1px solid var(--outline-variant); margin-bottom: 4px;
}
.rw-dropdown-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  width: 100%; color: var(--on-surface); font-size: 14px; transition: background .12s; text-align: left;
}
.rw-dropdown-item:hover { background: var(--surface-container); }
.rw-dropdown-item .material-symbols-outlined { font-size: 20px; color: var(--on-surface-variant); }
#rw-logout:hover { color: var(--error); }
#rw-logout:hover .material-symbols-outlined { color: var(--error); }

/* --------------------------- Mobile backdrop ----------------------------- */
.rw-backdrop {
  position: fixed; inset: 0; background: rgba(20, 17, 24, .45); z-index: 55;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.rw-backdrop.open { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .rw-backdrop { display: none; } }

/* ----------------------- Shared component classes ------------------------ */
.card-shadow { box-shadow: var(--shadow-sm); }
.soft-shadow { box-shadow: var(--shadow-md); }

/* Input focus ring — primary border + soft outer glow (per DESIGN.md).
   !important guards against the forms plugin's default focus ring. */
.input-focus-ring:focus {
  outline: none !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(110, 81, 122, .16) !important;
}

.note-card-hover { transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.note-card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--primary-container);
  box-shadow: 0 12px 24px rgba(0, 0, 0, .07);
}

/* Dashboard bento grid */
.bento-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }

/* Modals (all-notes delete confirm, categories create) */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(20, 17, 24, .5);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.modal-backdrop.show { opacity: 1; visibility: visible; }
.modal-panel {
  width: 100%; max-width: 440px;
  background: var(--surface-lowest); border: 1px solid var(--outline-variant);
  border-radius: 16px; box-shadow: var(--shadow-md);
  transform: translateY(10px) scale(.98); transition: transform .2s ease;
}
.modal-backdrop.show .modal-panel { transform: none; }

/* Login / splash gradient backdrop */
.bg-login-gradient {
  background:
    radial-gradient(1100px 560px at 12% -5%, rgba(222, 186, 234, .32), transparent 60%),
    radial-gradient(950px 520px at 105% 108%, rgba(199, 198, 201, .30), transparent 55%),
    var(--surface);
}

/* -------------------------------- Toasts --------------------------------- */
.rw-toast-wrap {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none;
}
.rw-toast {
  display: flex; align-items: center; gap: 10px;
  background: var(--inverse-surface); color: var(--inverse-on-surface);
  padding: 12px 18px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  font-size: 14px; max-width: 90vw;
  opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s;
}
.rw-toast.show { opacity: 1; transform: none; }
.rw-toast .material-symbols-outlined { font-size: 20px; color: #a5d6a7; }
.rw-toast-error { background: #93000a; color: #ffdad6; }
.rw-toast-error .material-symbols-outlined { color: #ffb4ab; }

/* ------------------------------ Motion ----------------------------------- */
/* Fallback for tailwindcss-animate classes (plugin isn't loaded via the CDN). */
.animate-in { animation: rw-in .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rw-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 404 ambient orbs (mouse parallax overrides transform on move) */
@keyframes rw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.animate-float { animation: rw-float 8s ease-in-out infinite; }
.animate-float-delayed { animation: rw-float 11s ease-in-out infinite; animation-delay: -4s; }

/* ------------------------------ Prose ------------------------------------ */
/* Minimal prose styling for the AI output panel (typography plugin not loaded). */
.prose p { margin: .5rem 0; }
.prose ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.prose ol { list-style: decimal; padding-left: 1.25rem; margin: .5rem 0; }
.prose li { margin: .25rem 0; }
.prose strong { font-weight: 600; }