/* ===================================================================
   BoardHQ — Stylesheet v1
   Brand colours: Black · Red · Grey · White  (same as SHEPHERD)
   Fonts: Plus Jakarta Sans (UI) + Playfair Display (brand mark)
   Layout: Fixed sidebar app shell for authenticated views
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');

:root {
  /* Brand palette — identical to SHEPHERD */
  --red:          #CC0000;
  --red-dark:     #A80000;
  --red-hover:    #B20000;
  --red-tint:     #FFF0F0;
  --red-mid:      rgba(204,0,0,0.12);
  --red-on-dark:  #FF8A8A;   /* brand red, legible on the dark sidebar */

  --black:        #1E293B;
  --charcoal:     #263346;
  --charcoal-mid: #334155;

  --grey-dark:    #374151;
  --grey:         #6B7280;
  --grey-light:   #9CA3AF;
  --silver:       #D1D5DB;
  --silver-light: #F0F0F0;

  --text-dark:    #111111;
  --text-mid:     #374151;
  --text-light:   #6B7280;

  --white:        #FFFFFF;
  --off-white:    #F8F9FA;
  --border:       #E5E7EB;
  --border-light: #F0F2F5;
  --border-mid:   #D8DDE4;   /* was referenced in 3 rules but never defined */

  --radius:       14px;
  --radius-sm:    9px;
  --radius-pill:  999px;
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.06);
  --shadow:       0 1px 4px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-md:    0 2px 8px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);

  /* Sidebar dimensions */
  --sidebar-w:    240px;
  --topbar-h:     56px;

  /* ---------------------------------------------------------------
     Semantic icon palette

     One colour per area of the app, used everywhere that area appears.
     A board member learns them once: blue is always a meeting, amber is
     always a document. Grey icons were the problem — a grey calendar and
     a grey paperclip read as the same object at a glance.

     Each colour has a matching tint for the pill background behind the
     glyph. All foreground values clear 4.5:1 on white.
     --------------------------------------------------------------- */
  --c-meet:       #2563EB;   --c-meet-tint:  #E8EFFD;   /* meetings, calendar */
  --c-doc:        #C2650B;   --c-doc-tint:   #FBEEDD;   /* documents, attachments */
  --c-act:        #047857;   --c-act-tint:   #DEF2EA;   /* action items, done */
  --c-res:        #6D28D9;   --c-res-tint:   #EEE8FC;   /* resolutions, votes */
  --c-min:        #475569;   --c-min-tint:   #E8ECF1;   /* minutes, notes */
  --c-mem:        #0E7490;   --c-mem-tint:   #DEF0F4;   /* people, boards */

  /* Destructive red, deliberately distinct from brand --red.
     Brand red = "the main thing to do" (filled).
     Danger red = "be careful" (outline or tint only, never filled).
     Filled vs outlined stays legible even if the two reds don't. */
  --c-danger:     #C1121F;   --c-danger-tint: #FBE6E7;
}

/* ===================================================================
   BASE
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: var(--off-white);
  color: var(--text-dark);
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 700;
  color: var(--black);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-top: 0;
}

.brand-serif {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); text-decoration: underline; }

/* ===================================================================
   APP SHELL  (sidebar layout for authenticated pages)
   =================================================================== */

/* Sidebar
   ------------------------------------------------------------------
   The panel surface and the tints that sit on it are variables so the
   organisation/board switcher can be lifted off the panel without
   hunting down a dozen scattered rgba() values.

   The panel itself stays --black (#1E293B). Only the switcher block is
   lighter — it is the one part of the sidebar that answers "where am
   I", so it should read as a surface sitting on the panel rather than
   as another nav row. */
.sidebar {
  --sb-bg:          var(--black);
  --sb-rule:        rgba(255,255,255,0.07);   /* hairline dividers */
  --sb-muted:       rgba(255,255,255,0.35);
  --sb-tagline:     rgba(255,255,255,0.40);
  /* The switcher surface. Was 0.06 — so close to the panel that the
     block holding the organisation and board read as empty space. */
  --sb-tint:        rgba(255,255,255,0.15);
  --sb-tint-border: rgba(255,255,255,0.20);
  --sb-tint-hover:  rgba(255,255,255,0.21);

  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--sb-bg);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 1.1rem 1.25rem 0.9rem;
  border-bottom: 1px solid var(--sb-rule);
  text-decoration: none;
}
.sidebar-brand:hover { text-decoration: none; }

/* Full wordmark logo in sidebar */
.sidebar-brand-logo {
  display: flex;
  justify-content: center;
  padding: 1rem 1.25rem;
}
.sidebar-logo-img {
  width: 100px;
  height: auto;
  border-radius: 6px;
}

.sidebar-brand .brand-icon {
  width: 34px;
  height: 34px;
  background: var(--red);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.sidebar-brand .brand-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
  line-height: 1;
}

.sidebar-brand .brand-tagline {
  font-size: 0.6rem;
  color: var(--sb-tagline);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
}

/* Org switcher pill */
.org-pill {
  margin: 0.75rem 1rem;
  background: var(--sb-tint);
  border: 1px solid var(--sb-tint-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.org-pill:hover { background: var(--sb-tint-hover); text-decoration: none; }

/* The switcher is a <button>. This resets the UA button styling *without*
   touching background or border — the markup used to do this inline, which
   overrode .org-pill's surface and made the block indistinguishable from
   the sidebar behind it. */
button.org-pill {
  width: auto;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
button.org-pill::after { margin-left: auto; }   /* push Bootstrap's caret right */

/* Current board, under the organisation name */
.org-board-line {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  line-height: 1.35;
}
.org-board-line .board-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-width: 1px;
}
.org-pill .org-avatar {
  width: 26px; height: 26px;
  background: var(--red);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}
.org-pill .org-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--white);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-pill .org-chevron {
  color: var(--sb-muted);
  font-size: 0.7rem;
}

/* Nav groups */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  scrollbar-width: none;
}
.sidebar-nav::-webkit-scrollbar { display: none; }

.nav-group-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 0.5rem 0.35rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0.52rem 0.75rem;
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.65);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  text-decoration: none;
  margin-bottom: 1px;
}
.sidebar-link i { font-size: 1rem; flex-shrink: 0; width: 18px; text-align: center; }
.sidebar-link:hover {
  background: rgba(255,255,255,0.08);
  color: var(--white);
  text-decoration: none;
}
.sidebar-link.active {
  background: rgba(204,0,0,0.18);
  color: var(--white);
  border: 1px solid rgba(204,0,0,0.3);
}
/* Not --red: #CC0000 on this panel is about 1.6:1, which made the active
   icon the hardest glyph in the app to see. --red-on-dark is the brand red
   raised to carry on a dark surface, and is only ever used against one. */
.sidebar-link.active i { color: var(--red-on-dark); }

/* Badge on nav link */
.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
}

/* Sidebar footer */
.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
}
.sidebar-user:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.sidebar-user .user-avatar {
  width: 30px; height: 30px;
  background: var(--charcoal-mid);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
  flex-shrink: 0;
}
.sidebar-user .user-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.sidebar-user .user-role {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Main content area */
.app-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top bar (mobile toggle + breadcrumb) */
.app-topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-mid);
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0.2rem;
}

.topbar-breadcrumb {
  font-size: 0.82rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar-breadcrumb a { color: var(--text-light); }
.topbar-breadcrumb a:hover { color: var(--red); text-decoration: none; }
.topbar-breadcrumb .bc-sep { color: var(--border); }
.topbar-breadcrumb .bc-current { color: var(--text-dark); font-weight: 600; }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* Page body */
.app-body {
  flex: 1;
  padding: 1.75rem 1.75rem 3rem;
}

/* Page header (within app-body) */
.page-header {
  margin-bottom: 1.75rem;
}
.page-header h1 {
  font-size: 1.65rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
}
.page-header p { color: var(--text-light); margin: 0; font-size: 0.88rem; }

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 199;
}

/* Mobile sidebar */
@media (max-width: 991px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }
  .app-main { margin-left: 0; }
  .topbar-toggle { display: flex; }
  .app-body { padding: 1.25rem 1rem 3rem; }
}

/* ===================================================================
   PUBLIC NAVBAR  (for auth pages / landing)
   =================================================================== */
.pub-navbar {
  background: var(--black);
  padding: 0.7rem 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05);
}
.pub-navbar .navbar-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--white) !important;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
}
.pub-navbar .brand-icon {
  width: 32px; height: 32px;
  background: var(--red);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
}
.pub-navbar .nav-link {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.88rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem !important;
  border-radius: 7px;
  transition: all 0.15s;
}
.pub-navbar .nav-link:hover { color: var(--white) !important; background: rgba(255,255,255,0.08); }
.pub-navbar .btn-nav-cta {
  background: var(--red);
  color: var(--white) !important;
  font-weight: 700;
  padding: 0.38rem 1.1rem !important;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  transition: background 0.15s;
}
.pub-navbar .btn-nav-cta:hover { background: var(--red-hover); }

/* ===================================================================
   AUTH PAGES
   =================================================================== */
.auth-wrapper {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.auth-header {
  background: var(--black);
  padding: 2.25rem 2rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.auth-header::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(ellipse, rgba(204,0,0,0.2) 0%, transparent 65%);
  pointer-events: none;
}
.auth-header .auth-icon {
  width: 52px; height: 52px;
  background: var(--red);
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto 1rem;
  box-shadow: 0 4px 20px rgba(204,0,0,0.4);
  position: relative;
}
.auth-header h2 {
  color: var(--white);
  margin: 0 0 0.25rem;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
}
.auth-header p { color: rgba(255,255,255,0.6); margin: 0; font-size: 0.88rem; }
.auth-body { padding: 2rem; }

/* Wide auth card for register */
.auth-card-wide { max-width: 520px; }

/* ===================================================================
   STAT CARDS (dashboard)
   =================================================================== */
.stat-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-top: 3px solid var(--border);
  transition: box-shadow 0.18s, transform 0.15s;
}
.stat-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.stat-card.accent-black { border-top-color: var(--black); }
.stat-card.accent-red   { border-top-color: var(--red); }
.stat-card.accent-green { border-top-color: #16A34A; }
.stat-card.accent-blue  { border-top-color: #2563EB; }
.stat-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.stat-icon.red   { background: var(--red-tint);    color: var(--red); }
.stat-icon.black { background: rgba(30,41,59,0.08); color: var(--black); }
.stat-icon.green { background: #F0FDF4;             color: #16A34A; }
.stat-icon.amber { background: #FFFBEB;             color: #D97706; }
.stat-icon.blue  { background: #EFF6FF;             color: #2563EB; }

/* Semantic variants — prefer these over the colour-named ones above, so a
   meeting is the same blue on the dashboard as it is in the meeting tabs. */
.stat-icon.meet   { background: var(--c-meet-tint);   color: var(--c-meet); }
.stat-icon.doc    { background: var(--c-doc-tint);    color: var(--c-doc); }
.stat-icon.act    { background: var(--c-act-tint);    color: var(--c-act); }
.stat-icon.res    { background: var(--c-res-tint);    color: var(--c-res); }
.stat-icon.min    { background: var(--c-min-tint);    color: var(--c-min); }
.stat-icon.mem    { background: var(--c-mem-tint);    color: var(--c-mem); }
.stat-icon.danger { background: var(--c-danger-tint); color: var(--c-danger); }

.stat-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.stat-label { font-size: 0.78rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.2rem; }
.stat-value { font-size: 1.7rem; font-weight: 800; color: var(--black); line-height: 1; letter-spacing: -0.03em; }
.stat-sub   { font-size: 0.78rem; color: var(--text-light); margin-top: 0.2rem; }

/* ===================================================================
   CARDS
   =================================================================== */
.card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}
.card-header {
  background: var(--white);
  border-bottom: 1px solid var(--border-light);
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 1rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-header h5, .card-header h6 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
.card-header .card-actions { margin-left: auto; }
.card-body { padding: 1.35rem; }

/* Dark card header */
.card-header-dark {
  background: var(--black);
  border-radius: var(--radius) var(--radius) 0 0 !important;
  padding: 1rem 1.35rem;
  position: relative;
  overflow: hidden;
}
.card-header-dark::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 60%;
  background: linear-gradient(90deg, transparent, rgba(204,0,0,0.15));
  pointer-events: none;
}
.card-header-dark h5, .card-header-dark h6 { color: var(--white); margin: 0; font-weight: 700; }
.card-header-dark p { color: rgba(255,255,255,0.6); margin: 0; font-size: 0.82rem; }

/* ===================================================================
   MEETING CARDS (list view)
   =================================================================== */
.meeting-card {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.15s;
  display: block;
  text-decoration: none;
  color: inherit;
}
.meeting-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}
.meeting-card-header {
  background: var(--black);
  padding: 1rem 1.25rem;
  position: relative;
  overflow: hidden;
}
.meeting-card-header::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 55%;
  background: linear-gradient(90deg, transparent, rgba(204,0,0,0.18));
  pointer-events: none;
}
.meeting-card-header .meeting-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--red);
  color: var(--white);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.meeting-card-header h6 { color: var(--white); margin: 0; font-size: 0.97rem; font-weight: 700; }
.meeting-card-body { padding: 1rem 1.25rem; }

/* ===================================================================
   STATUS BADGES
   =================================================================== */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.badge-draft      { background: var(--border-light); color: var(--grey-dark); }
.badge-scheduled  { background: #EFF6FF; color: #1D4ED8; }
.badge-in-progress{ background: #FFFBEB; color: #B45309; }
.badge-completed  { background: var(--black); color: var(--white); }
.badge-passed     { background: #F0FDF4; color: #15803D; }
.badge-failed     { background: var(--red-tint); color: var(--red-dark); }
.badge-coat       { background: rgba(204,0,0,0.1); color: var(--red-dark); border: 1px solid rgba(204,0,0,0.2); }
.badge-trial      { background: #FFFBEB; color: #92400E; }
.badge-active     { background: #F0FDF4; color: #15803D; }

/* ===================================================================
   TABLES
   =================================================================== */
.table-boardhq th {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--off-white);
  border-bottom: 2px solid var(--border-light);
  padding: 0.65rem 1rem;
}
.table-boardhq td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
  font-size: 0.9rem;
}
.table-boardhq tbody tr:last-child td { border-bottom: none; }
.table-boardhq tbody tr:hover { background: var(--off-white); }

/* ===================================================================
   AGENDA ITEMS
   =================================================================== */
.agenda-item {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.agenda-item:hover { border-color: var(--silver); }

.agenda-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.8rem 1rem;
  cursor: pointer;
}
.agenda-order {
  width: 24px; height: 24px;
  background: var(--black);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
}
.agenda-item-title { font-weight: 600; font-size: 0.9rem; flex: 1; }
.agenda-item-meta { font-size: 0.75rem; color: var(--text-light); display: flex; align-items: center; gap: 10px; }
.agenda-item-body { padding: 0 1rem 1rem 1rem; border-top: 1px solid var(--border-light); }

/* Item type dot */
.type-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* .type-general and .type-other previously had no rule at all, so the dot
   inherited no background and rendered invisible — and 'general' is by far
   the most common type (65 of 90 real agenda items). */
.type-general      { background: var(--border); }
.type-discussion   { background: var(--grey-light); }
.type-resolution   { background: var(--red); }
.type-information  { background: #3B82F6; }
.type-prayer       { background: #8B5CF6; }
.type-other        { background: var(--silver); }

/* ===================================================================
   RESOLUTION / VOTING
   =================================================================== */
.resolution-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 0.65rem;
}
.resolution-card.open { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-mid); }
.resolution-card.passed { border-color: #16A34A; }
.resolution-card.failed { border-color: var(--grey-light); }

.vote-bar {
  height: 8px;
  background: var(--border-light);
  border-radius: 99px;
  overflow: hidden;
  display: flex;
  margin: 8px 0;
}
.vote-yes   { background: #16A34A; }
.vote-no    { background: var(--red); }
.vote-abst  { background: var(--grey-light); }

.vote-btn {
  padding: 0.38rem 1.1rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.15s;
}
.vote-btn.yes   { border-color: #16A34A; color: #16A34A; background: transparent; }
.vote-btn.yes:hover, .vote-btn.yes.selected   { background: #16A34A; color: white; }
.vote-btn.no    { border-color: var(--red);    color: var(--red);    background: transparent; }
.vote-btn.no:hover, .vote-btn.no.selected     { background: var(--red); color: white; }
.vote-btn.abst  { border-color: var(--grey);  color: var(--grey);  background: transparent; }
.vote-btn.abst:hover, .vote-btn.abst.selected { background: var(--grey); color: white; }

/* ===================================================================
   MINUTES EDITOR
   =================================================================== */
.minutes-toolbar {
  background: var(--off-white);
  border: 1px solid var(--border-light);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: 0.5rem 0.75rem;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.minutes-toolbar button {
  padding: 0.28rem 0.6rem;
  border: 1px solid var(--border);
  background: var(--white);
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: all 0.12s;
}
.minutes-toolbar button:hover { background: var(--black); color: var(--white); border-color: var(--black); }

.minutes-editor {
  border: 1px solid var(--border-light);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  min-height: 400px;
  padding: 1.25rem;
  background: var(--white);
  font-size: 0.95rem;
  line-height: 1.8;
  outline: none;
}
.minutes-editor:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-mid); }

/* ===================================================================
   ACTION ITEMS
   =================================================================== */
.action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-light);
}
.action-item:last-child { border-bottom: none; }
.action-check {
  width: 18px; height: 18px;
  border: 2px solid var(--border);
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.action-check:hover { border-color: var(--red); }
.action-check.done { background: var(--black); border-color: var(--black); color: white; }
.action-desc { flex: 1; font-size: 0.88rem; }
.action-desc.done { text-decoration: line-through; color: var(--text-light); }
.action-assignee { font-size: 0.75rem; color: var(--text-light); margin-top: 2px; }
.action-due { font-size: 0.72rem; color: var(--grey); }

/* ===================================================================
   BUTTONS
   =================================================================== */
.btn {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
}
.btn-primary {
  background: var(--black); border-color: var(--black); color: var(--white);
  padding: 0.52rem 1.3rem; transition: all 0.18s;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--charcoal-mid); border-color: var(--charcoal-mid);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.btn-danger-custom {
  background: var(--red); border-color: var(--red); color: var(--white);
  padding: 0.52rem 1.3rem; transition: all 0.18s;
}
.btn-danger-custom:hover { background: var(--red-dark); border-color: var(--red-dark); color: var(--white); transform: translateY(-1px); }

.btn-outline-brd {
  border: 1.5px solid var(--border); color: var(--text-mid);
  background: var(--white); padding: 0.5rem 1.2rem;
}
.btn-outline-brd:hover { border-color: var(--black); color: var(--black); background: var(--off-white); }

.btn-sm-icon {
  width: 32px; height: 32px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-mid);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-sm-icon:hover { background: var(--black); color: var(--white); border-color: var(--black); }

/* ===================================================================
   FORMS
   =================================================================== */
.form-control, .form-select {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.58rem 0.9rem;
  font-size: 0.93rem;
  background: var(--white);
  transition: border-color 0.2s, box-shadow 0.2s;
  color: var(--text-dark);
}
.form-control:focus, .form-select:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-mid);
  outline: none;
}
.form-label { font-weight: 600; color: var(--text-mid); font-size: 0.85rem; margin-bottom: 0.3rem; }
.form-text  { font-size: 0.78rem; color: var(--text-light); }

/* ===================================================================
   BILLING / PRICING
   =================================================================== */
.pricing-card {
  background: var(--white);
  border: 2px solid var(--border-light);
  border-radius: var(--radius);
  padding: 1.75rem;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s;
  height: 100%;
}
.pricing-card:hover { border-color: var(--silver); box-shadow: var(--shadow-md); }
.pricing-card.featured {
  border-color: var(--black);
  box-shadow: var(--shadow-md);
}
.pricing-featured-badge {
  position: absolute;
  top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--black);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.pricing-plan-name { font-weight: 800; font-size: 1.05rem; margin-bottom: 0.25rem; }
.pricing-desc      { font-size: 0.82rem; color: var(--text-light); margin-bottom: 1.25rem; }
.pricing-amount {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--black);
  letter-spacing: -0.04em;
  line-height: 1;
}
.pricing-amount span { font-size: 0.9rem; font-weight: 500; color: var(--text-light); letter-spacing: 0; }
.pricing-annual-note { font-size: 0.75rem; color: var(--text-light); margin-top: 0.2rem; margin-bottom: 1.25rem; }
.pricing-annual-note strong { color: #16A34A; }

.pricing-toggle {
  display: inline-flex;
  background: var(--border-light);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.pricing-toggle button {
  padding: 0.4rem 1.25rem;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-light);
  transition: all 0.2s;
}
.pricing-toggle button.active {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-xs);
}

/* ===================================================================
   FLASH MESSAGES
   =================================================================== */
.flash-container {
  position: fixed;
  top: 70px; right: 1rem;
  z-index: 9999;
  max-width: 370px;
}
.flash-msg {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; gap: 10px;
  font-size: 0.875rem; font-weight: 500;
  animation: slideIn 0.3s cubic-bezier(0.22,1,0.36,1);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.flash-success { background: #F0FDF4; color: #166534; border-left: 3px solid #16A34A; }
.flash-info    { background: #EFF6FF; color: #1E40AF; border-left: 3px solid #3B82F6; }
.flash-warning { background: #FFFBEB; color: #92400E; border-left: 3px solid #F59E0B; }
.flash-danger  { background: var(--red-tint); color: var(--red-dark); border-left: 3px solid var(--red); }

/* ===================================================================
   EMPTY STATES
   =================================================================== */
.empty-state {
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--text-light);
}
.empty-state .empty-icon {
  font-size: 2.5rem;
  opacity: 0.25;
  margin-bottom: 1rem;
  display: block;
}
.empty-state h5 { color: var(--text-mid); font-size: 1rem; margin-bottom: 0.35rem; }
.empty-state p  { font-size: 0.875rem; margin-bottom: 1.25rem; }

/* ===================================================================
   FOOTER  (public pages)
   =================================================================== */
footer {
  background: var(--black);
  color: rgba(255,255,255,0.45);
  padding: 1.75rem 0;
  font-size: 0.82rem;
  text-align: center;
  margin-top: 4rem;
}
footer a { color: rgba(255,255,255,0.65); }

/* ===================================================================
   UTILITIES
   =================================================================== */
.text-red     { color: var(--red) !important; }
.text-muted-sm{ font-size: 0.8rem; color: var(--text-light); }
.divider      { border: none; border-top: 1px solid var(--border-light); margin: 1.5rem 0; }
.avatar-initials {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--charcoal-mid);
  color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700;
}

/* ===================================================================
   STATS GRID
   =================================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

/* ===================================================================
   ROLE BADGES
   =================================================================== */
.badge-role {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}
.badge-role.badge-admin      { background: rgba(30,41,59,0.1);   color: var(--black); }
.badge-role.badge-member     { background: var(--border-light);  color: var(--grey-dark); }
.badge-role.badge-observer   { background: var(--border-light);  color: var(--grey-dark); }
.badge-role.badge-chair      { background: rgba(204,0,0,0.08);   color: var(--red-dark); }
.badge-role.badge-treasurer  { background: rgba(5,150,105,0.08); color: #065F46; }
.badge-role.badge-director   { background: rgba(30,41,59,0.06);  color: var(--black); }
.badge-role.badge-trustee    { background: rgba(30,41,59,0.06);  color: var(--black); }
.badge-role.badge-officer    { background: rgba(30,41,59,0.06);  color: var(--black); }

/* Additional status badge variants */
.badge-cancelled { background: #FEF2F2; color: #991B1B; }
.badge-past_due  { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.badge-open      { background: #EFF6FF; color: #1D4ED8; }
.badge-starter   { background: var(--border-light); color: var(--grey-dark); }
.badge-standard  { background: rgba(30,41,59,0.08); color: var(--black); }
.badge-unlimited { background: rgba(204,0,0,0.08); color: var(--red-dark); }
.badge-coat_access { background: rgba(204,0,0,0.1); color: var(--red-dark); border: 1px solid rgba(204,0,0,0.2); }

/* ===================================================================
   DANGER GHOST BUTTON
   =================================================================== */
.btn-danger-ghost {
  border-color: var(--border);
  background: var(--white);
  color: var(--text-light);
}
.btn-danger-ghost:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}

/* ===================================================================
   FORM HELPERS
   =================================================================== */
.text-optional {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-light);
}
label.required::after,
.form-label.required::after {
  content: ' *';
  color: var(--red);
  font-weight: 700;
}

/* ===================================================================
   INFO ROWS (key / value pairs in cards)
   =================================================================== */
.info-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 0.88rem;
}
.info-row:last-child { border-bottom: none; }
.info-label {
  min-width: 90px;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
}
.info-value { color: var(--text-dark); flex: 1; }

/* ===================================================================
   PAGE HEADER  (flex variant for title + action button)
   =================================================================== */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.page-header h1 {
  font-size: 1.65rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
}
.page-header p { color: var(--text-light); margin: 0; font-size: 0.88rem; }

/* ===================================================================
   NAV TABS  (Bootstrap overrides for meeting detail tabs)
   =================================================================== */
.nav-tabs .nav-link {
  color: var(--text-light);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  transition: color 0.15s, border-color 0.15s;
}
.nav-tabs .nav-link:hover { color: var(--black); }
.nav-tabs .nav-link.active {
  color: var(--black);
  border-bottom-color: var(--red);
  background: none;
}

/* ===================================================================
   CARD FOOTER
   =================================================================== */
.card-footer {
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0.85rem 1.35rem;
  background: var(--white);
  border-top: 1px solid var(--border-light);
}

/* ===================================================================
   PAGINATION  (Bootstrap overrides)
   =================================================================== */
.pagination .page-link {
  color: var(--text-mid);
  border-color: var(--border-light);
  font-size: 0.83rem;
  font-weight: 600;
}
.pagination .page-item.active .page-link {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}
.pagination .page-link:hover { background: var(--off-white); color: var(--black); }

/* ===================================================================
   MASQUERADE BANNER  (superadmin managing an org)
   =================================================================== */
.masquerade-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #f59e0b;
  color: #1c1917;
  text-align: center;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.masquerade-exit {
  display: inline-flex;
  align-items: center;
  background: rgba(0,0,0,0.15);
  border: none;
  border-radius: 4px;
  color: #1c1917;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  cursor: pointer;
}
.masquerade-exit:hover { background: rgba(0,0,0,0.25); }
body:has(.masquerade-banner) .app-topbar { top: 34px; }
body:has(.masquerade-banner) .sidebar { top: 34px; }
body:has(.masquerade-banner) .sidebar-overlay { top: 34px; }

/* ===================================================================
   BOARD SWITCHER  (sidebar)
   =================================================================== */
.board-switcher {
  padding: 0 0.75rem 0.5rem;
}
.board-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  cursor: default;
}
.board-pill-btn {
  cursor: pointer;
  transition: background 0.15s;
}
.board-pill-btn:hover,
.board-pill-btn:focus {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.18);
}
.board-pill-btn::after { display: none; }
.board-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.2);
}
.board-pill-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board-gov-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.board-switcher-menu {
  min-width: 210px;
  padding: 0.35rem 0;
  border: 1px solid var(--border-light);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-radius: 10px;
}
.board-switch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  color: var(--text-dark);
}
.board-switch-item:hover { background: var(--off-white); }
.board-switch-item.active { background: var(--off-white); font-weight: 700; color: var(--black); }
.board-switch-item .bi-check { margin-left: auto; color: var(--red); }

/* ===================================================================
   BOARD CARDS  (admin/boards.html)
   =================================================================== */
.board-card { transition: box-shadow 0.15s; }
.board-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.board-card-inactive { opacity: 0.55; }
.board-color-dot-lg {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* ===================================================================
   INTER-BOARD REPORTS
   =================================================================== */

/* Section labels */
.section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Inbox count badge next to section label */
.inbox-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--red);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
}
.inbox-count-light { background: var(--border-mid); color: var(--text-mid); }

/* Nav badge alert variant */
.nav-badge-alert {
  background: var(--red);
  color: white;
}

/* Report cards */
.report-card { transition: box-shadow 0.12s; }
.report-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.07); }
.report-card-received { border-left: 3px solid var(--red); }
.report-card-draft { border-left: 3px solid var(--border-mid); }
.report-list-row:hover { background: var(--off-white); }

/* Direction badge (arrow icon) */
.report-direction-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.report-direction-upward { color: #059669; background: #d1fae5; }
.report-direction-downward { color: #2563eb; background: #dbeafe; }

/* From/to label */
.report-from-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
}

/* Status pill */
.report-status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.status-draft    { background: #f1f5f9; color: #64748b; }
.status-sent     { background: #fef9c3; color: #854d0e; }
.status-open     { background: #fee2e2; color: #991b1b; }
.status-acknowledged { background: #dbeafe; color: #1e40af; }
.status-responded { background: #d1fae5; color: #065f46; }
.status-resolved  { background: #f1f5f9; color: #64748b; }

/* Empty state inline (single line) */
.empty-state-inline {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: var(--off-white);
  border-radius: var(--radius);
  font-size: 0.85rem;
  color: var(--text-light);
  border: 1px solid var(--border-light);
}
.empty-state-inline i { font-size: 1rem; flex-shrink: 0; }

/* Report summary text area */
.report-summary {
  font-size: 0.9rem;
  color: var(--text-dark);
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Report items */
.report-item {
  padding: 1rem 1.1rem;
  background: var(--off-white);
  border-radius: 10px;
  border: 1px solid var(--border-light);
}
.report-item-responded {
  border-color: #bbf7d0;
  background: #f0fdf4;
}
.report-item-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--black);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.report-item-question {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.5;
}
.report-item-response {
  background: white;
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  border: 1px solid #bbf7d0;
}
.report-response-text {
  font-size: 0.85rem;
  color: var(--text-dark);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* Draft form item row */
.report-item-draft {
  padding: 0.5rem 0.75rem;
  background: var(--off-white);
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

/* Direction selector on new report form */
.direction-option { flex: 1; }
.direction-label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--border-light);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.85rem;
  width: 100%;
}
.direction-label:hover { border-color: var(--border-mid); background: var(--off-white); }
.direction-option.selected .direction-label {
  border-color: var(--black);
  background: var(--off-white);
}
.direction-label i { font-size: 1.3rem; margin-top: 1px; flex-shrink: 0; }

/* ===================================================================
   ICON SYSTEM

   Every icon in the content area carries the colour of the thing it
   represents. Two forms:

     <i class="bi bi-calendar3 ico ico-meet"></i>          bare glyph
     <span class="ico-pill ico-meet"><i class="bi bi-calendar3"></i></span>

   The pill is what makes an icon findable — a coloured glyph on a soft
   tint of the same hue scans far faster than a grey glyph on white.
   Use the pill wherever the icon is the primary marker for a row, card
   or section; use the bare glyph inline next to text.
   =================================================================== */

.ico { flex-shrink: 0; line-height: 1; }

.ico-meet   { color: var(--c-meet); }
.ico-doc    { color: var(--c-doc); }
.ico-act    { color: var(--c-act); }
.ico-res    { color: var(--c-res); }
.ico-min    { color: var(--c-min); }
.ico-mem    { color: var(--c-mem); }
.ico-danger { color: var(--c-danger); }

/* Tinted pill — the memorable form */
.ico-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  line-height: 1;
}
.ico-pill i { font-size: 0.95rem; }
.ico-pill.ico-sm { width: 26px; height: 26px; border-radius: 7px; }
.ico-pill.ico-sm i { font-size: 0.8rem; }
.ico-pill.ico-lg { width: 40px; height: 40px; border-radius: 11px; }
.ico-pill.ico-lg i { font-size: 1.15rem; }

.ico-pill.ico-meet   { background: var(--c-meet-tint); }
.ico-pill.ico-doc    { background: var(--c-doc-tint); }
.ico-pill.ico-act    { background: var(--c-act-tint); }
.ico-pill.ico-res    { background: var(--c-res-tint); }
.ico-pill.ico-min    { background: var(--c-min-tint); }
.ico-pill.ico-mem    { background: var(--c-mem-tint); }
.ico-pill.ico-danger { background: var(--c-danger-tint); }

/* -------------------------------------------------------------------
   Icon buttons

   An icon-only control has to look pressable, or people don't try it.
   The tint supplies that affordance without adding a border. Always
   pair with a title attribute — an icon alone is not a label.
   ------------------------------------------------------------------- */
.btn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--off-white);
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.13s, color 0.13s;
  flex-shrink: 0;
}
.btn-ico i { font-size: 0.85rem; line-height: 1; }
.btn-ico:hover { background: var(--border-light); color: var(--text-dark); }
.btn-ico:focus-visible { outline: 2px solid var(--c-meet); outline-offset: 2px; }

.btn-ico.btn-ico-meet:hover   { background: var(--c-meet-tint);   color: var(--c-meet); }
.btn-ico.btn-ico-doc:hover    { background: var(--c-doc-tint);    color: var(--c-doc); }
.btn-ico.btn-ico-act:hover    { background: var(--c-act-tint);    color: var(--c-act); }
.btn-ico.btn-ico-res:hover    { background: var(--c-res-tint);    color: var(--c-res); }
.btn-ico.btn-ico-danger:hover { background: var(--c-danger-tint); color: var(--c-danger); }

/* Always-on tinted variants, for controls that should read as coloured
   at rest rather than only on hover. */
.btn-ico.is-meet   { background: var(--c-meet-tint);   color: var(--c-meet); }
.btn-ico.is-act    { background: var(--c-act-tint);    color: var(--c-act); }
.btn-ico.is-res    { background: var(--c-res-tint);    color: var(--c-res); }
.btn-ico.is-danger { background: var(--c-danger-tint); color: var(--c-danger); }

/* -------------------------------------------------------------------
   Destructive buttons — outline only, never filled. A solid red button
   means "the main action"; an outlined one means "be careful".
   ------------------------------------------------------------------- */
.btn-danger-outline {
  background: transparent;
  color: var(--c-danger);
  border: 1px solid var(--c-danger);
}
.btn-danger-outline:hover {
  background: var(--c-danger-tint);
  color: var(--c-danger);
  border-color: var(--c-danger);
}

/* ===================================================================
   BUTTON SYSTEM

   Five forms, and no others. Anything that needed a sixth was a sign the
   page was inventing rather than choosing.

     .btn-primary          filled black — the one thing you came to do.
                           One per page, never two.
     .btn-outline-brd      outlined — everything else that is a real action.
     .btn-ghost            text only — tertiary; cancel, skip, "not now".
     .btn-danger-outline   outlined danger red — destructive, sitting beside
                           other controls. Never filled there.
     .btn-ico              icon only — row actions. Always give it a title.

   Filled danger (.btn-danger-custom) is reserved for a dedicated
   confirmation page, where deleting IS the primary action and there is
   nothing beside it to confuse it with. That is the one place a red fill
   is honest.

   The block below also re-points Bootstrap's own button classes at these,
   because a stray .btn-secondary was rendering in Bootstrap grey-blue and
   reading as a different design language on the same screen.
   =================================================================== */

/* Tertiary — text only */
.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-mid);
  padding: 0.5rem 0.9rem;
}
.btn-ghost:hover {
  background: var(--off-white);
  color: var(--text-dark);
  border-color: transparent;
}

/* Filled danger — dedicated confirmation pages only. Retinted from brand
   --red to --c-danger so "destructive" and "BoardHQ" are not the same red. */
.btn-danger-custom {
  background: var(--c-danger);
  border-color: var(--c-danger);
  color: var(--white);
}
.btn-danger-custom:hover,
.btn-danger-custom:focus {
  background: #9E0E19;
  border-color: #9E0E19;
  color: var(--white);
}

/* Icon-only danger, used in rows. Muted at rest so a list of delete icons
   isn't a wall of red; unambiguous on hover. Was --text-light, which was
   too faint to find. */
.btn-danger-ghost {
  border-color: var(--border);
  background: var(--white);
  color: var(--grey);
}
.btn-danger-ghost:hover,
.btn-danger-ghost:focus {
  background: var(--c-danger-tint);
  border-color: var(--c-danger);
  color: var(--c-danger);
}

/* -------------------------------------------------------------------
   Bootstrap aliases

   These classes appear a handful of times across the templates. Rather
   than hunt every usage now, point them at the house styles so nothing
   renders in Bootstrap's palette. Template usages migrate gradually; the
   look is already correct either way.
   ------------------------------------------------------------------- */
.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary,
.btn-outline {
  border: 1.5px solid var(--border);
  color: var(--text-mid);
  background: var(--white);
  padding: 0.5rem 1.2rem;
}
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline:hover {
  border-color: var(--black);
  color: var(--black);
  background: var(--off-white);
}

.btn-danger,
.btn-outline-danger {
  background: transparent;
  color: var(--c-danger);
  border: 1px solid var(--c-danger);
}
.btn-danger:hover,
.btn-outline-danger:hover,
.btn-danger:focus,
.btn-outline-danger:focus {
  background: var(--c-danger-tint);
  color: var(--c-danger);
  border-color: var(--c-danger);
}

/* Keyboard focus must be visible on every form. Bootstrap's default ring
   is its own blue, which reads as foreign here. */
.btn:focus-visible,
.btn-ghost:focus-visible,
.btn-danger-outline:focus-visible {
  outline: 2px solid var(--c-meet);
  outline-offset: 2px;
  box-shadow: none;
}

/* ===================================================================
   PAGE HEAD

   The one place a page states what it is and offers its primary action.
   Fixed position on every page — title left, action hard right — so the
   main button never moves between screens.

   Replaces the old mix of .page-header and the topbar action slot, where
   some pages put the button top-right, some inside the content, and some
   in both places.
   =================================================================== */
.page-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.page-head-text { flex: 1 1 260px; min-width: 0; }
.page-head-text h1 {
  font-size: 1.65rem;
  font-weight: 800;
  margin: 0 0 0.15rem;
  line-height: 1.2;
}
.page-head-text p {
  color: var(--text-light);
  margin: 0;
  font-size: 0.88rem;
}
.page-head-action {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
@media (max-width: 575px) {
  .page-head-action { margin-left: 0; width: 100%; }
  .page-head-action .btn { flex: 1 1 auto; justify-content: center; }
}

/* ===================================================================
   TYPE SCALE + TEXT UTILITIES

   The templates were using more than twenty distinct font sizes —
   0.82, 0.83, 0.84 and 0.85rem all appear, and nobody can tell them
   apart. They are not decisions, they are accumulation: the same
   intention typed slightly differently on different days.

   Six steps cover every real use. Each maps to the cluster it replaces,
   so converting a page is a lookup rather than a judgement call.

     fs-2xs  0.66   badges, counters, micro-labels
     fs-xs   0.72   captions, timestamps
     fs-sm   0.78   secondary text, table meta
     fs-md   0.83   default UI text
     fs-base 0.88   body copy
     fs-lg   1.00   emphasis, card titles
     fs-xl   1.15   section headings inside a page
   =================================================================== */
.fs-2xs  { font-size: 0.66rem; }
.fs-xs   { font-size: 0.72rem; }
.fs-sm   { font-size: 0.78rem; }
.fs-md   { font-size: 0.83rem; }
.fs-base { font-size: 0.88rem; }
.fs-lg   { font-size: 1rem; }
.fs-xl   { font-size: 1.15rem; }

/* Text colour. Four cover 426 of the inline colour declarations. */
.tx-light { color: var(--text-light); }
.tx-mid   { color: var(--text-mid); }
.tx-dark  { color: var(--text-dark); }
.tx-red   { color: var(--red); }

/* Weight — only the two the design actually uses */
.fw-semi { font-weight: 600; }
.fw-bold { font-weight: 700; }

/* -------------------------------------------------------------------
   Common pairings, so the most repeated combinations are one class
   rather than three declarations retyped at each site.
   ------------------------------------------------------------------- */

/* Supporting text beside a heading or in a table cell */
.meta     { font-size: 0.78rem; color: var(--text-light); }
.meta-xs  { font-size: 0.72rem; color: var(--text-light); }

/* Running body copy — help pages, descriptions, policy text */
.prose {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-mid);
}

/* The small uppercase section label used above groups of fields */
.label-upper {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* Layout shorthands that appeared repeatedly inline */
.flex-1-min { flex: 1; min-width: 0; }
.no-shrink  { flex-shrink: 0; }

/* -------------------------------------------------------------------
   Delegated task marker

   A small coloured dot on the row, so referred work is scannable down a
   long list without reading each badge. Deliberately a dot rather than a
   filled block — a list of forty tasks should not become a wall of colour.
   ------------------------------------------------------------------- */
.deleg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
  background: var(--c-res);
  box-shadow: 0 0 0 3px var(--c-res-tint);
}
/* Sent away from the board you are looking at, rather than received. */
.deleg-dot.is-outbound {
  background: var(--c-meet);
  box-shadow: 0 0 0 3px var(--c-meet-tint);
}
.action-item.is-delegated { border-left: 3px solid var(--c-res); }

/* ===================================================================
   Dashboard context strip

   Replaces the old flat row of chips, where organisations and boards
   shared one visual language and were separated only by a middot. A
   board lives *inside* an organisation, so the strip now reads
   Organisation › Board and the two ranks are styled differently:
   the org is a single control, the boards a segmented strip.

   The role badge used to repeat on every organisation chip ("ADMIN"
   three times for the same person). It only says anything about the
   org you are actually in, so it moved into the org control's subtitle.
   =================================================================== */

.ctx-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.ctx-org {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.6rem 0.35rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ctx-org:hover        { border-color: var(--border-mid); background: var(--off-white); }
.ctx-org.is-static    { cursor: default; }
.ctx-org.is-static:hover { border-color: var(--border); background: var(--white); }
.ctx-org::after       { display: none; }   /* no Bootstrap caret; we use an icon */

.ctx-org-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--red);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ctx-org-name {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.25;
}
.ctx-org-meta {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-light);
  line-height: 1.3;
  text-transform: capitalize;
}
.ctx-org-caret { font-size: 0.75rem; color: var(--grey-light); margin-left: 0.15rem; }

.ctx-sep { font-size: 0.8rem; color: var(--silver); }

/* Segmented board strip — one recessed track, the active board raised
   out of it. A single "selected" treatment, unlike the old mix of a red
   outline for the org and a solid black fill for the board. */
.ctx-boards {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--border-light);
}
.ctx-boards form { display: flex; }

.ctx-board {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-light);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ctx-board:hover        { color: var(--text-mid); background: rgba(255,255,255,0.6); }
.ctx-board.is-active {
  background: var(--white);
  color: var(--text-dark);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
  cursor: default;
}
.ctx-board-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ctx-board-gov {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--grey-light);
}

@media (max-width: 640px) {
  .ctx-boards { overflow-x: auto; max-width: 100%; }
  .ctx-sep    { display: none; }
}

/* ===================================================================
   Note lock banner

   Sits above the note editor when someone else holds the item, or when
   a save was refused. It has to be noticeable without looking like an
   error during a live meeting — being told "Sarah is taking notes" is
   normal, not a fault.
   =================================================================== */
.note-lock-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
}
.note-lock-banner.is-busy {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  color: #1E40AF;
}
.note-lock-banner.is-conflict {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #B91C1C;
}
.btn-note-takeover {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: var(--white);
  color: inherit;
  cursor: pointer;
}
.btn-note-takeover:hover { background: rgba(255,255,255,0.6); }

/* The editor a watcher is looking at — clearly not theirs to type in. */
.note-editor-wrap.is-watching { opacity: 0.85; }