/* MTQ Committee System — Design tokens & shared components
   Version 2.1.0 — 2026-08-01 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700&display=swap');

:root {
  --primary: #5B8BA6;
  --primary-tint: rgba(91,139,166,0.12);
  --primary-ink: #3C6178;
  --secondary: #7FB5A3;
  --secondary-tint: rgba(127,181,163,0.14);
  --secondary-ink: #2F5C4E;
  --accent: #E8A87C;
  --accent-tint: rgba(232,168,124,0.15);
  --accent-ink: #8A4F2B;
  --success: #7FB88A;
  --success-tint: rgba(127,184,138,0.15);
  --warning: #E0B25F;
  --warning-tint: rgba(224,178,95,0.18);
  --warning-ink: #7A5A18;
  --error: #D4796F;
  --error-tint: rgba(212,121,111,0.15);
  --error-ink: #8C3B31;

  --n-50: #FAFAF8;  --n-100: #F5F3EE; --n-200: #EDEAE2; --n-300: #DDD9CD;
  --n-400: #C4BFB0; --n-500: #A39D8C; --n-600: #7D7869; --n-700: #5C584C;
  --n-800: #3E3B33; --n-900: #2A2E2E;

  --branch-burhani: var(--primary);
  --branch-hakimi: var(--secondary);
  --branch-saifee: var(--accent);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --fs-caption: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-h3: 20px; --fs-h2: 24px; --fs-h1: 32px;
  --radius: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(42,46,46,0.06), 0 1px 8px rgba(42,46,46,0.04);
  --shadow-modal: 0 8px 32px rgba(42,46,46,0.18);
  --transition: 180ms ease;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--n-50);
  color: var(--n-900);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
h1,h2,h3 { font-weight: 700; margin: 0; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
p { margin: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* Layout shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; background: #fff; border-right: 0.5px solid var(--n-200);
  padding: var(--sp-6) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-6);
  position: sticky; top: 0; height: 100vh; flex-shrink: 0;
}
.sidebar-logo { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-h3); color: var(--n-900); }
.sidebar-logo img { width: 28px; height: 28px; }
.nav-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3); padding: 10px 12px; border-radius: var(--radius);
  color: var(--n-700); text-decoration: none; cursor: pointer; font-weight: 500; font-size: var(--fs-sm);
  transition: background var(--transition), color var(--transition);
}
.nav-item:hover { background: var(--n-100); }
.nav-item.active { background: var(--primary-tint); color: var(--primary); }
.nav-item svg { width: 18px; height: 18px; stroke-width: 1.75; flex-shrink: 0; }

.main-area { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6);
  border-bottom: 0.5px solid var(--n-200); background: #fff; position: sticky; top: 0; z-index: 10;
}
.page-content { padding: var(--sp-6); flex: 1; }

.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
  border-top: 0.5px solid var(--n-200); padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom));
  justify-content: space-around; z-index: 20;
}
.bottom-nav .nav-item { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 10px; }

@media (max-width: 767px) {
  .sidebar { display: none; }
  .bottom-nav { display: flex; }
  .page-content { padding: var(--sp-4); padding-bottom: 88px; }
  .bento-grid { grid-template-columns: 1fr !important; }
}

/* Bento / cards */
.bento-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.card {
  background: #fff; border: 0.5px solid var(--n-200); border-radius: 16px;
  padding: var(--sp-4); box-shadow: var(--shadow-card);
}
.metric-card .metric-label { font-size: var(--fs-caption); color: var(--n-600); }
.metric-card .metric-value { font-size: var(--fs-h2); font-weight: 700; color: var(--n-900); margin-top: 4px; }
.metric-card.tint-success { background: var(--success-tint); border: none; }
.metric-card.tint-warning { background: var(--warning-tint); border: none; }
.metric-card.tint-accent { background: var(--accent-tint); border: none; }

/* Pills / badges */
.pill {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill);
  padding: 6px 14px; font-size: var(--fs-caption); font-weight: 500; cursor: default;
  transition: background var(--transition), transform 150ms ease;
}
.pill-btn { cursor: pointer; border: none; }
.pill-btn:hover { transform: scale(1.03); }
.pill-btn:active { transform: scale(0.98); }
.pill-solid { background: var(--n-900); color: #fff; }
.pill-primary { background: var(--primary-tint); color: var(--primary-ink); }
.pill-success { background: var(--success-tint); color: var(--secondary-ink); }
.pill-warning { background: var(--warning-tint); color: var(--warning-ink); }
.pill-error { background: var(--error-tint); color: var(--error-ink); }
.pill-neutral { background: var(--n-100); color: var(--n-700); }
.pill-branch-Burhani { background: var(--primary-tint); color: var(--primary-ink); }
.pill-branch-Hakimi { background: var(--secondary-tint); color: var(--secondary-ink); }
.pill-branch-Saifee { background: var(--accent-tint); color: var(--accent-ink); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); border-radius: var(--radius);
  padding: 10px 18px; font-size: var(--fs-sm); font-weight: 500; border: 0.5px solid transparent;
  cursor: pointer; transition: background var(--transition), opacity var(--transition);
}
.btn svg { width: 16px; height: 16px; stroke-width: 1.75; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #4C7791; }
.btn-secondary { background: #fff; color: var(--n-800); border-color: var(--n-300); }
.btn-secondary:hover { background: var(--n-100); }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #C1665C; }
.btn-ghost { background: transparent; color: var(--n-700); }
.btn-ghost:hover { background: var(--n-100); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon { padding: 8px; }

/* Forms */
.field-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field-label { font-size: var(--fs-caption); font-weight: 500; color: var(--n-700); }
.field-input, .field-select, .field-textarea {
  border: 1px solid var(--n-300); border-radius: var(--radius); padding: 10px 12px;
  background: #fff; color: var(--n-900); transition: border-color var(--transition); width: 100%;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint);
}
.field-error { border-color: var(--error) !important; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(42,46,46,0.45); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: var(--sp-4);
}
.modal { background: #fff; border-radius: 20px; box-shadow: var(--shadow-modal); max-width: 560px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 0.5px solid var(--n-200); }
.modal-close { background: none; border: none; cursor: pointer; color: var(--n-600); padding: 6px; border-radius: var(--radius); }
.modal-close:hover { background: var(--n-100); }
.modal-body { padding: var(--sp-6); overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-6); border-top: 0.5px solid var(--n-200); }

/* Toast */
.toast-container { position: fixed; bottom: var(--sp-6); right: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 200; }
@media (max-width: 767px) { .toast-container { left: var(--sp-4); right: var(--sp-4); bottom: 96px; } }
.toast {
  display: flex; align-items: center; gap: var(--sp-3); background: var(--n-900); color: #fff;
  padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--shadow-modal);
  font-size: var(--fs-sm); min-width: 240px; animation: toast-in 200ms ease;
}
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast-success svg { color: var(--secondary-ink); }
.toast-error svg { color: var(--error); }
.toast-warning svg { color: var(--warning); }
.toast-info svg { color: var(--primary); }
.toast-close { margin-left: auto; background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Loader */
.spinner { width: 18px; height: 18px; border: 2px solid var(--n-200); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.7s linear infinite; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { background: linear-gradient(90deg, var(--n-100) 25%, var(--n-200) 50%, var(--n-100) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty states */
.empty-state { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--n-600); }
.empty-state svg { width: 40px; height: 40px; color: var(--n-400); margin-bottom: var(--sp-3); stroke-width: 1.5; }
.empty-state-title { font-weight: 700; color: var(--n-800); margin-bottom: 4px; }

/* Sync banner */
.sync-banner { display: flex; align-items: center; gap: var(--sp-2); background: var(--warning-tint); color: var(--warning-ink); padding: 10px 16px; font-size: var(--fs-sm); }
.sync-banner.offline { background: var(--error-tint); color: var(--error-ink); }

/* Custom rounded tick (replaces native checkbox — sage, not browser-default blue) */
.check-pill {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--n-300);
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: background var(--transition), border-color var(--transition);
}
.check-pill svg { width: 13px; height: 13px; color: #fff; stroke-width: 3; display: none; }
.check-pill.checked { background: var(--secondary); border-color: var(--secondary); }
.check-pill.checked svg { display: block; }
.check-pill:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }

/* Attendance/RSVP tiles — vertical list, tap to cycle */
.tile-grid { display: flex; flex-direction: column; gap: var(--sp-2); }
.member-tile {
  display: flex; align-items: center; gap: 12px; border-radius: var(--radius);
  padding: 10px 14px; cursor: pointer; user-select: none; border: 1px solid var(--n-200);
  width: 100%; font-size: var(--fs-sm); font-weight: 500; background: #fff;
  transition: background var(--transition), border-color var(--transition), transform 120ms ease;
}
.member-tile:active { transform: scale(0.99); }
.member-tile .tile-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--n-100); color: var(--n-700);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.member-tile .tile-name { flex: 1; color: var(--n-900); }
.member-tile .tile-state { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 500; }
.member-tile .tile-state svg { width: 17px; height: 17px; stroke-width: 2.5; }
.member-tile.state-present { border-color: var(--secondary); background: var(--secondary-tint); }
.member-tile.state-present .tile-state { color: var(--secondary-ink); }
.member-tile.state-online { border-color: var(--warning); background: var(--warning-tint); }
.member-tile.state-online .tile-state { color: var(--warning-ink); }
.member-tile.state-absent { border-color: var(--error); background: var(--error-tint); }
.member-tile.state-absent .tile-state { color: var(--error-ink); }
.member-tile.state-none .tile-state { color: var(--n-500); }

/* Member directory — card grid */
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); }
@media (max-width: 767px) { .member-grid { grid-template-columns: 1fr; } }
.member-card { position: relative; }
.member-card .mc-select { position: absolute; top: 14px; right: 14px; }
.member-card .mc-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--primary-tint); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; flex-shrink: 0;
}

@media (max-width: 767px) { .dash-columns { grid-template-columns: 1fr !important; } }