/* ==========================================================================
   NDSTAT ANALYTICS — Design System
   Palette:  --red (brand mark), --ink (text/black), --paper (background)
   Type:     Space Grotesk (display) / Inter (body) / IBM Plex Mono (data)
   Signature: the "rising bars" motif from the logo used as section dividers,
              progress rules and stat call-outs throughout the site.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* Font Awesome icons inherit the surrounding text colour by default
   (unlike emoji, which carry their own fixed multi-colour glyph) — that
   single rule is what keeps every icon in this app matching its label. */
i[class*="fa-"]{ color:currentColor; }

:root{
  --red: #E4222D;
  --red-dark: #B81823;
  --ink: #15181C;
  --ink-soft: #4B535C;
  --paper: #FAF8F6;
  --panel: #FFFFFF;
  --line: #E4E1DB;
  --line-strong: #D2CEC6;
  --data-blue: #1F3A56;
  --ok: #1E7B4D;
  --warn: #B5791A;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --max: 1180px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(21,24,28,.04), 0 8px 24px -12px rgba(21,24,28,.12);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; font-size:17px; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  font-size:1.03rem;
  -webkit-font-smoothing:antialiased;
  /* Prevents the browser from auto-inserting a hyphen inside a word when
     it wraps in a narrow container — the literal cause of stray dashes
     appearing in the middle of words rather than between them. */
  hyphens:none; -webkit-hyphens:none; -ms-hyphens:none;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.15; margin:0 0 .5em; font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-soft); font-size:1rem; }
ul{ margin:0; padding:0; }
li{ list-style:none; }
/* Editorial lists (blog post bodies, editor surface) keep their
   bullets and numbers — the reset above only strips chrome lists. */
.post-body-rich ul > li{ list-style:disc; }
.post-body-rich ul ul > li{ list-style:circle; }
.post-body-rich ul ul ul > li{ list-style:square; }
.post-body-rich ol > li{ list-style:decimal; }
.post-body-rich ol ol > li{ list-style:lower-alpha; }
.post-body-rich li::marker{ color:var(--ink-soft); }
.rte-surface ul > li{ list-style:disc; }
.rte-surface ul ul > li{ list-style:circle; }
.rte-surface ol > li{ list-style:decimal; }
.rte-surface li::marker{ color:var(--ink-soft); }
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:14px; height:3px;
  background:var(--red);
  display:inline-block;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.92rem;
  padding:13px 24px;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:var(--red-dark); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:#000; }
.btn-outline{ background:transparent; border-color:var(--line-strong); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-ghost-light{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.btn-ghost-light:hover{ border-color:#fff; }
.btn-sm{ padding:9px 16px; font-size:.82rem; }
.btn-block{ width:100%; justify-content:center; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(250,248,246,.97);
  border-bottom:1px solid var(--line);
}
.header-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:var(--max); margin:0 auto;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:63px; width:auto; }
.brand-word{ font-family:var(--font-mono); font-weight:600; letter-spacing:.01em; font-size:1.02rem; display:none; }
.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav a{
  font-size:.88rem; font-weight:500; padding:10px 14px; border-radius:var(--radius);
  color:var(--ink-soft);
}
.main-nav a:hover, .main-nav a.active{ color:var(--ink); background:#F0EEE9; }
.main-nav .mobile-only-nav-link{ display:none; }
.header-actions{ display:flex; align-items:center; gap:10px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line-strong); border-radius:var(--radius); padding:8px 10px; cursor:pointer; font-size:1rem; }

@media (max-width:960px){
  /* No ancestor in this chain uses backdrop-filter/transform/filter, so
     position:fixed here is relative to the real viewport, not a
     containing header box — this is what keeps the menu on top of the
     hero section instead of getting trapped behind it. */
  .main-nav{
    position:fixed; inset:64px 0 0 0; background:var(--paper);
    z-index:100;
    flex-direction:column; align-items:stretch; padding:16px; gap:2px;
    display:none; overflow-y:auto;
  }
  .main-nav.open{ display:flex; }
  .main-nav a{ padding:14px 10px; border-bottom:1px solid var(--line); border-radius:0; }
  .main-nav .mobile-only-nav-link{ display:block; margin-top:10px; padding-top:16px !important; border-top:2px solid var(--line-strong); font-weight:700; color:var(--red); }
  .nav-toggle{ display:inline-flex; }
  .header-actions .btn span.long{ display:none; }
  #headerLoginBtn{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  background:var(--ink); color:#fff;
  padding:96px 0 76px;
}
.hero .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero .wrap.hero-stats-wrap{ display:block; }
.hero h1{ font-size:clamp(2.1rem,4.2vw,3.4rem); color:#fff; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero p.lead{ font-size:1.08rem; color:#C9CDD2; max-width:44ch; }
.hero .eyebrow{ color:#FF6E76; }
.hero .eyebrow::before{ background:#FF6E76; }
.hero-cta{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:28px; margin-top:44px; flex-wrap:wrap; }
.hero-stats .stat b{ display:block; font-family:var(--font-mono); font-size:1.7rem; color:#fff; }
.hero-stats .stat span{ font-size:.78rem; color:#9AA1A8; }

/* Bar-chart signature graphic */
.bar-graphic{ display:flex; align-items:flex-end; gap:10px; height:280px; }
.bar-graphic i{
  display:block; width:100%; background:linear-gradient(180deg,var(--red),var(--red-dark));
  border-radius:3px 3px 0 0; transform-origin:bottom; animation:rise 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.bar-graphic i:nth-child(1){ height:38%; animation-delay:.05s; }
.bar-graphic i:nth-child(2){ height:70%; animation-delay:.15s; }
.bar-graphic i:nth-child(3){ height:52%; animation-delay:.25s; }
.bar-graphic i:nth-child(4){ height:92%; animation-delay:.35s; background:linear-gradient(180deg,#fff,#C9CDD2); }
.bar-graphic i:nth-child(5){ height:66%; animation-delay:.45s; }
@keyframes rise{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }
@media (prefers-reduced-motion:reduce){ .bar-graphic i{ animation:none; } }

@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; }
  .bar-graphic{ height:160px; }
}

/* ---------- Sections ---------- */
section{ padding:76px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.bg-panel{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bg-ink{ background:var(--ink); color:#fff; }
.bg-ink h2, .bg-ink h3{ color:#fff; }
.bg-ink p{ color:#B7BCC1; }
.bg-ink .eyebrow{ color:#FF6E76; }
.bg-ink .eyebrow::before{ background:#FF6E76; }

/* ---------- Grids / Cards ---------- */
.grid{ display:grid; gap:24px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; transition:border-color .15s ease, transform .15s ease;
}
.card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.card .num{ font-family:var(--font-mono); color:var(--red); font-size:.8rem; margin-bottom:14px; display:block; }
.card h3{ font-size:1.08rem; margin-bottom:10px; }
.card p{ font-size:.94rem; margin-bottom:0; }
.card a.more{ display:inline-block; margin-top:14px; font-size:.84rem; font-weight:600; color:var(--red); }

.service-card{ border-left:3px solid var(--red); }
.service-card .icon{ width:40px; height:40px; margin-bottom:16px; }

/* Sector chip list */
.chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  border:1px solid var(--line-strong); padding:9px 16px; border-radius:20px;
  font-size:.85rem; font-weight:500; color:var(--ink-soft); background:var(--panel);
}
.chip[data-page], .chip[data-status]{ cursor:pointer; }
.chip-active{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- Process / numbered steps (used for real methodology sequence) ---------- */
.process{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.process .step{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:26px 22px; }
.process .step .n{ font-family:var(--font-mono); color:var(--red); font-size:.82rem; }
@media (max-width:900px){ .process{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process{ grid-template-columns:1fr; } }

/* ---------- Stat band ---------- */
.stat-band{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }
.stat-band .stat{ padding:32px 24px; border-right:1px solid var(--line-strong); }
.stat-band .stat:last-child{ border-right:none; }
.stat-band b{ font-family:var(--font-mono); font-size:2rem; display:block; color:var(--ink); }
.stat-band span{ font-size:.82rem; color:var(--ink-soft); }
@media (max-width:760px){ .stat-band{ grid-template-columns:repeat(2,1fr); } .stat-band .stat:nth-child(2){ border-right:none; } }

/* Stat band variant used inside the dark hero (moved here from its own
   light section, per the brief) — same layout, dark-theme colours. */
.stat-band-hero{ border-color:#2A2E33; margin-top:52px; }
.stat-band-hero .stat{ border-color:#2A2E33; padding:24px 20px 4px; }
.stat-band-hero b{ color:#fff; }
.stat-band-hero span{ color:#9AA1A8; }
@media (max-width:760px){ .stat-band-hero .stat:nth-child(2){ border-right:1px solid #2A2E33; } .stat-band-hero .stat:nth-child(2n){ border-right:none; } }

/* Stat band used on a dark section elsewhere on the site (e.g. About →
   Our Presence) — without this override the numbers default to dark
   ink-coloured text and disappear against the dark background. */
.stat-band-dark b{ color:#fff; }
.stat-band-dark span{ color:#9AA1A8; }

/* ---------- Testimonial / quote ---------- */
.quote-block{ border-left:3px solid var(--red); padding-left:24px; margin:0; }
.quote-block p{ font-family:var(--font-display); font-size:1.3rem; color:var(--ink); font-weight:500; }
.quote-block cite{ font-style:normal; font-size:.85rem; color:var(--ink-soft); }

/* ---------- Forms ---------- */
.form-grid{ display:grid; gap:16px; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:620px){ .form-row-2{ grid-template-columns:1fr; } }
label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; }
input,textarea,select{
  width:100%; font-family:var(--font-body); font-size:.94rem; padding:12px 14px;
  border:1px solid var(--line-strong); border-radius:var(--radius); background:#fff; color:var(--ink);
}
input:focus,textarea:focus,select:focus{ border-color:var(--red); }
textarea{ resize:vertical; min-height:120px; }
.form-note{ font-size:.78rem; color:var(--ink-soft); }
.form-msg{ font-size:.86rem; padding:10px 14px; border-radius:var(--radius); display:none; margin-top:6px; }
.form-msg.show{ display:block; }
.form-msg.ok{ background:#EAF6EF; color:var(--ok); border:1px solid #BFE3CC; }
.form-msg.err{ background:#FCEBEA; color:var(--red-dark); border:1px solid #F3C3C1; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#B7BCC1; padding:64px 0 24px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:48px; }
.footer-grid h4{ color:#fff; font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); margin-bottom:16px; }
.footer-grid a{ display:block; padding:6px 0; font-size:.9rem; color:#9AA1A8; }
.footer-grid a:hover{ color:#fff; }
.footer-brand img{ height:57px; margin-bottom:14px; filter:brightness(0) invert(1); }
.footer-brand p{ color:#8B929A; font-size:.88rem; max-width:32ch; }
.footer-bottom{ border-top:1px solid #2A2E33; padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; color:#8B929A; }
.footer-bottom-center{ justify-content:center; flex-direction:column; align-items:center; text-align:center; gap:6px; }
@media (max-width:860px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  /* The About column stands alone on its own row, full width — not
     squeezed into the 2-column grid alongside the link columns. */
  .footer-brand{ grid-column:1 / -1; }
  .footer-brand p{ max-width:none; }
}
@media (max-width:480px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* ---------- Page header (inner pages) ---------- */
.page-hero{ background:var(--ink); color:#fff; padding:64px 0 48px; }
.page-hero h1{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.6rem); }
.breadcrumb{ font-family:var(--font-mono); font-size:.76rem; color:#9AA1A8; margin-bottom:14px; }
.breadcrumb a{ color:#C9CDD2; }
.breadcrumb .sep{ margin:0 6px; }

/* ---------- Utility ---------- */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.text-center{ text-align:center; }
.tag-list{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tag{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; background:#F0EEE9; padding:4px 9px; border-radius:2px; color:var(--ink-soft); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }
.status-badge{ font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; padding:3px 9px; border-radius:20px; letter-spacing:.04em; }
.status-open{ background:#FCEBEA; color:var(--red-dark); }
.status-progress{ background:#FFF4E1; color:var(--warn); }
.status-done{ background:#EAF6EF; color:var(--ok); }

/* ================================================================
   PORTAL SHELL (staff + admin) — used by /staff and /admin apps
   ================================================================ */
.portal{ display:flex; min-height:100vh; background:var(--paper); }
.portal-sidebar{
  width:240px; flex-shrink:0; background:var(--ink); color:#fff;
  display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh;
}
.portal-sidebar .brand{ padding:0 6px 22px; border-bottom:1px solid #2A2E33; margin-bottom:18px; }
.portal-sidebar .brand img{ height:48px; filter:brightness(0) invert(1); }
.portal-nav{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  /* so scroll affordance doesn't crowd the links against the sidebar edge */
  padding-right:2px;
  scrollbar-width:thin; scrollbar-color:#3A3F45 transparent;
}
.portal-nav::-webkit-scrollbar{ width:5px; }
.portal-nav::-webkit-scrollbar-thumb{ background:#3A3F45; border-radius:3px; }
.portal-nav a{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--radius);
  font-size:.88rem; color:#B7BCC1; font-weight:500; margin-bottom:2px;
}
.portal-nav a:hover{ color:#fff; background:#1F2328; }
.portal-nav a.active{ color:#fff; background:var(--red); }
.portal-sidebar .role-tag{ margin-top:auto; font-family:var(--font-mono); font-size:.7rem; color:#8B929A; padding:10px 6px; border-top:1px solid #2A2E33; }
.portal-sidebar #logoutBtn{ margin-top:10px; width:100%; }

.portal-main{ flex:1; min-width:0; }
.portal-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; border-bottom:1px solid var(--line); background:var(--panel);
  position:sticky; top:0; z-index:5;
}
.portal-topbar h1{ font-size:1.2rem; margin:0; }
.portal-body{ padding:32px; }
.portal-toggle{ display:none; }

.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px; margin-bottom:24px; }
.panel h2{ font-size:1rem; margin-bottom:18px; }

table.data-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
.data-table th{ text-align:left; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); padding:10px 12px; border-bottom:1px solid var(--line-strong); }
.data-table td{ padding:12px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.data-table tr:last-child td{ border-bottom:none; }
.data-table .empty-row td{ text-align:center; color:var(--ink-soft); padding:32px; }

.kpi-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:20px; border-left:3px solid var(--red); }
.kpi b{ font-family:var(--font-mono); font-size:1.6rem; display:block; }
.kpi span{ font-size:.78rem; color:var(--ink-soft); }
@media (max-width:900px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } }

.msg-layout{ display:grid; grid-template-columns:280px 1fr; gap:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel); min-height:520px; }
.msg-list{ border-right:1px solid var(--line); overflow-y:auto; max-height:none; }
.msg-list .msg-item{ padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; display:flex; align-items:center; gap:10px; }
.msg-list .msg-item:hover, .msg-list .msg-item.active{ background:#F5F3EF; }
.msg-item-text{ min-width:0; flex:1; }
.msg-list .msg-item b{ display:block; font-size:.88rem; }
.msg-list .msg-item span{ font-size:.76rem; color:var(--ink-soft); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Roster search — pinned to the top of the contact list so anyone can
   jump straight to a colleague or group without scrolling. */
.msg-roster-search{ position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); background:var(--panel); }
.msg-roster-search > i{ color:var(--ink-soft); font-size:.78rem; flex-shrink:0; }
.msg-roster-search input{ flex:1; min-width:0; border:none; background:transparent; font-size:.84rem; color:var(--ink); outline:none; padding:3px 0; font-family:inherit; }
.msg-roster-search input::placeholder{ color:#9AA1A8; }
.msg-roster-search .msg-roster-clear{ display:none; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; padding:2px 4px; border-radius:4px; font-size:.8rem; flex-shrink:0; }
.msg-roster-search .msg-roster-clear:hover{ color:var(--red); }

.msg-thread .bubble{ max-width:70%; padding:10px 14px; border-radius:10px; margin-bottom:10px; font-size:.88rem; }
.msg-thread .bubble.out{ align-self:flex-end; background:var(--red); color:#fff; border-bottom-right-radius:2px; }
.msg-thread .bubble.in{ align-self:flex-start; background:#F0EEE9; border-bottom-left-radius:2px; }
.msg-thread .bubble time{ display:block; font-size:.68rem; opacity:.75; margin-top:4px; }
.msg-attachment{ display:flex; align-items:center; gap:6px; margin-top:6px; padding:6px 10px; background:rgba(255,255,255,.18); border-radius:6px; font-size:.8rem; color:inherit; }
.bubble.in .msg-attachment{ background:#fff; border:1px solid var(--line); }
.msg-thread{ display:flex; flex-direction:column; padding:20px; }
.msg-compose{ display:flex; gap:10px; padding:14px; border-top:1px solid var(--line); align-items:flex-end; }
.msg-compose textarea{ min-height:44px; flex:1; }
.msg-compose label.attach-btn{ display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer; font-size:1.1rem; flex-shrink:0; }
.msg-compose label.attach-btn:hover{ border-color:var(--red); }
.msg-compose input[type="file"]{ display:none; }

.upload-zone{
  border:1.5px dashed var(--line-strong); border-radius:var(--radius); padding:36px; text-align:center;
  cursor:pointer; background:#FCFBF9;
}
.upload-zone:hover{ border-color:var(--red); }
.file-row{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); }
.file-row:last-child{ border-bottom:none; }
.file-meta{ font-size:.76rem; color:var(--ink-soft); }

.login-shell{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.login-visual{ background:var(--ink); color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between; }
.login-form-side{ display:flex; align-items:center; justify-content:center; padding:32px; }
.login-card{ width:100%; max-width:380px; }
.login-tabs{ display:flex; gap:8px; margin-bottom:24px; border:1px solid var(--line-strong); border-radius:var(--radius); padding:4px; }
.login-tabs button{ flex:1; padding:9px; border:none; background:transparent; border-radius:2px; font-weight:600; font-size:.84rem; cursor:pointer; color:var(--ink-soft); }
.login-tabs button.active{ background:var(--ink); color:#fff; }
.password-field{ position:relative; }
.password-field input{ padding-right:44px; }
.password-toggle{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--ink-soft);
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius); font-size:.95rem;
}
.password-toggle:hover{ color:var(--ink); background:#F0EEE9; }
@media (max-width:860px){ .login-shell{ grid-template-columns:1fr; } .login-visual{ display:none; } }

@media (max-width:900px){
  .portal-sidebar{ position:fixed; left:-260px; z-index:60; transition:left .2s ease; }
  .portal-sidebar.open{ left:0; }
  .portal-toggle{ display:inline-flex; }
  .kpi-row{ grid-template-columns:1fr 1fr; }
  /* Messages pages get their own single-pane mobile pattern further
     down (list <-> chat toggle) — not the stacked fallback below 900px. */
  .portal-body{ padding:16px; }
  .portal-topbar{ padding:12px 16px; }
  .portal-topbar h1{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ================================================================
   HOMEPAGE POPUP PROMOTION — 5 templates (3 with image, 2 text-only)
   ================================================================ */
.promo-overlay{
  position:fixed; inset:0; background:rgba(21,24,28,.6); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .2s ease;
}
.promo-overlay.show{ opacity:1; }
.promo-modal{
  background:#fff; border-radius:6px; max-width:480px; width:100%;
  position:relative; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3);
  transform:translateY(12px); transition:transform .2s ease;
}
.promo-overlay.show .promo-modal{ transform:translateY(0); }
.promo-close{
  position:absolute; top:12px; right:12px; z-index:2; width:30px; height:30px;
  border-radius:50%; border:none; background:rgba(255,255,255,.9); cursor:pointer;
  font-size:.9rem; line-height:1;
}
.promo-body{ padding:28px; }
.promo-body h3{ font-size:1.3rem; margin-bottom:10px; }
.promo-body p{ margin-bottom:18px; }
.promo-image{ width:100%; height:200px; background-size:cover; background-position:center; }

/* Template variants */
.promo-image-1 .promo-image{ height:220px; }
.promo-image-2{ display:grid; grid-template-columns:38%; }
.promo-image-2 .promo-image{ position:absolute; inset:0; width:100%; height:100%; }
.promo-image-2 .promo-body{ position:relative; z-index:1; background:linear-gradient(0deg, rgba(21,24,28,.85), rgba(21,24,28,.5)); color:#fff; margin-top:120px; }
.promo-image-2 .promo-body h3{ color:#fff; }
.promo-image-2 .promo-close{ background:rgba(21,24,28,.5); color:#fff; }
.promo-image-3{ max-width:820px; display:grid; grid-template-columns:1fr 1fr; }
.promo-image-3 .promo-image{ height:100%; min-height:280px; }
.promo-image-3 .promo-body{ display:flex; flex-direction:column; justify-content:center; }
.promo-text-1{ text-align:center; border-top:4px solid var(--red); }
.promo-text-1 .promo-body{ padding:40px 32px; }
.promo-text-2{ background:var(--ink); }
.promo-text-2 .promo-body h3, .promo-text-2 .promo-body p{ color:#fff; }
.promo-text-2 .promo-body p{ color:#B7BCC1; }
.promo-text-2 .promo-close{ background:rgba(255,255,255,.15); color:#fff; }

@media (max-width:600px){
  .promo-image-2, .promo-image-3{ grid-template-columns:1fr; }
  .promo-image-2 .promo-image{ position:static; height:160px; }
  .promo-image-2 .promo-body{ margin-top:0; background:#fff; color:var(--ink); }
  .promo-image-2 .promo-body h3{ color:var(--ink); }
  .promo-image-2 .promo-close{ background:rgba(255,255,255,.9); color:var(--ink); }
}

/* ================================================================
   Avatars — used in sidebars, message lists, and the profile page.
   ================================================================ */
.avatar-circle{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--ink); color:#fff; font-family:var(--font-mono);
  font-weight:600; font-size:.78rem; flex-shrink:0; overflow:visible; position:relative;
}
/* Tiny green "online" circle pinned to the edge of any avatar that
   carries a data-user-id — portal.js toggles .online from
   /backend/presence. */
.online-dot{
  position:absolute; right:-1px; bottom:-1px; width:10px; height:10px;
  border-radius:50%; background:#23A55A; border:2px solid var(--panel);
  display:none; z-index:2; pointer-events:none;
}
.avatar-circle.online .online-dot{ display:block; }
.avatar-circle-lg .online-dot{ width:15px; height:15px; border-width:3px; right:-2px; bottom:-2px; }
.avatar-circle-lg{ font-size:1.6rem; border:3px solid var(--panel); box-shadow:0 0 0 1px var(--line); }
.sidebar-avatar{ width:36px; height:36px; margin-bottom:8px; }
.profile-avatar-row{ display:flex; align-items:center; gap:20px; margin-bottom:24px; }
.profile-avatar-actions{ display:flex; flex-direction:column; gap:6px; }

/* ================================================================
   Notification bell + dropdown — mounted into every portal topbar.
   ================================================================ */
.notif-badge{
  position:absolute; top:-6px; right:-6px; background:var(--red); color:#fff;
  font-family:var(--font-mono); font-size:.65rem; font-weight:700; min-width:17px; height:17px;
  border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px;
}
.notif-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; width:340px; max-width:88vw;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow); z-index:70; overflow:hidden;
}
.notif-dropdown-head{
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px;
  border-bottom:1px solid var(--line); font-weight:600; font-size:.9rem;
}
.notif-list{ max-height:360px; overflow-y:auto; }
.notif-item{ display:block; padding:12px 16px; border-bottom:1px solid var(--line); }
.notif-item:last-child{ border-bottom:none; }
.notif-item:hover{ background:#F5F3EF; }
.notif-item.unread{ background:#FCEBEA; }
.notif-item b{ display:block; font-size:.85rem; margin-bottom:2px; }
.notif-item span{ display:block; font-size:.78rem; color:var(--ink-soft); margin-bottom:4px; }
.notif-item time{ font-family:var(--font-mono); font-size:.68rem; color:var(--ink-soft); }

/* Below this width, anchoring the dropdown to the bell button risks
   pushing part of it off either edge of the screen depending on where
   the topbar happens to place the button — so it switches to a
   viewport-anchored panel that is always fully visible regardless of
   screen side. */
@media (max-width:720px){
  .notif-dropdown{
    position:fixed; top:64px; left:12px; right:12px; width:auto; max-width:none;
  }
}

/* ================================================================
   File sharing picker (Files pages)
   ================================================================ */
.share-row td{ background:#FCFBF9; padding:16px !important; }
.share-picker{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; }
.share-option{ display:flex; align-items:center; gap:6px; font-size:.85rem; cursor:pointer; }
.share-option input{ width:auto; }

/* ================================================================
   Profile page
   ================================================================ */
.profile-meta-row{ display:flex; gap:20px; font-size:.85rem; color:var(--ink-soft); margin-bottom:20px; flex-wrap:wrap; }
.profile-meta-row b{ color:var(--ink); }

/* ================================================================
   Task attachments (Tasks pages)
   ================================================================ */
.task-attachments{ display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.task-attachments a{ font-size:.78rem; color:var(--red); font-weight:600; }
.task-deliver-row{ display:flex; align-items:center; gap:8px; margin-top:6px; }

/* ================================================================
   Shared detail modal — used for the full text of a task, insight
   post, enquiry, or memo when the list row only shows a first line.
   ================================================================ */
.detail-modal-overlay{
  display:none; position:fixed; inset:0; background:rgba(21,24,28,.55);
  z-index:200; align-items:center; justify-content:center; padding:20px;
}
.detail-modal-overlay.open{ display:flex; }
.detail-modal{
  background:var(--panel); border-radius:var(--radius); max-width:640px; width:100%;
  max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.detail-modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:20px 24px; border-bottom:1px solid var(--line);
}
.detail-modal-head h2{ font-size:1.15rem; margin:0; }
.detail-modal-close{
  background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--ink-soft);
  flex-shrink:0; line-height:1; padding:4px;
}
.detail-modal-close:hover{ color:var(--ink); }
.detail-modal-body{ padding:24px; overflow-y:auto; font-size:.96rem; line-height:1.7; }
.detail-modal-body p{ white-space:pre-wrap; }
.detail-modal-body dl{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin-bottom:20px; font-size:.88rem; }
.detail-modal-body dt{ color:var(--ink-soft); font-family:var(--font-mono); font-size:.76rem; text-transform:uppercase; }
.detail-modal-body dd{ margin:0; }

/* Clickable list rows that open the modal */
.list-row-clickable{ cursor:pointer; }
.list-row-clickable:hover{ background:#F5F3EF; }
.truncated-text{ font-size:.85rem; color:var(--ink-soft); }
.view-more-hint{ font-size:.76rem; color:var(--red); font-weight:600; white-space:nowrap; }

/* ================================================================
   Public-site success popup (contact form confirmation, etc.)
   ================================================================ */
.success-popup-overlay{
  display:none; position:fixed; inset:0; background:rgba(21,24,28,.55);
  z-index:300; align-items:center; justify-content:center; padding:20px;
}
.success-popup-overlay.open{ display:flex; }
.success-popup{
  background:#fff; border-radius:var(--radius); max-width:420px; width:100%;
  padding:36px 32px; text-align:center; box-shadow:var(--shadow);
}
.success-popup-icon{ font-size:2.4rem; color:var(--ok); margin-bottom:16px; }
.success-popup p{ font-size:1.02rem; color:var(--ink); margin-bottom:22px; }

/* ================================================================
   About section image (replaces the old text-card grid)
   ================================================================ */
.about-image-frame{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  aspect-ratio:4/3; position:relative;
}
.about-image-frame img{ width:100%; height:100%; object-fit:cover; }

/* ================================================================
   Service cards with a photo, no more "Service 0X" label
   ================================================================ */
.service-card-img{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.service-card-img img{ width:100%; height:170px; object-fit:cover; }
.service-card-body{ padding:24px; border-left:3px solid var(--red); flex:1; }
.service-card-body h3{ font-size:1.08rem; margin-bottom:10px; }
.service-card-body p{ font-size:.94rem; }

/* ================================================================
   Sectors: automatically scrolling horizontal marquee
   ================================================================ */
.sector-marquee{
  overflow:hidden; margin:36px auto 4px; max-width:var(--max); padding:0 24px;
  mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.sector-marquee-track{
  display:flex; gap:12px; width:max-content;
  animation:sector-scroll 38s linear infinite;
}
.sector-marquee:hover .sector-marquee-track{ animation-play-state:paused; }
@keyframes sector-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){ .sector-marquee-track{ animation:none; } }

/* ================================================================
   Testimonials: horizontally scrollable cards with reviewer identity
   ================================================================ */
.testimonial-scroller{
  display:flex; gap:20px; overflow-x:auto; padding:8px 24px 20px;
  max-width:var(--max); margin:0 auto;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.testimonial-scroller::-webkit-scrollbar{ height:8px; }
.testimonial-scroller::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:4px; }
.testimonial-card{
  flex:0 0 clamp(280px, 80vw, 380px); scroll-snap-align:start;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; justify-content:space-between;
}
.testimonial-card p{ font-size:.96rem; color:var(--ink); line-height:1.7; margin-bottom:20px; }
.testimonial-person{ display:flex; align-items:center; gap:12px; }
.testimonial-person b{ display:block; font-size:.88rem; }
.testimonial-person span{ display:block; font-size:.78rem; color:var(--ink-soft); }

/* ================================================================
   Insight cards: image with category overlay, author set apart from
   the excerpt with spacing and a smaller font
   ================================================================ */
.insight-card{ padding:0; overflow:hidden; }
.insight-card-image{
  height:170px; background:linear-gradient(135deg, var(--ink), #2A2E33);
  background-size:cover; background-position:center;
  position:relative; display:flex; align-items:flex-start; padding:14px;
}
.insight-card-tag{ background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(2px); }
.insight-card-body{ padding:24px; }
.insight-card-body h3{ font-size:1.05rem; margin-bottom:8px; }
.insight-card-body p{ font-size:.92rem; margin-bottom:6px; }
.insight-card-author{
  margin-top:14px !important; padding-top:12px; border-top:1px solid var(--line);
  font-size:.76rem !important; color:var(--ink-soft) !important;
}

/* ================================================================
   Client portal: project video/voice meeting overlay (embedded Jitsi)
   ================================================================ */
.jitsi-overlay{
  position:fixed; inset:0; background:rgba(21,24,28,.9); z-index:400;
  align-items:center; justify-content:center; padding:20px;
}
.jitsi-frame-wrap{
  position:relative; width:100%; max-width:1100px; height:80vh;
  background:#000; border-radius:var(--radius); overflow:hidden;
}
.jitsi-close{
  position:absolute; top:12px; right:12px; z-index:5;
  background:rgba(255,255,255,.15); color:#fff; border:none;
  width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1rem;
}
.jitsi-close:hover{ background:rgba(255,255,255,.3); }

/* Project list cards behave like the rest of the card grid; this just
   keeps the anchor wrapper from picking up default link underline/color */
#projectsListGrid a.card{ color:inherit; text-decoration:none; }

/* ================================================================
   Staff hover-card — appears when hovering a name in messages,
   project team/client lists, or file sharing.
   ================================================================ */
[data-user-id]{ cursor:pointer; }
.user-hover-card{
  display:none; position:absolute; z-index:250; width:260px;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px;
}
.user-hover-card.open{ display:block; }
.user-hover-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.user-hover-card-head b{ display:block; font-size:.92rem; }
.user-hover-card-head span{ display:block; font-size:.78rem; color:var(--ink-soft); }
.user-hover-card-details{ margin:0; padding-top:10px; border-top:1px solid var(--line); font-size:.8rem; }
.user-hover-card-details dt{ color:var(--ink-soft); font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; margin-top:6px; }
.user-hover-card-details dd{ margin:0; }
.user-hover-card-bio{ font-size:.8rem; margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line); color:var(--ink-soft); }
.user-hover-card-link{ display:block; margin-top:12px; font-size:.8rem; font-weight:600; color:var(--red); text-decoration:none; }
.user-hover-card-link:hover{ text-decoration:underline; }

/* ================================================================
   Topbar right-hand action group — the title block stays left, every
   action (buttons + the notification bell) sits on the right-hand
   side of the dashboard topbar.
   ================================================================ */
.portal-topbar-actions{
  display:flex; align-items:center; gap:10px; margin-left:auto; flex-shrink:0;
}
@media (max-width:720px){
  .portal-topbar{ padding:14px 16px; flex-wrap:wrap; row-gap:10px; }
  .portal-topbar h1{ font-size:1rem; }
  .portal-topbar-actions{ gap:6px; }
  .portal-topbar-actions .btn span{ display:none; }
}

/* ================================================================
   Messaging — thread header with the vertical 3-dots (kebab) menu at
   the top-right corner of the chat area, the in-chat search strip, and
   markdown-lite message formatting (**bold**, __italic__, - / 1. lists).
   ================================================================ */
.msg-thread-head{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line); background:var(--panel);
}
.msg-thread-title{
  font-weight:600; font-size:.95rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.msg-menu-btn{
  width:34px; height:34px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel);
  color:var(--ink-soft); cursor:pointer; font-size:1rem; line-height:1;
}
.msg-menu-btn:hover{ border-color:var(--red); color:var(--red); }
.msg-menu{
  position:absolute; top:calc(100% - 6px); right:12px; z-index:60; min-width:210px;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:6px; display:none;
}
.msg-menu button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; font:inherit; font-size:.85rem;
  color:var(--ink); padding:9px 10px; border-radius:2px;
}
.msg-menu button:hover{ background:#F5F3EF; }
.msg-menu button i{ width:16px; color:var(--ink-soft); }
.msg-menu button.msg-menu-danger{ color:var(--red-dark); }
.msg-menu button.msg-menu-danger i{ color:var(--red); }

.msg-search-bar{
  display:flex; align-items:center; gap:10px; padding:8px 14px;
  border-bottom:1px solid var(--line); background:#FCFBF9;
}
.msg-search-bar > i{ color:var(--ink-soft); font-size:.85rem; }
.msg-search-bar input{
  flex:1; border:none; background:transparent; padding:4px 0; font-size:.85rem; box-shadow:none;
}
.msg-search-bar input:focus{ border:none; }
.msg-search-bar #msgSearchClear{
  border:none; background:none; cursor:pointer; color:var(--ink-soft); font-size:.9rem; padding:4px;
}
.msg-search-bar #msgSearchClear:hover{ color:var(--red); }

mark.msg-hit{ background:#FFE9A8; color:var(--ink); border-radius:2px; padding:0 1px; }

.msg-fmt p{ margin:0 0 6px; }
.msg-fmt p:last-child{ margin-bottom:0; }
.msg-fmt ul, .msg-fmt ol{ margin:4px 0 6px; padding-left:20px; }
.msg-fmt li{ margin-bottom:2px; }
.msg-fmt ul.msg-fmt-list{ list-style:disc; }
.msg-fmt ol.msg-fmt-list{ list-style:decimal; }
.msg-fmt b{ font-weight:700; }

/* ================================================================
   Profile page — two-column layout: own details / password / bio on
   the left, the "My department" column (lead card + scrollable member
   list) on the right.
   ================================================================ */
.profile-grid{ display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; }
.profile-dept-col{ position:sticky; top:86px; }
.profile-meta-row{
  display:flex; flex-wrap:wrap; gap:8px 24px; margin-bottom:12px;
  font-size:.86rem; color:var(--ink-soft);
}
.profile-meta-row b{ color:var(--ink); font-weight:600; }
@media (max-width:980px){
  .profile-grid{ grid-template-columns:1fr; }
  .profile-dept-col{ position:static; }
}

.dept-name-line{ font-size:.9rem; margin-bottom:16px; }
.dept-name-line i{ color:var(--red); margin-right:4px; }
.dept-subhead{
  font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ink-soft); margin:18px 0 10px;
}
.dept-lead-card{
  display:flex; align-items:center; gap:12px; padding:14px;
  border:1px solid var(--line); border-left:3px solid var(--red); border-radius:var(--radius);
  background:#FCFBF9;
}
.dept-lead-info{ min-width:0; flex:1; }
.dept-lead-info b{ display:block; font-size:.92rem; }
.dept-lead-info > span{ display:block; font-size:.78rem; color:var(--ink-soft); margin-top:1px; }
.dept-lead-badge{
  display:inline-flex; align-items:center; gap:5px; margin-top:5px;
  font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--red-dark); background:#FCEBEA; border-radius:2px; padding:2px 7px;
}
.dept-lead-badge i{ font-size:.6rem; }

.dept-members-box{
  max-height:340px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel);
}
.dept-member-row{
  display:flex; align-items:center; gap:12px; padding:10px 12px;
  border-bottom:1px solid var(--line); color:inherit; text-decoration:none;
}
.dept-member-row:last-child{ border-bottom:none; }
.dept-member-row:hover{ background:#F5F3EF; }
.dept-member-text{ min-width:0; flex:1; }
.dept-member-text b{
  display:flex; align-items:center; gap:6px; font-size:.86rem; font-weight:600; flex-wrap:wrap;
}
.dept-member-text b .tag{ padding:2px 6px; }
.dept-member-text > span{ display:block; font-size:.75rem; color:var(--ink-soft); margin-top:1px; }
.dept-member-arrow{ color:var(--line-strong); font-size:.75rem; }
.dept-member-row:hover .dept-member-arrow{ color:var(--red); }

/* ================================================================
   Member profile page — the full, visible profile of a colleague.
   ================================================================ */
.member-profile-panel{ max-width:640px; }
.member-profile-head{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.member-profile-id{ flex:1; min-width:200px; }
.member-profile-id h2{ margin-bottom:4px; font-size:1.25rem; }
.member-profile-role{ margin:0 0 8px; font-size:.88rem; color:var(--ink-soft); }
.member-profile-badges{ display:flex; gap:8px; flex-wrap:wrap; }
.member-msg-btn{ flex-shrink:0; }
.member-profile-details{
  display:grid; grid-template-columns:140px 1fr; gap:10px 18px; margin:0;
  font-size:.88rem;
}
.member-profile-details dt{
  font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-soft); padding-top:3px;
}
.member-profile-details dd{ margin:0; overflow-wrap:anywhere; }
.member-profile-details dd a{ color:var(--red); }
.member-profile-bio{ font-size:.9rem; color:var(--ink); margin:0; }
@media (max-width:560px){
  .member-profile-details{ grid-template-columns:1fr; gap:2px; }
  .member-profile-details dd{ margin-bottom:10px; }
}

/* ================================================================
   Dashboard — two-column layout (recent tasks + "Coming up" calendar
   panel) and the compact event rows used inside it.
   ================================================================ */
.dashboard-two-col{ display:grid; grid-template-columns:1.6fr 1fr; gap:24px; align-items:start; }
.panel-head-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.panel-head-row h2{ margin-bottom:0; }
@media (max-width:980px){ .dashboard-two-col{ grid-template-columns:1fr; } }

.upcoming-box{ max-height:360px; overflow-y:auto; }

.cal-event-row{ display:flex; align-items:flex-start; gap:12px; padding:10px 2px; border-bottom:1px solid var(--line); }
.cal-event-row:last-child{ border-bottom:none; }
.cal-event-date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:44px; padding:4px 0; background:#FCFBF9; border:1px solid var(--line); border-radius:var(--radius);
  flex-shrink:0;
}
.cal-event-date b{ font-family:var(--font-mono); font-size:1rem; line-height:1.1; }
.cal-event-date span{ font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; color:var(--ink-soft); }
.cal-event-dot{
  width:28px; height:28px; border-radius:50%; flex-shrink:0; margin-top:2px;
  display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:.72rem;
}
.cal-event-text{ min-width:0; }
.cal-event-text b{ display:block; font-size:.86rem; margin-bottom:1px; }
.cal-event-text > span{ display:block; font-size:.75rem; color:var(--ink-soft); }

/* Calendar event type colours — shared by dots, chips and the legend. */
.cal-type-meeting{ background:var(--data-blue); }
.cal-type-deadline{ background:var(--red); }
.cal-type-event{ background:var(--warn); }
.cal-type-holiday{ background:var(--ok); }
.cal-type-task{ background:var(--ink); }
.cal-type-milestone{ background:#6D5A9E; }
.cal-type-project{ background:#2B6CB0; }
.cal-chip.cal-type-meeting, .cal-chip.cal-type-deadline, .cal-chip.cal-type-event,
.cal-chip.cal-type-holiday, .cal-chip.cal-type-task, .cal-chip.cal-type-milestone,
.cal-chip.cal-type-project{ background:transparent; }

/* ================================================================
   Calendar page — month grid (weeks start Monday), day detail panel,
   upcoming list, legend and the admin add/edit event form.
   ================================================================ */
.cal-page-grid{ display:grid; grid-template-columns:1.9fr 1fr; gap:24px; align-items:start; }
.cal-side{ position:sticky; top:86px; display:flex; flex-direction:column; gap:24px; }
@media (max-width:1080px){ .cal-page-grid{ grid-template-columns:1fr; } .cal-side{ position:static; } }

.cal-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.cal-toolbar h2{ margin-bottom:0; }
.cal-toolbar-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.cal-legend{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-bottom:14px; }
.cal-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--ink-soft); }
.cal-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }

.cal-grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.cal-dow{
  background:var(--ink); color:#fff; font-family:var(--font-mono); font-size:.66rem;
  text-transform:uppercase; letter-spacing:.08em; text-align:center; padding:7px 4px;
}
.cal-cell{
  background:var(--panel); min-height:86px; padding:6px; cursor:pointer;
  display:flex; flex-direction:column; gap:3px; overflow:hidden;
}
.cal-cell:hover{ background:#F5F3EF; }
.cal-cell.cal-out{ background:#F7F5F1; color:#B7BCC1; }
.cal-cell.cal-out:hover{ background:#F0EEE9; }
.cal-cell.cal-today{ box-shadow:inset 0 0 0 2px var(--red); }
.cal-cell.cal-selected{ background:#FCEBEA; }
.cal-daynum{ font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); align-self:flex-end; }
.cal-cell.cal-today .cal-daynum{ color:var(--red); font-weight:700; }
.cal-chip{
  display:block; width:100%; font-size:.66rem; line-height:1.25; padding:2px 5px;
  border-radius:2px; border-left:3px solid transparent; background:#F0EEE9; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;
}
.cal-chip.cal-type-meeting{ border-left-color:var(--data-blue); }
.cal-chip.cal-type-deadline{ border-left-color:var(--red); }
.cal-chip.cal-type-event{ border-left-color:var(--warn); }
.cal-chip.cal-type-holiday{ border-left-color:var(--ok); background:#EAF6EF; }
.cal-chip.cal-type-task{ border-left-color:var(--ink); }
.cal-chip.cal-type-milestone{ border-left-color:#6D5A9E; }
.cal-chip.cal-type-project{ border-left-color:#2B6CB0; }
.cal-chip.cal-more{ background:transparent; color:var(--ink-soft); font-family:var(--font-mono); }

.cal-day-event{ display:flex; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line); }
.cal-day-event:last-child{ border-bottom:none; }
.cal-day-event-text{ flex:1; min-width:0; }
.cal-day-event-text b{ display:block; font-size:.88rem; margin-bottom:2px; }
.cal-day-event-text > span{ display:block; font-size:.75rem; color:var(--ink-soft); margin-bottom:4px; }
.cal-day-event-text p{ margin:0; font-size:.8rem; color:var(--ink-soft); }
.cal-day-event-actions{ display:flex; gap:8px; flex-shrink:0; align-items:flex-start; }

@media (max-width:720px){
  .cal-cell{ min-height:64px; padding:4px; }
  .cal-chip{ font-size:0; padding:3px 5px; border-left-width:3px; }
  .cal-chip.cal-more{ font-size:.6rem; }
  .cal-legend span:nth-child(n+5){ display:none; }
}

/* ==========================================================================
   PAST PROJECTS (public Services page + admin manager)
   ========================================================================== */
.past-projects{ padding:48px 0 8px; border-top:1px solid var(--line); margin-top:40px; }
.past-projects .section-head{ margin-bottom:20px; }
.pp-grid{ grid-column-gap:22px; }
.pp-card{ display:flex; flex-direction:column; overflow:hidden; padding:0; }
.pp-card-image{ position:relative; aspect-ratio:3/2; background:var(--panel); overflow:hidden; }
.pp-card-image img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.pp-card:hover .pp-card-image img{ transform:scale(1.04); }
.pp-card-noimage{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); font-size:1.8rem; }
.pp-card-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.pp-card-body h4{ font-size:.98rem; line-height:1.4; margin:0; }
.pp-card-body p{ font-size:.82rem; color:var(--ink-soft); line-height:1.55; margin:0; }
.pp-thumb{ width:52px; height:36px; object-fit:cover; border-radius:4px; border:1px solid var(--line); display:block; }

/* ==========================================================================
   RICH TEXT EDITOR (insights posts)
   ========================================================================== */
.rte{ border:1px solid var(--line-strong); border-radius:var(--radius); background:#fff; }
.rte-toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; padding:8px 10px; border-bottom:1px solid var(--line); background:var(--panel); border-radius:var(--radius) var(--radius) 0 0; }
.rte-toolbar select{ height:30px; padding:0 6px; font-size:.78rem; border:1px solid var(--line-strong); border-radius:6px; background:#fff; color:var(--ink); max-width:130px; }
.rte-toolbar button{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); cursor:pointer; font-size:.8rem; }
.rte-toolbar button:hover{ background:#fff; border-color:var(--line-strong); color:var(--red); }
.rte-toolbar .rte-sep{ width:1px; height:20px; background:var(--line); margin:0 4px; }
.rte-color-btn{ position:relative; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; cursor:pointer; color:var(--ink); }
.rte-color-btn:hover{ color:var(--red); }
.rte-color-btn input[type="color"]{ position:absolute; inset:0; opacity:0; cursor:pointer; border:none; padding:0; }
.rte-surface{ min-height:180px; max-height:460px; overflow-y:auto; padding:14px 16px; font-size:.92rem; line-height:1.7; outline:none; }
.rte-surface:focus{ box-shadow:inset 0 0 0 2px rgba(178,34,52,.15); }
.rte-surface:empty:before{ content:attr(data-placeholder); color:var(--ink-soft); }
.rte-note{ padding:6px 12px; border-top:1px dashed var(--line); background:var(--panel); border-radius:0 0 var(--radius) var(--radius); margin:0; }
.rte-surface blockquote{ border-left:3px solid var(--red); margin:8px 0; padding:4px 12px; color:var(--ink-soft); background:var(--panel); border-radius:0 6px 6px 0; }
.rte-surface img{ max-width:100%; border-radius:6px; }
.rte-surface p{ margin:0 0 8px; }
/* Headings inside the editor mirror the public post page so the
   outline (H2/H3/H4) is WYSIWYG while writing. */
.rte-surface h2{ font-size:1.3rem; font-weight:700; line-height:1.3; margin:18px 0 6px; color:var(--ink); }
.rte-surface h3{ font-size:1.12rem; font-weight:700; line-height:1.3; margin:14px 0 4px; color:var(--ink); }
.rte-surface h4{ font-size:1rem; font-weight:700; line-height:1.3; margin:12px 0 4px; color:var(--ink); }
.rte-surface h2:first-child, .rte-surface h3:first-child, .rte-surface h4:first-child{ margin-top:0; }
.rte-surface ul, .rte-surface ol{ margin:0 0 8px; padding-left:22px; }

/* Rendered rich post bodies (insights pages + preview modals) */
.post-body-rich p{ margin:0 0 12px; }
.post-body-rich h2, .post-body-rich h3{ margin:20px 0 8px; }
.post-body-rich h4{ margin:16px 0 6px; }
.post-body-rich ul, .post-body-rich ol{ margin:0 0 12px; padding-left:22px; }
.post-body-rich blockquote{ border-left:3px solid var(--red); margin:12px 0; padding:8px 14px; background:var(--panel); border-radius:0 6px 6px 0; color:var(--ink-soft); }
.post-body-rich img{ max-width:100%; border-radius:8px; margin:8px 0; }
.post-body-rich a{ color:var(--red); text-decoration:underline; }
.detail-modal-wide{ max-width:820px; }

/* Post tags — chips at the bottom of an insight post; each links to the
   filtered /insights?tag=… list. */
.post-tags{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:36px; padding-top:20px; border-top:1px solid var(--line); }
.post-tags-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:#9AA1A8; font-family:var(--font-mono); }
.post-tags-label i{ margin-right:4px; }
.post-tag-chip{ font-size:.78rem; }

/* Related insights — up to three cards under a post, ranked by shared
   tags, then category, then title/excerpt keyword overlap. */
.related-posts{ margin-top:48px; }
.related-posts h2{ font-size:1.15rem; margin:0 0 16px; }
.related-posts h2 i{ color:var(--red); margin-right:6px; font-size:1rem; }
.related-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.related-card{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); background:var(--panel); transition:border-color .15s ease, transform .15s ease; }
.related-card:hover{ border-color:var(--red); transform:translateY(-2px); }
.related-card-image{ display:block; height:120px; background:var(--panel) center/cover no-repeat; border-bottom:1px solid var(--line); }
.related-card-image-blank{ display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--line-strong); background:#F7F5F2; }
.related-card-body{ display:flex; flex-direction:column; gap:6px; padding:14px; }
.related-card-tag{ align-self:flex-start; font-size:.64rem; }
.related-card-body strong{ font-size:.92rem; line-height:1.4; }
.related-card-date{ font-size:.72rem; color:#9AA1A8; font-family:var(--font-mono); }
@media (max-width:720px){ .related-grid{ grid-template-columns:1fr; } }

/* Tag chips + active tag filter on the public Insights list. */
.insight-card-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 10px; }
.insight-card-tags .tag{ font-size:.64rem; }

/* About page leadership cards rendered from the real staff accounts. */
.team-card{ text-align:left; }
.team-card h3{ font-size:1.02rem; margin-bottom:4px; }
.team-card-role{ font-size:.8rem; color:var(--red); font-family:var(--font-mono); margin:0 0 10px; }
.team-card p{ font-size:.88rem; }
.tag-filter-bar{ display:flex; align-items:center; gap:10px; margin:0 0 22px; padding:10px 14px; border:1px dashed var(--line-strong); border-radius:var(--radius); background:var(--panel); font-size:.84rem; }
.tag-filter-bar .tag{ font-size:.72rem; }
.tag-filter-bar a{ color:var(--red); text-decoration:none; font-size:.76rem; }
.tag-filter-bar a:hover{ text-decoration:underline; }

/* ==========================================================================
   FILE PREVIEW MODAL
   ========================================================================== */
.file-preview-modal{ max-width:900px; display:flex; flex-direction:column; max-height:88vh; }
.file-preview-title{ display:flex; align-items:center; gap:10px; font-size:1rem; min-width:0; }
.file-preview-title i{ color:var(--red); flex-shrink:0; }
.file-preview-title span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file-preview-head-actions{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.file-preview-body{ padding:0; display:flex; flex-direction:column; min-height:240px; overflow:hidden; }
.file-preview-image{ display:flex; align-items:center; justify-content:center; padding:20px; background:#15181B; overflow:auto; }
.file-preview-image img{ max-width:100%; max-height:64vh; border-radius:6px; box-shadow:0 8px 30px rgba(0,0,0,.5); }
.file-preview-pdf{ width:100%; height:70vh; border:none; background:#fff; }
.file-preview-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 14px; border-bottom:1px solid var(--line); background:var(--panel); }
.file-preview-text{ margin:0; padding:16px 18px; overflow:auto; max-height:60vh; font-family:var(--font-mono); font-size:.8rem; line-height:1.6; white-space:pre-wrap; word-break:break-word; background:#fff; }
.file-preview-edit{ display:block; width:100%; min-height:220px; max-height:60vh; padding:16px 18px; font-family:var(--font-mono); font-size:.8rem; line-height:1.6; border:none; outline:none; resize:vertical; }
.file-preview-doc{ padding:18px 22px; overflow:auto; max-height:70vh; background:#fff; }
.file-preview-doc p{ margin:0 0 10px; }
.file-preview-doc table{ border-collapse:collapse; width:100%; margin:10px 0; }
.file-preview-doc table td, .file-preview-doc table th{ border:1px solid var(--line); padding:6px 10px; font-size:.84rem; }
.file-preview-sheet{ padding:14px 18px; overflow:auto; max-height:70vh; background:#fff; }
.file-preview-sheet-name{ margin:14px 0 6px; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
.file-preview-sheet table{ border-collapse:collapse; width:100%; margin-bottom:10px; }
.file-preview-sheet td, .file-preview-sheet th{ border:1px solid var(--line); padding:5px 9px; font-size:.8rem; text-align:left; }
.file-preview-sheet tr:first-child td{ background:var(--panel); font-weight:600; }
.file-preview-fallback{ display:flex; flex-direction:column; align-items:center; gap:12px; padding:48px 20px; text-align:center; color:var(--ink-soft); }
.file-preview-fallback i{ font-size:2.2rem; color:var(--red); }

/* ==========================================================================
   FILES TABLE — kebab (⋮) actions dropdown + share / rename modals
   ========================================================================== */
.file-actions{ position:relative; white-space:nowrap; text-align:right; }
.file-actions-btn{
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel);
  color:var(--ink-soft); cursor:pointer; font-size:.95rem; line-height:1; vertical-align:middle;
}
.file-actions-btn:hover{ border-color:var(--red); color:var(--red); }
.file-actions-menu{
  position:absolute; right:0; top:calc(100% + 4px); z-index:70; min-width:220px;
  background:var(--panel); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:6px; display:none; text-align:left;
}
.file-actions-menu.open{ display:block; }
.file-actions-menu button, .file-actions-menu a{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:none; border:none; cursor:pointer; font:inherit; font-size:.85rem;
  color:var(--ink); padding:9px 10px; border-radius:2px; text-decoration:none;
}
.file-actions-menu button:hover, .file-actions-menu a:hover{ background:#F5F3EF; }
.file-actions-menu button i, .file-actions-menu a i{ width:16px; color:var(--ink-soft); }
.file-actions-menu button.file-menu-danger{ color:var(--red-dark); }
.file-actions-menu button.file-menu-danger i{ color:var(--red); }
.file-actions-menu .file-menu-note{
  display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--ink-soft);
  padding:9px 10px; border-radius:2px; cursor:default;
}
.file-actions-menu .file-menu-note i{ width:16px; }
.share-priv-tag{
  font-style:normal; font-size:.7rem; font-weight:600; letter-spacing:.03em;
  color:var(--red-dark); background:rgba(178,34,52,.08); border:1px solid rgba(178,34,52,.18);
  border-radius:99px; padding:1px 7px; margin-left:2px; white-space:nowrap;
}
/* Share modal: searchable staff list with per-person privilege */
.share-search-bar{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  border-bottom:1px solid var(--line); background:#FCFBF9;
}
.share-search-bar > i{ color:var(--ink-soft); font-size:.85rem; }
.share-search-bar input{
  flex:1; border:none; background:transparent; padding:4px 0; font-size:.85rem; box-shadow:none;
}
.share-search-bar input:focus{ border:none; }
.share-staff-list{ max-height:320px; overflow-y:auto; padding:8px 10px; }
.share-staff-row{
  display:flex; align-items:center; gap:12px; padding:8px 8px; border-radius:var(--radius);
  cursor:pointer; border:1px solid transparent;
}
.share-staff-row:hover{ background:#FCFBF9; }
.share-staff-row.selected{ background:#F7F3EF; border-color:rgba(178,34,52,.14); }
.share-staff-row input[type=checkbox]{ width:auto; flex-shrink:0; margin:0; }
.share-staff-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.share-staff-info b{ font-size:.88rem; }
.share-staff-info .file-meta{ font-size:.75rem; }
.share-staff-row select{
  display:none; width:auto; margin:0; font-size:.8rem; padding:5px 26px 5px 8px; flex-shrink:0;
}
.share-staff-row.selected select{ display:block; }
.share-modal-foot{ padding:14px 16px 16px; border-top:1px solid var(--line); }
.share-modal-foot .btn{ margin-top:10px; }
/* Rename modal */
#fileActionModal .detail-modal-body{ padding:20px; }
#fileActionModal .detail-modal-head h2{ font-size:1rem; display:flex; align-items:center; gap:8px; }
#fileActionModal .detail-modal-head h2 i{ color:var(--red); font-size:.9rem; }
#fileActionModal .btn-primary{ margin-top:14px; }

/* ==========================================================================
   WHATSAPP-STYLE INTERNAL MESSAGES
   ========================================================================== */
/* Fixed chat window: the layout never grows with history — the thread
   scrolls INSIDE a viewport-capped pane, so the attach/text/send bar stays
   pinned to the bottom of the window and opening a chat shows the newest
   messages (JS scrolls to bottom); scrolling up reveals older ones.
   --msg-chrome absorbs the chrome above the layout: topbar + page padding
   (+ the panel that wraps the layout on some pages). */
.msg-layout{
  grid-template-columns:300px 1fr;
  height:calc(100vh - var(--msg-chrome, 148px));
  height:calc(100dvh - var(--msg-chrome, 148px));
  min-height:480px;
}
.panel .msg-layout{ --msg-chrome:212px; min-height:420px; }
.panel h2 + .msg-layout{ --msg-chrome:250px; }
.msg-list .msg-item{ padding:12px 14px; }
.msg-list .msg-item.active{ background:#EFEAE4; border-left:3px solid var(--red); padding-left:11px; }
.msg-thread{ display:flex; flex-direction:column; padding:18px 22px 10px; overflow-y:auto; overscroll-behavior:contain; background-color:#EFEAE4;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(178,34,52,.035) 2px, transparent 2.5px),
    radial-gradient(circle at 78% 42%, rgba(31,36,44,.035) 2px, transparent 2.5px),
    radial-gradient(circle at 42% 78%, rgba(178,34,52,.03) 1.6px, transparent 2px),
    radial-gradient(circle at 88% 86%, rgba(31,36,44,.03) 1.6px, transparent 2px);
  background-size:160px 160px, 220px 220px, 180px 180px, 260px 260px; }
.msg-thread .bubble{ position:relative; max-width:72%; padding:8px 12px 6px; border-radius:12px; margin-bottom:14px; font-size:.88rem; box-shadow:0 1px 1px rgba(32,36,40,.14); width:fit-content; }
.msg-thread .bubble.out{ align-self:flex-end; background:#FBEAE7; border-bottom-right-radius:3px; border-top-right-radius:12px; }
.msg-thread .bubble.in{ align-self:flex-start; background:#FFFFFF; border-bottom-left-radius:3px; border-top-left-radius:12px; }
.msg-thread .bubble.out:before{ content:""; position:absolute; right:-6px; bottom:0; width:12px; height:12px; background:#FBEAE7; clip-path:polygon(0 0, 100% 100%, 0 100%); box-shadow:2px 2px 2px rgba(32,36,40,.06); }
.msg-thread .bubble.in:before{ content:""; position:absolute; left:-6px; bottom:0; width:12px; height:12px; background:#FFFFFF; clip-path:polygon(100% 0, 100% 100%, 0 100%); }
.msg-thread .bubble time{ display:flex; align-items:center; justify-content:flex-end; gap:4px; font-size:.66rem; color:var(--ink-soft); margin-top:3px; }
.msg-date-sep{ align-self:center; margin:6px 0 16px; }
.msg-date-sep span{ background:#FFFFFF; box-shadow:0 1px 2px rgba(32,36,40,.16); border-radius:999px; padding:4px 14px; font-size:.7rem; font-weight:600; color:var(--ink-soft); letter-spacing:.02em; }
.msg-ticks{ display:inline-flex; align-items:center; margin-left:2px; color:#A6ADB4; }
.msg-ticks i{ font-size:.62rem; }
.msg-ticks i:nth-child(2){ margin-left:-4px; }
.msg-ticks.read{ color:var(--red); }
.msg-attachment{ display:flex; align-items:center; gap:8px; width:100%; margin-top:6px; padding:8px 10px; background:rgba(255,255,255,.65); border:1px solid var(--line); border-radius:8px; font-size:.78rem; color:inherit; cursor:pointer; text-align:left; }
.msg-attachment:hover{ border-color:var(--red); background:#fff; }
.msg-attachment-icon{ width:28px; height:28px; border-radius:6px; background:var(--panel); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--red); }
.msg-attachment-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.msg-attachment-size{ color:var(--ink-soft); font-size:.7rem; flex-shrink:0; }
.msg-empty-note{ text-align:center; padding:40px 0; }
.msg-compose{ display:flex; gap:10px; padding:12px 16px; border-top:1px solid var(--line); align-items:flex-end; background:#fff; }
.msg-compose textarea{ min-height:44px; max-height:140px; flex:1; border-radius:999px; padding:11px 18px; }

/* ---- unified roster: people + groups in one message list ---- */
.msg-list-section{
  font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--ink-soft); padding:12px 16px 6px; border-bottom:1px solid var(--line);
  background:#FCFBF9;
}
.msg-item-group{ background:#FCFBFA; }
.msg-group-avatar{ width:40px; height:40px; background:var(--ink); color:#fff; font-size:.85rem; }
.msg-thread-avatar{ width:36px; height:36px; flex-shrink:0; }
.msg-thread-avatar .fa-users{ color:#fff; font-size:.8rem; }
.msg-sender{ font-size:.72rem; font-weight:700; margin-bottom:2px; color:var(--red-dark); }

/* The chat column of a .msg-layout (thread head + search + thread +
   compose). Kept as a class (not an inline style) so the mobile rules
   below can show/hide the whole pane. */
.msg-pane{ display:flex; flex-direction:column; min-width:0; min-height:0; }

/* Mobile messaging — one column: the roster fills the pane until a
   conversation is tapped (.chat-open slides the chat in); the back
   arrow in the thread head returns to the roster. */
.msg-back-btn{
  display:none; width:34px; height:34px; flex-shrink:0; margin-right:-2px;
  align-items:center; justify-content:center;
  border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--panel);
  color:var(--ink-soft); cursor:pointer; font-size:.95rem; line-height:1;
}
.msg-back-btn:hover{ border-color:var(--red); color:var(--red); }

@media (max-width:900px){
  .msg-layout{
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    height:calc(100vh - 150px);
    min-height:420px;
  }
  @supports (height: 100dvh){
    .msg-layout{ height:calc(100dvh - 150px); }
  }
  /* the roster sits inside a panel on the Department Groups page */
  .panel .msg-layout{ height:calc(100vh - 200px); }
  .msg-list{ max-height:none; border-right:none; }
  .msg-pane{ display:none; }
  .msg-layout.chat-open .msg-list{ display:none; }
  .msg-layout.chat-open .msg-pane{ display:flex; }
  .msg-back-btn{ display:inline-flex; }
  .msg-thread .bubble{ max-width:88%; }
  .msg-item{ padding:12px 14px; }
}

/* ---- wide data tables scroll horizontally inside their panel ---- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
body[data-role] .table-scroll table.data-table{ display:table; }

/* ---- general phone-fit for portal content ---- */
@media (max-width:720px){
  body[data-role] table.data-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  body[data-role] .table-scroll table.data-table{ display:table; overflow:visible; }
  .panel{ padding:16px; }
  .upload-zone{ padding:22px 14px; }
  .btn{ padding:12px 16px; }
  .btn-sm{ padding:9px 12px; }
  .detail-modal-overlay{ padding:10px; }
  .detail-modal{ max-height:92vh; }
  .file-preview-modal{ max-height:94vh; }
  .file-preview-toolbar{ flex-wrap:wrap; }
  .msg-compose{ padding:10px; gap:8px; }
  .msg-compose textarea{ padding:11px 14px; }
  .share-staff-row{ flex-wrap:wrap; }
  .share-staff-row select{ flex-basis:100%; margin-top:4px; }
  .member-profile-head{ gap:14px; }
  .cal-event-actions{ flex-direction:column; }
  .kpi{ padding:14px; }
  .kpi b{ font-size:1.3rem; }
  /* promotions template picker keeps its 5-column inline grid otherwise */
  #templateGrid{ grid-template-columns:repeat(2,1fr) !important; gap:12px !important; }
  .card{ padding:18px; }
  .jitsi-frame-wrap{ height:86vh; }
}

/* ==========================================================================
   MS TEAMS-STYLE PROFILE PAGE
   ========================================================================== */
.msprofile{ display:flex; flex-direction:column; gap:24px; }
.msprofile-banner{ position:relative; border-radius:var(--radius); overflow:hidden; background:var(--ink); }
.msprofile-banner-bg{ position:absolute; inset:0;
  background:
    radial-gradient(circle at 82% 20%, rgba(178,34,52,.4), transparent 42%),
    radial-gradient(circle at 12% 90%, rgba(178,34,52,.22), transparent 38%),
    linear-gradient(120deg, #1F242C 0%, #171B21 100%); }
.msprofile-banner-bg:after{ content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.028) 0 2px, transparent 2px 14px); }
.msprofile-banner-row{ position:relative; display:flex; align-items:flex-end; gap:22px; padding:34px 28px 22px; flex-wrap:wrap; }
.msprofile-avatar-wrap{ position:relative; flex-shrink:0; margin-bottom:-34px; }
.msprofile-avatar-wrap .avatar-circle.avatar-circle-lg{ width:128px !important; height:128px !important; border:4px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.35); font-size:2.4rem !important; background-color:#B22234; }
.msprofile-cam{ position:absolute; right:-2px; bottom:-2px; width:38px; height:38px; border-radius:50%; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; border:3px solid #fff; font-size:.85rem; }
.msprofile-cam:hover{ background:var(--red-dark); }
.msprofile-id{ min-width:220px; flex:1; }
.msprofile-id h2{ color:#fff; margin:0 0 6px; font-size:1.5rem; }
.msprofile-role-line{ color:#C9CDD2; margin:0 0 8px; font-size:.9rem; text-transform:capitalize; }
.msprofile-email-line{ color:#9AA1A8; margin:0; font-size:.82rem; display:flex; align-items:center; gap:8px; }
.msprofile-email-line i{ color:var(--red); }
.msprofile-photo-note{ position:relative; color:#9AA1A8; margin:0; padding:0 28px 14px; font-size:.74rem; }
.msprofile-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; align-items:start; padding-top:12px; }
.msprofile-card{ padding:22px 24px; }
.msprofile-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.msprofile-card-head h2{ margin:0; font-size:1.05rem; }
.msprofile-bio{ font-size:.9rem; color:var(--ink-soft); line-height:1.7; margin:0; }
.msprofile-details{ display:grid; gap:0; margin:0; }
.msprofile-details > div{ display:flex; gap:14px; padding:10px 0; border-bottom:1px dashed var(--line); }
.msprofile-details > div:last-child{ border-bottom:none; }
.msprofile-details dt{ width:110px; flex-shrink:0; color:var(--ink-soft); font-size:.8rem; }
.msprofile-details dd{ margin:0; font-size:.86rem; font-weight:600; overflow-wrap:anywhere; }
@media (max-width:900px){
  .msprofile-grid{ grid-template-columns:1fr; }
  .msprofile-avatar-wrap{ margin-bottom:-26px; }
  .msprofile-avatar-wrap .avatar-circle.avatar-circle-lg{ width:96px !important; height:96px !important; }
  .msprofile-banner-row{ padding:26px 18px 16px; }
}