/* =====================================================================
   EDCS CRM - Material Design 3 + glassmorphism layer
   Loaded after app.css. Fonts are self-hosted (nothing loads from Google).
   ===================================================================== */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-latin-700-normal.woff2") format("woff2"); }

:root {
  --display: "Roboto", "Segoe UI", system-ui, sans-serif;
  --body: "Roboto", "Segoe UI", system-ui, sans-serif;

  /* Material 3 tonal palette built from the EDCS red */
  --md-primary: #D0100A;
  --md-on-primary: #FFFFFF;
  --md-primary-container: #FFDAD5;
  --md-on-primary-container: #410001;
  --md-secondary-container: #F3E4E1;
  --md-surface-tint: rgba(208, 16, 10, .08);

  /* Glass */
  --glass-bg: rgba(255, 255, 255, .66);
  --glass-bg-strong: rgba(255, 255, 255, .82);
  --glass-border: rgba(255, 255, 255, .75);
  --glass-edge: rgba(38, 34, 31, .07);
  --glass-blur: 18px;

  /* Material elevation (soft, layered) */
  --elev-1: 0 1px 2px rgba(60, 30, 25, .06), 0 1px 3px 1px rgba(60, 30, 25, .05);
  --elev-2: 0 2px 6px rgba(60, 30, 25, .07), 0 8px 24px -6px rgba(60, 30, 25, .12);
  --elev-3: 0 6px 16px rgba(60, 30, 25, .10), 0 18px 40px -10px rgba(60, 30, 25, .20);

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --ease-emph: cubic-bezier(.2, 0, 0, 1);
}

body { font-family: var(--body); font-size: 14.5px; background: #fff; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: 0; }
h1 { font-weight: 400; font-size: 30px; }
.kpi strong, .funnel-count, .num, .kpi2-value, .f2-count { font-variant-numeric: tabular-nums; }

/* ---------- ambient background that the glass blurs ---------- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #fff; pointer-events: none; }
.ambient i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; }
.ambient i:nth-child(1) { width: 560px; height: 560px; top: -180px; right: -120px; background: #FFC9C3; }
.ambient i:nth-child(2) { width: 460px; height: 460px; bottom: -160px; left: 12%; background: #E9E4E0; }
.ambient i:nth-child(3) { width: 380px; height: 380px; top: 38%; right: 28%; background: #FFE6D6; opacity: .45; }
.page-dashboard .ambient i { opacity: .8; }

/* ---------- glass surfaces ---------- */
.glass,
.sidebar, .topbar {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
.glass { border: 1px solid var(--glass-border); box-shadow: var(--elev-2), inset 0 1px 0 rgba(255, 255, 255, .9); border-radius: var(--r-lg); }
.sidebar { border-right: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .72); }
.topbar { border-bottom: 1px solid var(--glass-edge); background: rgba(255, 255, 255, .7); }
.panel { border-radius: var(--r-md); box-shadow: var(--elev-1); background: var(--glass-bg-strong); border-color: var(--glass-edge); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .sidebar, .topbar { background: rgba(255, 255, 255, .96); }
}

/* Material navigation drawer items */
.nav a { border-radius: 999px; padding: 10px 14px; transition: background .2s var(--ease-emph); }
.nav a.active { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.nav a.active::before { display: none; }
.nav a.active svg { color: var(--md-primary); }
.search { border-radius: 999px; background: rgba(255, 255, 255, .7); }
.btn { border-radius: 999px; transition: background .2s, box-shadow .2s; }
.btn-primary { background: var(--md-primary); border-color: var(--md-primary); box-shadow: var(--elev-1); }
.btn-primary:hover { box-shadow: var(--elev-2); }
.avatar { background: var(--md-primary-container); color: var(--md-on-primary-container); }

/* ---------- Material buttons ---------- */
.mi { width: 20px; height: 20px; fill: currentColor; flex: none; }
.md-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px 0 18px; border-radius: 999px; font: 500 14px/1 var(--body); letter-spacing: .01em; border: 1px solid transparent; cursor: pointer; transition: box-shadow .2s var(--ease-emph), background .2s; }
.md-btn:hover { text-decoration: none; }
.md-btn::after, .md-text-btn::after { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity .2s; pointer-events: none; }
.md-btn:hover::after, .md-text-btn:hover::after { opacity: .08; }
.md-btn:active::after { opacity: .12; }
.md-filled { background: var(--md-primary); color: var(--md-on-primary); box-shadow: var(--elev-1); }
.md-filled:hover { box-shadow: var(--elev-2); }
.md-tonal { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.md-outlined { border-color: rgba(38, 34, 31, .22); color: var(--md-primary); background: rgba(255, 255, 255, .5); }
.md-text-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: 999px; color: var(--md-primary); font-weight: 500; font-size: 13.5px; }
.md-text-btn:hover { text-decoration: none; }
.md-text-btn .mi { width: 16px; height: 16px; }

/* ripple (added by app.js) */
.ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .18; pointer-events: none; animation: ripple .55s var(--ease-emph) forwards; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* =====================================================================
   Dashboard
   ===================================================================== */
.page-dashboard .content { max-width: 1520px; }
.dash { display: flex; flex-direction: column; gap: 20px; }

/* Hero */
.hero { position: relative; z-index: 6; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 28px 32px; overflow: visible; }
.hero::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 218, 213, .55) 0, rgba(255, 255, 255, 0) 55%); pointer-events: none; }
.hero > * { position: relative; }
.hero-date { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.hero-date .mi { width: 16px; height: 16px; color: var(--md-primary); }
.hero h1 { font-size: 34px; line-height: 1.15; margin-bottom: 8px; }
.hero-sub { font-size: 15.5px; color: var(--grey); max-width: 62ch; }
.hero-sub a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(38, 34, 31, .25); text-underline-offset: 3px; }
.hero-sub a.warn { color: var(--md-primary); text-decoration-color: rgba(208, 16, 10, .35); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hero-range { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.hero-range-label { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.hero .daterange summary { border-radius: 999px; background: rgba(255, 255, 255, .8); border-color: rgba(38, 34, 31, .14); min-height: 44px; padding: 0 18px; box-shadow: var(--elev-1); }
.daterange-panel { border-radius: var(--r-md); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--elev-3); border-color: rgba(255, 255, 255, .8); }
.dr-opt { border-radius: 999px; }

/* KPI cards */
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.kpi2 { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 18px 18px 16px; color: var(--ink); min-height: 168px; border-radius: var(--r-md); transition: transform .25s var(--ease-emph), box-shadow .25s var(--ease-emph); }
a.kpi2:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--elev-3), inset 0 1px 0 rgba(255, 255, 255, .9); }
a.kpi2:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 3px; }
.kpi2-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; }
.kpi2-icon .mi { width: 22px; height: 22px; }
.tone-red { background: var(--md-primary-container); color: var(--md-primary); }
.tone-green { background: #D5F2DF; color: #146C3A; }
.tone-blue { background: #DDE6FA; color: #1F4B99; }
.tone-amber { background: #FFE9C7; color: #8A5200; }
.tone-grey { background: #ECE8E5; color: #4E4B48; }
.kpi2-label { font-size: 13px; font-weight: 500; color: var(--grey); }
.kpi2-value { font: 400 30px/1.15 var(--display); letter-spacing: -.01em; }
.kpi2-value.win { color: #146C3A; }
.kpi2-sub { font-size: 12.5px; color: var(--muted); }
.kpi2 .delta { margin-top: 2px; }
.kpi2.is-alert { background: rgba(255, 228, 224, .72); border-color: rgba(255, 190, 182, .8); }
.alert-text { color: var(--md-primary); font-weight: 600; }
.spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100% !important; height: 46px !important; opacity: .9; pointer-events: none; }
.kpi2:has(.spark) .delta { margin-bottom: 30px; }
.ring { --p: 0; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 2px 0 6px;
        background: radial-gradient(closest-side, rgba(255, 255, 255, .95) 78%, transparent 80% 100%), conic-gradient(#1F4B99 calc(var(--p) * 1%), rgba(31, 75, 153, .14) 0); }
.ring .kpi2-value { font-size: 20px; font-weight: 500; }

/* Cards */
.card2 { padding: 20px 22px; }
.card2-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; min-height: 36px; }
.card2-head h2 { font-size: 17px; }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(38, 34, 31, .14); font-size: 12.5px; color: var(--grey); background: rgba(255, 255, 255, .5); }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card-grid .span-2 { grid-column: span 2; }
.card-grid > *, .kpi-grid > * { min-width: 0; }
.card2-head { flex-wrap: wrap; }

/* Funnel */
.funnel2 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.f2-step { display: grid; grid-template-rows: 132px auto auto auto; color: var(--ink); padding: 8px; border-radius: var(--r-sm); transition: background .2s; }
.f2-step:hover { text-decoration: none; background: rgba(255, 255, 255, .6); }
.f2-bar { position: relative; display: flex; align-items: flex-end; border-radius: 14px; background: rgba(38, 34, 31, .04); overflow: hidden; }
.f2-fill { width: 100%; height: var(--h); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 92, 80, calc(.35 + var(--i) * .1)) 0%, rgba(208, 16, 10, calc(.45 + var(--i) * .1)) 100%);
           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); transform-origin: bottom; animation: grow .8s var(--ease-emph) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
.f2-step.is-hold .f2-fill { background: linear-gradient(180deg, #B9B4AF, #8F8A85); }
.f2-count { font: 400 32px/1.1 var(--display); margin-top: 10px; }
.f2-name { font-weight: 500; font-size: 13.5px; }
.f2-value { font-size: 12.5px; color: var(--muted); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Project stages */
.stage2 { list-style: none; margin: 0; padding: 0; }
.stage2 a { display: grid; grid-template-columns: 170px 1fr 36px; align-items: center; gap: 12px; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; color: var(--ink); font-size: 13.5px; }
.stage2 a:hover { background: rgba(255, 255, 255, .7); text-decoration: none; }
.stage2 a.is-zero { color: var(--muted); }
.stage2 b { text-align: right; font-weight: 500; }
.stage2-meter { height: 8px; border-radius: 999px; background: rgba(38, 34, 31, .07); overflow: hidden; }
.stage2-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2FA163, #146C3A); }

/* Team table */
.table-glass th { background: transparent; border-bottom-color: rgba(38, 34, 31, .1); }
.table-glass td { border-bottom-color: rgba(38, 34, 31, .06); }
.table-glass tbody tr:hover { background: rgba(255, 255, 255, .6); }
.card2 .table th:first-child, .card2 .table td:first-child { padding-left: 0; }
.bar-cell { min-width: 190px; }
.bar-cell .num { display: block; text-align: left; font-size: 13px; margin-top: 4px; }
.val-bar { display: block; height: 6px; border-radius: 999px; background: rgba(38, 34, 31, .07); overflow: hidden; }
.val-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FF6A5F, var(--md-primary)); }

/* Follow-ups */
.fu-list { list-style: none; margin: 0; padding: 0; }
.fu-list li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; margin: 0 -8px; border-radius: 12px; }
.fu-list li:hover { background: rgba(255, 255, 255, .7); }
.fu-main { flex: 1; min-width: 0; color: var(--ink); }
.fu-main:hover { text-decoration: none; }
.fu-main:hover strong { color: var(--md-primary); }
.fu-main strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fu-main small { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.fu-main .badge { font-size: 11px; padding: 1px 7px; }
.due-chip { flex: none; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 8px; background: rgba(38, 34, 31, .06); color: var(--ink); white-space: nowrap; }
.due-chip.today { background: #FFE9C7; color: #8A5200; }
.due-chip.overdue { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.icon-circle { position: relative; overflow: hidden; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--md-primary); background: rgba(255, 255, 255, .7); border: 1px solid rgba(38, 34, 31, .1); }
.icon-circle:hover { background: var(--md-primary-container); }
.icon-circle .mi { width: 18px; height: 18px; }

/* Activity feed */
.feed2 { list-style: none; margin: 0; padding: 0; position: relative; }
.feed2::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: rgba(38, 34, 31, .08); }
.feed2 li { position: relative; display: flex; gap: 12px; padding: 6px 0; }
.feed2-dot { position: relative; z-index: 1; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid rgba(38, 34, 31, .1); color: var(--grey); box-shadow: var(--elev-1); }
.feed2-dot .mi { width: 16px; height: 16px; }
.feed2-status .feed2-dot { background: var(--md-primary-container); color: var(--md-primary); border-color: transparent; }
.feed2-project .feed2-dot { background: #D5F2DF; color: #146C3A; border-color: transparent; }
.feed2-call .feed2-dot, .feed2-email .feed2-dot, .feed2-meeting .feed2-dot { background: #DDE6FA; color: #1F4B99; border-color: transparent; }
.feed2 a { flex: 1; min-width: 0; display: block; padding: 4px 10px; margin-left: -4px; border-radius: 10px; color: var(--ink); font-size: 13.5px; }
.feed2 a:hover { background: rgba(255, 255, 255, .7); text-decoration: none; }
.feed2 q { display: block; quotes: none; color: var(--grey); margin-top: 2px; }
.feed2 small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* Floating action button (phones and tablets) */
.fab { position: fixed; right: 20px; bottom: 20px; z-index: 25; display: none; align-items: center; gap: 8px; min-height: 56px; padding: 0 22px 0 18px; border-radius: 18px; background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight: 500; box-shadow: var(--elev-3); overflow: hidden; }
.fab:hover { text-decoration: none; }
.fab .mi { width: 24px; height: 24px; }

/* One orchestrated entrance on page load */
.reveal { animation: rise .6s var(--ease-emph) both; }
.kpi-grid .reveal:nth-child(1) { animation-delay: 60ms; }
.kpi-grid .reveal:nth-child(2) { animation-delay: 100ms; }
.kpi-grid .reveal:nth-child(3) { animation-delay: 140ms; }
.kpi-grid .reveal:nth-child(4) { animation-delay: 180ms; }
.kpi-grid .reveal:nth-child(5) { animation-delay: 220ms; }
.kpi-grid .reveal:nth-child(6) { animation-delay: 260ms; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1360px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .hero { flex-direction: column; }
  .hero-range { align-items: flex-start; }
  .hero .daterange-panel { left: 0; right: auto; }
}
@media (max-width: 900px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); }
  .card-grid .span-2 { grid-column: auto; }
  .funnel2 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .f2-step { grid-template-rows: 80px auto auto auto; }
  .fab { display: inline-flex; }
  .sidebar { background: rgba(255, 255, 255, .94); }
  .hero { padding: 22px 20px; }
  .hero h1 { font-size: 28px; }
}
@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi2 { min-height: 150px; padding: 14px; }
  .kpi2-value { font-size: 24px; }
  .hero-actions .md-btn { flex: 1 1 100%; justify-content: center; }
  .stage2 a { grid-template-columns: 1fr 70px 28px; }
  .dash { gap: 14px; }
  .card2 { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .f2-fill, .ripple { animation: none !important; }
  a.kpi2:hover { transform: none; }
}