/* Trillitask app theme (signed-in pages). Colors come from app-palette.css
   (generated by App\Helpers\Theme); this file adds type, depth and the
   handful of fixes the palette remap can't express. Everything is scoped to
   the light / dark themes, so the pre-redesign "classic" look is untouched. */

html[data-theme="light"],
html[data-theme="dark"] {
  --tt-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tt-display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --tt-brandfont: "Montserrat", "Arial Black", system-ui, sans-serif;
  --tt-ease: cubic-bezier(.2, .7, .2, 1);
}
html[data-theme="light"] {
  color-scheme: light;
  --tt-ink: #0f2147;
  --tt-line: #e6dfd5;
  --tt-shadow-xs: 0 1px 2px rgba(15, 33, 71, .05);
  --tt-shadow-sm: 0 1px 2px rgba(15, 33, 71, .04), 0 2px 8px -2px rgba(15, 33, 71, .07);
  --tt-shadow: 0 1px 2px rgba(15, 33, 71, .05), 0 12px 32px -12px rgba(15, 33, 71, .2);
  --tt-shadow-lg: 0 2px 4px rgba(15, 33, 71, .04), 0 24px 56px -18px rgba(15, 33, 71, .3);
  --tt-scroll: rgba(15, 33, 71, .16);
  --tt-scroll-hover: rgba(15, 33, 71, .3);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --tt-ink: #ffffff;
  --tt-line: rgba(255, 255, 255, .1);
  --tt-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --tt-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px -2px rgba(0, 0, 0, .3);
  --tt-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .55);
  --tt-shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 56px -18px rgba(0, 0, 0, .7);
  --tt-scroll: rgba(255, 255, 255, .14);
  --tt-scroll-hover: rgba(255, 255, 255, .26);
}

/* ---------- Type: the website's fonts ---------- */
html:is([data-theme="light"], [data-theme="dark"]) body {
  font-family: var(--tt-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
html:is([data-theme="light"], [data-theme="dark"]) :is(h1, h2) {
  font-family: var(--tt-display);
  letter-spacing: 0;
}
html:is([data-theme="light"], [data-theme="dark"]) h1 { font-weight: 600; }
/* Small all-caps labels read as the logo's "TASK". */
html:is([data-theme="light"], [data-theme="dark"]) .tt-kicker {
  font: italic 800 11px/1 var(--tt-brandfont);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- Depth (light) ---------- */
/* Cards and panels: hairline border + soft navy shadow instead of glow. */
html[data-theme="light"] :is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl).border:is([class*="bg-slate-9"], [class*="bg-white/"], [class*="bg-slate-800"]):not(input, textarea, select, button, a, label) {
  box-shadow: var(--tt-shadow-sm);
}
html[data-theme="light"] :is(.shadow-xl, .shadow-2xl) { box-shadow: var(--tt-shadow-lg); }
html[data-theme="light"] :is(.shadow-lg) { box-shadow: var(--tt-shadow); }

/* Modal / drawer backdrops: a navy veil, not black. */
html[data-theme="light"] :is(.bg-black\/40, .bg-black\/50, .bg-black\/60, .bg-black\/70, .bg-black\/80) {
  background-color: rgba(11, 24, 54, .32);
}

/* Secondary buttons hover one step darker, not to mid-gray. */
html[data-theme="light"] .bg-slate-600,
html[data-theme="light"] .hover\:bg-slate-600:hover { background-color: #ddd4c8; }

/* Inputs: white fields with a crisp focus ring. */
html[data-theme="light"] :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), textarea, select) {
  caret-color: var(--tt-ink);
}

/* ---------- Details ---------- */
html:is([data-theme="light"], [data-theme="dark"]) ::-webkit-scrollbar-thumb { background: var(--tt-scroll); }
html:is([data-theme="light"], [data-theme="dark"]) ::-webkit-scrollbar-thumb:hover { background: var(--tt-scroll-hover); }
html[data-theme="light"] ::selection { background: #ffcaa3; color: #0f2147; }
html[data-theme="dark"] ::selection { background: rgba(255, 92, 0, .45); color: #fff; }

/* ---------- Calendar (FullCalendar ships its own colors) ---------- */
html[data-theme="light"] .fc {
  --fc-border-color: #ebe4da; --fc-today-bg-color: rgba(255, 92, 0, .06);
  --fc-neutral-bg-color: #f7f3ee; --fc-page-bg-color: #fff; --fc-list-event-hover-bg-color: #f6f1ea;
}
html[data-theme="light"] .fc .fc-col-header-cell-cushion,
html[data-theme="light"] .fc .fc-daygrid-day-number { color: #737a8f; }
html[data-theme="light"] .fc .fc-toolbar-title { font-family: var(--tt-display); color: var(--tt-ink); font-weight: 600; }
html[data-theme="light"] .fc .fc-button {
  background: #fff; border-color: #e2dacf; color: #39435e; font-weight: 500;
  box-shadow: var(--tt-shadow-xs); text-transform: capitalize;
}
html[data-theme="light"] .fc .fc-button:hover { background: #f6f1ea; color: var(--tt-ink); }
html[data-theme="light"] .fc .fc-button:focus { box-shadow: 0 0 0 3px rgba(255, 92, 0, .2); }
html[data-theme="light"] .fc .fc-button-active,
html[data-theme="light"] .fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--tt-ink) !important; border-color: var(--tt-ink) !important; color: #fff !important;
}
html[data-theme="dark"] .fc { --fc-border-color: rgba(255, 255, 255, .08); --fc-today-bg-color: rgba(255, 92, 0, .1); --fc-page-bg-color: transparent; }
html[data-theme="dark"] .fc .fc-toolbar-title { font-family: var(--tt-display); font-weight: 600; }
html[data-theme="dark"] .fc .fc-button { background: #1b2542; border-color: rgba(255, 255, 255, .1); color: #dde2ee; text-transform: capitalize; }
html[data-theme="dark"] .fc .fc-button:hover { background: #2e3958; }
html[data-theme="dark"] .fc .fc-button-active { background: #e85300 !important; border-color: #e85300 !important; color: #fff !important; }

/* ---------- Earpiece (page has its own card gradient + sliders) ---------- */
html[data-theme="light"] .earpiece-card { background: #fff; box-shadow: var(--tt-shadow-sm); }
html[data-theme="dark"] .earpiece-card { background: linear-gradient(180deg, rgba(17, 26, 50, .7) 0%, rgba(17, 26, 50, .35) 100%); }
html:is([data-theme="light"], [data-theme="dark"]) input[type="range"].earpiece-slider { background: rgba(255, 92, 0, .18); }
html:is([data-theme="light"], [data-theme="dark"]) input[type="range"].earpiece-slider::-webkit-slider-thumb { background: #ff5c00; box-shadow: 0 2px 8px rgba(255, 92, 0, .4); border-color: #fff; }
html:is([data-theme="light"], [data-theme="dark"]) input[type="range"].earpiece-slider::-moz-range-thumb { background: #ff5c00; border-color: #fff; }

/* ---------- App shell ---------- */
/* Sidebar items: inset rounded pills instead of an edge bar. */
html:is([data-theme="light"], [data-theme="dark"]) aside nav > a.border-l-2 {
  margin: 1px 10px; padding-left: 10px; padding-right: 10px;
  border-left-width: 0; border-radius: 10px;
}
html:is([data-theme="light"], [data-theme="dark"]) aside nav > a.border-l-2.border-brand-500 { font-weight: 600; }
html[data-theme="light"] aside nav > a.border-l-2.border-brand-500 { box-shadow: inset 0 0 0 1px rgba(255, 92, 0, .14); }
html[data-theme="dark"] aside nav > a.border-l-2.border-brand-500 { box-shadow: inset 0 0 0 1px rgba(255, 92, 0, .25); }

/* Small all-caps section labels take the logo's heavy italic ("TASK"). */
html:is([data-theme="light"], [data-theme="dark"]) :is(p, h2, h3, h4, span, div, label).uppercase:is(.tracking-wider, .tracking-widest, [class*="tracking-[0."]):is(.text-xs, [class*="text-[9px]"], [class*="text-[10px]"], [class*="text-[11px]"]) {
  font-family: var(--tt-brandfont); font-style: italic; font-weight: 800; letter-spacing: .08em;
}

/* Primary buttons: the website's raised orange. */
html[data-theme="light"] :is(button, a, [type="submit"]):is(.bg-brand-500, .bg-brand-600) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(199, 67, 0, .25), 0 6px 14px -6px rgba(255, 92, 0, .55);
}
html[data-theme="light"] :is(button, a, [type="submit"]):is(.bg-brand-500, .bg-brand-600):hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(199, 67, 0, .25), 0 10px 20px -8px rgba(255, 92, 0, .6);
}
html:is([data-theme="light"], [data-theme="dark"]) :is(button, a):is(.bg-brand-500, .bg-brand-600) { transition: background-color .15s, box-shadow .2s var(--tt-ease), transform .2s var(--tt-ease); }
html:is([data-theme="light"], [data-theme="dark"]) :is(button, a):is(.bg-brand-500, .bg-brand-600):active { transform: translateY(1px); }

/* Header: frosted paper. */
html[data-theme="light"] header.sticky { background-color: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }

/* ---------- Sign-in pages ---------- */
html:is([data-theme="light"], [data-theme="dark"]) .tt-auth { position: relative; overflow-x: hidden; }
html:is([data-theme="light"], [data-theme="dark"]) .tt-auth-glow {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(40rem 28rem at 12% 8%, rgba(255, 92, 0, .14), transparent 60%),
    radial-gradient(36rem 30rem at 92% 88%, rgba(54, 87, 216, .12), transparent 60%);
}
html[data-theme="dark"] .tt-auth-glow {
  background:
    radial-gradient(40rem 28rem at 12% 8%, rgba(255, 92, 0, .16), transparent 60%),
    radial-gradient(36rem 30rem at 92% 88%, rgba(54, 87, 216, .2), transparent 60%);
}
html:is([data-theme="light"], [data-theme="dark"]) .tt-auth h2 { font-size: 1.6rem; line-height: 1.15; }

/* ---------- Chat markdown (chat/index.php styles it for dark) ---------- */
html[data-theme="light"] .prose-chat code { background: rgba(15, 33, 71, .07); }
html[data-theme="light"] .prose-chat pre { background: rgba(15, 33, 71, .05); }
html[data-theme="light"] .prose-chat a { color: #c74300; }
html[data-theme="light"] .prose-chat blockquote { border-left-color: rgba(15, 33, 71, .16); color: #565f77; }
html[data-theme="light"] .prose-chat hr,
html[data-theme="light"] .prose-chat :is(th, td) { border-color: #e8e1d7; }
html[data-theme="light"] :is(.bg-brand-500, .bg-brand-600, .bg-brand-700) .prose-chat a { color: #fff; }
html[data-theme="light"] :is(.bg-brand-500, .bg-brand-600, .bg-brand-700) .prose-chat code { background: rgba(0, 0, 0, .18); }
html[data-theme="light"] .chat-scroll { scrollbar-color: rgba(15, 33, 71, .18) transparent; }
html[data-theme="light"] .chat-scroll::-webkit-scrollbar-thumb { background: rgba(15, 33, 71, .16); background-clip: padding-box; }

/* ---------- Briefing markdown (dashboard/index.php styles it for dark) ---------- */
html[data-theme="light"] .prose-briefing strong,
html[data-theme="light"] .prose-briefing :is(h1, h2, h3, h4) { color: var(--tt-ink); }
html[data-theme="light"] .prose-briefing code { background: rgba(15, 33, 71, .07); }
html[data-theme="light"] .prose-briefing pre { background: rgba(15, 33, 71, .05); }
html[data-theme="light"] .prose-briefing a { color: #c74300; }
html[data-theme="light"] .prose-briefing blockquote { border-left-color: rgba(15, 33, 71, .16); color: #565f77; }
html[data-theme="light"] .prose-briefing hr { border-top-color: #e8e1d7; }
html[data-theme="light"] .dashboard-scroll { scrollbar-color: rgba(15, 33, 71, .18) transparent; }
html[data-theme="light"] .dashboard-scroll::-webkit-scrollbar-thumb { background: rgba(15, 33, 71, .16); }

/* ---------- Notes editor (notes/index.php styles it for dark) ---------- */
html[data-theme="light"] .note-editor blockquote { border-left-color: rgba(255, 92, 0, .5); color: #565f77; }
html:is([data-theme="light"], [data-theme="dark"]) .note-editor a { color: #e85300; }
html[data-theme="light"] .note-editor code { background: rgba(255, 92, 0, .1); }
html[data-theme="light"] .note-editor pre { background: #f6f1ea; border: 1px solid #e8e1d7; }
html[data-theme="light"] .note-editor:empty:before { color: #a39f99; }
html:is([data-theme="light"], [data-theme="dark"]) .note-editor.dragging { outline-color: rgba(255, 92, 0, .6); }
html:is([data-theme="light"], [data-theme="dark"]) .note-editor :is(h1, h2, h3) { font-family: var(--tt-display); font-weight: 600; }

/* ---------- Today briefing (markdown from the daily briefing) ----------
   Not theme-scoped: uses the palette variables, so it reads right in every theme. */
.tt-brief { font-size: 14px; line-height: 1.55; color: rgb(var(--c-n-300)); }
.tt-brief > :first-child { margin-top: 0; }
.tt-brief p { margin: .5em 0; }
.tt-brief :is(h1, h2, h3, h4, h5) {
  margin: 1.1em 0 .4em; font-size: 11px; line-height: 1.2; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c-brand-300));
  font-family: var(--tt-brandfont, inherit); font-style: italic;
}
.tt-brief ul, .tt-brief ol { margin: .3em 0 .6em; padding: 0; list-style: none; }
.tt-brief li { position: relative; margin: .4em 0; padding-left: 14px; }
.tt-brief li::before {
  content: ""; position: absolute; left: 1px; top: .6em; width: 5px; height: 5px;
  border-radius: 999px; background: rgb(var(--c-brand-500));
}
.tt-brief li > p { margin: 0; }
.tt-brief :is(strong, b), .tt-brief-summary :is(strong, b) { font-weight: 600; color: rgb(var(--c-white)); }
.tt-brief code { font-size: .88em; padding: .05em .35em; border-radius: 5px; background: rgb(var(--c-white) / .07); }
.tt-brief a, .tt-brief-summary a { color: rgb(var(--c-brand-300)); text-decoration: underline; text-underline-offset: 2px; }
.tt-brief hr { border: 0; border-top: 1px solid rgb(var(--c-white) / .1); margin: .8em 0; }
.tt-brief blockquote { margin: .5em 0; padding-left: .75em; border-left: 3px solid rgb(var(--c-brand-500) / .4); }