/*
 * Mkutano dashboard.
 * Note: the @font-face + :root token block below is intentionally duplicated
 * from meeting-room.css so this page is self-contained. If a third page ever
 * needs them, lift the shared block into its own stylesheet.
 */

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 700;
  src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  src: url('../fonts/source-serif-var.woff2') format('woff2');
  font-display: swap;
}

/*
 * Brand palette: rgb(4,60,84) as the primary, white as the working surface,
 * red used only where something needs to be noticed (destructive actions,
 * overdue items, the active navigation marker).
 *
 * --surface / --surface-hover / --accent-ink were previously referenced by
 * webinar-public.css, webinar-room.css and new-meeting.css without ever being
 * defined here, so those rules silently resolved to nothing.
 */
:root {
  --bg: #F2F5F7;
  --bg-card: #FFFFFF;
  --bg-inset: #E8EEF2;
  --surface: #FFFFFF;
  --surface-hover: rgba(4,60,84,.045);
  --ink: #0E2029;
  --ink-muted: #4A5C66;
  --ink-faint: #7C8B94;
  --border: #D8E2E8;
  --border-strong: #BBCAD4;
  --accent: #043C54;
  --accent-ink: #032A3B;
  --accent-soft: #E2ECF1;
  --teal: #1B6E60;
  --teal-soft: #DDEDE9;
  --garnet: #B83224;
  --garnet-soft: #FAE5E2;
  --masthead-bg: #043C54;
  --masthead-ink: #FFFFFF;
  --masthead-ink-muted: #A6C0CD;
  --masthead-border: #0A4F6C;
  /* Readable on the navy sidebar, where --accent would disappear. */
  --masthead-accent: #FF6B5A;
  --shadow-sm: 0 1px 2px rgba(4,60,84,.06);
  --shadow-md: 0 10px 28px -14px rgba(4,60,84,.30);
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --font-serif: 'Source Serif 4', Georgia, 'Iowan Old Style', serif;
  --font-sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.tabular { font-variant-numeric: tabular-nums; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[ng-cloak], .ng-cloak { display: none !important; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--masthead-bg);
  color: var(--masthead-ink);
  display: flex;
  flex-direction: column;
  /* Pinned to the viewport. Without this the sidebar stretches to the height of
     the main column, so on a long page its footer — the account menu and the
     way out — sits below the fold and can only be reached by scrolling to the
     very bottom. .side-nav scrolls internally instead. */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  /* The sidebar is now the primary colour itself, so --accent here would be
     invisible against it. */
  border-right: 1px solid var(--masthead-border);
}
.sidebar-brand { padding: 1.1rem 1.15rem .9rem; }
.brand-mark {
  background: #FFFFFF;
  border-radius: 6px;
  padding: .3rem .65rem .32rem;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  display: inline-block;
}
.brand-mark .word {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: #16333E;
}
.brand-mark .tag {
  display: block;
  font-weight: 600;
  font-size: .48rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #DC3B30;
  margin-top: .18rem;
}

.side-nav { flex: 1; overflow-y: auto; padding: .5rem .7rem 1rem; }
.side-category {
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--masthead-ink-muted);
  padding: 1rem .55rem .4rem;
}
.side-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem;
  border-radius: var(--radius-sm);
  color: var(--masthead-ink-muted);
  font-size: .85rem;
  font-weight: 500;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}
.side-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.side-link:hover { background: rgba(255,255,255,.08); color: var(--masthead-ink); }
/* White text on the navy, with a red bar marking the current page — this is
   the "little bit of red" doing navigational work rather than decoration. */
.side-link.active {
  background: rgba(255,255,255,.12);
  color: var(--masthead-ink);
  box-shadow: inset 3px 0 0 var(--masthead-accent);
}
.side-link .chev { margin-left: auto; width: 13px; height: 13px; transition: transform .15s; flex-shrink: 0; }
.side-group.expanded .chev { transform: rotate(90deg); }
.side-sub { max-height: 0; overflow: hidden; transition: max-height .18s ease; padding-left: 2.35rem; }
.side-group.expanded .side-sub { max-height: 220px; }
.side-sub a { display: block; padding: .4rem 0; font-size: .8rem; color: var(--masthead-ink-muted); }
.side-sub a:hover { color: var(--masthead-ink); }
.side-sub a.active { color: var(--masthead-ink); font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .side-sub, .side-link .chev { transition: none; }
}

/* ---------- Main / topbar ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.75rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  flex-wrap: wrap;
}
.topbar h1 { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; }
.topbar .sub { font-size: .82rem; color: var(--ink-muted); margin-top: .2rem; }
.topbar-actions { display: flex; align-items: center; gap: .9rem; }
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: .58rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .84rem;
  font-weight: 600;
  white-space: nowrap;
}
.btn-primary svg { width: 15px; height: 15px; }
.btn-primary:hover { filter: brightness(1.05); }
.user-chip { display: flex; align-items: center; gap: .55rem; padding-left: .9rem; border-left: 1px solid var(--border); }
.user-chip .avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 600; flex-shrink: 0;
}
.user-chip .name { font-size: .82rem; font-weight: 600; }
.user-chip .role { font-size: .72rem; color: var(--ink-faint); }

.dash-content { padding: 1.6rem 1.75rem 2.5rem; max-width: 1320px; width: 100%; }
.state-msg { padding: 2rem 1.75rem; color: var(--ink-muted); }
.state-msg.error { color: var(--garnet); }

/* ---------- Loading ----------
   Replaces the plain "Loading…" line. The spinner is decorative, so the
   status text stays for screen readers only — a silent spinner would leave
   them with no indication that anything is happening. */
.loading-state {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 2.5rem 1.75rem;
  color: var(--ink-muted);
}
.spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.spinner.sm { width: 15px; height: 15px; border-width: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Still turns, slowly, so it never looks frozen — but without the fast motion
   that prompted the preference. */
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- KPI row ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.kpi-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-inset);
  color: var(--ink-muted);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kpi-icon svg { width: 19px; height: 19px; }
.kpi-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .25rem;
}
.kpi-value { font-size: 1.55rem; font-weight: 700; line-height: 1; }

/* ---------- Section layout ---------- */
.dash-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 980px) { .dash-grid { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card + .card { margin-top: 1.25rem; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--border);
}
.card-head h2 { font-size: .95rem; font-weight: 600; }
.card-head .view-all { font-size: .78rem; font-weight: 600; color: var(--accent); }
.card-head .view-all:hover { text-decoration: underline; }
.empty-hint { padding: 1.1rem 1.2rem; font-size: .84rem; color: var(--ink-faint); }

/* ---------- Meetings list ---------- */
.meeting-row {
  display: flex; align-items: center; gap: .9rem;
  padding: .9rem 1.2rem; border-bottom: 1px solid var(--border);
}
.meeting-row:last-child { border-bottom: none; }
.meeting-date-block {
  width: 52px; flex-shrink: 0; text-align: center;
  border-radius: var(--radius-sm); background: var(--bg-inset); padding: .4rem 0;
}
.meeting-date-block .day { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; line-height: 1; }
.meeting-date-block .mon { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.meeting-date-block .yr { font-family: var(--font-mono); font-size: .58rem; color: var(--ink-faint); line-height: 1.2; }
.meeting-info { flex: 1; min-width: 0; }
.meeting-name { font-size: .87rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-meta {
  font-size: .76rem; color: var(--ink-muted); margin-top: .15rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.meeting-meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); }

.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem; border-radius: 99px;
  font-size: .68rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.pill-board { background: var(--accent-soft); color: var(--accent); }
.pill-adhoc { background: var(--bg-inset); color: var(--ink-muted); }
.pill-webinar { background: #E4E9F5; color: #4A5C8C; }
.pill-scheduled { background: var(--teal-soft); color: var(--teal); }
.pill-open { background: var(--bg-inset); color: var(--ink-muted); }
.pill-closed { background: var(--bg-inset); color: var(--ink-faint); }

.meeting-action {
  flex-shrink: 0; font-size: .78rem; font-weight: 600;
  padding: .4rem .8rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); color: var(--ink); background: var(--bg-card);
}
.meeting-action.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.meeting-action:hover { border-color: var(--accent); color: var(--accent); }
.meeting-action.primary:hover { filter: brightness(1.05); color: #fff; }

/* ---------- Action points breakdown ---------- */
.breakdown-bar {
  display: flex; height: 8px; border-radius: 99px; overflow: hidden;
  margin: 1.1rem 1.2rem .3rem; background: var(--bg-inset);
}
.breakdown-bar span { height: 100%; }
.breakdown-list { padding: .3rem 1.2rem 1.1rem; }
.breakdown-row {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 0; border-bottom: 1px solid var(--border); font-size: .84rem;
}
.breakdown-row:last-child { border-bottom: none; }
.breakdown-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.breakdown-row .lbl { flex: 1; color: var(--ink-muted); }
.breakdown-row .val { font-weight: 700; }

/* ---------- Committees ---------- */
.committee-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem 1.2rem; border-bottom: 1px solid var(--border);
}
.committee-row:last-child { border-bottom: none; }
.committee-row.is-current { background: var(--accent-soft); }
.committee-icon {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--teal-soft); color: var(--teal);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.committee-icon svg { width: 15px; height: 15px; }
.committee-text { min-width: 0; }
.committee-name { font-size: .84rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.committee-role { font-size: .72rem; color: var(--ink-faint); }
.committee-tag {
  margin-left: auto; font-size: .66rem; font-weight: 600;
  padding: .1rem .5rem; border-radius: 99px;
  background: var(--bg-inset); color: var(--ink-muted); flex-shrink: 0;
}


/* ---------- Sidebar footer ----------
   Pinned to the bottom of the navy sidebar. .side-nav already takes the
   remaining height with flex:1, so this sits below it without absolute
   positioning. */
.side-foot {
  flex-shrink: 0;
  padding: .75rem .7rem 1rem;
  border-top: 1px solid var(--masthead-border);
  /* Anchors the account menu, which opens upward from here. */
  position: relative;
}

/* The identity is now the control that opens the account menu. */
.side-who {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .45rem .55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: background .15s;
}
.side-who:hover { background: rgba(255, 255, 255, .08); }
.side-who:focus-visible { outline: 2px solid var(--masthead-accent); outline-offset: 2px; }
/* Long names must not push the sidebar wider, so the text column is the part
   that shrinks and the chevron keeps its size. */
.side-who-text { flex: 1; min-width: 0; }
.side-who-chev {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--masthead-ink-muted);
  transition: transform .15s;
}
.side-who[aria-expanded="true"] .side-who-chev { transform: rotate(180deg); }

/* ---- account menu ---- */
.side-menu {
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: calc(100% - .4rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  padding: .3rem;
  z-index: 40;
}
.side-menu[hidden] { display: none; }
.side-menu-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  /* On the light popup surface, not the dark sidebar. */
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.side-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.side-menu-item:hover:not(:disabled) { background: var(--garnet-soft); color: var(--garnet); }
.side-menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-menu-item:disabled { opacity: .6; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .side-who, .side-who-chev, .side-menu-item { transition: none; }
}

.side-who-name {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--masthead-ink);
  /* Long names must not push the sidebar wider. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-who-role {
  display: block;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--masthead-ink-muted);
  margin-top: .1rem;
}

.side-logout {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .55rem;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 500;
  color: var(--masthead-ink-muted);
  text-align: left;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.side-logout svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Red on hover — leaving is the one destructive thing in the sidebar. */
.side-logout:hover:not(:disabled) {
  background: rgba(255,255,255,.08);
  color: var(--masthead-accent);
}
.side-logout:disabled { opacity: .6; cursor: default; }

@media (prefers-reduced-motion: reduce) { .side-logout { transition: none; } }

/* ---------------------------------------------------------------------------
   My Committees cards

   Card height followed content: a committee with a scheduled meeting carries a
   three-line "Next meeting" block, one without shows a single line, so cards
   came out visibly different sizes. Each card is a column that fills its grid
   cell, with the actions pushed to the bottom, so every card matches its
   neighbours whatever it happens to contain.
   --------------------------------------------------------------------------- */

.committee-grid { align-items: stretch; }
/* `.card + .card { margin-top: 1.25rem }` above spaces stacked cards, but in a
   grid the cells already provide the gap — it pushed every card except the very
   first down by 20px, so the first one looked misaligned and oversized. */
.committee-grid > .card + .card { margin-top: 0; }
.committee-grid > .card { display: flex; flex-direction: column; height: 100%; }
.committee-grid > .card > .card-body { display: flex; flex-direction: column; flex: 1; }
/* Takes up whatever slack the shorter cards have, keeping the actions aligned
   across the row rather than floating under the last line of text. */
.committee-grid .committee-actions { margin-top: auto; padding-top: .9rem; }
/* A long committee name must not make one card taller than the rest. */
.committee-grid .committee-name { overflow-wrap: anywhere; }