/* =====================================================================
   FMS Design System · home.css
   Dashboard (Home) layout only. Every value comes from tokens.css.
   ===================================================================== */

/* ---------- Hero ---------- */
.fms-hero{
  position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-6);
  padding:var(--sp-1) 2px var(--sp-6);min-height:120px;overflow:hidden;
}
.fms-hero-art{
  position:absolute;right:3%;top:44%;transform:translateY(-50%);
  width:min(34%,440px);aspect-ratio:720/173;
  background:var(--bridge) no-repeat center / contain;
  opacity:.16;pointer-events:none;
}
.fms-hero-left{position:relative;z-index:1;min-width:0;}
.fms-hero-left h1{
  margin:0 0 6px;font-family:var(--serif);font-weight:var(--fw-bold);color:var(--navy);
  font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:.2px;
}
.fms-hero-left p{margin:0;color:var(--muted);font-size:var(--fs-md);}
.fms-hero-right{
  position:relative;z-index:1;text-align:right;flex-shrink:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--sp-3);padding-top:var(--sp-1);
}
.fms-date{font-size:var(--fs-base);color:var(--slate);font-weight:var(--fw-semibold);}
.fms-tagline{font-size:12.5px;letter-spacing:var(--tracking-eyebrow);color:var(--gold-deep);font-weight:var(--fw-bold);text-transform:uppercase;white-space:nowrap;}

/* ---------- Grids (one gap token everywhere) ---------- */
.fms-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap);margin-bottom:var(--grid-gap);}
.fms-row{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--grid-gap);margin-bottom:var(--grid-gap);}
.fms-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--grid-gap);align-items:stretch;}
.fms-col{display:flex;flex-direction:column;gap:var(--grid-gap);min-width:0;}
.fms-col > :last-child{flex:1;}                 /* bottoms of the two columns line up */
/* Financial permission is resolved before the lower grid is shown (avoids a layout jump) */
.fms-cols[data-fin="pending"]{visibility:hidden;}
/* Without financial access the panel is absent and Recent Activity takes the full width;
   My Activity and the quote then share the next row. */
.fms-cols[data-fin="no"] .fms-col{display:contents;}
.fms-cols[data-fin="no"] #fms-activity-panel{grid-column:1 / -1;}

/* ---------- Task overview (donut) ---------- */
.fms-donut-wrap{display:flex;align-items:center;gap:34px;flex-wrap:wrap;flex:1;justify-content:center;}
.fms-donut-wrap svg{flex-shrink:0;max-width:100%;}

/* ---------- Financial summary ---------- */
.fms-fin-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.fms-fin-tile{border-radius:var(--radius-md);padding:12px 14px;min-width:0;}
.fms-fin-icon{width:30px;height:30px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.6);margin-bottom:var(--sp-2);}
.fms-fin-icon svg{width:16px;height:16px;}
.fms-fin-tile .l{font-size:12.5px;font-weight:var(--fw-semibold);}
.fms-fin-tile .v{font-size:clamp(20px,1.9vw,26px);font-weight:var(--fw-bold);font-family:var(--serif);margin-top:0;line-height:1.2;overflow-wrap:anywhere;}
.fms-fin-tile .s{font-size:var(--fs-xs);opacity:.78;margin-top:2px;}
.fin-total{background:var(--green-bg);color:var(--green);}
.fin-outstanding{background:var(--amber-bg);color:var(--amber);}
.fin-overdue{background:var(--red-bg);color:var(--red);}
.fin-duesoon{background:var(--blue-bg);color:var(--blue);}
.fms-fin-foot{margin-top:var(--sp-3);padding-top:10px;border-top:1px solid var(--line-soft);font-size:var(--fs-sm);color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;}
.fms-fin-foot b{color:var(--navy);font-weight:var(--fw-bold);}

/* ---------- My activity chart ---------- */
.fms-chart-wrap{flex:1;display:flex;flex-direction:column;min-height:0;}
.fms-chart-wrap svg{width:100%;height:auto;display:block;}
.fms-chart-axis-label{font-size:11px;fill:var(--muted);font-family:var(--sans);}
.fms-myactivity-legend{display:flex;gap:26px;flex-wrap:wrap;margin-top:var(--sp-4);flex-shrink:0;}
.fms-my-legend-item{display:flex;align-items:center;gap:9px;font-size:var(--fs-base);color:var(--text);font-weight:var(--fw-medium);}
.fms-my-legend-item .fms-legend-count{font-size:var(--fs-md);}

/* ---------- Quote ---------- */
.fms-quote{
  position:relative;border:var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-rest);
  padding:var(--card-pad) 30px;display:flex;align-items:center;overflow:hidden;min-height:128px;
}
.fms-quote-body{display:flex;gap:18px;align-items:flex-start;position:relative;z-index:1;}
.fms-quote-art{position:absolute;right:-6px;bottom:-8px;width:260px;height:70px;background:var(--bridge) no-repeat right bottom / contain;opacity:.14;pointer-events:none;}
.fms-quote .mark{font-size:44px;color:var(--navy);line-height:.9;font-family:var(--serif);position:relative;z-index:1;}
.fms-quote blockquote{margin:0;font-style:italic;color:var(--navy-2);font-size:var(--fs-lg);font-family:var(--serif);position:relative;z-index:1;line-height:1.4;}
.fms-quote cite{display:block;margin-top:var(--sp-3);font-style:normal;font-size:var(--fs-xs);letter-spacing:1.6px;color:var(--slate);font-weight:var(--fw-bold);position:relative;z-index:1;}
.fms-quote cite::after{content:"";display:block;width:32px;height:2px;background:var(--gold);margin-top:var(--sp-2);}


/* Compact desktop: KPI cards keep their style but give the text room (no label/delta wrapping) */
@media (max-width:1400px){
  .fms-card{gap:12px;padding:18px 34px 18px 18px;}
  .fms-icon-circle{width:50px;height:50px;}
  .fms-icon-circle svg{width:23px;height:23px;}
  .fms-chevron{right:10px;}
  .fms-chevron svg{width:18px;height:18px;}
  .fms-stat-label{font-size:14px;white-space:nowrap;}
  .fms-stat-delta{font-size:12.5px;white-space:nowrap;}
}

/* ---------- Responsive (fluid; breakpoints only re-flow, never fix a resolution) ---------- */
@media (max-width:1180px){
  .fms-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fms-row,.fms-cols{grid-template-columns:minmax(0,1fr);}
  .fms-cols[data-fin="no"] .fms-col{display:flex;}
  .fms-cols[data-fin="no"] #fms-activity-panel{grid-column:auto;}
}
@media (max-width:900px){
  .fms-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fms-hero-art{opacity:.09;}
}
@media (max-width:640px){
  .fms-stats{grid-template-columns:minmax(0,1fr);}
  .topbar .fms-search{max-width:none;}
  .fms-user-meta,.fms-kbd{display:none;}
  .fms-hero{flex-direction:column;gap:var(--sp-3);}
  .fms-hero-right{align-items:flex-start;text-align:left;}
  .fms-tagline{white-space:normal;letter-spacing:2px;}
  .fms-hero-art{display:none;}
  table.fms-table thead{display:none;}
  table.fms-table,table.fms-table tbody,table.fms-table tr,table.fms-table td{display:block;width:100%;}
  table.fms-table tr{padding:10px 2px;border-bottom:1px solid var(--line-soft);}
  table.fms-table td{border-bottom:none;padding:3px 2px;}
  table.fms-table td.c-dot{display:none;}
  table.fms-table td[data-label]::before{content:attr(data-label);display:inline-block;min-width:60px;font-size:var(--fs-2xs);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-right:var(--sp-2);}
}