/* =====================================================================
   EZEL APP  (app.css)

   The app side of the Ezel design system. Same tokens as ezel.ai's
   theme.css so the marketing site and the workspace read as one product.
   Loaded from base.html after styles.css, before each page's own styles.

   The templates are written in Tailwind utilities against the slate and
   emerald scales; base.html re-points those scales at this palette, so
   most of the colour work happens there. This file holds what utilities
   can't express: tokens, type, the sidebar rail, page headers, and the
   shared row/list vocabulary ported from browse.css.
   ===================================================================== */

:root {
    --paper: #faf8f4;
    --paper-2: #f1ede6;
    --white: #ffffff;
    --line: #e4ded4;
    --line-strong: #cbc3b6;
    --navy: #0b1f3a;
    --navy-2: #1d3557;
    --ink: #0b1f3a;
    --text: #1f2a37;
    --muted: #5b6673;
    --accent: #457b9d;
    --on-dark: #ffffff;
    --on-dark-muted: rgba(226, 233, 245, 0.78);
    --on-dark-line: rgba(255, 255, 255, 0.14);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;
    --space-8: 96px;

    --radius-s: 8px;
    --radius-m: 12px;
    --radius-l: 16px;
    --radius-pill: 999px;

    --shadow-card: 0 1px 2px rgba(11, 31, 58, 0.05), 0 10px 30px rgba(11, 31, 58, 0.06);
    --shadow-frame: 0 1px 2px rgba(11, 31, 58, 0.08), 0 24px 48px -12px rgba(11, 31, 58, 0.18);

    --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-logo: 'Libre Baskerville', Georgia, serif;

    --t-h1: 28px;
    --t-h2: 22px;
    --t-h3: 18px;
    --t-body: 15px;
    --t-small: 13px;
    --t-label: 12px;
}

.dark {
    --paper: #06111f;
    --paper-2: #0b1f3a;
    --white: #0b1f3a;
    --line: #253a55;
    --line-strong: #35507a;
    --ink: #f1ede6;
    --text: #e4ded4;
    --muted: #8b95a1;
    --accent: #7fa3c4;
    --shadow-card: none;
    --shadow-frame: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}

/* ---------- Base ---------- */

body {
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
/* Text fields carry their own focus ring (border + shadow); the outline
   would draw a second box around the bare input inside a bordered wrapper. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
}
select:focus {
    outline: none;
}
/* Every text field answers focus the same way: the border turns accent.
   Pages that add a ring keep it; this is the floor, not the ceiling. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
}
/* Placeholders must read. Tailwind's placeholder-slate-400 lands at 2.5:1
   on white; these selectors outrank that utility. */
input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="email"]::placeholder,
input[type="url"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input:not([type])::placeholder,
textarea[id]::placeholder,
textarea[rows]::placeholder,
textarea[name]::placeholder {
    color: var(--muted);
    opacity: 1;
}
html.dark body input[type="text"]::placeholder,
html.dark body input[type="search"]::placeholder,
html.dark body input[type="email"]::placeholder,
html.dark body input[type="url"]::placeholder,
html.dark body input[type="number"]::placeholder,
html.dark body input[type="password"]::placeholder,
html.dark body input[type="tel"]::placeholder,
html.dark body input:not([type])::placeholder,
html.dark body textarea[id]::placeholder,
html.dark body textarea[rows]::placeholder,
html.dark body textarea[name]::placeholder {
    color: #a3abb5;
}

/* Page titles are serif, like every heading on ezel.ai. Chat message
   content and form labels keep the body face. */
.app-topbar h1,
.app-page-title,
h1.app-name-font {
    font-family: var(--font-logo);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.app-topbar h1 {
    font-size: 22px;
    line-height: 28px;
}

/* No decorative motion: the site rule since ezel.ai commit 9d2daaa4.
   Entrance fades and hover bounces are decoration; keep the transitions
   that carry state (sidebar slide, menu open). */
.page-transition {
    animation: none;
}
.btn-animate,
.smooth-hover,
.micro-bounce {
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-animate:hover,
.micro-bounce:hover,
.micro-bounce:active {
    transform: none !important;
    animation: none !important;
}
/* Staggered entrance fades start at opacity 0 and rely on the animation to
   land at 1. With animations cancelled they must simply be visible. */
.stagger-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* Tailwind's scale/translate hover utilities are used on cards and
   buttons across the app. Neutralise the ones that only decorate. */
.hover\:scale-105:hover,
.hover\:scale-\[1\.02\]:hover,
.hover\:-translate-y-0\.5:hover,
.hover\:-translate-y-1:hover,
.hover\:shadow-md:hover,
.hover\:shadow-lg:hover,
.hover\:shadow-xl:hover {
    transform: none !important;
    box-shadow: inherit !important;
}

/* ---------- Sidebar rail ---------- */

#sidebar {
    background: var(--paper);
    border-color: var(--line);
}
#sidebarHeader {
    border-color: var(--line);
}
#sidebar .app-name {
    font-family: var(--font-logo);
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--ink);
}
#sidebar .app-name .text-amber-600 {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
#userMenuWrapper {
    border-color: var(--line);
}

/* Section labels in the rail ("Recent apps", "Recents") */
#sidebar p.uppercase,
#sidebar .uppercase.tracking-\[0\.14em\] {
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* ---------- Page header ---------- */

.app-topbar {
    background: var(--white);
    border-color: var(--line);
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
    font-family: inherit;
}

/* ---------- Shared list vocabulary (from browse.css) ----------
   Hairline rows, not cards. Used by the dashboard app list, the library
   index, the template picker and the court forms catalog. */

.ez-list {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    overflow: hidden;
}
.ez-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: 14px var(--space-4);
    border-top: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
}
.ez-row:first-child {
    border-top: 0;
}
.ez-row--lead {
    grid-template-columns: auto minmax(0, 1fr) auto;
}
.ez-row-lead {
    min-width: 56px;
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--navy);
}
.ez-row-body {
    min-width: 0;
}
.ez-row-title {
    margin: 0;
    font-size: var(--t-body);
    font-weight: 600;
    line-height: 22px;
    color: var(--ink);
}
.ez-row-preview {
    margin: 2px 0 0;
    font-size: var(--t-small);
    line-height: 20px;
    color: var(--muted);
}
.ez-row-meta {
    font-size: var(--t-small);
    line-height: 20px;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
}
.ez-row-meta .ez-row-arrow {
    margin-left: var(--space-2);
    color: var(--line-strong);
}
.ez-row[aria-disabled="true"],
.ez-row.is-disabled {
    color: var(--muted);
}
.ez-row.is-disabled .ez-row-title {
    color: var(--muted);
}

.ez-section-label {
    display: block;
    margin: 0 0 var(--space-2);
    color: var(--accent);
    font-size: var(--t-label);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 16px;
}
.ez-h2 {
    margin: 0;
    font-family: var(--font-logo);
    font-size: var(--t-h2);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.ez-link {
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
}
.ez-link:hover {
    text-decoration: underline;
}

/* Buttons */
.ez-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--navy);
    background: var(--navy);
    color: var(--on-dark);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.ez-btn--secondary {
    background: var(--white);
    color: var(--ink);
    border-color: var(--line-strong);
}
.ez-btn--quiet {
    background: transparent;
    color: var(--ink);
    border-color: transparent;
}
.ez-btn[disabled],
.ez-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empty state: quiet sheet, no icon circle */
.ez-empty {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-m);
    background: transparent;
}
.ez-empty h3 {
    margin: 0;
    font-family: var(--font-logo);
    font-size: var(--t-h3);
    color: var(--ink);
}
.ez-empty p {
    margin: var(--space-2) auto 0;
    max-width: 44ch;
    font-size: var(--t-small);
    line-height: 20px;
    color: var(--muted);
}
.ez-empty .ez-btn {
    margin-top: var(--space-3);
}

@media (max-width: 640px) {
    .ez-row {
        padding: 12px var(--space-3);
        gap: var(--space-2) var(--space-3);
    }
    .ez-row-meta {
        white-space: normal;
    }
}

/* Topbar h2 titles (chat, recents) get the same serif as h1 pages */
.app-topbar h2 {
    font-family: var(--font-logo);
    font-weight: 700;
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* Row extras used by the dashboard */
.ez-row-flag {
    display: inline-block;
    margin-left: var(--space-2);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.ez-row-open {
    color: var(--accent);
    font-weight: 500;
}
.ez-list .ez-row-title.truncate,
.ez-list .ez-row-preview.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ez-list li {
    list-style: none;
}
.ez-list li + li .ez-row {
    border-top: 1px solid var(--line);
}
.ez-list li:first-child .ez-row {
    border-top: 0;
}

/* Test-mode tour button in the rail: plain secondary, not an amber pill */
#sidebar button[onclick*="restartOnboardingTour"] {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    border-radius: var(--radius-pill);
}
.ez-empty > p:first-child {
    margin-top: 0;
}

/* Phone: meta drops under the body, left aligned, like browse.css rows */
@media (max-width: 640px) {
    .ez-row,
    .ez-row--lead {
        grid-template-columns: minmax(0, 1fr);
    }
    .ez-row-meta {
        text-align: left;
    }
    .ez-row-meta .ez-row-arrow {
        display: none;
    }
}

/* ---------- Settings ---------- */
.ez-tabs {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.ez-tabs::-webkit-scrollbar {
    display: none;
}
.ez-tabs .tab-button {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: center;
}
.ez-tabs .tab-button.active {
    color: var(--ink);
    border-bottom-color: var(--navy);
}
@media (max-width: 640px) {
    /* Rows whose only meta is the "Open"/"Choose" verb: the row itself is
       the target, so the verb is noise on a phone. */
    .ez-row-meta:has(> .ez-row-open:only-of-type) {
        display: none;
    }
}

/* ---------- Dark mode: primary actions ----------
   The navy action ramp disappears on the navy dark ground, so filled
   buttons flip to the light accent with dark text. Specificity is kept
   above Tailwind's dark: variants (.dark .dark\:bg-x), which the CDN
   injects after this file. */
html.dark body .bg-emerald-500,
html.dark body .bg-emerald-600,
html.dark body .bg-emerald-700,
html.dark body .ez-btn:not(.ez-btn--secondary):not(.ez-btn--quiet) {
    background-color: #7fa3c4;
    border-color: #7fa3c4;
    color: #06111f;
}
html.dark body .bg-emerald-500.text-white,
html.dark body .bg-emerald-600.text-white,
html.dark body .bg-emerald-700.text-white {
    color: #06111f;
}
html.dark body .ez-btn--secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--line-strong);
}
html.dark body .ez-list {
    background: #0b1f3a;
}

/* Phone topbars: smaller serif title, actions never wrap */
@media (max-width: 640px) {
    .app-topbar h1,
    .app-topbar h2 {
        font-size: 18px;
        line-height: 24px;
    }
    .app-topbar button,
    .app-topbar a {
        white-space: nowrap;
    }
}

/* Settings tabs as a segmented control: the selected tab is filled, so
   there is no doubt which one is open. Replaces the 2px underline. */
.ez-tabs {
    gap: var(--space-1);
    padding: 10px 0;
    margin-bottom: 0 !important;
}
.ez-tabs .tab-button {
    padding: 8px 14px !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-pill);
    color: var(--muted);
    font-weight: 500;
    line-height: 20px;
}
.ez-tabs .tab-button.active {
    background: var(--navy);
    border-color: var(--navy) !important;
    color: var(--on-dark);
    font-weight: 600;
}
html.dark body .ez-tabs .tab-button.active {
    background: #7fa3c4;
    border-color: #7fa3c4 !important;
    color: #06111f;
}
html.dark body .ez-row-lead {
    color: var(--accent);
}

/* Row actions are never hover-only. Tailwind's opacity-0 + group-hover
   pattern (rename/delete on chat rows, table cells) shows muted at rest
   and full on hover or focus. */
html body .group .opacity-0.group-hover\:opacity-100 {
    opacity: 0.65;
}
html body .group:hover .opacity-0.group-hover\:opacity-100,
html body .group:focus-within .opacity-0.group-hover\:opacity-100 {
    opacity: 1;
}

/* Dashboard app grid: one-line descriptions so the three columns line up */
#apps .ez-row-preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#apps .ez-row { min-height: 72px; }

/* Matters list: name and client, counts, last active, text actions */
.matter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--space-4); cursor: pointer; }
.matter-row-counts, .matter-row-active { white-space: nowrap; }
.matter-row-actions { display: inline-flex; gap: 4px; }
.matter-row-btn { background: none; border: 0; padding: 4px 8px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; opacity: 0.85; }
.matter-row-btn:hover, .matter-row-btn:focus-visible { color: var(--navy); background: var(--paper-2); opacity: 1; }
html.dark body .matter-row-btn:hover, html.dark body .matter-row-btn:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); }
@media (max-width: 900px) {
  .matter-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body active" "counts counts" "actions actions"; row-gap: 6px; }
  .matter-row .ez-row-body { grid-area: body; }
  .matter-row-active { grid-area: active; }
  .matter-row-counts { grid-area: counts; }
  .matter-row-actions { grid-area: actions; margin-left: -8px; }
}

.ez-row-flag.hidden { display: none; }