/* =============== Dashboard Layout =============== */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 2fr 1fr;
  }
}

@media (max-width: 768px) {
  .dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .dashboard-section {
    padding: 1rem 0;
  }

  .calendar-wrapper {
    margin-top: 1rem;
  }
}

/* Visibility rules */
.desktop-only { display: none !important; }
.mobile-only { display: block !important; list-style: none; }

@media (min-width: 769px) {
  .desktop-only { display: block !important; }
  .mobile-only { display: none !important; }
}
/* Contract Group – main.css (2025-08-11)
   Purpose: unified styles for marketing, auth, and dashboard
   Notes: mobile-first, dark-mode aware, reduced duplication, consistent tokens
   Key changes:
   • Single :root with complete token set (fixes undefined vars like --spacing-fluid, --ease, --bg-dark-surface)
   • Consolidated navigation, hero, cards, grids, forms
   • Removed duplicate selectors and conflicting rules
   • Normalised dark-mode overrides
   • Added prefers-reduced-motion
*/

/* =============== Design Tokens =============== */
:root {
  /* Brand & text */
  --brand-purple: #5d147c;
  --brand-purple-dark: #3b0e52;
  --brand-accent: #5e2b97;
  --text-dark: #111111;
  --text-light: #ffffff;
  --text-primary: var(--text-dark);
  --text-secondary: #555555;
  --text-muted: #6b7280;

  /* Surfaces */
  --bg-light: #fcfaff;
  --bg-elevated: #ffffff;
  --section-bg: #f8f8f8;
  --surface: #ffffff;
  --surface-alt: #f5f0f8;
  --bg-dark: #111111;
  --bg-dark-surface: #0f1012;

  /* Borders & shadows */
  --border: rgba(17, 24, 39, 0.08);
  --header-shadow: rgba(0, 0, 0, 0.06);
  --shadow: 0 10px 30px rgba(17, 24, 39, 0.06);

  /* Spacing & radii */
  --spacing-base: 1rem;         /* 16px rhythm */
  --spacing-fluid: clamp(1rem, 3vw, 2rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --radius: 0.75rem;            /* 12px */
  --radius-lg: 1rem;

  /* Typography scale */
  --step-1: clamp(0.95rem, 0.75vw + 0.6rem, 1.05rem);
  --step-2: clamp(1.15rem, 0.85vw + 0.75rem, 1.35rem);
  --step-3: clamp(1.45rem, 1vw + 1rem, 1.75rem);
  --step-4: clamp(2rem, 2vw + 1.25rem, 3rem);

  /* Status */
  --success-light:#e6fffa; --success-dark:#065f46;
  --warning-light:#fff3cd; --warning-dark:#856404;
  --error-light:#fde8e8;   --error-dark:#9b1c1c;

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f1f1f1;
    --text-secondary: #aaa;
    --bg-light: var(--bg-dark);
    --section-bg: #1a1a1a;
    --surface: #121218;
    --surface-alt: #1b1b22;
    --border: rgba(255, 255, 255, 0.12);
    --shadow: 0 14px 38px rgba(0,0,0,.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =============== Base Reset =============== */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; }
body { min-height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; background: var(--bg-light); color: var(--text-primary); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid rgba(93, 20, 124, 0.5); outline-offset: 2px; }

/* =============== Layout Utilities =============== */
.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1rem; }
.scroll-compress { padding: 16px; }
@media (min-width: 560px) { .scroll-compress { padding: 20px; } }
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 1200px){ .grid.cols-4{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 900px){ .grid.cols-3, .grid.cols-4{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 560px){ .grid, .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr;} }
.hide{display:none!important} .center{display:grid;place-items:center}

/* =============== Navigation =============== */
nav.main-nav {
  position: sticky;
  top: 0;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
  backdrop-filter: saturate(150%) blur(20px);
  z-index: 1000;
  transition: background .3s var(--ease), color .3s var(--ease), backdrop-filter .3s var(--ease);
}
@media (prefers-color-scheme: dark) {
  nav.main-nav {
    background: rgba(17,17,17,.65);
    border-color: rgba(255,255,255,.1);
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    backdrop-filter: saturate(150%) blur(20px);
    z-index: 1000;
    transition: background .3s var(--ease), color .3s var(--ease), backdrop-filter .3s var(--ease);
  }
}
.nav-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--spacing-base) * 1.5);
  flex-wrap: nowrap;
  gap: clamp(0.5rem, 1vw, 1.5rem);
}

@media (min-width: 769px) {
  .nav-container {
    flex-wrap: nowrap;
    align-items: center;
  }
}
.logo {
  flex: 0 0 auto;
}
.logo img { height: 32px; filter: none; }

/* Primary links */
.nav-links {
  list-style: none;
  display: flex;
  gap: var(--spacing-base);
  flex-wrap: nowrap;
  flex: 1;
  min-width: 0;
  justify-content: center;
}
.nav-links a {
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500;
  transition: color .3s var(--ease), background .3s var(--ease);
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  border-radius: 8px;
}
.nav-links a:hover,
.nav-links a.active {
  background: var(--brand-purple);
  color: #fff;
}

/* Dropdown */
.nav-links li { position: relative; }
.nav-links ul.submenu { position:absolute; top:100%; left:0; background: var(--section-bg); display:none; padding:.5rem 0; box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index:10; min-width:180px; list-style:none; }
.nav-links li:hover>ul.submenu, .nav-links li:focus-within>ul.submenu { display:block; }
.nav-links ul.submenu a { display:block; padding:.5rem 1.25rem; color: var(--text-primary); font-weight:500; white-space:nowrap; }
.nav-links ul.submenu a:hover, .nav-links ul.submenu a.active { background: var(--brand-purple); color:#fff; }

/* Mobile nav (mobile-first) */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle .bar {
  width: 100%;
  height: 2px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}

.nav-toggle.open .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.open .bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle.open .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

.nav-links {
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-light);
  padding: var(--space-2) var(--space-3);
  width: 100%;
  box-shadow: 0 12px 24px rgba(0,0,0,.2);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  z-index: 100;
}

.nav-links[data-state="open"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  z-index: 9999;
}

@media (min-width: 769px) {
  .nav-toggle {
    display: none;
  }

  .nav-links {
    position: static;
    flex-direction: row;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    background: transparent;
    padding: 0;
    box-shadow: none;
    width: auto;
    align-items: center;
    gap: var(--spacing-base);
  }

  .header-actions {
    margin-left: 0;
  }
}

/* =============== Hero =============== */
.hero { width:100%; background: var(--section-bg); }
.hero-layout { display:flex; flex-direction:column; gap: var(--spacing-base); align-items:center; justify-content:center; padding: clamp(3rem, 5vw, 4rem) 1rem; }
@media (min-width:768px){ .hero-layout{ flex-direction:row; padding: clamp(4rem, 8vw, 6rem) 2rem; } }
.hero-content { flex:1 1 460px; max-width:560px; }
.hero-content h1 { font-size: clamp(2rem, 6vw, 3.5rem); font-weight:700; line-height:1.1; margin:0 0 1rem; letter-spacing:-.5px; }
.hero-content .subhead { font-size: clamp(1.1rem, 2.5vw, 1.35rem); color: var(--brand-purple); margin:0 0 1rem; font-weight:600; text-align:left; }
.hero-content .lead { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--text-secondary); margin:0 0 1.5rem; line-height:1.6; }
.hero-image { flex:1 1 360px; text-align:center; }

/* =============== Cards & Metrics =============== */
.card { background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card.padded { padding:16px; }
.metrics-section-title {
  font-size: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: .2px;
}

.dashboard-section h2 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

@media (min-width: 1024px) {
  .metrics-section-title {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
  }
}
.metrics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width: 1024px){ .metrics-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width: 600px){ .metrics-grid{ grid-template-columns:1fr;} }
.metric-card { display:flex; gap:12px; align-items:flex-start; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding:16px; min-height:84px; }
.metric-card .metric-icon { font-size:26px; color: var(--brand-purple); }
.metric-card .metric-info h3 { margin:0 0 6px; font-size:.95rem; color: var(--text-secondary); font-weight:600; }
.metric-card .metric-info p { margin:0; font-size:1.1rem; font-weight:700; color: var(--text-primary); }

/* Dark-mode card emphasis */
@media (prefers-color-scheme: dark){
  .metric-card{ background:#1a1a1a; border:1px solid rgba(255,255,255,.15); box-shadow:0 6px 24px rgba(255,255,255,.05); }
}

/* =============== Auth (Login/Register) =============== */
.auth-wrapper { display:flex; align-items:center; justify-content:center; min-height:100dvh; background: radial-gradient(80% 60% at 50% 0%, rgba(93,20,124,.12), transparent 60%), var(--bg-light); padding:2rem; }
.auth-form { width:min(520px,92vw); background: var(--surface); border:1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); padding:28px; }
.auth-form h2 { font-size: var(--step-3); text-align:center; margin:0 0 var(--space-3); color: var(--brand-purple); }
.form-row { display:flex; flex-direction:column; gap:6px; margin:10px 0; }
.label { font-size:.92rem; color: var(--text-secondary); font-weight:600; }
.input { width:100%; border:1px solid var(--border); border-radius:12px; padding:12px; background:transparent; color: var(--text-primary); }
.input:focus { outline:none; box-shadow: 0 0 0 3px rgba(93,20,124,.25); border-color: rgba(93,20,124,.4); }
.error { background:#fff3cd; border:1px solid #ffe08a; color:#8a6d3b; border-radius:12px; padding:10px 12px; }
.success{ background:#e6fffa; border:1px solid #b2f5ea; color:#065f46; border-radius:12px; padding:10px 12px; }

.btn { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid transparent; background: var(--brand-purple); color:#fff; font-weight:600; cursor:pointer; transition: transform .05s ease-in; }
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.secondary{ background:transparent; color: var(--brand-purple); border-color: rgba(93,20,124,.45); }

/* =============== Tables & Widgets =============== */
.table{ width:100%; border-collapse:separate; border-spacing:0 10px; }
.table th{ font-size:.85rem; color: var(--text-muted); font-weight:600; text-align:left; padding:0 10px; }
.table td{ background: var(--surface); border:1px solid var(--border); padding:12px 10px; }
.table tr td:first-child{ border-top-left-radius:12px; border-bottom-left-radius:12px; }
.table tr td:last-child{ border-top-right-radius:12px; border-bottom-right-radius:12px; }
.widget{ background: var(--surface); border-radius:8px; padding:1.5rem; box-shadow:0 2px 6px rgba(0,0,0,.05); margin-bottom: var(--spacing-base); }
.widget h2{ font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight:600; margin:0 0 1rem; }

/* =============== Status Badges =============== */
.status-badge{ display:inline-block; padding:.25rem .75rem; border-radius:999px; font-size:.75rem; font-weight:600; text-transform:uppercase; }
.status-success{ background: var(--success-light); color: var(--success-dark); }
.status-warning{ background: var(--warning-light); color: var(--warning-dark); }
.status-error{ background: var(--error-light); color: var(--error-dark); }

/* =============== Footer =============== */
footer.footer{ background: var(--section-bg); color: var(--text-secondary); padding: 1rem 0; font-size: .9rem; }
.footer-content{ display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center; }
.footer-links{ display:flex; flex-wrap:wrap; gap: var(--spacing-base); justify-content:center; }
.footer-links a{ color: var(--brand-purple); text-decoration:none; transition: color .3s var(--ease); }
.footer-links a:hover, .footer-links a:focus{ color: var(--brand-purple-dark); text-decoration: underline; }

/* =============== Animations utilities =============== */
.fade-lift{ opacity:0; transform: translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fade-lift.visible{ opacity:1; transform: translateY(0); }
.fade-in{ opacity:0; transform: translateY(10px); animation: fadeInUp .6s var(--ease) forwards; }
.fade-in-delay{ animation-delay: .3s; }
@keyframes fadeInUp { to { opacity:1; transform: translateY(0); } }

/* =============== Responsive tables for mobile =============== */
@media (max-width: 768px){
  .projects-table{ display:block; border:none; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .projects-table thead{ display:none; }
  .projects-table tr{ display:block; background:#fff; margin-bottom:1rem; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.05); padding:1rem; }
  .projects-table td{ display:flex; justify-content:space-between; padding:.5rem 0; border:none; border-bottom:1px solid #eee; }
  .projects-table td:last-child{ border-bottom:none; }
  .projects-table td::before{ content: attr(data-label); font-weight:600; color:#555; padding-right:1rem; }
}

/* =============== Helpers =============== */
.cta-link, .card-cta { display:inline-block; padding:.75rem 1.5rem; background: var(--brand-purple); color:#fff; font-weight:600; text-decoration:none; border-radius: var(--radius); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .3s ease; }
.cta-link:hover, .card-cta:hover, .cta-link:focus, .card-cta:focus { background: var(--brand-purple-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.badge{ display:inline-block; background:#eee; color: var(--brand-purple); font-size:.75rem; padding:.3rem .65rem; border-radius:999px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; }
.text-right{text-align:right} .text-center{text-align:center} .text-left{text-align:left}

/* =============== Map embeds =============== */
.map-container{ width:100%; margin:0; padding:0; }
.map-container iframe{ width:100%; height:450px; border:0; border-radius:0; box-shadow:none; }

/* =============== Profile dropdown =============== */
.header-actions{
  position:relative;
  display:flex;
  align-items:center;
  gap: var(--spacing-base);
  flex: 0 0 auto;
}
.profile-dropdown-trigger{ display:flex; align-items:center; cursor:pointer; padding:.5rem; border-radius:999px; transition: background .2s var(--ease); }
.profile-dropdown-trigger:hover{ background: rgba(0,0,0,.05); }
.profile-dropdown{ position:absolute; top:48px; right:0; background:#fff; border-radius:10px; box-shadow:0 12px 24px rgba(0,0,0,.08); padding:.75rem 0; min-width:160px; display:none; flex-direction:column; z-index:999; }
.profile-dropdown.open{ display:flex; }
.profile-dropdown a{ padding:.5rem 1.25rem; text-decoration:none; color: var(--text-primary); font-weight:500; }
.profile-dropdown a:hover{ background: var(--surface-alt); color: var(--brand-purple); }

/* =============== End of file =============== */
@media (max-width: 768px) {
  /* Mobile header: 3‑zone grid (burger | logo | actions) */
  .nav-container{ display:grid; grid-template-columns: 40px 1fr 120px; align-items:center; column-gap:12px; padding:.6rem .75rem; }
  .logo{ grid-column:2; justify-self:center; }
  .logo img{ height:26px; }
  .mobile-left{ grid-column:1; }
  .mobile-actions{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:8px; }

  .nav-toggle{ width:28px; height:22px; }
  .nav-toggle .bar{ height:3px; }

  .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; border:1px solid transparent; background:transparent; }
  .icon-btn:active{ background: rgba(0,0,0,.06); }
  .icon-btn .material-icons{ font-size:22px; line-height:1; }

  /* Mobile menu panel */
  .nav-links{ width:100%; padding:.5rem .75rem; border-top:1px solid var(--border); }
  .main-header nav.main-nav{ border-bottom:1px solid var(--border); }
}
/* Dashboard Calendar Enhancements */
.calendar-container {
  border-radius: 12px;
  background-color: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: visible;
  padding: 0.75rem;
}

/* FullCalendar theming via CSS variables */
#calendar {
  /* structure */
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: transparent;
  --fc-border-color: var(--border);
  --fc-small-font-size: 0.85rem;

  /* toolbar */
  --fc-button-bg-color: var(--brand-purple);
  --fc-button-border-color: transparent;
  --fc-button-text-color: #fff;
  --fc-button-hover-bg-color: var(--brand-purple-dark);
  --fc-button-hover-border-color: transparent;
  --fc-button-active-bg-color: var(--brand-purple-dark);

  /* events */
  --fc-event-bg-color: var(--brand-accent);
  --fc-event-border-color: transparent;
  --fc-event-text-color: #fff;
  --fc-now-indicator-color: var(--brand-purple);

  /* day highlights */
  --fc-today-bg-color: rgba(93, 20, 124, 0.08);
}

#calendar .fc-toolbar-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
}

#calendar .fc-toolbar {
  padding: 0.25rem 0.25rem 0.5rem;
}

#calendar .fc-button {
  border-radius: 10px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* Month grid refinements */
#calendar .fc-daygrid-day-number {
  font-weight: 600;
  color: var(--text-primary);
}

#calendar .fc-daygrid-day-frame {
  padding: 6px;
}

#calendar .fc-daygrid-day:hover .fc-daygrid-day-frame {
  background: rgba(0,0,0,0.03);
}

#calendar .fc-col-header-cell-cushion {
  padding: 0.5rem 0;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Weekend cue (subtle) */
#calendar .fc-day-sat .fc-daygrid-day-frame,
#calendar .fc-day-sun .fc-daygrid-day-frame {
  background: rgba(0,0,0,0.02);
}

/* Events */
#calendar .fc-event {
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 0.78rem;
  line-height: 1.2;
}

#calendar .fc-event:hover {
  filter: brightness(1.05);
}

/* Prevent long labels from overflowing */
#calendar .fc-event .fc-label{ display:inline-block; max-width: calc(100% - 70px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#calendar .fc-daygrid-event{ overflow:hidden; }
#calendar .fc-event{ max-width:100%; }
#calendar .fc-more-link{ font-weight:700; color: var(--brand-purple); }
.fc-popover{ border-radius:10px; border:1px solid var(--border); box-shadow: var(--shadow); }
.fc-popover .fc-daygrid-event{ font-size:.8rem; }

/* Dark mode tuning */
@media (prefers-color-scheme: dark) {
  #calendar {
    --fc-border-color: rgba(255,255,255,0.12);
    --fc-today-bg-color: rgba(93, 20, 124, 0.18);
  }
  #calendar .fc-daygrid-day:hover .fc-daygrid-day-frame {
    background: rgba(255,255,255,0.04);
  }
  #calendar .fc-day-sat .fc-daygrid-day-frame,
  #calendar .fc-day-sun .fc-daygrid-day-frame {
    background: rgba(255,255,255,0.03);
  }
}

/* Show full month without inner scrolling (month view) */
#calendar { max-height: none; overflow: visible; }
/* Let FullCalendar manage sizing; ensure month body grows to fit rows */
#calendar .fc-daygrid-body { height: auto !important; }
/* Keep an inner scroller for long popovers etc., but hand off when reaching edges */
#calendar .fc-scroller { overflow: visible !important; -webkit-overflow-scrolling: touch; overscroll-behavior: auto; }
#calendar .fc-scroller-harness { overflow: visible !important; }
/* Keep week/day default internal scrolling to avoid very tall pages */

/* ===== Subcontractor QS Dashboard — UI additions ===== */
.quick-actions { display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 16px; }
.quick-actions .btn { padding:10px 12px; border-radius:10px; font-size:.9rem; }

.kpi-strip { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:12px; margin: 0 0 16px; }
@media (max-width: 1100px){ .kpi-strip{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 600px){ .kpi-strip{ grid-template-columns: repeat(2,1fr);} }
.kpi { background: var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); padding:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:64px; }
.kpi .label{ font-size:.9rem; color: var(--text-secondary); font-weight:600; }
.kpi .value{ font-size:1.2rem; font-weight:800; color: var(--text-primary); }
.kpi .chip{ margin-left:auto; }

.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:.25rem .6rem; border-radius:999px; font-size:.75rem; font-weight:700; letter-spacing:.02em; border:1px solid var(--border); background: var(--surface-alt); color: var(--text-primary); }
.chip.success{ background: rgba(4,120,87,.12);} 
.chip.warning{ background: rgba(217,119,6,.12);} 
.chip.danger{ background: rgba(190,18,60,.14);} 
.chip.neutral{ background: rgba(107,114,128,.12);} 

/* Worklists */
.worklist { background: var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); padding:12px; }
.worklist h3{ margin:0 0 8px; font-size:1rem; font-weight:700; }
.worklist ul{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.worklist li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px dashed var(--border); border-radius:10px; }
.worklist .meta{ color: var(--text-secondary); font-size:.85rem; }
.worklist .actions{ display:flex; gap:8px; }
.worklist .actions .btn{ padding:8px 10px; font-size:.8rem; border-radius:8px; }
.empty{ color: var(--text-muted); font-size:.9rem; padding:6px 2px; }

/* Project spotlight */
/* Base: single column (mobile-first). Tablets show two columns. Desktop uses a horizontal scroller to fit the right-hand sidebar. */
.project-spotlight{ display:grid; grid-template-columns: 1fr; gap:12px; align-items:stretch; }
@media (min-width: 680px){ .project-spotlight{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Desktop/right column: horizontal card rail */
@media (min-width: 1024px){
  .project-spotlight{ grid-template-columns: unset; grid-auto-flow: column; grid-auto-columns: 280px; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
  .project-spotlight::-webkit-scrollbar{ height:8px; }
  .project-spotlight::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius:999px; }
}

.project-card{ background: var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); padding:12px; display:flex; flex-direction:column; gap:12px; }
.project-card .head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.project-card .title{ font-weight:800; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-card .next-app{ font-size:.78rem; font-weight:700; background: var(--surface-alt); border:1px solid var(--border); padding:.3rem .5rem; border-radius:999px; white-space:nowrap; }

.project-card .stats{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
@media (max-width: 900px){ .project-card .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1024px){ .project-card .stats{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.project-card .chip{ font-size:.75rem; font-weight:700; padding:.35rem .55rem; border:1px solid var(--border); background: var(--surface-alt); border-radius:999px; display:flex; align-items:center; justify-content:center; gap:6px; }
.project-card .chip .k{ color: var(--text-secondary); font-weight:700; }

.project-card .actions{ margin-top:auto; }
.action-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; }
@media (min-width:1024px){ .action-grid{ grid-template-columns: 1fr; } }
.action-grid .btn{ width:100%; padding:10px 12px; border-radius:10px; }
@media (max-width: 900px){ .action-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 500px){ .action-grid{ grid-template-columns: 1fr; } }

/* Risk list */
.risk-list{ background: var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow: var(--shadow); padding:12px; }
.risk-list h3{ margin:0 0 8px; font-size:1rem; font-weight:700; }
.risk-list .item{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border:1px dashed var(--border); border-radius:10px; }
.risk-list .item .owner{ color: var(--text-secondary); font-size:.85rem; }

/* Calendar filters and type colouring */
.calendar-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.calendar-filters .chip{cursor:pointer;user-select:none}
.calendar-filters .chip .dot{width:8px;height:8px;display:inline-block;border-radius:999px}
.calendar-filters .chip.active{outline:2px solid rgba(93,20,124,.35)}

/* Event type colours (light + dark safe) */
:root{ --cal-app:#2563eb; --cal-paynotice:#0ea5e9; --cal-payless:#d97706; --cal-finalpay:#14b8a6; --cal-eot:#a855f7; --cal-retention:#f43f5e; --cal-meeting:#6b7280; }
@media(prefers-color-scheme:dark){ :root{ --cal-app:#3b82f6; --cal-paynotice:#22c1e6; --cal-payless:#f59e0b; --cal-finalpay:#2dd4bf; --cal-eot:#a78bfa; --cal-retention:#fb7185; --cal-meeting:#9ca3af; } }

#calendar .fc-event.type-application{ background:var(--cal-app); border-color:var(--cal-app); }
#calendar .fc-event.type-payment_notice{ background:var(--cal-paynotice); border-color:var(--cal-paynotice); }
#calendar .fc-event.type-pay_less{ background:var(--cal-payless); border-color:var(--cal-payless); }
#calendar .fc-event.type-final_payment{ background:var(--cal-finalpay); border-color:var(--cal-finalpay); }
#calendar .fc-event.type-eot{ background:var(--cal-eot); border-color:var(--cal-eot); }
#calendar .fc-event.type-retention{ background:var(--cal-retention); border-color:var(--cal-retention); }
#calendar .fc-event.type-meeting{ background:var(--cal-meeting); border-color:var(--cal-meeting); }

/* ===== Mobile layout enhancements (<=768px) ===== */
@media (max-width: 768px){
  .scroll-compress{ padding:12px; }

  /* Quick actions: grid on mobile for tap accuracy */
  .quick-actions{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; overflow:visible; white-space:normal; padding-bottom:0; margin-bottom:12px; }
  .quick-actions .btn{ width:100%; justify-content:space-between; padding:12px 14px; min-height:48px; }
  .quick-actions .btn .chip{ margin-left:auto; }

  /* KPI strip: 2 columns on phones */
  .kpi-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px; }
  .kpi{ padding:10px; min-height:56px; }
  .kpi .label{ font-size:.85rem; }
  .kpi .value{ font-size:1.05rem; }

  /* Worklist and risk panels: comfortable padding */
  .worklist, .risk-list{ padding:12px; }
  .worklist li{ padding:8px; }

  /* Calendar: compact toolbar and filters */
  .calendar-wrapper{ margin-top:12px; }
  .calendar-container{ padding:0; }
  #calendar{ max-height:none; }
  #calendar .fc-toolbar{ padding:4px 2px; }
  .calendar-filters{ gap:6px; }
  .calendar-filters .chip{ padding:.25rem .5rem; }

  /* Mobile calendar ergonomics */
  .calendar-container{ padding:8px; border-radius:10px; }
  .calendar-filters{ position:sticky; top:0; z-index:2; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; padding-bottom:6px; margin-bottom:8px; }
  .calendar-filters::-webkit-scrollbar{ display:none; }
  #calendar .fc-toolbar-title{ font-size:1rem; }
  #calendar .fc-button{ padding:6px 10px; border-radius:8px; }
  #calendar .fc-col-header-cell-cushion{ padding:.35rem 0; font-size:.8rem; }
  #calendar .fc-daygrid-day-frame{ padding:4px; }
  #calendar .fc-daygrid-day-number{ font-size:.9rem; }
  /* taller tap targets per day */
  #calendar .fc-daygrid-day{ min-height:56px; }
  /* compact event chips */
  #calendar .fc-event{ padding:2px 4px; border-radius:6px; font-size:.72rem; }
  .fc-mobile-dot{ display:inline-flex; align-items:center; gap:6px; }
  .fc-mobile-dot .dot{ width:8px; height:8px; border-radius:999px; display:inline-block; }
  .fc-mobile-dot .txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 140px; display:inline-block; vertical-align:middle; }

  /* Smaller badges and chips */
  .chip{ font-size:.7rem; padding:.2rem .5rem; }

  /* Softer elevation on small screens */
  .card{ box-shadow: 0 6px 18px rgba(0,0,0,.25); }

  /* Project spotlight: single column */
  .project-spotlight{ grid-template-columns: 1fr; }
  .project-card{ padding:12px; }
}

/* ===== Narrow phones (<=480px) ===== */
@media (max-width: 480px){
  .kpi-strip{ grid-template-columns: 1fr; }
  .kpi{ min-height:52px; }
  .kpi .label{ font-size:.82rem; }
  .kpi .value{ font-size:1rem; }
  .quick-actions{ grid-template-columns: 1fr; }
}

/* ===== Navigation refinements ===== */
.main-header.scrolled nav.main-nav{ backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 8px 28px rgba(0,0,0,.35); }
.main-header.scrolled .nav-container{ padding: calc(var(--spacing-base) * 1.0); }

/* Desktop nav – active/hover indicator */
@media (min-width: 769px){
  .nav-links a{ position:relative; background: transparent; }
  .nav-links a::after{ content:""; position:absolute; left:10%; right:10%; bottom:-6px; height:3px; border-radius:3px; background: transparent; transition: background .2s var(--ease), transform .2s var(--ease); transform: scaleX(0); transform-origin:left; }
  .nav-links a:hover::after{ background: var(--brand-purple); transform: scaleX(1); }
  .nav-links a.active::after{ background: var(--brand-purple); transform: scaleX(1); }
}

/* Mobile nav overlay + body lock */
.nav-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.35); opacity:0; pointer-events:none; transition: opacity .2s var(--ease); z-index:998; }
.nav-backdrop.open{ opacity:1; pointer-events:auto; }
.body-lock{ overflow:hidden; }

/* Mobile bottom tab bar */
.mobile-tabbar{ position:fixed; left:0; right:0; bottom:0; padding: env(safe-area-inset-bottom); background: var(--surface); border-top:1px solid var(--border); box-shadow: 0 -8px 24px rgba(0,0,0,.2); z-index:1000; display:none; }
@media (max-width: 768px){ .mobile-tabbar{ display:block; } }
.mobile-tabbar .tabs{ display:flex; align-items:center; justify-content:space-around; gap:6px; padding:6px 10px; }
.mobile-tabbar a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; color: var(--text-secondary); font-size:.72rem; padding:6px 2px; border-radius:10px; }
.mobile-tabbar a .material-icons{ font-size:22px; }
.mobile-tabbar a.active, .mobile-tabbar a:active{ color:#fff; background: var(--brand-purple); }

/* Account/profile dropdown improvements */
.profile-dropdown{ max-height: 60vh; overflow:auto; }

/* Mobile header compaction */
@media (max-width:768px){
  nav.main-nav .nav-container{ padding: .75rem; }
}
/* ===== Header UX refinements ===== */
/* Hide-on-scroll behaviour (mobile + desktop) */
.main-header{ position: sticky; top:0; transition: transform .25s var(--ease); }
.main-header.hide{ transform: translateY(-100%); }

/* Better active/focus states for keyboard users */
.nav-links a:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(93,20,124,.35); border-radius:10px; }

/* Body padding so mobile tab bar does not overlap content */
@media (max-width:768px){
  body{ padding-bottom: 68px; }
}
@media (max-width: 768px){
  #calendar .fc-daygrid-event{ padding:2px 4px; }
  #calendar .fc-event .fc-label{ max-width: calc(100% - 54px); }
}
/* ===== Calendar legibility/overflow fixes ===== */
#calendar .fc-event-content-wrap{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#calendar .fc-event-project{ font-weight:700; font-size:.78rem; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#calendar .fc-event-title{ font-weight:600; font-size:.72rem; line-height:1.1; color: var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#calendar .fc-daygrid-event{ overflow:hidden; border-radius:8px; }
/* Tighten popover items */
.fc-popover .fc-daygrid-event .fc-event-title{ font-size:.74rem; }

/* Density chip visual */
.calendar-filters .chip.density{ background: rgba(107,114,128,.08); }

/* Better today indicator ring */
#calendar .fc-day-today .fc-daygrid-day-frame{ box-shadow: inset 0 0 0 2px rgba(93,20,124,.5); }

/* Very small screens: reduce event text again */
@media (max-width:420px){
  #calendar .fc-event-project{ font-size:.72rem; }
  #calendar .fc-event-title{ font-size:.68rem; }
}