/* ════════════════════════════════════════════════════════
   Celvo — the calm design (Phase 8, decision 49)

   Loaded after style.css. A light, quiet surface: a white side menu grouped by task,
   a white top bar, flat white cards on a pale ground, navy text, and one accent from
   the logo's gear for what can be acted on. Colour states are always doubled by
   weight, a mark or text, never carried by hue alone.

   It redefines style.css's tokens first, so the screens not yet rebuilt take the new
   palette too; then it restyles the shell and the shared components. style.css's own
   theme rules are removed group by group as the screens are rebuilt.
   ════════════════════════════════════════════════════════ */

:root {
  --c-ink:         #16324F;   /* text and the navy anchor */
  --c-ink-2:       #34485F;   /* secondary text, menu links */
  --c-muted:       #51637A;   /* captions: 6.1:1 on white */
  --c-faint:       #6B7C90;   /* group labels: 4.6:1 on white */
  --c-line:        #E3E8EE;
  --c-line-2:      #EEF2F5;
  --c-bg:          #F6F8FA;
  --c-surface:     #FFFFFF;
  --c-accent:      #0B6E69;   /* teal from the logo's gear: 5.9:1 with white */
  --c-accent-ink:  #08524E;
  --c-accent-tint: rgba(11, 110, 105, .10);
  --c-ok:          #1E7F4F;
  --c-warn:        #8A4600;
  --c-warn-tint:   #FFF1DC;
  --c-danger:      #B42318;
  --font-ui: 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;

  /* style.css's tokens, remapped */
  --brand-green:       var(--c-accent);
  --brand-green-mid:   var(--c-accent);
  --brand-green-light: #9FD3CE;
  --brand-navy:        var(--c-ink);
  --brand-navy-light:  #1F5FBF;
  --brand-bg:          var(--c-bg);
  --navy-900:          #10263D;
  --navy-700:          var(--c-ink);
  --green-700:         var(--c-accent-ink);
  --ink:               var(--c-ink);
  --muted:             var(--c-muted);
  --line:              var(--c-line);
  --surface:           var(--c-surface);
  --surface-2:         var(--c-bg);
  --app-bg:            var(--c-bg);
  --sidebar-width:     248px;
  --radius-sm: 9px;
  --radius:    12px;
  --radius-lg: 14px;
  --shadow-sm: none;
  --shadow-md: 0 6px 20px rgba(16, 38, 61, .08);
  --shadow-lg: 0 16px 40px rgba(16, 38, 61, .14);
  --ring:      0 0 0 3px rgba(11, 110, 105, .22);
  --t:         .16s ease;
  /* no glass: every pane is opaque */
  --glass-navy: var(--c-ink); --glass-green: var(--c-accent); --glass-white: var(--c-surface);
  --glass-navy-soft: rgba(22, 50, 79, .06); --glass-green-soft: var(--c-accent-tint);
  --glass-edge: var(--c-line); --glass-edge-ink: var(--c-line); --glass-hi: transparent;
  --glass-shadow: none; --glass-blur: 0px; --glass-sat: 1;
}
[dir="ltr"] { --font-ui: 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif; }

body, [dir="ltr"] body {
  font-family: var(--font-ui);
  background: var(--c-bg);
  color: var(--c-ink);
}
.form-control, .form-select, .btn { font-family: var(--font-ui); }

/* ─── Side menu ─────────────────────────────────────── */
.sidebar, [dir="ltr"] .sidebar {
  background: var(--c-surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-inline-start: 0;
  border-inline-end: 1px solid var(--c-line);
  box-shadow: none;
  color: var(--c-ink);
  padding: 0 0 8px;
}
.sidebar::before { display: none; }
.sidebar::-webkit-scrollbar-thumb { background: var(--c-line); }
.sidebar::-webkit-scrollbar-thumb:hover { background: #C9D3DD; }

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px 14px; border-bottom: 0; text-align: start;
}
.sb-logo { width: 36px; height: 38px; object-fit: contain; flex: none; }
.sb-logo:not([src]) { visibility: hidden; }
.sb-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sb-word { font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: .08em; font-size: 15px; color: var(--c-ink); }
.sidebar-brand .brand-subtitle {
  font-size: 12px; color: var(--c-muted); margin: 0; letter-spacing: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.sidebar-section { padding: 6px 0 2px; }
.sidebar-section + .sidebar-section { border-top: 0; margin-top: 2px; }
.sb-top { padding-top: 2px; }

.sidebar-section-title,
.sidebar-section-title.sg-h {
  color: var(--c-faint); font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none; padding: 6px 12px; margin: 0 10px 2px;
  width: calc(100% - 20px);
}
.sg-t { letter-spacing: 0; }
.sidebar-section-title.sg-h:hover { background: var(--c-line-2); }
.sidebar-section-title.sg-h:focus-visible { box-shadow: var(--ring); }
.sg-ic { display: none; }
.sg-n { color: var(--c-muted); background: var(--c-line-2); }

.sidebar-link {
  margin: 1px 10px; padding: 8px 12px; gap: 10px;
  color: var(--c-ink-2); font-size: 14px; font-weight: 400;
  border: 0; border-radius: 8px;
}
.sidebar-link i { font-size: 15px; color: var(--c-faint); opacity: 1; }
.sidebar-link:hover { background: var(--c-line-2); color: var(--c-ink); border: 0; }
.sidebar-link.active {
  background: var(--c-accent-tint); color: var(--c-accent);
  font-weight: 600; border: 0; box-shadow: none;
}
.sidebar-link.active i { color: var(--c-accent); }
.sidebar-link.active::before { display: none; }
.sidebar-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }
.sb-count {
  margin-inline-start: auto; font-size: 12px; font-weight: 600; line-height: 1.5;
  background: var(--c-accent); color: #fff; border-radius: 10px; padding: 0 8px;
}

/* the administration group sits apart, at the foot */
.sb-foot { margin-top: auto; border-top: 1px solid var(--c-line) !important; padding-top: 10px; }
.sidebar-footer {
  margin-top: 0; border-top: 0; padding: 8px 22px 4px;
  font-size: 11px; color: var(--c-faint); text-align: start;
}

/* ─── Top bar ───────────────────────────────────────── */
.main-content { margin-inline-start: var(--sidebar-width); }
.top-bar {
  background: var(--c-surface);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid var(--c-line); box-shadow: none;
  padding: 10px 28px; min-height: 64px; gap: 16px; flex-wrap: wrap;
}
.top-bar-title {
  display: flex; align-items: baseline; gap: 8px; min-width: 0;
  font-size: 18px; font-weight: 600; color: var(--c-ink); letter-spacing: 0;
}
.tb-group { font-size: 14px; font-weight: 400; color: var(--c-muted); }
.tb-group:not(:empty)::after { content: '/'; margin-inline-start: 8px; color: var(--c-line); }
.tb-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
#save-state { color: var(--c-muted); }

.tb-new { position: relative; }
.tb-new > summary { list-style: none; }
.tb-new > summary::-webkit-details-marker { display: none; }
.tb-new-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: 10px;
  background: var(--c-accent); color: #fff; font-size: 14px; font-weight: 600; border: 0;
}
.tb-new-btn:hover, .tb-new[open] .tb-new-btn { background: var(--c-accent-ink); color: #fff; }
.tb-new-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tb-new-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 1100;
  min-width: 240px; padding: 6px; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.tb-new:not([open]) > .tb-new-menu, .tb-account:not([open]) > .tb-acc-menu { display: none; }
.tb-new-menu button {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--c-ink); font: inherit; font-size: 14px; text-align: start; cursor: pointer;
}
.tb-new-menu button[hidden] { display: none; }
.tb-new-menu button i { color: var(--c-faint); }
.tb-new-menu button:hover, .tb-new-menu button:focus-visible { background: var(--c-line-2); outline: none; }

/* the account button and its menu */
#top-bar-date { font-size: 0; }
.tb-account { position: relative; font-size: 14px; }
.tb-account > summary { list-style: none; }
.tb-account > summary::-webkit-details-marker { display: none; }
.tb-avatar {
  width: 40px; height: 40px; border-radius: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-ink); color: #fff; font-size: 14px; font-weight: 600;
}
.tb-avatar:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.tb-acc-menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 1100;
  min-width: 290px; padding: 8px; background: var(--c-surface);
  border: 1px solid var(--c-line); border-radius: 12px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px; color: var(--c-ink);
}
.tb-acc-who { display: flex; flex-direction: column; padding: 8px 10px 10px; border-bottom: 1px solid var(--c-line-2); margin-bottom: 4px; }
.tb-acc-who span { font-size: 13px; color: var(--c-muted); }
.tb-acc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; font-size: 13px; color: var(--c-ink-2); }
.tb-acc-out {
  display: flex; align-items: center; gap: 8px; margin-top: 4px; min-height: 40px;
  padding: 8px 10px; border: 0; border-top: 1px solid var(--c-line-2); background: transparent;
  color: var(--c-danger); font: inherit; font-size: 14px; text-align: start; cursor: pointer; border-radius: 0 0 8px 8px;
}
.tb-acc-out:hover { background: #FDF0EF; }

.page-body { padding: 28px; }

/* ─── Buttons: flat, one accent ─────────────────────── */
.btn {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-radius: 9px; font-weight: 500; box-shadow: none;
}
.btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; box-shadow: none; }
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-secondary, .btn-dark {
  box-shadow: none;
}
.btn-primary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover,
.btn-info:hover, .btn-secondary:hover, .btn-dark:hover { box-shadow: none; }
.btn-primary, .btn-success { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.btn-primary:hover, .btn-success:hover,
.btn-primary:active, .btn-success:active { background: var(--c-accent-ink); border-color: var(--c-accent-ink); color: #fff; }
.btn-outline-primary, .btn-outline-success {
  color: var(--c-accent); background: var(--c-surface); border-color: var(--c-accent);
}
.btn-outline-primary:hover, .btn-outline-success:hover { color: #fff; background: var(--c-accent); border-color: var(--c-accent); }
.btn-outline-secondary { color: var(--c-ink); background: var(--c-surface); border-color: #D5DDE5; }
.btn-outline-secondary:hover { color: var(--c-ink); background: var(--c-line-2); border-color: #C9D3DD; }

/* ─── Forms ─────────────────────────────────────────── */
.form-label { font-weight: 500; color: var(--c-ink); }
.form-control, .form-select { border-color: #C9D3DD; color: var(--c-ink); }
.form-control:focus, .form-select:focus { border-color: var(--c-accent); box-shadow: var(--ring); }
.form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); }
.form-check-input:focus { border-color: var(--c-accent); box-shadow: var(--ring); }

/* ─── Cards and tables ──────────────────────────────── */
.card, .data-table-wrapper {
  border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: none;
}
.card.shadow-sm, .shadow-sm { box-shadow: none !important; }
/* the scroll box positions its table's hidden labels, so none escapes it and widens a narrow page */
.table-responsive { position: relative; }
.card-header { background: var(--c-surface); font-weight: 600; border-bottom: 1px solid var(--c-line-2); }
.table thead th {
  background: var(--c-surface); color: var(--c-muted);
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  border-bottom: 1px solid var(--c-line); padding: 12px 14px;
}
.table tbody td { border-color: var(--c-line-2); color: var(--c-ink); font-size: 14px; }
.table tbody tr:hover td { background: #FAFBFC; }
.section-title { font-weight: 600; color: var(--c-ink); padding-inline-start: 0; }
.section-title::before { display: none; }
a { color: var(--c-accent); }
a:hover { color: var(--c-accent-ink); }

::-webkit-scrollbar-thumb:hover { background: #C9D3DD; }

/* ─── Lists (Phase 8): head, status filters, tools, table ─── */
.list-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.list-title { margin: 0; font-size: 26px; font-weight: 600; color: var(--c-ink); }
.list-sub { margin-top: 4px; font-size: 14px; color: var(--c-muted); }
.list-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.list-actions .btn { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; }
.list-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.list-chip {
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid #D5DDE5; background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: 14px; font-weight: 500;
}
.list-chip:hover { border-color: #B9C7D6; }
.list-chip[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.list-chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.list-chip-n { opacity: .75; margin-inline-start: 2px; }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.list-search {
  flex: 1 1 280px; display: flex; align-items: center; gap: 8px; margin: 0;
  height: 44px; padding: 0 12px; background: var(--c-surface); border: 1px solid #C9D3DD; border-radius: 10px;
}
.list-search:focus-within { border-color: var(--c-accent); box-shadow: var(--ring); }
.list-search i { color: var(--c-muted); }
.list-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--c-ink); }
.list-filter { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--c-muted); }
.list-filter .form-select { height: 44px; min-width: 150px; font-size: 14px; }
.list-table tbody td { padding: 12px 14px; vertical-align: middle; }
.list-ref { font-weight: 600; text-decoration: none; color: var(--c-accent); }
.list-ref:hover { text-decoration: underline; }
.list-meta { font-size: 12px; color: var(--c-muted); }
.list-flag { font-size: 11px; font-weight: 600; color: var(--c-warn); background: var(--c-warn-tint); border-radius: 6px; padding: 1px 6px; }
.list-num { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.list-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.list-pill-draft     { background: #EEF2F5; color: #34485F; }
.list-pill-waiting   { background: #FFF1DC; color: #8A4600; }
.list-pill-approved  { background: #E2F4EC; color: #11603F; }
.list-pill-active    { background: #E3ECFA; color: #1D4F99; }
.list-pill-done      { background: #F0F0F0; color: #474747; }
.list-pill-cash      { background: #F3ECFB; color: #5B3B8C; }
.list-pill-cancelled { background: #FDECEB; color: #A12A20; }
.list-progress { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.list-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--c-line-2); }
.list-bar span { display: block; height: 6px; border-radius: 3px; background: var(--c-accent); }
.list-acts { white-space: nowrap; text-align: end; }
.list-acts .btn-light { background: transparent; border-color: transparent; color: var(--c-ink-2); width: 34px; height: 34px; padding: 0; }
.list-acts .btn-light:hover { background: var(--c-line-2); color: var(--c-ink); }
.list-acts .list-danger:hover { background: #FDECEB; color: var(--c-danger); }

.list-mine td { background: #F3FAF9; }
/* A row button with words keeps its accent outline; only icon buttons go quiet. */
.data-table-wrapper .table td.list-acts .btn-outline-primary {
  border-color: var(--c-accent); color: var(--c-accent); background: var(--c-surface); min-height: 36px;
}
.data-table-wrapper .table td.list-acts .btn-outline-primary:hover { background: var(--c-accent); color: #fff; }
.list-flag-me { color: var(--c-accent); background: var(--c-accent-tint); }

/* Screens not yet rebuilt keep their old header row: give it the same calm shape. */
.section-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.section-header .section-title { font-size: 26px; }
.section-header .section-title > i { display: none; }
.section-header .btn { min-height: 44px; display: inline-flex; align-items: center; }
.section-header .btn-outline-success, .section-header .btn-outline-primary,
.section-header .btn-outline-info, .section-header .btn-outline-danger, .section-header .btn-outline-dark {
  color: var(--c-ink); background: var(--c-surface); border-color: #D5DDE5;
}
.section-header .btn-outline-success:hover, .section-header .btn-outline-primary:hover,
.section-header .btn-outline-info:hover, .section-header .btn-outline-danger:hover, .section-header .btn-outline-dark:hover {
  color: var(--c-ink); background: var(--c-line-2); border-color: #C9D3DD;
}
.section-header .btn-info, .section-header .btn-warning { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.section-header + .d-flex .form-control { height: 44px; border-radius: 10px; }
/* Row buttons in the old lists: quiet icons, the colour only on hover. */
.data-table-wrapper .table td .btn-sm[class*="btn-outline-"] {
  border-color: transparent; background: transparent; color: var(--c-ink-2); min-width: 32px; min-height: 32px;
}
.data-table-wrapper .table td .btn-sm[class*="btn-outline-"]:hover { background: var(--c-line-2); color: var(--c-ink); }
.data-table-wrapper .table td .btn-sm.btn-outline-danger:hover { background: #FDECEB; color: var(--c-danger); }

/* Forms not yet rebuilt: their coloured section bars become white headers, and the
   buttons on them one quiet accent style. Printed documents are separate windows and
   are not touched. */
.page-body .card > .card-header[class*="bg-"],
.page-body .card > .card-header.table-dark {
  background: var(--c-surface) !important; color: var(--c-ink) !important;
  border-bottom: 1px solid var(--c-line-2); font-size: 16px; font-weight: 600; padding: 14px 18px;
}
.page-body .card > .card-header[class*="bg-"] .btn-warning,
.page-body .card > .card-header[class*="bg-"] .btn-light,
.page-body .card > .card-header[class*="bg-"] .btn-outline-light {
  color: var(--c-accent); background: var(--c-surface); border: 1px solid var(--c-accent);
}
.page-body .card > .card-header[class*="bg-"] .btn-warning:hover,
.page-body .card > .card-header[class*="bg-"] .btn-light:hover,
.page-body .card > .card-header[class*="bg-"] .btn-outline-light:hover { color: #fff; background: var(--c-accent); }
.page-body .table thead.table-dark th, .page-body thead.table-dark th { background: var(--c-bg); color: var(--c-muted); border-color: var(--c-line); }

/* ─── Home: «Needs your action» ─────────────────────── */
.home { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.home-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.home-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 62px; }
.home-date { font-size: 14px; color: var(--c-muted); }
.home-hello { margin: 4px 0 0; font-size: 26px; font-weight: 600; color: var(--c-ink); }
.home-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 14px; overflow: hidden; }
.home-card h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--c-ink); }
.home-pad { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.home-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--c-line-2); }
.home-count { color: var(--c-muted); font-weight: 400; }
.home-count:not(:empty)::before { content: '· '; }
.home-more { border: 0; background: transparent; color: var(--c-accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px; }
.home-actions, .home-month, .home-feed { list-style: none; margin: 0; padding: 0; }

.ha-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--c-line-2); }
.ha-row:last-child { border-bottom: 0; }
.ha-row:hover { background: #FAFBFC; }
.ha-kind {
  min-width: 70px; text-align: center; font-size: 12px; font-weight: 600;
  border-radius: 6px; padding: 3px 8px; color: var(--c-accent); background: var(--c-accent-tint);
}
.ha-kind.ha-late, .ha-kind.ha-due { color: var(--c-warn); background: var(--c-warn-tint); }
.ha-text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ha-title { font-size: 15px; font-weight: 500; color: var(--c-ink); }
.ha-meta { font-size: 13px; color: var(--c-muted); }
.ha-when { font-size: 13px; color: var(--c-muted); }
.ha-when.ha-late { color: var(--c-warn); font-weight: 600; }
.ha-go { min-height: 40px; padding: 0 16px; font-weight: 600; }
.ha-more { position: relative; }
.ha-more > summary { list-style: none; }
.ha-more > summary::-webkit-details-marker { display: none; }
.ha-more-btn {
  width: 40px; height: 40px; border-radius: 9px; cursor: pointer; color: var(--c-muted);
  display: flex; align-items: center; justify-content: center;
}
.ha-more-btn:hover, .ha-more[open] .ha-more-btn { background: var(--c-line-2); color: var(--c-ink); }
.ha-more-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.ha-more-menu {
  position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 50; min-width: 220px; padding: 6px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 10px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.ha-more-menu button {
  min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--c-ink); font: inherit; font-size: 14px; text-align: start; cursor: pointer;
}
.ha-more-menu button:hover, .ha-more-menu button:focus-visible { background: var(--c-line-2); outline: none; }
.ha-empty { padding: 28px 20px; color: var(--c-muted); font-size: 15px; display: flex; align-items: center; gap: 10px; }
.ha-empty i { color: var(--c-ok); font-size: 20px; }
.home-late { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--c-line-2); font-size: 13px; color: var(--c-muted); }
.home-late[hidden] { display: none; }
.home-late input { width: 80px; }

.hm-row { display: flex; flex-direction: column; gap: 6px; }
.hm-row + .hm-row { margin-top: 12px; }
.hm-top { display: flex; justify-content: space-between; font-size: 14px; color: var(--c-ink-2); }
.hm-top strong { color: var(--c-ink); font-weight: 600; }
.hm-bar { height: 6px; border-radius: 3px; background: var(--c-line-2); }
.hm-bar span { display: block; height: 6px; border-radius: 3px; background: var(--c-accent); transition: width .5s ease; }
.hf-row { display: flex; gap: 10px; font-size: 14px; line-height: 1.45; }
.hf-row + .hf-row { margin-top: 12px; }
.hf-who {
  width: 28px; height: 28px; flex: none; border-radius: 14px; background: var(--c-line-2); color: var(--c-ink-2);
  font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.hf-text { display: block; font-weight: 500; color: var(--c-ink); }
.hf-meta { display: block; font-size: 13px; color: var(--c-muted); }
.hf-empty { font-size: 14px; color: var(--c-muted); }

/* ─── Motion (Phase 8): a short, quiet entrance for each screen ───────────── */
@keyframes calm-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-enter { animation: calm-enter .2s ease-out both; }
.list-chip, .ha-row, .tb-new-btn, .list-acts .btn { transition: background .15s ease, border-color .15s ease, color .15s ease; }

/* ─── Narrow screens: the side menu slides over the page ───────────────────── */
.tb-menu {
  display: none; width: 40px; height: 40px; flex: none; border: 1px solid var(--c-line); border-radius: 10px;
  background: var(--c-surface); color: var(--c-ink); font-size: 22px; align-items: center; justify-content: center; cursor: pointer;
}
.tb-menu:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.nav-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(16, 38, 61, .35); }
.nav-scrim[hidden] { display: none; }
@media (max-width: 900px) {
  .main-content { margin-inline-start: 0; }
  .tb-menu { display: inline-flex; }
  .sidebar, [dir="ltr"] .sidebar {
    width: min(300px, 86vw); box-shadow: var(--shadow-lg);
    transition: transform .22s ease, visibility .22s; visibility: hidden;
  }
  [dir="rtl"] .sidebar { transform: translateX(100%); }
  [dir="ltr"] .sidebar { transform: translateX(-100%); }
  body.nav-open .sidebar { transform: none; visibility: visible; }
  .page-body { padding: 16px; }
  .top-bar { padding: 10px 16px; min-height: 60px; flex-wrap: nowrap; gap: 10px; }
  .top-bar-title { font-size: 16px; flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .tb-tools { flex-wrap: nowrap; flex: none; }
}
@media (max-width: 480px) {
  /* «+ New» shows its sign only; the word stays for screen readers */
  .tb-new-btn { padding: 0 12px; }
  .tb-new-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 900px) {
  .tb-group { display: none; }
  /* the top-bar menus drop from the bar itself, full width, so none hangs past the edge */
  .tb-new, .tb-account { position: static; }
  .tb-new-menu, .tb-acc-menu { top: calc(100% + 4px); inset-inline: 16px; min-width: 0; }
  .home-side { padding-top: 0; }
  .list-title { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none; }
  .tb-new-btn, .sidebar-link, .hm-bar span, .sidebar, .list-chip, .ha-row, .list-acts .btn { transition: none; }
}