/*
  Component skin for the "sitdown" iommi style (see globe/config/iommi_style.py,
  which links this sheet via `static()` as a root asset). It loads on every
  iommi-rendered page — the admin and the /download page — layered on top of the
  shared chrome.css.

  Those pages render inside the shared shell (templates/base.html → the brand
  bar, the left nav rail and chrome.css), so this sheet no longer owns the page
  layout or the design tokens — those now live in chrome.css. What's left is the
  skin for the bare elements iommi emits (tables, forms, inputs, buttons,
  pagination) plus the `sd-` component hooks, all using chrome.css's shared
  lerkaka palette (beryl = teal brand, silver = neutrals, gold = accent,
  lapis = links, ruby = danger) so the admin reads as the same product as the
  SPA.

  It must never leak into the SPA. The SPA Page shares both this sheet AND the
  style's `.sd-main` content container, so scoping bare `h1`/`a`/font rules to
  `.sd-main` is NOT enough — they'd still hit the SPA and override lerkaka (that
  bare `h1{font-size:1.5rem}` is exactly what shrank the SPA's headings before).
  The reliable discriminator is the SPA's `#app` mount point: only the SPA has
  it. So every rule that could match a bare element the SPA also renders is
  scoped under `.app-content:not(:has(#app))` — the content column of any
  non-SPA (admin / download) page. The `.sd-*` / `.iommi_*` / `.select2-*`
  component hooks below need no such guard: the SPA never emits those classes.
*/

/* The admin/download content column (everything that isn't the SPA's #app):
   a silver-50 page with white cards, lerkaka's 14px (--text-sm) density. */
.app-content:not(:has(#app)) {
    background-color: var(--sd-silver-50);
    font-size: 14px;
    color: var(--sd-silver-950);
}

.app-content:not(:has(#app)) .sd-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}

/* Headings follow lerkaka's title scale (--text-xl 32 / --text-lg 23 /
   --text-base 16). */
.app-content:not(:has(#app)) :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
    color: var(--sd-silver-950);
    font-weight: 600;
    line-height: 1.25;
}
.app-content:not(:has(#app)) h1 {
    font-size: 2rem;
    font-weight: 500;
}
.app-content:not(:has(#app)) h2 {
    font-size: 1.4375rem;
}
.app-content:not(:has(#app)) h3 {
    font-size: 1rem;
    font-weight: 700;
}
.app-content:not(:has(#app)) a {
    color: var(--sd-lapis-600);
    text-decoration: none;
}
.app-content:not(:has(#app)) a:hover {
    color: var(--sd-lapis-800);
    text-decoration: underline;
}

/* Cards — the table container and forms get the SPA's white, soft-rounded,
   lightly shadowed surface. */
.iommi-table-container,
.sd-form {
    background-color: var(--sd-silver-0);
    border: 1px solid var(--sd-silver-200);
    border-radius: var(--sd-radius-card);
    box-shadow: var(--sd-shadow);
    padding: 1.25rem;
    overflow-x: auto;
}
.sd-form {
    margin-top: 1rem;
}

/* ---- Tables ---- */
.sd-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--sd-silver-900);
}
.sd-table thead th {
    text-align: left;
    padding: 0.5rem 0.75rem;
    color: var(--sd-silver-700);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.78rem;
    font-weight: 600;
    border-bottom: 2px solid var(--sd-silver-200);
    white-space: nowrap;
}
.sd-table tbody td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--sd-silver-100);
    vertical-align: middle;
}
.sd-table tbody tr:hover {
    background-color: var(--sd-silver-50);
}
.sd-table a {
    font-weight: 500;
}
/* Sort-header links (base tags them `.iommi_sort_header`). */
.iommi_sort_header a {
    color: var(--sd-silver-700);
}

/* ---- Admin index (all_models) ---- */
/* Unlike the list pages, iommi renders the index as a *div*-based pseudo-table
   (`div.sd-table`, vs the real `<table>` the lists get) whose rows are plain
   `<div>`s holding either a group `<h1>` or a model `<a>`. Bare divs carry no
   spacing, and the group `<h1>`s inherit `margin-top: 0` while keeping the
   browser's large default bottom margin — which inverts the rhythm (a gap below
   each header, none above the next). Scope the fix to `div.sd-table` so the real
   `<table>` lists are untouched. */
.app-content:not(:has(#app)) div.sd-table [data-iommi-type='Cells'] {
    padding: 0.15rem 0;
}
/* The group headers are per-app labels, not page titles: size them like the
   table's thead labels and give the rhythm its top margin back (tight to their
   own items, spaced from the group above). */
.app-content:not(:has(#app)) div.sd-table h1 {
    margin: 1.5rem 0 0.25rem;
    color: var(--sd-silver-700);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.app-content:not(:has(#app)) div.sd-table [data-iommi-type='Cells']:first-child h1 {
    margin-top: 0;
}
.sd-link-danger {
    color: var(--sd-ruby-600);
}

/* ---- Buttons, mirroring lerkaka's shadcn Button variants. ----
   secondary (default sd-btn) = outline: white surface, silver-400 border;
   primary = bg-primary (beryl-500) with dark on-primary text, hover beryl-200;
   danger = solid ruby with light text. rounded-md (6px), h-10-ish padding. */
.sd-btn {
    display: inline-block;
    font: inherit;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid var(--sd-silver-400);
    border-radius: 6px;
    background-color: var(--sd-silver-0);
    color: var(--sd-silver-950);
    text-decoration: none;
    cursor: pointer;
}
.sd-btn:hover {
    background-color: var(--sd-silver-100);
    color: var(--sd-silver-950);
    text-decoration: none;
}
.sd-btn-primary {
    background-color: var(--sd-beryl-500);
    border-color: var(--sd-beryl-500);
    color: var(--sd-silver-950);
}
.sd-btn-primary:hover {
    background-color: var(--sd-beryl-200);
    border-color: var(--sd-beryl-200);
    color: var(--sd-beryl-950);
}
.sd-btn-danger {
    background-color: var(--sd-ruby-700);
    border-color: var(--sd-ruby-700);
    color: var(--sd-silver-0);
}
.sd-btn-danger:hover {
    background-color: var(--sd-ruby-600);
    border-color: var(--sd-ruby-600);
    color: var(--sd-silver-0);
}
/* ---- Download landing page (/download — office/client_download.py). ---- */
/* A white card holding the prominent download button + file metadata. */
.sd-download-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background-color: var(--sd-silver-0);
    border: 1px solid var(--sd-silver-200);
    border-radius: var(--sd-radius-card);
    box-shadow: var(--sd-shadow);
}
.sd-download-card .sd-btn-primary {
    font-size: 1rem;
    padding: 0.6rem 1.2rem;
}
.sd-download-meta {
    margin: 0;
    color: var(--sd-silver-700);
    font-size: 0.85rem;
}
.sd-download-empty {
    margin: 1.5rem 0;
    color: var(--sd-silver-700);
}

/* Actions container (base tags it `.links`). */
.links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* ---- Form fields — teal focus ring (the SPA highlights with beryl). ---- */
.sd-field {
    margin-bottom: 1rem;
}
.sd-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--sd-silver-900);
    font-weight: 500;
}
.sd-input,
.sd-select,
.sd-form input:not([type='checkbox']):not([type='radio']):not([type='submit']),
.sd-form select,
.sd-form textarea {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--sd-silver-300);
    border-radius: var(--sd-radius);
    background-color: var(--sd-silver-0);
    color: var(--sd-silver-950);
    font: inherit;
}
.sd-input:focus,
.sd-select:focus,
.sd-form input:focus,
.sd-form select:focus,
.sd-form textarea:focus {
    outline: none;
    border-color: var(--sd-beryl-500);
    box-shadow: var(--sd-focus-ring);
}
.sd-checkbox {
    width: auto;
}
.sd-help {
    margin-top: 0.25rem;
    color: var(--sd-silver-700);
    font-size: 0.8rem;
}
.sd-errors {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--sd-ruby-700);
    font-size: 0.85rem;
}

/* ---- Filter / query form (the table's search widgets). ----
   iommi wraps the filter fields in a container span tagged
   `.iommi_query_form_simple` (Query.form_container). Flow the widgets
   left-to-right and wrap, each narrow, instead of the default full-width
   vertical stack the create/edit forms use. */
.iommi_query_form_simple {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
}
.iommi_query_form_simple .sd-field {
    margin-bottom: 0;
    width: 12rem;
    max-width: 100%;
}
/* select2 (FK filters) copies the underlying select's width, so keep it
   filling its narrow field rather than stretching. */
.iommi_query_form_simple .select2-container {
    width: 100% !important;
}
/* Keep every filter widget the same height: the FK filters render as select2
   boxes (shorter by default), the date filter as a native <input type=date>
   (taller), so pin them all to one height and re-center select2's innards. */
.iommi_query_form_simple .sd-input,
.iommi_query_form_simple .sd-select,
.iommi_query_form_simple .select2-container--default .select2-selection--single {
    height: 2.375rem;
}
.iommi_query_form_simple .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 2.375rem;
}
.iommi_query_form_simple .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.375rem;
}

/* ---- Pagination (base tags links `.iommi_page_link`). ---- */
.sd-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}
.iommi_page_link {
    display: inline-block;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--sd-silver-200);
    border-radius: 6px;
    color: var(--sd-beryl-950);
    text-decoration: none;
}
.iommi_page_link:hover {
    background-color: var(--sd-silver-100);
    text-decoration: none;
}
.sd-page-active .iommi_page_link {
    background-color: var(--sd-beryl-950);
    border-color: var(--sd-beryl-950);
    color: var(--sd-silver-0);
}

/* ---- select2 (FK dropdowns) — nudge it onto our border + radius. ---- */
.select2-container--default .select2-selection {
    border-color: var(--sd-silver-300) !important;
    border-radius: var(--sd-radius) !important;
}
/* select2 renders the closed box inside the page but appends its dropdown to
   <body>, outside .app-shell's font scope (so the dropdown falls back to the
   browser default serif). Set the font on both surfaces so they read as the
   same Inter/14px as the admin's table cells. Safe to target globally — the SPA
   never emits select2. */
.select2-container,
.select2-dropdown {
    font-family: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
}