/* ===========================================================
   Freelancer Attendance (Rosterline) — front-end styles
   Light theme. #1C2246 (your sidebar color) is used only for
   accents that are meant to stand out — primary buttons, toasts,
   status dots — not as a page/panel background.
=========================================================== */
:root{
  --fa-ink:#191B22;
  --fa-ink-soft:#565A6B;
  --fa-ink-faint:#9296A6;
  --fa-line:#E5E1D6;
  --fa-line-soft:#F0ECE2;
  --fa-bg:#F4F2EE;
  --fa-panel:#FFFFFF;
  --fa-panel-tint:#FAF8F3;

  --fa-brand:#1C2246;
  --fa-brand-ink:#1C2246;
  --fa-brand-tint:#EAEBF4;

  --fa-working:#1E8E5A;
  --fa-working-bg:#E9F6EF;
  --fa-working-line:#BFE6D2;

  --fa-break:#B4680B;
  --fa-break-bg:#FCF1E1;
  --fa-break-line:#F2D6A8;

  --fa-inactive:#B23A2E;
  --fa-inactive-bg:#FBEAE7;
  --fa-inactive-line:#F2C4BB;

  --fa-meeting:#2451C7;
  --fa-meeting-bg:#EAEFFC;
  --fa-meeting-line:#C6D3F5;

  --fa-radius-s:9px; --fa-radius-m:13px; --fa-radius-l:17px;
  --fa-shadow-card:0 1px 2px rgba(25,27,34,.04), 0 8px 24px -12px rgba(25,27,34,.10);
  --fa-shadow-pop:0 16px 40px -10px rgba(25,27,34,.22), 0 3px 10px rgba(25,27,34,.08);

  --fa-font-display:'Space Grotesk', sans-serif;
  --fa-font-body:'Inter', sans-serif;
  --fa-font-mono:'JetBrains Mono', monospace;
}

.fa-app{font-family:var(--fa-font-body);color:var(--fa-ink);font-size:15.5px;line-height:1.55;}
.fa-app *{box-sizing:border-box;}
.fa-app a{color:inherit;text-decoration:none;}
.fa-app button{font-family:inherit;cursor:pointer;}
.fa-content{max-width:1760px;padding:6px 2px 40px;}

/* ---------------- KPI cards ---------------- */
.fa-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px;}
.fa-kpi{background:var(--fa-panel);border:1px solid var(--fa-line);border-radius:var(--fa-radius-m);padding:16px 17px;box-shadow:var(--fa-shadow-card);transition:transform .15s ease, border-color .15s ease;}
.fa-kpi:hover{transform:translateY(-2px);border-color:var(--fa-brand);}
.fa-kpi-label{font-size:12px;color:var(--fa-ink-faint);font-weight:600;margin-bottom:8px;letter-spacing:.01em;}
.fa-kpi-value{font-family:var(--fa-font-display);font-size:25px;font-weight:600;}
.fa-kpi.warn{border-color:var(--fa-inactive-line);background:var(--fa-inactive-bg);}
.fa-kpi.warn .fa-kpi-value,.fa-kpi.warn .fa-kpi-label{color:var(--fa-inactive);}

.fa-panel{background:var(--fa-panel);border:1px solid var(--fa-line);border-radius:var(--fa-radius-l);box-shadow:var(--fa-shadow-card);}
.fa-section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.fa-section-head h2{font-family:var(--fa-font-display);font-size:17px;font-weight:600;margin:0;}

/* ---------------- Avatars (with initials fallback, max 2 letters) ---------------- */
.fa-avatar{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:var(--fa-font-display);font-weight:600;font-size:13px;color:#fff;flex-shrink:0;position:relative;background-size:cover;background-position:center;background-color:#4A5CC7;}
.fa-avatar .fa-dot{position:absolute;bottom:-2px;right:-2px;width:11px;height:11px;border-radius:50%;border:2.5px solid var(--fa-panel);}
.fa-dot.Working{background:var(--fa-working);}
.fa-dot.Working::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--fa-working);animation:fa-pulse-ring 1.8s ease-out infinite;}
.fa-dot.On-Break{background:var(--fa-break);}
.fa-dot.Inactive{background:var(--fa-inactive);}
.fa-dot.Meeting{background:var(--fa-meeting);}
@keyframes fa-pulse-ring{0%{transform:scale(.7);opacity:.9;}100%{transform:scale(2.1);opacity:0;}}

/* ---------------- Status pills ---------------- */
.fa-pill{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:20px;}
.fa-pill .fa-sdot{width:6px;height:6px;border-radius:50%;background:currentColor;}
.fa-pill.st-Working{background:var(--fa-working-bg);color:var(--fa-working);}
.fa-pill.st-On-Break{background:var(--fa-break-bg);color:var(--fa-break);}
.fa-pill.st-Inactive{background:var(--fa-inactive-bg);color:var(--fa-inactive);}
.fa-pill.st-Meeting{background:var(--fa-meeting-bg);color:var(--fa-meeting);}

/* ---------------- Team strip / cards (widened) ---------------- */
.fa-team-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;margin-bottom:22px;}
.fa-emp-card{flex:0 0 260px;background:var(--fa-panel);border:1px solid var(--fa-line);border-radius:var(--fa-radius-m);padding:15px;box-shadow:var(--fa-shadow-card);cursor:pointer;transition:transform .15s ease,border-color .15s ease;}
.fa-emp-card:hover{transform:translateY(-2px);border-color:var(--fa-brand);}
.fa-emp-card.issue{border-color:var(--fa-inactive-line);}
.fa-emp-top{display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.fa-emp-name{font-size:14.5px;font-weight:700;}
.fa-emp-role{font-size:11.5px;color:var(--fa-ink-faint);}

/* ---------------- Table (redesigned) ---------------- */
.fa-table-wrap{border-radius:var(--fa-radius-l);overflow:hidden;border:1px solid var(--fa-line);background:var(--fa-panel);}
table.fa-table{width:100%;border-collapse:separate;border-spacing:0;min-width:920px;}
table.fa-table thead th{text-align:left;font-size:11px;font-weight:700;color:var(--fa-ink-faint);text-transform:uppercase;letter-spacing:.05em;padding:15px 18px;background:var(--fa-panel-tint);border-bottom:1.5px solid var(--fa-line);white-space:nowrap;}
table.fa-table thead th:first-child{border-top-left-radius:var(--fa-radius-l);}
table.fa-table thead th:last-child{border-top-right-radius:var(--fa-radius-l);}
table.fa-table tbody td{padding:15px 18px;border-bottom:1px solid var(--fa-line-soft);font-size:14px;vertical-align:middle;}
table.fa-table tbody tr{transition:background .14s ease;}
table.fa-table tbody tr:nth-child(even){background:rgba(0,0,0,.012);}
table.fa-table tbody tr:last-child td{border-bottom:0;}
table.fa-table tbody tr:hover{background:var(--fa-brand-tint);cursor:pointer;}
table.fa-table tbody tr.issue{box-shadow:inset 3px 0 0 var(--fa-inactive);background:rgba(178,58,46,.04);}
table.fa-table tbody tr.issue:hover{background:rgba(178,58,46,.08);}
.fa-cell-emp{display:flex;align-items:center;gap:11px;min-width:220px;}
.fa-cell-emp b{font-size:14px;}
.fa-mono{font-family:var(--fa-font-mono);font-size:13.3px;}

/* ---------------- Buttons ---------------- */
.fa-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:10px;font-size:13.5px;font-weight:700;border:1px solid var(--fa-line);background:var(--fa-panel-tint);color:var(--fa-ink);transition:filter .12s,transform .08s;}
.fa-btn:hover{filter:brightness(1.15);}
.fa-btn:active{transform:scale(.97);}
.fa-btn-primary{background:var(--fa-brand);border-color:var(--fa-brand);color:#fff !important;}
.fa-btn-sm{padding:7px 12px;font-size:12.5px;}

/* ---------------- Modal (animated) ---------------- */
.fa-overlay{position:fixed;inset:0;background:rgba(10,12,26,.6);backdrop-filter:blur(2px);z-index:400;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .18s ease;}
.fa-overlay.show{display:flex;opacity:1;}
.fa-modal{background:var(--fa-panel);border:1px solid var(--fa-line);border-radius:18px;width:580px;max-width:92vw;max-height:86vh;overflow:auto;box-shadow:var(--fa-shadow-pop);transform:translateY(16px) scale(.96);opacity:0;transition:transform .22s cubic-bezier(.2,.9,.3,1.1),opacity .2s ease;}
.fa-overlay.show .fa-modal{transform:translateY(0) scale(1);opacity:1;}
.fa-modal-head{display:flex;align-items:center;gap:13px;padding:19px 21px;border-bottom:1px solid var(--fa-line-soft);}
.fa-modal-body{padding:19px 21px 23px;}
.fa-modal-close{margin-left:auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--fa-line);background:var(--fa-panel-tint);color:var(--fa-ink-soft);display:flex;align-items:center;justify-content:center;font-size:16px;}
.fa-modal-close:hover{background:var(--fa-line-soft);}

/* modal loading state */
.fa-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:50px 20px;gap:14px;}
.fa-spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--fa-line);border-top-color:var(--fa-brand);animation:fa-spin .7s linear infinite;}
@keyframes fa-spin{to{transform:rotate(360deg);}}
.fa-loading span{font-size:13px;color:var(--fa-ink-faint);font-weight:600;}

/* ---------------- Forms ---------------- */
.fa-field-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.fa-field-row label{font-size:12.5px;font-weight:700;color:var(--fa-ink-soft);}
.fa-field-row input,.fa-field-row select,.fa-field-row textarea{border:1px solid var(--fa-line);border-radius:9px;padding:10px 12px;font:inherit;font-size:14px;background:var(--fa-panel-tint);color:var(--fa-ink);}
.fa-field-row input:focus,.fa-field-row textarea:focus{outline:none;border-color:var(--fa-brand);}
.fa-checkbox-list{display:flex;flex-direction:column;gap:7px;max-height:180px;overflow-y:auto;border:1px solid var(--fa-line);border-radius:9px;padding:9px;background:var(--fa-panel-tint);}
.fa-checkbox-row{display:flex;align-items:center;gap:9px;font-size:14px;}

/* ---------------- Toast (animated) ---------------- */
.fa-toast-wrap{position:fixed;bottom:22px;right:22px;z-index:500;display:flex;flex-direction:column;gap:9px;}
.fa-toast{background:var(--fa-brand-ink);border:1px solid var(--fa-line);color:#fff;padding:12px 16px;border-radius:11px;font-size:13.5px;font-weight:600;box-shadow:var(--fa-shadow-pop);animation:fa-toast-in .25s cubic-bezier(.2,.9,.3,1.15);}
@keyframes fa-toast-in{from{opacity:0;transform:translateY(12px) scale(.95);}to{opacity:1;transform:none;}}

/* ---------------- Timeline ---------------- */
.fa-timeline{display:flex;flex-direction:column;}
.fa-tl-item{display:flex;gap:11px;position:relative;padding-bottom:15px;}
.fa-tl-item::before{content:"";position:absolute;left:5px;top:15px;bottom:0;width:1.5px;background:var(--fa-line);}
.fa-tl-item:last-child::before{display:none;}
.fa-tl-dot{width:11px;height:11px;border-radius:50%;margin-top:2px;flex-shrink:0;}
.fa-tl-time{font-family:var(--fa-font-mono);font-size:12px;font-weight:600;color:var(--fa-ink-faint);width:56px;flex-shrink:0;}

/* ---------------- Calendar ---------------- */
.fa-cal-grid{padding:16px 18px 18px;}
.fa-cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin-bottom:9px;}
.fa-cal-weekdays div{font-size:11px;font-weight:700;color:var(--fa-ink-faint);}
.fa-cal-days{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;}
.fa-cal-day{min-height:150px;border:1px solid var(--fa-line-soft);border-radius:12px;padding:9px;background:var(--fa-panel-tint);cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:border-color .12s;}
.fa-cal-day:hover{border-color:var(--fa-brand);}
.fa-cal-day.today{border-color:var(--fa-brand);border-width:2px;}
.fa-cal-day-num{font-size:12.5px;font-weight:700;color:var(--fa-ink-soft);}

/* Big, glanceable chip: full-color fill by status/health, avatar, name,
   a status/hours line, and a note icon that's only "live" (clickable)
   when a note actually exists. */
.fa-cal-chip{display:flex;align-items:center;gap:8px;border-radius:10px;padding:8px 9px;color:#fff;}
.fa-cal-chip .fa-chip-avatar{width:26px;height:26px;border-radius:8px;border:1.5px solid rgba(255,255,255,.55);font-size:10px;}
.fa-cal-chip .fa-chip-body{flex:1;min-width:0;}
.fa-cal-chip .fa-chip-name{display:block;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.fa-cal-chip .fa-chip-sub{display:block;font-size:10.5px;font-weight:600;opacity:.9;margin-top:1px;}
.fa-cal-chip .fa-chip-note{width:15px;height:15px;flex-shrink:0;opacity:.4;cursor:default;color:#fff;}
.fa-cal-chip .fa-chip-note.has-note{opacity:1;cursor:pointer;}
.fa-cal-chip.health-green,.fa-cal-chip.status-Working{background:var(--fa-working);}
.fa-cal-chip.health-amber,.fa-cal-chip.status-On-Break{background:var(--fa-break);}
.fa-cal-chip.health-red{background:var(--fa-inactive);}
.fa-cal-chip.status-Inactive{background:#9296A6;}
.fa-cal-chip.status-Meeting{background:var(--fa-meeting);}
.fa-cal-chip.health-gray{background:#C9C7C1;color:#5A5850;}
.fa-cal-chip.health-gray .fa-chip-note{color:#5A5850;}

/* ---------------- Track-time bar widget (compact, header-friendly) ---------------- */
.fa-track-compact{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--fa-panel);border:1px solid var(--fa-line);border-radius:11px;padding:7px 8px 7px 12px;box-shadow:var(--fa-shadow-card);}
.fa-pill-sm{font-size:11px;padding:3px 8px;}
.fa-timer-mini{font-family:var(--fa-font-mono);font-size:14px;font-weight:700;color:var(--fa-ink);}
.fa-more-btn{width:28px;height:28px;border-radius:8px;border:1px solid var(--fa-line);background:var(--fa-panel-tint);display:flex;align-items:center;justify-content:center;color:var(--fa-ink-soft);flex-shrink:0;}
.fa-more-btn:hover{background:var(--fa-brand-tint);color:var(--fa-brand);}
.fa-more-panel{position:absolute;top:calc(100% + 8px);right:0;background:var(--fa-panel);border:1px solid var(--fa-line);border-radius:13px;padding:14px;box-shadow:var(--fa-shadow-pop);min-width:230px;z-index:120;display:none;}
.fa-more-panel.show{display:block;}
.fa-more-stats{display:flex;flex-direction:column;gap:5px;margin-top:12px;padding-top:11px;border-top:1px solid var(--fa-line-soft);font-size:12px;color:var(--fa-ink-soft);}
.fa-more-stats span{font-family:var(--fa-font-mono);font-weight:700;color:var(--fa-ink);}
.fa-more-panel .fa-control-btns{gap:8px;}
.fa-more-panel .fa-cbtn{padding:9px 12px;font-size:12.5px;flex:1;white-space:nowrap;}
.fa-control-btns{display:flex;gap:10px;}
.fa-cbtn{padding:11px 18px;border-radius:11px;border:1px solid transparent;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;gap:7px;transition:filter .12s,transform .08s;}
.fa-cbtn:hover{filter:brightness(1.1);}
.fa-cbtn:active{transform:scale(.97);}
.fa-cbtn svg{width:15px;height:15px;}
.fa-cbtn.start,.fa-cbtn.resume{background:var(--fa-working);color:#0E2B1B;}
.fa-cbtn.brk{background:var(--fa-break-bg);color:var(--fa-break);border-color:var(--fa-break-line);}
.fa-cbtn.end{background:var(--fa-inactive-bg);color:var(--fa-inactive);border-color:var(--fa-inactive-line);}

/* ---------------- Track-time circle widget (draggable stopwatch) ---------------- */
.fa-track-circle{
  position:fixed;z-index:350;width:84px;height:84px;border-radius:50%;
  background:#7C818F; color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:grab;user-select:none;touch-action:none;
  box-shadow:var(--fa-shadow-pop);
  transition:transform .15s ease, box-shadow .2s ease;
}
.fa-track-circle:active{cursor:grabbing;}
.fa-track-circle.dragging{transform:scale(1.06);box-shadow:0 26px 60px -10px rgba(0,0,0,.45);animation:none;}
.fa-track-circle .fa-tc-time{font-family:var(--fa-font-mono);font-weight:700;font-size:16.5px;line-height:1;}
.fa-track-circle .fa-tc-status{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:4px;opacity:.9;}

.fa-track-circle.status-Working{background:var(--fa-working);animation:fa-sw-pulse-green 2.2s ease-out infinite;}
.fa-track-circle.status-On-Break{background:var(--fa-break);animation:fa-sw-pulse-amber 2.6s ease-out infinite;}
.fa-track-circle.status-Inactive{background:#7C818F;}
@keyframes fa-sw-pulse-green{
  0%{box-shadow:0 0 0 0 rgba(30,142,90,.55), var(--fa-shadow-pop);}
  70%{box-shadow:0 0 0 16px rgba(30,142,90,0), var(--fa-shadow-pop);}
  100%{box-shadow:0 0 0 0 rgba(30,142,90,0), var(--fa-shadow-pop);}
}
@keyframes fa-sw-pulse-amber{
  0%{box-shadow:0 0 0 0 rgba(180,104,11,.5), var(--fa-shadow-pop);}
  70%{box-shadow:0 0 0 16px rgba(180,104,11,0), var(--fa-shadow-pop);}
  100%{box-shadow:0 0 0 0 rgba(180,104,11,0), var(--fa-shadow-pop);}
}

.fa-track-circle-menu{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);background:var(--fa-panel);border:1px solid var(--fa-line);border-radius:13px;padding:9px;display:none;gap:7px;box-shadow:var(--fa-shadow-pop);white-space:nowrap;}
.fa-track-circle-menu.show{display:flex;}
.fa-track-circle-menu button{font-size:11.5px;font-weight:600;padding:7px 10px;border-radius:8px;border:1px solid var(--fa-line);background:var(--fa-panel-tint);color:var(--fa-ink);}
.fa-track-circle-menu button:hover{background:var(--fa-brand-tint);}

/* ---------------- Stat boxes ---------------- */
.fa-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.fa-stat-box{background:var(--fa-panel);border:1px solid var(--fa-line);border-radius:var(--fa-radius-m);padding:16px;text-align:center;box-shadow:var(--fa-shadow-card);}
.fa-stat-box .v{font-family:var(--fa-font-mono);font-size:21px;font-weight:700;}
.fa-stat-box .l{font-size:11px;color:var(--fa-ink-faint);font-weight:700;margin-top:5px;text-transform:uppercase;letter-spacing:.03em;}

/* ---------------- Popover ---------------- */
.fa-pop{position:fixed;z-index:600;background:var(--fa-brand-ink);border:1px solid var(--fa-line);color:#EDEEFA;border-radius:12px;padding:13px 15px;box-shadow:var(--fa-shadow-pop);font-size:13px;min-width:220px;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;pointer-events:none;}
.fa-pop.show{opacity:1;transform:translateY(0);}

/* ---------------- Scroll-reveal liveness ---------------- */
.fa-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.fa-reveal.in{opacity:1;transform:none;}

@media(max-width:900px){
  .fa-kpi-row{grid-template-columns:repeat(2,1fr);}
  .fa-stat-row{grid-template-columns:1fr;}
}