/* HR Blizz · Core HR → Timesheet page — mock component styles */
:root{--ts-o:#FF5F1F;--ts-ink:#001738;--ts-ink-2:#001738;--ts-muted:#8B9AB2;--ts-line:#E3E9F2;--ts-line-2:#B8C1D1;--ts-tint:#F0F3F8;--ts-teal:#1497BA;--ts-green:#0F8529;--ts-amber:#B27A00;--ts-navy:#001738}

/* ── Timer widget ─────────────────────────────────────── */
.ts-timer{position:relative;width:100%;max-width:420px;padding:22px 22px 20px;background:linear-gradient(180deg,#fff,#F8FAFD);border:1px solid var(--ts-line);border-radius:20px;box-shadow:0 22px 44px -32px rgba(0,23,56,.5);color:var(--ts-ink);display:flex;flex-direction:column;gap:14px}
.ts-timer-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ts-timer-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;background:rgba(15,133,41,.1);color:#0a6a21;font:700 11.5px/1 var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase}
.ts-timer-tag i{width:7px;height:7px;border-radius:50%;background:#0F8529;box-shadow:0 0 0 4px rgba(15,133,41,.18);animation:tspulse 1.6s ease-in-out infinite}
@keyframes tspulse{0%,100%{opacity:1}50%{opacity:.55}}
.ts-timer-proj{font-size:13.5px;color:var(--ts-ink);font-weight:600;letter-spacing:-.005em}
.ts-timer-face{display:flex;align-items:baseline;justify-content:center;gap:6px;font-family:var(--font-display,inherit);color:var(--ts-ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ts-timer-num{font-size:44px;font-weight:700;background:linear-gradient(180deg,#001738,#3F587F);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ts-timer-face em{font-style:normal;font-size:38px;color:#B8C1D1;font-weight:600}
.ts-sec{font-size:32px !important;color:var(--ts-o);-webkit-text-fill-color:var(--ts-o) !important;background:none !important}
.ts-timer-acts{display:flex;gap:10px}
.ts-timer-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 16px;border-radius:12px;border:0;font:700 14px/1 var(--font-body);cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}
.ts-timer-btn svg{width:15px;height:15px}
.ts-timer-btn.is-pause{background:linear-gradient(180deg,#1A3E6D,#001738);color:#fff;box-shadow:0 10px 22px -14px rgba(0,23,56,.6)}
.ts-timer-btn.is-play{background:linear-gradient(180deg,#0F8529,#0a6a21);color:#fff;box-shadow:0 10px 22px -14px rgba(15,133,41,.6)}
.ts-timer-btn:hover{transform:translateY(-1px)}
.ts-timer-stop{flex:1;height:44px;border-radius:12px;border:1px solid var(--ts-line);background:#fff;color:var(--ts-ink);font:700 14px/1 var(--font-body);cursor:pointer;transition:background .18s,border-color .18s; pointer-events: none;}
/* .ts-timer-stop:hover{background:#F5F8FC;border-color:var(--ts-o)} */
.ts-timer-meta{display:flex;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px dashed var(--ts-line);font-size:13px;color:var(--ts-ink-2)}
.ts-timer-meta b{color:var(--ts-ink);font-weight:700;margin-right:4px}

/* Hero uses full-width version */
.ts-hero-wrap{display:flex;justify-content:flex-end}
.ts-hero .ts-timer{max-width:460px;width:100%}

/* ── Log ──────────────────────────────────────────────── */
.ts-log{width:100%;padding:16px 18px 14px;background:#fff;border:1px solid var(--ts-line);border-radius:16px;color:var(--ts-ink);box-shadow:0 12px 28px -22px rgba(0,23,56,.35)}
.ts-log-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--ts-line)}
.ts-log-h b{display:block;font:700 14px/1.2 var(--font-display,inherit);letter-spacing:-.01em}
.ts-log-h small{display:block;margin-top:3px;font-size:11.5px;color:var(--ts-muted)}
.ts-log-add{padding:5px 11px;border-radius:999px;background:rgba(255,95,31,.1);color:var(--ts-o);font:700 11.5px/1 var(--font-mono,monospace);letter-spacing:.06em;cursor:pointer}
.ts-log ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ts-log li{display:grid;grid-template-columns:44px 10px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;transition:background .16s}
.ts-log li:hover{background:#F5F8FC}
.ts-log-time{font:600 12px/1 var(--font-mono,monospace);color:var(--ts-muted);letter-spacing:.04em}
.ts-log-dot{width:10px;height:10px;border-radius:50%}
.ts-dot-orange{background:#FF5F1F}
.ts-dot-teal{background:#1497BA}
.ts-dot-navy{background:#1A3E6D}
.ts-dot-amber{background:#B27A00}
.ts-log-body{min-width:0}
.ts-log-body b{display:block;font-size:13px;font-weight:700;color:var(--ts-ink);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-log-body small{display:block;font-size:11.5px;color:var(--ts-muted);margin-top:1px}
.ts-log-dur{font:700 13px/1 var(--font-mono,monospace);color:var(--ts-ink);font-variant-numeric:tabular-nums}

/* ── Month calendar ───────────────────────────────────── */
.ts-month{width:100%;padding:16px 18px;background:linear-gradient(160deg,#03142E,#001738 60%,#0A2450);border:1px solid rgba(255,255,255,.09);border-radius:18px;color:#EAF1FA;box-shadow:0 30px 60px -40px rgba(0,0,0,.6);position:relative;overflow:hidden}
.ts-month::before{content:"";position:absolute;top:-120px;right:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,95,31,.2),transparent 70%);pointer-events:none}
.ts-month-h{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 12px}
.ts-month-h b{display:block;font:700 14.5px/1.2 var(--font-display,inherit);letter-spacing:-.01em;color:#fff}
.ts-month-h small{display:block;margin-top:3px;font-size:11.5px;color:rgba(255,255,255,.55)}
.ts-month-legend{display:inline-flex;align-items:center;gap:8px;font-size:11px;color:rgba(255,255,255,.6)}
.ts-month-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;background:rgba(184,193,209,.35);margin-right:4px}
.ts-month-legend i.ot{background:linear-gradient(135deg,#FF7A3D,#FF5F1F)}
.ts-month-days{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:0 0 6px;font:700 10.5px/1 var(--font-mono,monospace);color:rgba(255,255,255,.42);letter-spacing:.08em;text-transform:uppercase;text-align:center}
.ts-month-grid{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ts-day{position:relative;min-height:56px;padding:6px 7px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;justify-content:space-between}
.ts-day.is-weekend{opacity:.45}
.ts-day.is-empty{background:transparent;border-style:dashed;border-color:rgba(255,255,255,.09)}
.ts-day.is-ot{background:linear-gradient(180deg,rgba(255,138,80,.22),rgba(255,95,31,.12));border-color:rgba(255,138,80,.4)}
.ts-day-n{font:700 10.5px/1 var(--font-mono,monospace);color:rgba(255,255,255,.42);letter-spacing:.04em}
.ts-day-h{font:700 15px/1 var(--font-display,inherit);color:#fff;letter-spacing:-.02em}
.ts-day.is-ot .ts-day-h{color:#FFC199}
.ts-day-ot{position:absolute;top:5px;right:6px;font:700 9.5px/1 var(--font-mono,monospace);color:#FFC199;letter-spacing:.04em}

/* ── Reports ──────────────────────────────────────────── */
.ts-reports{width:100%;padding:16px 18px;background:#fff;border:1px solid var(--ts-line);border-radius:16px;color:var(--ts-ink);box-shadow:0 12px 28px -22px rgba(0,23,56,.35)}
.ts-reports-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;padding:0 0 10px;border-bottom:1px solid var(--ts-line)}
.ts-reports-h b{display:block;font:700 14px/1.2 var(--font-display,inherit);letter-spacing:-.01em}
.ts-reports-h small{display:block;margin-top:3px;font-size:11.5px;color:var(--ts-muted)}
.ts-reports-new{padding:5px 11px;border-radius:999px;background:rgba(255,95,31,.1);color:var(--ts-o);font:700 11.5px/1 var(--font-mono,monospace);letter-spacing:.06em;cursor:pointer}
.ts-reports ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ts-reports li{display:grid;grid-template-columns:34px minmax(0,1fr) 30px;align-items:center;gap:10px;padding:8px 8px;border-radius:10px;border:1px solid var(--ts-line);background:linear-gradient(180deg,#fff,#F8FAFD);transition:transform .18s,border-color .18s,box-shadow .18s}
.ts-reports li:hover{transform:translateY(-1px);border-color:rgba(255,95,31,.35);box-shadow:0 8px 18px -12px rgba(0,23,56,.25)}
.ts-r-ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;color:#fff}
.ts-r-ic svg{width:14px;height:14px}
.ts-r-orange{background:linear-gradient(135deg,#FF7A3D,#FF5F1F)}
.ts-r-amber{background:linear-gradient(135deg,#F1B733,#B27A00);color:#4a3400}
.ts-r-teal{background:linear-gradient(135deg,#28B7B7,#1497BA)}
.ts-r-navy{background:linear-gradient(135deg,#3F587F,#1A3E6D)}
.ts-reports li b{display:block;font-size:13px;font-weight:700;color:var(--ts-ink);letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-reports li small{display:block;font-size:11.5px;color:var(--ts-muted);margin-top:1px}
.ts-r-dl{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#F0F3F8;color:var(--ts-o);transition:background .18s}
.ts-r-dl svg{width:14px;height:14px}
.ts-reports li:hover .ts-r-dl{background:#FFE9DE}

.lv-card .lv-card-vis:has(.ts-dash){padding-bottom:22px}
.lv-card .lv-card-vis:has(.ts-dash) .ts-dash{margin-bottom:0}

/* ── Dark timesheet dashboard (inside dark bento card) ─ */
.ts-dash{position:relative;width:100%;max-width:640px;padding:20px 22px 18px;color:#EAF1FA;background:linear-gradient(160deg,#03142E,#001738 60%,#0A2450);border:1px solid rgba(255,255,255,.09);border-radius:22px;box-shadow:0 30px 60px -40px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:16px;overflow:hidden}
.ts-dash::before{content:"";position:absolute;top:-120px;right:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,95,31,.22),transparent 70%);pointer-events:none}
.ts-dash-h{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ts-dash-kicker{display:block;font:700 10.5px/1 var(--font-mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.ts-dash-h b{display:block;margin-top:6px;font:700 15.5px/1.2 var(--font-display,inherit);color:#fff;letter-spacing:-.01em}
.ts-dash-week{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);font:700 11.5px/1 var(--font-mono,monospace);letter-spacing:.06em;color:rgba(255,255,255,.72)}
.ts-dash-week i{width:7px;height:7px;border-radius:50%;background:#FF8A50;box-shadow:0 0 0 4px rgba(255,138,80,.2)}
.ts-dash-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;align-items:stretch}
.ts-dash-week-block{grid-column:1/-1}
.ts-dash-timer,.ts-dash-proj-block{height:100%}
.ts-dash-timer{position:relative;padding:16px 18px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);display:flex;flex-direction:column;gap:12px}
.ts-dash-timer-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ts-dash-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 11px;border-radius:999px;background:rgba(15,133,41,.18);color:#8FE3A6;font:700 11px/1 var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase}
.ts-dash-tag i{width:7px;height:7px;border-radius:50%;background:#38C55C;box-shadow:0 0 0 4px rgba(56,197,92,.18);animation:tspulse 1.6s ease-in-out infinite}
.ts-dash-proj{font-size:13px;color:rgba(255,255,255,.82);font-weight:600;letter-spacing:-.005em}
.ts-dash-face{display:flex;align-items:baseline;gap:6px;font-family:var(--font-display,inherit);font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:#fff}
.ts-dash-face span{font-size:40px;font-weight:700;background:linear-gradient(180deg,#fff,rgba(255,255,255,.55));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ts-dash-face em{font-style:normal;font-size:34px;color:rgba(255,255,255,.28);font-weight:600}
.ts-dash-sec{-webkit-text-fill-color:#FF8A50 !important;background:none !important;font-size:32px !important}
.ts-dash-acts{display:flex;gap:8px}
.ts-dash-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 14px;border-radius:11px;border:0;font:700 13px/1 var(--font-body);cursor:pointer;transition:transform .18s,filter .18s}
.ts-dash-btn svg{width:14px;height:14px}
.ts-dash-btn.is-pause{background:#fff;color:#001738;box-shadow:0 12px 22px -14px rgba(0,0,0,.5)}
.ts-dash-btn.is-play{background:linear-gradient(180deg,#38C55C,#0F8529);color:#fff;box-shadow:0 12px 22px -14px rgba(15,133,41,.7)}
.ts-dash-btn:hover{transform:translateY(-1px);filter:brightness(1.06)}
.ts-dash-stop{flex:1;height:40px;border-radius:11px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font:700 13px/1 var(--font-body);cursor:pointer;transition:background .18s,border-color .18s; pointer-events: none;}
/* .ts-dash-stop:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28)} */
.ts-dash-meta{display:flex;justify-content:space-between;gap:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.12);font-size:12.5px;color:rgba(255,255,255,.6)}
.ts-dash-meta b{color:#fff;font-weight:700;margin-right:4px}
.ts-dash-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.ts-dash-block{padding:14px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.ts-dash-block-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 10px}
.ts-dash-block-h b{font:700 13px/1.2 var(--font-display,inherit);color:#fff;letter-spacing:-.005em}
.ts-dash-block-h small{font-size:11.5px;color:rgba(255,255,255,.5)}
.ts-dash-week-bars{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;align-items:end;height:64px}
.ts-wd{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;height:100%}
.ts-wd-bar{width:100%;min-height:4px;border-radius:5px 5px 3px 3px;background:linear-gradient(180deg,#3F587F,#1A3E6D);transition:transform .18s}
.ts-wd.is-live .ts-wd-bar{background:linear-gradient(180deg,#FF8A50,#FF5F1F);box-shadow:0 0 0 3px rgba(255,138,80,.14)}
.ts-wd span{font:700 9.5px/1 var(--font-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.ts-wd.is-live span{color:#FFC199}
.ts-dash-proj-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ts-dash-proj-list li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;gap:10px;padding:6px 4px;border-radius:8px}
.ts-dash-proj-list li:hover{background:rgba(255,255,255,.04)}
.ts-dash-proj-dot{width:10px;height:10px;border-radius:50%}
.ts-dash-proj-list li b{display:block;font-size:12.5px;color:#fff;font-weight:700;letter-spacing:-.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-dash-proj-list li small{display:block;font-size:11px;color:rgba(255,255,255,.5);margin-top:1px}
.ts-dash-proj-d{font:700 12.5px/1 var(--font-mono,monospace);color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
@media (max-width:900px){.ts-dash-grid{grid-template-columns:1fr}.ts-dash-week-block{grid-column:auto}}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width:1024px){
  .ts-dash{max-width:none}
  .ts-timer{max-width:none}
}
@media (max-width:900px){
  .ts-hero-wrap{justify-content:stretch}
  .ts-hero .ts-timer{max-width:none}
}
@media (max-width:768px){
  .ts-timer{padding:18px;max-width:none}
  .ts-timer-num{font-size:38px}
  .ts-timer-face em{font-size:32px}
  .ts-sec{font-size:28px !important}
  .ts-timer-btn,.ts-timer-stop{height:42px;font-size:13.5px}
  .ts-dash{padding:16px 16px 16px}
  .ts-dash-h b{font-size:15px}
  .ts-dash-week{padding:5px 10px;font-size:11px}
  .ts-dash-timer{padding:14px 15px}
  .ts-dash-face span{font-size:36px}
  .ts-dash-face em{font-size:30px}
  .ts-dash-sec{font-size:28px !important}
  .ts-month,.ts-reports,.ts-log{padding:14px 15px}
  .ts-day{min-height:46px;padding:5px 6px}
  .ts-day-h{font-size:14px}
  .ts-day-ot{font-size:9px;top:4px;right:5px}
}
@media (max-width:560px){
  .ts-timer-meta,.ts-dash-meta{flex-direction:column;gap:4px}
  .ts-month-h,.ts-dash-h{flex-direction:column;gap:8px}
  .ts-month-legend,.ts-dash-week{align-self:flex-start}
  .ts-month-days{gap:4px;font-size:9px}
  .ts-month-grid{gap:4px}
  .ts-day{min-height:42px;border-radius:8px}
  .ts-day-h{font-size:12.5px}
  .ts-day-n{font-size:9.5px}
  .ts-day-ot{position:static;margin-top:2px;font-size:8.5px}
  .ts-log li{grid-template-columns:40px 8px minmax(0,1fr) auto;gap:8px}
  .ts-reports li{grid-template-columns:30px minmax(0,1fr) 28px;gap:9px}
}
@media (max-width:430px){
  .ts-timer-num{font-size:32px}
  .ts-timer-face em{font-size:26px}
  .ts-sec{font-size:24px !important}
  .ts-timer-acts{flex-wrap:wrap}
  .ts-dash-acts{flex-wrap:wrap}
  .ts-dash-btn,.ts-dash-stop,.ts-timer-btn,.ts-timer-stop{flex:1 1 100%}
  .ts-day{min-height:38px}
  .ts-day-h{font-size:11.5px}
}

/* Manager/Administrator "For management" cards: leave.css's .lv-dual
   .ch-dual-list{margin-top:auto} pins the bullet list to the bottom of the
   card so both cards' lists line up at the same baseline regardless of how
   long each intro paragraph is. Requested start-aligned instead on this
   page specifically, so the list sits right after the paragraph. */
.lv-dual .ch-dual-list{margin-top:12px;padding-top:0}