/* Luma CRM on top of Tabler (vendor/tabler-1.6.1, docs/ui.md): the brand colour, the font and
   the few shell pieces Tabler doesn't have. Colours go through Tabler's CSS variables, set here
   and only here. Pages are built from Tabler classes and the macros in templates/ui/; pages not
   redesigned yet are styled by legacy.css. No inline styles or scripts (CSP: style-src 'self'). */

/* Inter (vendor/inter-5.3.0, SIL Open Font License): one variable font per subset. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter-5.3.0/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("../vendor/inter-5.3.0/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The brand: the logo's blue as Tabler's primary colour (buttons, active nav, focus, badges). */
:root {
  --luma-brand: #2459d6;
  --tblr-primary: var(--luma-brand);
  --tblr-primary-rgb: 36, 89, 214;
  --tblr-font-sans-serif: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------- shell */

/* Skip link: hidden until focused (Tabler's .visually-hidden-focusable), then a pill on top. */
.skip-link:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  box-shadow: var(--tblr-shadow-dropdown);
}

.navbar-brand-image { height: 2rem; width: 2rem; }
.app-brand-name { font-weight: var(--tblr-font-weight-bold); }

/* Sidebar sections that open and close (Settings): a <details>, so they work without JS. */
.nav-group > summary { list-style: none; cursor: pointer; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary .nav-group-chevron { margin-inline-start: auto; transition: transform 0.2s; }
.nav-group[open] > summary .nav-group-chevron { transform: rotate(180deg); }
.nav-group-items { padding-inline-start: var(--tblr-sidebar-nav-indent, 1.5rem); }
@media (prefers-reduced-motion: reduce) {
  .nav-group > summary .nav-group-chevron { transition: none; }
}

/* The Today count next to a nav item (`/today/badge` returns `<span class="nav-badge">`). */
.nav-badge {
  margin-inline-start: auto;
  min-width: 1.5em;
  padding: 0.15em 0.45em;
  border-radius: var(--tblr-border-radius-pill);
  background: var(--tblr-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: var(--tblr-font-weight-bold);
  line-height: 1.25;
  text-align: center;
}

/* Top bar: search with suggestions under it, the mail mode badge, New and the user menu. It
   sticks to the top of the window, so anchor jumps stop below it, and anything else sticky on a
   page goes under it: `top: calc(var(--app-topbar-height) + 0.5rem)`. */
:root { --app-topbar-height: 3.5rem; }
html { scroll-padding-top: calc(var(--app-topbar-height) + 0.75rem); }
.app-topbar .container-xl { gap: 0.5rem; }
.app-search { position: relative; flex: 1 1 18rem; max-width: 32rem; }
.app-search-key { position: absolute; inset-block: 0; inset-inline-end: 0.5rem; display: flex; align-items: center; pointer-events: none; }
@media (min-width: 768px) {
  .app-search .form-control { padding-inline-end: 2.5rem; } /* room for the "/" key hint */
}
.app-search-results { position: absolute; inset-inline: 0; top: calc(100% + 0.25rem); z-index: 1050; }
.app-search-results:empty { display: none; }
.app-search-menu { max-height: 70vh; overflow-y: auto; box-shadow: var(--tblr-shadow-dropdown); }
.mail-mode-badge { white-space: nowrap; }
.app-user-name { max-width: 12rem; }
/* Phones: the badge, New and the user menu on the first row, the search box on its own below. */
@media (max-width: 575.98px) {
  :root { --app-topbar-height: 6.5rem; } /* two rows */
  .app-topbar .container-xl { flex-wrap: wrap; }
  .app-search { order: 1; flex-basis: 100%; max-width: none; }
}

/* ---------------------------------------------------------------- components (templates/ui/) */

/* Tables: a header that stays on screen while the rows scroll. The `.table-responsive` box
   around the table scrolls sideways, which makes it the box the header sticks in, so a table
   taller than the window scrolls inside it. */
.table-responsive:has(> .table-sticky-header) { max-height: calc(100dvh - var(--app-topbar-height) - 2rem); }
.table-sticky-header thead th { position: sticky; top: 0; z-index: 2; background: var(--tblr-bg-surface-tertiary); }
/* A `.visually-hidden` label in a table that scrolls sideways (a row button's "Save, Germany"):
   absolutely positioned at its place in the wide table, it would make the whole page scroll
   sideways on a phone. In the corner it stays out of the way. */
.table-responsive .visually-hidden { top: 0; left: 0; }

/* A cell's text cut to one line; the full text is in its `title`. */
.cell-truncate { max-width: 16rem; }

/* Stat tile: the number reads first. */
.stat-value { font-size: 1.5rem; font-weight: var(--tblr-font-weight-bold); line-height: 1.2; }

/* A home card while it loads, and when it couldn't. */
.home-card-placeholder { min-height: 7rem; }
.home-card-placeholder.home-card-stat { min-height: 5rem; }

/* Kept text as typed (notes, descriptions). */
.text-pre-line { white-space: pre-line; overflow-wrap: anywhere; }

/* HTMX request indicators (HTMX's own inline styles are switched off in base.html). */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Email copy as written or as sent (sequence steps and previews, the simulated mailbox): kept as
   typed and wrapped, in a light box. */
.email-copy {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface-secondary);
  font-size: 0.875rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* A side column that stays in view while the main one scrolls (wide screens only), below the
   sticky top bar: e.g. the rendered copy beside the sequence editor. Taller than the window, it
   scrolls on its own, so its end (the mailbox's Inject buttons) can always be reached. */
@media (min-width: 992px) {
  .sticky-aside {
    position: sticky;
    top: calc(var(--app-topbar-height) + 0.5rem);
    max-height: calc(100dvh - var(--app-topbar-height) - 1rem);
    overflow-y: auto;
  }
}

/* Facts as a description list on Tabler's datagrid (`<dl class="datagrid">`, each pair in a
   `<div>`): the grid spaces the pairs, so the values need no margin of their own. */
.datagrid dd { margin-bottom: 0; }