/* ═════════════════════════════════════════════════════════════════════════════
   AFIC Portal — shared components.
   Load order: tokens.css → main.css (where used) → components.css → cards.css
   Everything here is opt-in by class name, so a page picks up the new look only
   where its markup uses these classes. Nothing is restyled by element selector.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE HEADER
   One treatment for every module. The accent comes from --page-c, set inline
   per page, so the header ties to the same colour as that module's home tile.
   ───────────────────────────────────────────────────────────────────────────── */
.pagehead{
  --page-c: var(--accent);
  --page-tint: var(--accent-light);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.pagehead-rule{ height:3px; background:var(--page-c); }
.pagehead-body{ padding:18px 22px; }

.pagehead-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.pagehead-id{ display:flex; align-items:center; gap:13px; min-width:0; }
.pagehead-icon{
  width:42px; height:42px; flex:none;
  border-radius:12px;
  background:var(--page-tint); color:var(--page-c);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.pagehead-titles{ min-width:0; }
.pagehead-title{
  font-family:var(--font-display); font-size:22px; letter-spacing:-.3px;
  color:var(--ink); line-height:1.2;
}
.pagehead-sub{ font-size:12.5px; color:var(--ink-muted); margin-top:3px; }
.pagehead-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.pagehead-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px; margin-top:16px;
}
.pagehead-stat{
  background:var(--paper); border-radius:10px; padding:10px 13px;
  border:1px solid var(--border);
}
.pagehead-stat-val{
  font-family:var(--font-display); font-size:21px; line-height:1;
  color:var(--sc, var(--ink)); letter-spacing:-.4px;
}
.pagehead-stat-lbl{
  font-size:10px; color:var(--ink-muted); margin-top:4px;
  text-transform:uppercase; letter-spacing:.5px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS — one definition, replacing the per-page copies
   ───────────────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 15px;
  border:1.5px solid transparent; border-radius:9px;
  font-family:var(--font-body); font-size:13px; font-weight:500;
  line-height:1; white-space:nowrap; cursor:pointer;
  transition:background var(--t), border-color var(--t), color var(--t),
             box-shadow var(--t), transform var(--t);
}
.btn:active:not(:disabled){ transform:translateY(1px); }
.btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(200,75,47,.22); }
.btn:disabled,.btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; transform:none; }

.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover:not(:disabled){ background:var(--accent-h); }
.btn-secondary{ background:var(--card); color:var(--ink-soft); border-color:var(--border); }
.btn-secondary:hover:not(:disabled){ background:var(--paper); border-color:#cfc9c0; }
.btn-ghost{ background:transparent; color:var(--ink-soft); }
.btn-ghost:hover:not(:disabled){ background:var(--paper-warm); }
.btn-success{ background:var(--green); color:#fff; }
.btn-success:hover:not(:disabled){ background:#225b3e; }
.btn-danger{ background:var(--red-light); color:var(--red); }
.btn-danger:hover:not(:disabled){ background:#fecaca; }
.btn-sm{ height:30px; padding:0 11px; font-size:12px; border-radius:8px; }
.btn-lg{ height:42px; padding:0 20px; font-size:14.5px; border-radius:10px; }
.btn-block{ width:100%; }

/* ─────────────────────────────────────────────────────────────────────────────
   FORMS
   ───────────────────────────────────────────────────────────────────────────── */
.form-control{
  width:100%; min-height:38px; padding:9px 13px;
  border:1.5px solid var(--border); border-radius:9px;
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  background:var(--card); outline:none;
  transition:border-color var(--t), box-shadow var(--t);
}
.form-control::placeholder{ color:var(--ink-muted); opacity:.8; }
.form-control:hover:not(:disabled):not(:focus){ border-color:#cfc9c0; }
.form-control:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,75,47,.12); }
.form-control:disabled{ background:var(--paper); color:var(--ink-muted); cursor:not-allowed; }
.form-control[aria-invalid="true"]{ border-color:var(--red); }
select.form-control{ cursor:pointer; }
textarea.form-control{ min-height:76px; resize:vertical; line-height:1.6; }
.form-label{
  display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px;
}
.form-hint{ font-size:11.5px; color:var(--ink-muted); line-height:1.55; }
.form-error{ font-size:11.5px; color:var(--red); line-height:1.55; }
.required{ color:var(--accent); margin-left:2px; }

/* ─────────────────────────────────────────────────────────────────────────────
   TOASTS — bottom right on desktop, full width on phones
   ───────────────────────────────────────────────────────────────────────────── */
.toast-host{
  position:fixed; right:18px; bottom:18px; z-index:9999;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
  max-width:min(380px,calc(100vw - 36px));
}
.toast{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--ink); color:#fff;
  padding:11px 15px; border-radius:11px;
  font-size:13.5px; line-height:1.5;
  box-shadow:var(--shadow-lg);
  border-left:3px solid var(--ink-muted);
  pointer-events:auto;
  animation:toast-in .22s cubic-bezier(.4,0,.2,1);
}
.toast.success{ border-left-color:#4ade80; }
.toast.error  { border-left-color:#f87171; }
.toast.warn   { border-left-color:var(--gold); }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ─────────────────────────────────────────────────────────────────────────────
   LOADING SKELETONS — shown while data is in flight, instead of "Loading…"
   ───────────────────────────────────────────────────────────────────────────── */
.skel{
  background:linear-gradient(90deg,var(--paper-warm) 25%,#f5f2ec 50%,var(--paper-warm) 75%);
  background-size:200% 100%;
  animation:skel-shimmer 1.3s ease-in-out infinite;
  border-radius:6px;
}
@keyframes skel-shimmer{ from{background-position:200% 0;} to{background-position:-200% 0;} }
.skel-line{ height:11px; margin-bottom:8px; }
.skel-line.w40{ width:40%; } .skel-line.w60{ width:60%; } .skel-line.w80{ width:80%; }
.skel-card{
  background:var(--card); border:1px solid var(--border);
  border-radius:14px; padding:16px; display:flex; gap:13px;
}
.skel-cover{ width:62px; height:82px; flex:none; border-radius:8px; }
.skel-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:1px solid var(--border);
}
@media (prefers-reduced-motion: reduce){ .skel{ animation:none; } }

/* ─────────────────────────────────────────────────────────────────────────────
   EMPTY STATES — icon, what it means, and what to do next
   ───────────────────────────────────────────────────────────────────────────── */
.emptystate{
  text-align:center; padding:52px 24px;
  color:var(--ink-muted); grid-column:1/-1;
}
.emptystate-icon{
  width:64px; height:64px; margin:0 auto 16px;
  border-radius:18px; background:var(--paper-warm);
  display:flex; align-items:center; justify-content:center; font-size:28px;
  color:var(--ink-muted);
}
.emptystate-title{
  font-family:var(--font-display); font-size:19px; color:var(--ink-soft);
  margin-bottom:6px; letter-spacing:-.2px;
}
.emptystate-text{ font-size:13px; line-height:1.65; max-width:380px; margin:0 auto 16px; }
.emptystate .btn{ margin:0 auto; }

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE — the app shell is a fixed sidebar, which needs unpicking on phones
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-menu-btn{
  display:none; position:fixed; top:11px; left:12px; z-index:120;
  width:36px; height:36px; border-radius:9px;
  background:var(--ink); color:#fff;
  align-items:center; justify-content:center; border:none; cursor:pointer;
}
.sidebar-scrim{
  display:none; position:fixed; inset:0; z-index:99;
  background:rgba(13,17,23,.5); backdrop-filter:blur(2px);
}
.sidebar-scrim.open{ display:block; }

@media(max-width:820px){
  .mobile-menu-btn{ display:flex; }

  /* Slide the NAV sidebar in rather than permanently reserving 250px.
     Scoped to [data-nav] because Library and three MIS pages also use a
     .sidebar class for a content panel that must stay where it is. */
  .sidebar[data-nav]{ transform:translateX(-100%); transition:transform var(--t); z-index:100; }
  .sidebar[data-nav].open{ transform:none; box-shadow:var(--shadow-lg); }
  .main-wrap{ margin-left:0 !important; }

  /* Content-panel sidebars stack above their list instead of sitting beside it */
  .layout{ grid-template-columns:1fr !important; gap:16px !important; padding:16px 14px !important; }
  .page:not(.page-content){ grid-template-columns:1fr !important; }
  .sidebar:not([data-nav]){ position:static !important; }

  .topbar{ padding-left:58px !important; }
  .page-content{ padding:16px 14px !important; }

  .pagehead-body{ padding:15px 16px; }
  .pagehead-title{ font-size:19px; }
  .pagehead-top{ flex-direction:column; align-items:stretch; }
  .pagehead-actions{ width:100%; }
  .pagehead-actions .btn{ flex:1; }
  .pagehead-stats{ grid-template-columns:repeat(2,1fr); }

  /* Filter bars stack instead of squeezing */
  .filter-bar{ flex-direction:column; align-items:stretch !important; }
  .filter-bar input,.filter-bar select,.filter-bar > span{ width:100% !important; min-width:0 !important; }

  /* Modals and drawers become full-height sheets */
  .modal{ max-width:100% !important; max-height:92vh; }
  .modal-overlay{ padding:10px !important; align-items:flex-end !important; }
  .drawer{ width:100% !important; }

  .toast-host{ left:12px; right:12px; bottom:12px; max-width:none; }

  /* Wide tables scroll rather than overflow the viewport */
  .table-wrap,.ptable-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

@media(max-width:520px){
  .pagehead-stats{ grid-template-columns:1fr 1fr; gap:8px; }
  .pagehead-stat-val{ font-size:18px; }
  .emptystate{ padding:40px 16px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   EXISTING HEADERS, CONVERTED
   Members, Proposals and the Library each grew their own dark banner. Rather
   than rebuild their markup, the existing classes are re-pointed at the light
   treatment above. Same DOM, same IDs, new look — and if a page is later
   rewritten to use .pagehead directly, these rules simply stop matching.
   ───────────────────────────────────────────────────────────────────────────── */

/* Members — .dir-header */
.dir-header{
  background:var(--card) !important;
  border:1px solid var(--border);
  border-top:3px solid var(--blue);
  border-radius:var(--radius-lg);
  color:var(--ink) !important;
  box-shadow:var(--shadow-sm);
  padding:18px 22px !important;
}
.dir-title{ color:var(--ink); font-size:22px; }
.dir-sub{ color:var(--ink-muted) !important; }
.dir-stat{
  background:var(--paper) !important;
  border:1px solid var(--border) !important;
  border-top-width:1px !important;
}
.dir-stat-val{ color:var(--ink) !important; font-size:21px; }
.dir-stat-lbl{ color:var(--ink-muted) !important; }
.dir-header .btn-secondary{
  background:var(--card) !important; border-color:var(--border) !important;
  color:var(--ink-soft) !important;
}
.dir-header .btn-secondary:hover{ background:var(--paper) !important; }

/* Proposals — .proposals-header */
.proposals-header{
  background:var(--card) !important;
  border:1px solid var(--border);
  border-top:3px solid var(--gold);
  border-radius:var(--radius-lg);
  color:var(--ink) !important;
  box-shadow:var(--shadow-sm);
  padding:18px 22px !important;
}
.ph-title{ color:var(--ink); font-size:22px; }
.ph-sub{ color:var(--ink-muted) !important; }
.pstat{
  background:var(--paper) !important;
  border:1px solid var(--border) !important;
  border-top:1px solid var(--border) !important;
}
.pstat-val{ color:var(--ink) !important; font-size:21px; }
.pstat-lbl{ color:var(--ink-muted) !important; }
.proposals-header .btn-secondary{
  background:var(--card) !important; border-color:var(--border) !important;
  color:var(--ink-soft) !important;
}

/* Library — .hero. Keeps the search bar, loses the dark slab. */
.hero{
  background:var(--card) !important;
  border-bottom:1px solid var(--border);
  border-top:3px solid #2a6b4a;
  padding:16px 5% !important;
}
.hero-logo{ color:var(--ink) !important; }
.hero-label{ color:var(--ink-soft) !important; }
.hero-divider{ background:var(--border) !important; }
.hero-search input{
  border:1.5px solid var(--border) !important;
  border-right:none !important;
}
.hero-search input:focus{ border-color:var(--accent) !important; }
.hero-stat-val{ color:var(--ink) !important; }
.hero-stat-lbl{ color:var(--ink-muted) !important; }

/* ─────────────────────────────────────────────────────────────────────────────
   SIDEBAR DENSITY
   The Activity Tracker carries ten nav items across three groups - twice any
   other page - and is the only sidebar that ever needs to scroll. The budget,
   measured rather than guessed:

     logo block   ~86px   nav item  ~31px x 10     group label ~24px x 3
     footer       ~55px

   Ten items plus three labels plus the shell is roughly 620px at the base
   density, so anything under about 640px of window would scroll. The tiers
   below shed height progressively, and by the last one the whole shell fits in
   just over 500px. Tightening it here rather than in tracker.html keeps every
   sidebar consistent and gives the shorter ones headroom too.
   ───────────────────────────────────────────────────────────────────────────── */
.sidebar[data-nav] .sidebar-logo{ padding:15px 22px 12px; }
.sidebar[data-nav] .sidebar-nav{ padding:6px 0; }
.sidebar[data-nav] .nav-section{ padding:10px 22px 4px; font-size:9.5px; letter-spacing:1.3px; }
.sidebar[data-nav] .nav-section:first-child{ padding-top:2px; }
.sidebar[data-nav] .nav-item{ padding:7px 22px; font-size:13.5px; gap:11px; }
.sidebar[data-nav] .sidebar-footer{ padding:11px 22px; }
.sidebar[data-nav] .logo-name{ font-size:19px; }
.sidebar[data-nav] .logo-sub{ font-size:10px; margin-top:3px; }
.sidebar[data-nav] .logo-year{ margin-top:4px; }
.sidebar[data-nav] .s-avatar{ width:30px; height:30px; font-size:12px; }
/* The footer identity is the way into the account page now that the nav row is
   gone, so it needs to look reachable. */
.sidebar[data-nav] a.sidebar-user{ border-radius:9px; margin:-4px -6px; padding:4px 6px;
  transition:background var(--t); }
.sidebar[data-nav] a.sidebar-user:hover{ background:rgba(255,255,255,.07); }

/* Short windows shed height progressively rather than jumping to a scrollbar. */
@media(max-height:860px){
  .sidebar[data-nav] .sidebar-logo{ padding:12px 22px 10px; }
  .sidebar[data-nav] .nav-item{ padding:6px 22px; font-size:13px; }
  .sidebar[data-nav] .nav-section{ padding:8px 22px 3px; }
  .sidebar[data-nav] .sidebar-footer{ padding:9px 22px; }
}
@media(max-height:760px){
  .sidebar[data-nav] .nav-item{ padding:5px 22px; }
  .sidebar[data-nav] .nav-icon{ width:16px; height:16px; }
  .sidebar[data-nav] .nav-section{ padding:7px 22px 3px; }
  .sidebar[data-nav] .logo-sub{ display:none; }
  .sidebar[data-nav] .logo-year{ margin-top:3px; }
}
@media(max-height:640px){
  /* Last resort before scrolling: the year pill and the footer job title go,
     and the rhythm tightens to the point where the icon sets the row height. */
  .sidebar[data-nav] .nav-item{ padding:4px 22px; font-size:12.5px; }
  .sidebar[data-nav] .nav-icon{ width:15px; height:15px; }
  .sidebar[data-nav] .nav-section{ padding:6px 22px 2px; font-size:9px; }
  .sidebar[data-nav] .sidebar-logo{ padding:10px 22px 8px; }
  .sidebar[data-nav] .logo-name{ font-size:17px; }
  .sidebar[data-nav] .logo-year{ display:none; }
  .sidebar[data-nav] .sidebar-footer{ padding:8px 22px; }
  .sidebar[data-nav] .s-avatar{ width:26px; height:26px; font-size:11px; }
  .sidebar[data-nav] .s-role{ display:none; }
}