/* Folio console: the design (rewritten 2026-10-02, owner's request: "very well designed, very
   smooth, no empty blocks, grouped and logical, think as Apple does").

   Built on Tabler (frontend/static/vendor/tabler) for its grid, its helpers and its sheets
   and menus; everything you see is set here. Colours follow light and dark by themselves
   (light-dark), in the spirit of Apple's: calm greys, one blue for what can be pressed, soft
   tinted labels, hairline separators, rounded cards, short smooth motion. */

/* ---------------------------------------------------------------- colours and sizes */
:root[data-bs-theme], :root[data-bs-theme] body {
  --f-bg: light-dark(#f5f5f7, #000000);
  --f-surface: light-dark(#ffffff, #1c1c1e);
  --f-surface-2: light-dark(#fafafc, #232325);
  --f-elevated: light-dark(#ffffff, #2c2c2e);
  --f-fill: light-dark(rgba(116, 116, 128, .12), rgba(118, 118, 128, .24));
  --f-fill-2: light-dark(rgba(116, 116, 128, .07), rgba(118, 118, 128, .16));
  --f-text: light-dark(#1d1d1f, #f5f5f7);
  --f-text-2: light-dark(#6e6e73, #a1a1a6);
  --f-text-3: light-dark(#8e8e93, #8d8d93);
  --f-sep: light-dark(rgba(60, 60, 67, .13), rgba(84, 84, 88, .48));
  --f-sep-strong: light-dark(rgba(60, 60, 67, .22), rgba(84, 84, 88, .75));
  --f-accent: light-dark(#0071e3, #0a84ff);
  --f-accent-hover: light-dark(#0077ed, #3d9bff);
  --f-accent-soft: light-dark(rgba(0, 113, 227, .09), rgba(10, 132, 255, .18));
  --f-accent-ring: light-dark(rgba(0, 113, 227, .28), rgba(10, 132, 255, .45));
  --f-green: light-dark(#1f8a3d, #30d158);
  --f-green-solid: light-dark(#34c759, #30d158);
  --f-green-soft: light-dark(rgba(52, 199, 89, .14), rgba(48, 209, 88, .18));
  --f-orange: light-dark(#c25400, #ff9f0a);
  --f-orange-soft: light-dark(rgba(255, 149, 0, .15), rgba(255, 159, 10, .18));
  --f-yellow: light-dark(#946200, #ffd60a);
  --f-yellow-soft: light-dark(rgba(255, 204, 0, .2), rgba(255, 214, 10, .16));
  --f-red: light-dark(#d70015, #ff453a);
  --f-red-solid: light-dark(#ff3b30, #ff453a);
  --f-red-soft: light-dark(rgba(255, 59, 48, .11), rgba(255, 69, 58, .18));
  --f-purple: light-dark(#8944ab, #bf5af2);
  --f-purple-soft: light-dark(rgba(175, 82, 222, .12), rgba(191, 90, 242, .2));
  --f-teal: light-dark(#0b7a8a, #64d2ff);
  --f-teal-soft: light-dark(rgba(48, 176, 199, .13), rgba(100, 210, 255, .16));
  --f-indigo: light-dark(#4f4dc2, #7d7aff);
  --f-indigo-soft: light-dark(rgba(88, 86, 214, .11), rgba(94, 92, 230, .22));
  --f-sidebar: light-dark(rgba(240, 240, 244, .86), rgba(22, 22, 24, .86));
  --f-topbar: light-dark(rgba(245, 245, 247, .8), rgba(0, 0, 0, .72));
  --f-shadow: light-dark(0 1px 2px rgba(0, 0, 0, .04), 0 0 0 rgba(0, 0, 0, 0));
  --f-shadow-pop: 0 12px 32px rgba(0, 0, 0, .14), 0 2px 8px rgba(0, 0, 0, .08);
  --f-radius: 14px;
  --f-radius-sm: 10px;
  --f-ease: cubic-bezier(.25, .1, .25, 1);
  --f-spring: cubic-bezier(.32, .72, 0, 1);
  --f-sidebar-w: 244px;
  --f-topbar-h: 56px;
  --f-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue",
            Roboto, Arial, sans-serif;

  /* Tabler's own colours and shapes follow ours. */
  --tblr-body-bg: var(--f-bg);
  --tblr-body-color: var(--f-text);
  --tblr-emphasis-color: var(--f-text);
  --tblr-heading-color: var(--f-text);
  --tblr-bg-surface: var(--f-surface);
  --tblr-bg-surface-secondary: var(--f-surface-2);
  --tblr-bg-surface-tertiary: var(--f-fill-2);
  --tblr-secondary: var(--f-text-2);
  --tblr-secondary-color: var(--f-text-2);
  --tblr-tertiary-color: var(--f-text-3);
  --tblr-muted: var(--f-text-2);
  --tblr-border-color: var(--f-sep);
  --tblr-border-color-translucent: var(--f-sep);
  --tblr-primary: var(--f-accent);
  --tblr-link-color: var(--f-accent);
  --tblr-link-hover-color: var(--f-accent-hover);
  --tblr-border-radius: 10px;
  --tblr-border-radius-lg: 14px;
  --tblr-font-sans-serif: var(--f-font);
  --tblr-body-font-family: var(--f-font);
  --tblr-shadow-card: var(--f-shadow);
  --tblr-card-bg: var(--f-surface);
  --tblr-active-bg: var(--f-accent-soft);
}

html { -webkit-text-size-adjust: 100%; }
body { background: var(--f-bg); color: var(--f-text); font-family: var(--f-font); font-size: 14px; line-height: 1.45;
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
       -webkit-tap-highlight-color: transparent; letter-spacing: -.005em; }
::selection { background: var(--f-accent-ring); }
a { color: var(--f-accent); text-decoration: none; }
a:hover { color: var(--f-accent-hover); text-decoration: none; }
.text-secondary { color: var(--f-text-2) !important; }
.text-reset { color: inherit !important; }
hr { border-color: var(--f-sep); opacity: 1; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px var(--f-accent-ring) !important; }
.topbar-search input:focus, .topbar-search input:focus-visible { box-shadow: none !important; outline: none; }
.table td.ar, .ar { unicode-bidi: plaintext; }
/* Arabic reads right to left inside, but lines up on the left with the English around it. */
.ar { text-align: left; }
.table td.ar, .list-group-item .ar { text-align: left; }
.table td.text-end.ar { text-align: right; }
.muted-small { font-size: 12.5px; color: var(--f-text-2); }
.small, small { font-size: 12.5px; }
kbd { background: var(--f-fill); color: var(--f-text-2); border-radius: 5px; padding: 1px 6px; font-size: 11px;
      font-family: var(--f-font); font-weight: 500; box-shadow: none; }

/* ---------------------------------------------------------------- the frame: sidebar, top bar, page */
.shell { min-height: 100vh; }
.sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: var(--f-sidebar-w); z-index: 1035; display: flex;
           flex-direction: column; background: var(--f-sidebar); border-right: .5px solid var(--f-sep);
           -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); }
.sidebar-brand { flex: none; height: var(--f-topbar-h); display: flex; align-items: center; justify-content: space-between;
                 padding: 0 14px 0 16px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--f-text); font-weight: 700; font-size: 16.5px;
         letter-spacing: -.015em; }
.brand:hover { color: var(--f-text); }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; color: #fff;
              font-size: 16px; background: linear-gradient(160deg, #3c9bff, #0062d6); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.brand-sub { font-weight: 500; color: var(--f-text-2); margin-inline-start: -3px; }
.sidebar-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 2px 10px 16px; scrollbar-width: thin;
               scrollbar-color: var(--f-fill) transparent; }
.nav-group + .nav-group { margin-top: 14px; }
.nav-section { font-size: 11px; font-weight: 600; color: var(--f-text-3); padding: 0 10px 4px; letter-spacing: .01em; }
.sidebar .nav-link { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 8px;
                     color: var(--f-text); font-size: 13.5px; font-weight: 500; transition: background-color .16s var(--f-ease),
                     color .16s var(--f-ease); }
.sidebar .nav-link + .nav-link { margin-top: 1px; }
.sidebar .nav-link-icon { flex: none; width: 20px; font-size: 18px; text-align: center; color: var(--f-accent);
                          transition: color .16s var(--f-ease); }
.sidebar .nav-link-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar .nav-link:hover { background: var(--f-fill-2); color: var(--f-text); }
.sidebar .nav-link.active { background: var(--f-accent); color: #fff; }
.sidebar .nav-link.active .nav-link-icon { color: #fff; }
.nav-badge { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--f-red-solid);
             color: #fff; font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
             font-variant-numeric: tabular-nums; }
.nav-link.active .nav-badge { background: #fff; color: var(--f-accent); }
.nav-badge[hidden] { display: none; }
.sidebar-account { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px;
                   border-top: .5px solid var(--f-sep); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.sidebar-account .who { flex: 1; min-width: 0; line-height: 1.2; }
.sidebar-account .name { display: block; font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account .what, .account-button .what { display: block; color: var(--f-text-2); font-size: 11.5px; }
.sidebar-scrim { display: none; }

.main { margin-left: var(--f-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1030; height: var(--f-topbar-h); display: flex; align-items: center; gap: 12px;
          padding: 0 24px; background: var(--f-topbar); border-bottom: .5px solid var(--f-sep);
          -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.topbar-brand { font-weight: 700; font-size: 17px; color: var(--f-text); letter-spacing: -.015em; }
.topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.icon-button { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; display: inline-grid; place-items: center;
               background: transparent; color: var(--f-text-2); font-size: 20px; cursor: pointer;
               transition: background-color .16s var(--f-ease), color .16s var(--f-ease), transform .1s var(--f-ease); }
.icon-button:hover { background: var(--f-fill-2); color: var(--f-text); }
.icon-button:active { transform: scale(.92); }
.account-button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; color: var(--f-text);
                  padding: 3px 10px 3px 3px; border-radius: 20px; font-size: 13px; font-weight: 600; line-height: 1.2;
                  transition: background-color .16s var(--f-ease); }
.account-button:hover { background: var(--f-fill-2); }

.topbar-search { position: relative; flex: 1; max-width: 520px; height: 36px; display: flex; align-items: center; gap: 6px;
                 padding: 0 10px; border-radius: 10px; background: var(--f-fill); color: var(--f-text-2);
                 transition: background-color .16s var(--f-ease), box-shadow .16s var(--f-ease); }
.topbar-search:focus-within { background: var(--f-surface); box-shadow: 0 0 0 3px var(--f-accent-ring), var(--f-shadow); }
.topbar-search > .ti { font-size: 17px; }
.topbar-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--f-text);
                       font-size: 14px; }
.topbar-search input::placeholder { color: var(--f-text-3); }
.topbar-search input::-webkit-search-cancel-button { display: none; }
.search-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: min(70vh, 560px); overflow-y: auto;
              background: var(--f-elevated); border-radius: 14px; box-shadow: var(--f-shadow-pop); border: .5px solid var(--f-sep);
              padding: 6px; z-index: 1050; animation: pop-in .16s var(--f-spring); }
.search-pop[hidden] { display: none; }
.search-pop .group { font-size: 11px; font-weight: 600; color: var(--f-text-3); padding: 8px 10px 4px; }
.search-pop .item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--f-text); }
.search-pop .item .ti { font-size: 18px; color: var(--f-accent); width: 20px; text-align: center; }
.search-pop .item .sub { margin-inline-start: auto; color: var(--f-text-3); font-size: 12px; white-space: nowrap; }
.search-pop .item .main-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-pop .item.active, .search-pop .item:hover { background: var(--f-accent); color: #fff; }
.search-pop .item.active .ti, .search-pop .item:hover .ti, .search-pop .item.active .sub, .search-pop .item:hover .sub { color: #fff; }
.search-pop .none { padding: 14px 10px; color: var(--f-text-2); }

.content { width: 100%; max-width: 1320px; margin: 0 auto; padding: 26px 32px 32px; flex: 1; display: flex; flex-direction: column; }
.content.entering { animation: page-in .22s var(--f-ease); }
.page-header { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px 20px;
               flex-wrap: wrap; min-height: 0; margin: 0 0 20px; }
.page-header-text { min-width: 0; }
.page-pretitle { font-size: 12.5px; font-weight: 600; color: var(--f-text-3); margin-bottom: 2px; letter-spacing: 0; text-transform: none; }
.page-pretitle a { color: var(--f-accent); }
.page-pretitle:empty { display: none; }
.page-title { font-size: 28px; font-weight: 700; letter-spacing: -.022em; line-height: 1.15; margin: 0; color: var(--f-text); }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-actions:empty { display: none; }
.page-body { flex: 1; margin: 0; }
.footer { margin-top: 28px; padding: 0; border: 0; background: transparent; color: var(--f-text-3); font-size: 12px; }

/* The thin line at the top while a page loads, and the page fading in. */
.nav-progress { position: fixed; top: 0; left: 0; height: 2.5px; width: 0; z-index: 2000; background: var(--f-accent); opacity: 0;
                box-shadow: 0 0 8px var(--f-accent-ring); pointer-events: none; }
.nav-progress.running { opacity: 1; width: 82%; transition: width 2.5s cubic-bezier(.1, .7, .2, 1), opacity .1s; }
.nav-progress.done { opacity: 0; width: 100%; transition: width .18s var(--f-ease), opacity .3s .15s; }
@keyframes page-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- cards */
.card { background: var(--f-surface); border: .5px solid var(--f-sep); border-radius: var(--f-radius); box-shadow: var(--f-shadow);
        color: var(--f-text); }
.card-header { background: transparent; border-bottom: .5px solid var(--f-sep); padding: 14px 18px; min-height: 0; }
.card-header:first-child { border-radius: var(--f-radius) var(--f-radius) 0 0; }
.card-title { font-size: 15px; font-weight: 600; letter-spacing: -.012em; color: var(--f-text); margin: 0; }
.card-body { padding: 18px; }
.card-footer { background: transparent; border-top: .5px solid var(--f-sep); padding: 12px 18px; color: var(--f-text-2); }
.card-footer:last-child { border-radius: 0 0 var(--f-radius) var(--f-radius); }
.card-sm > .card-body { padding: 14px; }
.card-link:hover { box-shadow: 0 4px 18px rgba(0, 0, 0, .07); }
.card-active { border-color: var(--f-accent); box-shadow: 0 0 0 1px var(--f-accent); }
.row-cards { --tblr-gutter-y: 16px; --tblr-gutter-x: 16px; }
.subheader { font-size: 12.5px; font-weight: 600; color: var(--f-text-2); text-transform: none; letter-spacing: 0; }
.kpi-value { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: var(--f-text); }
.kpi-value-text { font-size: 19px; letter-spacing: -.015em; }
.kpi-note { font-size: 12.5px; }
.h2, h2 { letter-spacing: -.02em; }
.h3, h3, .h4, h4 { letter-spacing: -.012em; }

/* ---------------------------------------------------------------- tables */
.table { --tblr-table-bg: transparent; --tblr-table-striped-bg: transparent; --tblr-table-hover-bg: var(--f-fill-2);
         --tblr-table-color: var(--f-text); --tblr-table-border-color: var(--f-sep); color: var(--f-text); margin: 0; font-size: 13.5px; }
.table > thead > tr > th { font-size: 11.5px; font-weight: 600; color: var(--f-text-2); text-transform: none; letter-spacing: 0;
                           background: var(--f-surface-2); border-bottom: .5px solid var(--f-sep); padding: 9px 14px; white-space: nowrap; }
.table > tbody > tr > td { padding: 10px 14px; border-bottom: .5px solid var(--f-sep); vertical-align: middle; background: transparent; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr { transition: background-color .12s var(--f-ease); }
.table > tbody > tr:hover > td { background: var(--f-fill-2); }
.card-table > thead > tr > th:first-child, .card-table > tbody > tr > td:first-child { padding-inline-start: 18px; }
.card-table > thead > tr > th:last-child, .card-table > tbody > tr > td:last-child { padding-inline-end: 18px; }
.table-responsive { scrollbar-width: thin; }
.table-sm > tbody > tr > td, .table-sm > thead > tr > th { padding: 6px 10px; }
.table-bordered > :not(caption) > * > * { border-color: var(--f-sep); }
.review-table { table-layout: fixed; }
.review-table th:first-child { width: 11rem; }
.review-differs td { background: var(--f-yellow-soft) !important; font-weight: 600; }

/* A details cell with its copy button on the right edge (the words keep their own alignment). */
.table > tbody > tr > td.detail-cell { position: relative; padding-inline-end: 38px; }
.detail-cell > .copy-btn { position: absolute; right: 8px; top: 50%; margin: -12px 0 0; }
.row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }

/* ---------------------------------------------------------------- labels (soft tinted, as in Apple's apps) */
.badge { font-weight: 600; font-size: 11.5px; line-height: 1.3; padding: 3px 8px; border-radius: 6px; text-transform: none;
         letter-spacing: 0; vertical-align: middle; border: 0; }
.bg-blue-lt, .bg-azure-lt, .bg-primary-lt { background: var(--f-accent-soft) !important; color: var(--f-accent) !important; }
.bg-green-lt, .bg-success-lt { background: var(--f-green-soft) !important; color: var(--f-green) !important; }
.bg-red-lt, .bg-danger-lt { background: var(--f-red-soft) !important; color: var(--f-red) !important; }
.bg-orange-lt { background: var(--f-orange-soft) !important; color: var(--f-orange) !important; }
.bg-yellow-lt, .bg-warning-lt { background: var(--f-yellow-soft) !important; color: var(--f-yellow) !important; }
.bg-purple-lt, .bg-pink-lt { background: var(--f-purple-soft) !important; color: var(--f-purple) !important; }
.bg-teal-lt, .bg-cyan-lt { background: var(--f-teal-soft) !important; color: var(--f-teal) !important; }
.bg-indigo-lt { background: var(--f-indigo-soft) !important; color: var(--f-indigo) !important; }
.bg-secondary-lt, .bg-lime-lt { background: var(--f-fill) !important; color: var(--f-text-2) !important; }
.text-warning { color: var(--f-orange) !important; }
.text-danger { color: var(--f-red) !important; }
.text-success { color: var(--f-green) !important; }
.text-primary { color: var(--f-accent) !important; }

/* ---------------------------------------------------------------- buttons */
.btn { --tblr-btn-border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 36px;
       padding: 6px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 500; letter-spacing: -.005em; box-shadow: none;
       border-width: 0; transition: background-color .16s var(--f-ease), color .16s var(--f-ease), box-shadow .16s var(--f-ease),
       transform .08s var(--f-ease); white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn .ti { font-size: 17px; }
.btn-sm { min-height: 30px; padding: 3px 10px; font-size: 12.5px; border-radius: 8px; }
.btn-sm .ti { font-size: 15px; }
.btn-primary { background: var(--f-accent); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--f-accent-hover); color: #fff; }
.btn-outline-primary { background: var(--f-accent-soft); color: var(--f-accent); }
.btn-outline-primary:hover { background: var(--f-accent); color: #fff; }
.btn-secondary, .btn-outline-secondary { background: var(--f-fill-2); color: var(--f-text); }
.btn-secondary:hover, .btn-outline-secondary:hover { background: var(--f-fill); color: var(--f-text); }
.btn-success { background: var(--f-green-solid); color: #fff; }
.btn-success:hover { background: var(--f-green); color: #fff; }
.btn-warning { background: #ff9500; color: #fff; }
.btn-warning:hover { background: #e68600; color: #fff; }
.btn-danger { background: var(--f-red-solid); color: #fff; }
.btn-outline-danger { background: var(--f-red-soft); color: var(--f-red); }
.btn-outline-danger:hover { background: var(--f-red-solid); color: #fff; }
.btn-outline-warning { background: var(--f-orange-soft); color: var(--f-orange); }
.btn-outline-warning:hover { background: #ff9500; color: #fff; }
.btn-outline-success { background: var(--f-green-soft); color: var(--f-green); }
.btn-outline-success:hover { background: var(--f-green-solid); color: #fff; }
.btn-link { background: transparent; color: var(--f-accent); padding-inline: 6px; }
.btn-link:hover { background: var(--f-accent-soft); color: var(--f-accent); }
.btn:disabled, .btn.disabled { opacity: .45; }
/* A choice of a few (periods, kinds): a segmented control. */
.btn-group { background: var(--f-fill); border-radius: 10px; padding: 2px; gap: 2px; }
.btn-group > .btn { border-radius: 8px !important; min-height: 30px; background: transparent; color: var(--f-text); font-size: 12.5px; }
.btn-group > .btn.btn-primary { background: var(--f-elevated); color: var(--f-text); font-weight: 600;
                                box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }
.btn-group > .btn:not(.btn-primary):hover { background: var(--f-fill-2); color: var(--f-text); }
.btn-close { border-radius: 50%; width: 30px; height: 30px; background-color: var(--f-fill); background-size: 10px; opacity: .8; }

/* ---------------------------------------------------------------- forms */
.form-control, .form-select { min-height: 36px; border-radius: 10px; border: .5px solid var(--f-sep-strong); background-color: var(--f-surface);
                              color: var(--f-text); font-size: 13.5px; box-shadow: none;
                              transition: border-color .16s var(--f-ease), box-shadow .16s var(--f-ease); }
.form-control::placeholder { color: var(--f-text-3); }
.form-control:focus, .form-select:focus { border-color: var(--f-accent); box-shadow: 0 0 0 3px var(--f-accent-ring); background-color: var(--f-surface); color: var(--f-text); }
.form-control-sm, .form-select-sm { min-height: 30px; font-size: 12.5px; border-radius: 8px; }
.form-label { font-size: 13px; font-weight: 600; color: var(--f-text); margin-bottom: 6px; }
.form-hint { color: var(--f-text-2); font-size: 12.5px; }
.form-check-input { border-color: var(--f-sep-strong); background-color: var(--f-surface); }
.form-check-input:checked { background-color: var(--f-accent); border-color: var(--f-accent); }
/* On and off: the iPhone's switch. */
.form-switch .form-check-input { width: 42px; height: 26px; margin: 0; border: 0; border-radius: 13px; background-color: var(--f-fill);
                                 cursor: pointer; background-repeat: no-repeat; background-size: 26px 26px; background-position: left center;
                                 transition: background-color .2s var(--f-ease), background-position .25s var(--f-spring);
                                 background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 26 26'%3e%3ccircle r='11' fill='%23fff' stroke='rgba(0,0,0,.06)'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--f-green-solid); background-position: right center;
                                         background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-13 -13 26 26'%3e%3ccircle r='11' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px var(--f-accent-ring); }
.input-group-text { background: var(--f-fill-2); border-color: var(--f-sep-strong); color: var(--f-text-2); }
.code-input { font-size: 1.6rem; letter-spacing: .5rem; text-align: center; font-variant-numeric: tabular-nums; }
.w-code { max-width: 16rem; }

/* A filter bar above a list: one line of fields on a computer. */
/* Sortable column headings (2026-10-09): the label, then a quiet arrow; the sort in force in colour. */
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.sort-link .ti { font-size: 0.85rem; opacity: 0.35; }
.sort-link:hover .ti { opacity: 0.8; }
.sort-link.active { color: var(--tblr-primary); }
.sort-link.active .ti { opacity: 1; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-bar .form-control, .filter-bar .form-select { width: auto; flex: 1 1 160px; min-width: 0; max-width: 100%; }
.filter-bar .grow { flex: 3 1 240px; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field > .ti { position: absolute; left: 11px; color: var(--f-text-3); font-size: 16px; pointer-events: none; }
.search-field > .form-control { padding-left: 34px; background-color: var(--f-fill-2); border-color: transparent; }
.search-field > .form-control:focus { background-color: var(--f-surface); border-color: var(--f-accent); }

/* ---------------------------------------------------------------- tabs: a row of pills */
.nav-tabs, .nav-tabs.card-header-tabs { border: 0; gap: 4px; flex-wrap: nowrap; overflow-x: auto; margin: 0; scrollbar-width: none;
                                        -webkit-overflow-scrolling: touch; }
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tabs .nav-link { border: 0; border-radius: 8px; padding: 6px 12px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--f-text-2);
                      white-space: nowrap; background: transparent; transition: background-color .16s var(--f-ease), color .16s var(--f-ease); }
.nav-tabs .nav-link:hover { background: var(--f-fill-2); color: var(--f-text); border: 0; }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background: var(--f-accent-soft); color: var(--f-accent); font-weight: 600; border: 0; }
.card-header:has(> .card-header-tabs) { padding: 8px 10px; background: transparent; }
.nav-tabs, .card-header-tabs { background: transparent !important; box-shadow: none !important; }

/* ---------------------------------------------------------------- lists, menus, alerts, pages */
.list-group { --tblr-list-group-bg: transparent; --tblr-list-group-border-color: var(--f-sep); }
.list-group-item { background: transparent; border-color: var(--f-sep); color: var(--f-text); padding: 12px 18px; }
.list-group-flush > .list-group-item { border-width: 0 0 .5px; }
.list-group-flush > .list-group-item:last-child { border-bottom-width: 0; }
.list-group-item-action { transition: background-color .12s var(--f-ease); }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--f-fill-2); color: var(--f-text); }
.list-group-item.active { background: var(--f-accent-soft); color: var(--f-accent); border-color: var(--f-sep); }

.dropdown-menu { --tblr-dropdown-bg: var(--f-elevated); background: var(--f-elevated); border: .5px solid var(--f-sep); border-radius: 12px;
                 box-shadow: var(--f-shadow-pop); padding: 5px; min-width: 200px; animation: pop-in .14s var(--f-spring); }
.dropdown-item { border-radius: 7px; padding: 7px 10px; color: var(--f-text); font-size: 13.5px; display: flex; align-items: center; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--f-accent); color: #fff; }
.dropdown-divider { border-color: var(--f-sep); margin: 4px 6px; }

.alert { border: 0; border-radius: 12px; padding: 12px 16px; background: var(--f-accent-soft); color: var(--f-text); box-shadow: none; }
.alert .ti { color: var(--f-accent); font-size: 18px; }
.alert-danger { background: var(--f-red-soft); }
.alert-danger .ti { color: var(--f-red); }
.alert-warning { background: var(--f-orange-soft); }
.alert-warning .ti { color: var(--f-orange); }
.alert-success { background: var(--f-green-soft); }
.alert-success .ti { color: var(--f-green); }
.alert-secondary { background: var(--f-fill-2); }
.alert-secondary .ti { color: var(--f-text-2); }

.pagination { gap: 6px; margin: 0; }
.page-link { border: 0; border-radius: 8px !important; background: var(--f-fill-2); color: var(--f-text); padding: 5px 12px; font-size: 13px;
             display: inline-flex; align-items: center; gap: 2px; transition: background-color .14s var(--f-ease); }
.page-link:hover { background: var(--f-fill); color: var(--f-text); }
.page-item.disabled .page-link { background: transparent; color: var(--f-text-3); opacity: .7; }
.pager-text { color: var(--f-text-2); font-size: 12.5px; }

.progress { background: var(--f-fill); border-radius: 4px; height: 6px; }
.progress-bar { border-radius: 4px; }
.status-dot { box-shadow: none; }

.empty { padding: 48px 16px; text-align: center; }
.empty-icon { font-size: 44px; color: var(--f-text-3); margin-bottom: 8px; }
.empty-title { font-size: 19px; font-weight: 700; letter-spacing: -.015em; }

/* Nothing in a list: one quiet line. */
.nothing { padding: 28px 18px; text-align: center; color: var(--f-text-2); }
.nothing .ti { display: block; font-size: 30px; color: var(--f-text-3); margin-bottom: 6px; }

/* ---------------------------------------------------------------- copying (owner's request: "I can copy anything") */
.copy-btn { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; margin-inline-start: 4px; border: 0;
            border-radius: 6px; background: transparent; color: var(--f-text-3); font-size: 14px; vertical-align: middle; cursor: pointer;
            opacity: 0; transition: opacity .15s var(--f-ease), background-color .15s var(--f-ease), color .15s var(--f-ease); }
.copy-btn:hover { background: var(--f-fill); color: var(--f-accent); }
.copy-btn.copied { color: var(--f-green); opacity: 1; }
tr:hover .copy-btn, .copyable:hover .copy-btn, .copy-btn:focus-visible, .list-group-item:hover .copy-btn,
.person-meta:hover .copy-btn { opacity: 1; }
@media (hover: none) { .copy-btn { opacity: .7; } }
.copyable { white-space: nowrap; }

.toasts { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 2100; display: flex; flex-direction: column;
          align-items: center; gap: 8px; pointer-events: none; }
.toast-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 22px; font-size: 13.5px;
              font-weight: 500; color: #fff; background: rgba(30, 30, 32, .9); box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
              -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: toast-in .28s var(--f-spring); }
.toast-pill .ti { font-size: 17px; color: #30d158; }
.toast-pill.leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s var(--f-ease), transform .2s var(--f-ease); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- the dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.kpi-tile { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; color: var(--f-text);
            transition: transform .16s var(--f-ease), box-shadow .16s var(--f-ease); }
a.kpi-tile:hover { color: var(--f-text); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, .07); }
.kpi-tile .kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-tile .kpi-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; font-size: 17px; }
.kpi-tile .go { color: var(--f-text-3); font-size: 16px; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dash-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.attention-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--f-text); }
.attention-row + .attention-row { border-top: .5px solid var(--f-sep); }
a.attention-row:hover { background: var(--f-fill-2); color: var(--f-text); }
.attention-row .kpi-icon { flex: none; }
.attention-row .label { flex: 1; min-width: 0; }
.attention-row .label .what { display: block; font-size: 12px; color: var(--f-text-2); }
.attention-row .count { font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; }
.attention-row .count.zero { color: var(--f-text-3); font-weight: 500; }
.tone-blue { background: var(--f-accent-soft); color: var(--f-accent); }
.tone-green { background: var(--f-green-soft); color: var(--f-green); }
.tone-orange { background: var(--f-orange-soft); color: var(--f-orange); }
.tone-red { background: var(--f-red-soft); color: var(--f-red); }
.tone-purple { background: var(--f-purple-soft); color: var(--f-purple); }
.tone-teal { background: var(--f-teal-soft); color: var(--f-teal); }
.tone-indigo { background: var(--f-indigo-soft); color: var(--f-indigo); }
.log-row { display: flex; align-items: baseline; gap: 10px; padding: 10px 18px; }
.log-row + .log-row { border-top: .5px solid var(--f-sep); }
.log-row .label { flex: 1; min-width: 0; }
.log-row .when { color: var(--f-text-3); font-size: 12px; white-space: nowrap; }

/* Charts (widths are classes: the console's browser rules allow no inline styles). */
.chart-bars rect { fill: var(--f-accent); opacity: .85; transition: opacity .15s var(--f-ease); }
.chart-bars rect:hover { opacity: 1; }
.chart-axis { font-size: 10px; fill: var(--f-text-3); font-family: var(--f-font); }
.chart-line { fill: none; stroke: var(--f-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-dot { fill: var(--f-accent); }
.chart-grid { stroke: var(--f-sep); stroke-dasharray: 3 4; }
.chart-base { stroke: var(--f-sep-strong); }
.series-0 { fill: var(--f-accent); background: var(--f-accent); }
.series-1 { fill: var(--f-green-solid); background: var(--f-green-solid); }
.series-2 { fill: #ff9500; background: #ff9500; }
.series-3 { fill: var(--f-text-3); background: var(--f-text-3); }
.legend { display: inline-flex; align-items: center; gap: .35rem; }
.legend-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 3px; }
.problem-text { white-space: pre-wrap; word-break: break-word; max-width: 48rem; }
details > summary { cursor: pointer; }
.w-pct-0 { width: 0%; } .w-pct-5 { width: 5%; } .w-pct-10 { width: 10%; } .w-pct-15 { width: 15%; } .w-pct-20 { width: 20%; }
.w-pct-25 { width: 25%; } .w-pct-30 { width: 30%; } .w-pct-35 { width: 35%; } .w-pct-40 { width: 40%; } .w-pct-45 { width: 45%; }
.w-pct-50 { width: 50%; } .w-pct-55 { width: 55%; } .w-pct-60 { width: 60%; } .w-pct-65 { width: 65%; } .w-pct-70 { width: 70%; }
.w-pct-75 { width: 75%; } .w-pct-80 { width: 80%; } .w-pct-85 { width: 85%; } .w-pct-90 { width: 90%; } .w-pct-95 { width: 95%; }
.w-pct-100 { width: 100%; }

/* ---------------------------------------------------------------- people */
.initials { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
            font-weight: 600; color: #fff; background: linear-gradient(180deg, #a6abb6, #858a95); letter-spacing: 0; font-size: 16px; }
.initials.sm { width: 30px; height: 30px; font-size: 13px; }
.initials.lg { width: 72px; height: 72px; font-size: 28px; }
.person-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; color: inherit; transition: background-color .12s var(--f-ease); }
.person-row + .person-row { border-top: .5px solid var(--f-sep); }
a.person-row:hover { background: var(--f-fill-2); color: inherit; }
.person-row:active { background: var(--f-fill); }
.person-row .who { flex: 1; min-width: 0; }
.person-row .who .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-row .who .what { font-size: 12.5px; color: var(--f-text-2); }
.person-row .chevron { color: var(--f-text-3); }
.request-card + .request-card { border-top: .5px solid var(--f-sep); }

.person-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.person-head .who { flex: 1 1 280px; min-width: 0; }
.person-head .name { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.person-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; color: var(--f-text-2); font-size: 13px; }
.person-meta .item { display: inline-flex; align-items: center; gap: 4px; }
.person-stats { display: flex; gap: 6px; }
.stat { min-width: 84px; padding: 8px 12px; border-radius: 12px; background: var(--f-fill-2); text-align: center; }
.stat .num { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat .lbl { display: block; font-size: 11.5px; color: var(--f-text-2); }
.person-search { margin-top: 16px; max-width: 520px; }

/* Round quick actions under a person's name, as on an iPhone contact card. */
.quick-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.quick-action { flex: 0 1 5.4rem; min-width: 4.6rem; display: flex; flex-direction: column; align-items: center; gap: 4px;
                padding: 9px 6px 8px; border: 0; border-radius: 12px; background: var(--f-fill-2); color: var(--f-accent);
                font-size: 12px; font-weight: 500; transition: background-color .15s var(--f-ease), transform .08s var(--f-ease); cursor: pointer; }
.quick-action i { font-size: 20px; }
.quick-action:hover { background: var(--f-fill); color: var(--f-accent); }
.quick-action:active { transform: scale(.96); }
.quick-action.danger { color: var(--f-red); }
.quick-action.warning { color: var(--f-orange); }
.quick-action.success { color: var(--f-green); }
.quick-actions form { display: contents; }

/* Sheets that rise from the bottom (Bootstrap offcanvas). */
.offcanvas { background: var(--f-elevated); color: var(--f-text); border: 0 !important; }
.offcanvas-backdrop.show { opacity: .3; }
.offcanvas-bottom.sheet { height: auto; max-height: 88vh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom);
                          max-width: 560px; margin: 0 auto; box-shadow: 0 -8px 40px rgba(0, 0, 0, .18); }
.sheet .offcanvas-header { position: relative; padding-bottom: .25rem; }
.sheet .offcanvas-header::before { content: ""; position: absolute; top: 6px; left: 50%; width: 36px; height: 5px; margin-left: -18px;
                                   border-radius: 3px; background: var(--f-fill); }
.offcanvas-title { font-weight: 700; letter-spacing: -.015em; }
.sheet-note { font-size: 12.5px; color: var(--f-text-2); }
/* Timed access (2026-10-02): the quick choices two a row, and "or ..." between choices and the date. */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet-or { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--f-text-2); }
.sheet-or::before, .sheet-or::after { content: ""; flex: 1; height: 1px; background: var(--f-fill); }

/* Permissions: groups that fill the space like a mosaic (no empty blocks), each an inset list. */
.perm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.perm-head p { margin: 0; color: var(--f-text-2); max-width: 46rem; }
.perm-tools { display: flex; align-items: center; gap: 10px; }
.perm-tools .search-field { width: 240px; }
.perm-total { color: var(--f-text-2); font-size: 12.5px; white-space: nowrap; }
.perm-grid { columns: 2 360px; column-gap: 16px; }
.perm-group { break-inside: avoid; margin-bottom: 16px; display: inline-block; width: 100%; }
.perm-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 4px 6px; font-size: 12.5px;
              font-weight: 600; color: var(--f-text-2); }
.perm-tally { font-weight: 500; color: var(--f-text-3); font-variant-numeric: tabular-nums; }
.perm-list { border-radius: 12px; background: var(--f-surface-2); border: .5px solid var(--f-sep); overflow: hidden; }
.perm-item { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 7px 12px 7px 14px; margin: 0; cursor: default; }
.perm-item + .perm-item { border-top: .5px solid var(--f-sep); }
label.perm-item { cursor: pointer; }
.perm-item:hover { background: var(--f-fill-2); }
.perm-name { flex: 1; min-width: 0; font-size: 13.5px; }
.perm-name .badge { margin-inline-start: 6px; }
.perm-state { flex: none; font-size: 18px; }
.perm-state.on { color: var(--f-green-solid); }
.perm-state.off { color: var(--f-text-3); }
.perm-item.hide { display: none; }
.perm-group.hide { display: none; }
.save-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 4px 0 0; padding: 10px 12px 10px 16px;
            border-radius: 14px; background: var(--f-topbar); border: .5px solid var(--f-sep); box-shadow: var(--f-shadow-pop);
            -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.save-bar .note { flex: 1; color: var(--f-text-2); font-size: 12.5px; }

/* Activity lines: what, when and the way to open it in the bot. */
.when-cell { white-space: nowrap; color: var(--f-text-2); font-variant-numeric: tabular-nums; }
.who-cell { white-space: nowrap; }
.search-hits mark { background: var(--f-yellow-soft); color: inherit; padding: 0 1px; border-radius: 3px; }
.result-section + .result-section { margin-top: 16px; }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 15px; font-size: 12.5px; font-weight: 500;
        background: var(--f-fill-2); color: var(--f-text); transition: background-color .14s var(--f-ease); }
.chip:hover { background: var(--f-fill); color: var(--f-text); }
.chip.active { background: var(--f-accent); color: #fff; }
.chip .n { color: inherit; opacity: .7; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- photos, review lists, messages, notes, pictures */
.photo-thumb { aspect-ratio: 3 / 4; object-fit: cover; background: var(--f-fill-2); }
.photo-large { max-height: 36rem; object-fit: contain; background: var(--f-fill-2); }
.photo-none { font-size: 3rem; opacity: .5; }
.message-preview, .note-text { white-space: pre-wrap; word-break: break-word; }
.note-removed .note-text { text-decoration: line-through; opacity: .6; }
.picture-thumb { width: 64px; height: auto; border-radius: 6px; }
.report-shown { white-space: pre-wrap; word-break: break-word; background: var(--f-fill-2); border-radius: 12px; padding: 12px 14px; }
.hr-text { color: var(--f-text-3); }
.hr-text::before, .hr-text::after { background: var(--f-sep); }

/* ---------------------------------------------------------------- signing in */
.page-center { min-height: 100vh; display: flex; align-items: center; }
.signin-brand { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.signin-brand .brand-sub { font-weight: 500; opacity: 1; }
.card-md > .card-body { padding: 28px; }

/* ---------------------------------------------------------------- dark */
:root[data-bs-theme=dark] .card { box-shadow: none; }
:root[data-bs-theme=dark] .initials { background: linear-gradient(180deg, #6b6f78, #4f535b); }
:root[data-bs-theme=dark] .btn-close { filter: invert(1); }

/* ---------------------------------------------------------------- phones and tablets */
.tabbar { display: none; }
@media (max-width: 1199.98px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991.98px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .sidebar { width: min(300px, 86vw); transform: translateX(-102%); transition: transform .32s var(--f-spring);
             box-shadow: none; padding-top: env(safe-area-inset-top); background: var(--f-elevated); }
  body.sidebar-open .sidebar { transform: none; box-shadow: 12px 0 40px rgba(0, 0, 0, .2); }
  .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 1034; background: rgba(0, 0, 0, .28); opacity: 0;
                   pointer-events: none; transition: opacity .28s var(--f-ease); }
  body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  body.sidebar-open { overflow: hidden; }
  .sidebar .nav-link { height: 40px; font-size: 15px; }
  .main { margin-left: 0; }
  .topbar { height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0
            max(10px, env(safe-area-inset-left)); gap: 6px; }
  .topbar-search { display: none; }
  .content { padding: 14px max(14px, env(safe-area-inset-right)) 20px max(14px, env(safe-area-inset-left)); }
  .page-header { margin: 6px 0 14px; align-items: flex-start; }
  .page-title { font-size: 30px; letter-spacing: -.025em; }
  .footer { display: none; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 32px; }
  .form-control, .form-select { min-height: 42px; font-size: 16px; }
  .form-control-sm, .form-select-sm { font-size: 16px; }
  .kpi-grid { gap: 10px; }
  .kpi-tile { padding: 14px; }
  .kpi-value { font-size: 26px; }
  .person-stats { width: 100%; }
  .stat { flex: 1; min-width: 0; }
  .perm-tools, .perm-tools .search-field { width: 100%; }
  .card-header { padding: 12px 14px; }
  .card-body { padding: 14px; }
  .list-group-item, .person-row, .attention-row, .log-row { padding-left: 14px; padding-right: 14px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; height: calc(56px + env(safe-area-inset-bottom));
            padding-bottom: env(safe-area-inset-bottom); background: var(--f-topbar); border-top: .5px solid var(--f-sep);
            -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
  .tabbar a { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
              color: var(--f-text-3); font-size: 10.5px; font-weight: 500; }
  .tabbar a i { font-size: 1.55rem; }
  .tabbar a.active { color: var(--f-accent); }
  .tab-badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
               background: var(--f-red-solid); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
  .tab-badge[hidden] { display: none; }
  .toasts { bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 575.98px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perm-grid { columns: 1; }
  /* A person's numbers three to a line (five in one line broke the words in two), and the
     buttons under them in three even columns (2026-10-13, the phone sweep). */
  .person-stats { flex-wrap: wrap; }
  .stat { flex: 1 1 30%; }
  .quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-action { min-width: 0; }
}

/* ---------------------------------------------------------------- tables on a phone (2026-10-13)
   The owner, from the phone: "I need to scroll to the right to check". A table that does not fit
   its place gets the class "stack" (app.js, fitTables): each row becomes a small card with every
   value beside its column's name; the sort links stay, as one line above the rows. Up to the width
   where the console is in its phone and tablet form (the bar at the bottom). */
@media (max-width: 991.98px) {
  .table.stack, .table.stack > tbody, .table.stack > tbody > tr, .table.stack > tbody > tr > td { display: block; width: auto; min-width: 0; }
  .table.stack > thead { display: none; }
  .table.stack > thead.can-sort { display: block; }
  .table.stack > thead > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; padding: 9px 14px;
                              background: var(--f-surface-2); border-bottom: .5px solid var(--f-sep); }
  .table.stack > thead > tr::before { content: "Sort by"; font-size: 11.5px; font-weight: 600; color: var(--f-text-3); }
  .table.stack > thead > tr > th { display: none; }
  .table.stack > thead > tr > th.can-sort { display: block; padding: 0; border: 0; background: none; }
  .table.stack > tbody > tr { padding: 10px 14px; border-bottom: .5px solid var(--f-sep); }
  .table.stack > tbody > tr:last-child { border-bottom: 0; }
  .table.stack > tbody > tr > td { position: relative; min-height: 1.75em; padding: 3px 0; padding-inline-start: min(35%, 170px); border: 0;
                                   white-space: normal; overflow-wrap: anywhere; text-align: start; }
  .table.stack > tbody > tr > td::before { content: attr(data-label); position: absolute; inset-inline-start: 0; top: 4px; width: min(32%, 156px);
                                           font-size: 12px; font-weight: 500; color: var(--f-text-2); text-align: start;
                                           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .table.stack > tbody > tr > td[data-label=""] { padding-inline-start: 0; min-height: 0; }
  .table.stack > tbody > tr > td[data-label=""]::before { content: none; }
  .table.stack > tbody > tr > td.is-empty { display: none; }
  .table.stack > tbody > tr > td.ar { text-align: left; }
  .table.stack > tbody > tr > td.text-end { text-align: start !important; }
  .table.stack .text-nowrap { white-space: normal !important; }
  .table.stack > tbody > tr > td.detail-cell { padding-inline-end: 38px; }
  .table.stack .row-actions { flex-wrap: wrap; justify-content: flex-start; }
  .table.stack > tbody > tr > td.nothing { padding: 22px 0; }

  /* The same rule for everything else on a phone: nothing is pushed off the right edge. A row of
     tabs wraps onto more lines (it used to slide sideways, with the rest out of sight), and the
     buttons at the top of a page wrap under each other. */
  .nav-tabs, .nav-tabs.card-header-tabs { flex-wrap: wrap; overflow-x: visible; gap: 2px; }
  .nav-tabs .nav-link { padding: 6px 9px; }
  .page-actions { max-width: 100%; }
  .page-actions > .d-flex, .card-header > .d-flex { flex-wrap: wrap; }
  .card-header { flex-wrap: wrap; row-gap: 6px; }
}

/* ---------------------------------------------------------------- live pages (2026-10-08)
   The light in the top bar (green and breathing while changes arrive by themselves, grey while
   connecting again), and new or changed rows lit for a moment. */
.live-pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 14px;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--f-text-2); background: var(--f-fill-2);
  user-select: none; }
.live-light { width: 8px; height: 8px; border-radius: 50%; background: var(--f-green-solid);
  animation: live-breathe 2.4s var(--f-ease) infinite; }
.live-pill.off .live-light { background: var(--f-text-3); animation: none; }
@keyframes live-breathe {
  0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); }
  70% { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
}
.live-new, .live-new > td { animation: live-lit 2.6s var(--f-ease); }
@keyframes live-lit { from { background-color: var(--f-accent-soft); } to { background-color: transparent; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media print {
  .sidebar, .topbar, .tabbar, .page-actions, .row-actions, .copy-btn { display: none !important; }
  .main { margin: 0; }
}