/* ============================================================
   TimeTrack — StepSolutions AI — app.css
   ============================================================ */

:root {
  --ss-green-light: #8dc63f;
  --ss-green-mid:   #5a9e2f;
  --ss-green-dark:  #2d7a0a;
  --ss-bg:          #0f1110;
  --ss-surface:     #161a17;
  --ss-surface2:    #1e2420;
  --ss-border:      #2a3330;
  --ss-text:        #e2e8e4;
  --ss-muted:       #5a6b62;
  --bs-body-bg:     #0f1110;
  --bs-body-color:  #e2e8e4;
  --bs-border-color:#2a3330;
}

* { box-sizing: border-box; }

body {
  font-family: 'Sora', sans-serif;
  background: var(--ss-bg);
  color: var(--ss-text);
  font-size: 14px;
}

/* ── LOGO BARS (steps ascending left to right) ─────────── */
/* Bars represent steps: narrow → medium → wide (bottom to top like stairs) */
.logo-bars { display: flex; flex-direction: column; gap: 4px; }
.logo-bar   { height: 4px; border-radius: 2px; }
.bar-top    { width: 32px; background: var(--ss-green-light); } /* top step - widest  */
.bar-mid    { width: 24px; background: var(--ss-green-mid);   } /* middle step        */
.bar-btm    { width: 16px; background: var(--ss-green-dark);  } /* bottom step - narrowest */
.logo-bars-wrap { display: flex; align-items: center; gap: 10px; }
.logo-text  { font-weight: 700; font-size: 13px; line-height: 1.2; }
.logo-text span { color: var(--ss-green-light); }

/* ── SIDEBAR ───────────────────────────────────────────── */
.sidebar {
  width: 230px;
  height: 100vh;        /* bounded, not min */
  overflow-y: auto;     /* scroll when content exceeds */
  background: var(--ss-surface);
  border-right: 1px solid var(--ss-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 200;
  transition: transform 0.3s ease;
}

.sidebar-logo {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--ss-border);
  display: flex;
  align-items: center;
}

.sidebar-logo-img { width: 100%; max-width: 190px; height: auto; display: block; object-fit: contain; }

.sidebar-section {
  padding: 16px 12px 5px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ss-muted);
  font-family: 'DM Mono', monospace;
}

.nav-item-custom {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 8px;
  margin: 1px 8px;
  cursor: pointer;
  color: #8a9e92;
  font-size: 13px;
  font-weight: 400;
  transition: all 0.18s;
  border: 1px solid transparent;
  text-decoration: none;
}

.nav-item-custom:hover  { background: var(--ss-surface2); color: var(--ss-text); }
.nav-item-custom.active {
  background: rgba(93,158,47,0.12);
  color: var(--ss-green-light);
  border-color: rgba(93,158,47,0.2);
  font-weight: 600;
}
.nav-item-custom i { font-size: 15px; width: 18px; text-align: center; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 12px;
  border-top: 1px solid var(--ss-border);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ss-surface2);
  border-radius: 10px;
  cursor: pointer;
  color: var(--ss-text);
}

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ss-green-dark);
  color: var(--ss-green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info   { flex: 1; min-width: 0; }
.user-name   { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role   { font-size: 10px; color: var(--ss-muted); }

/* ── TOPBAR ────────────────────────────────────────────── */
.topbar {
  height: 60px;
  background: var(--ss-surface);
  border-bottom: 1px solid var(--ss-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  gap: 14px;
}

.page-title   { font-size: 16px; font-weight: 600; flex: 1; }
.topbar-badge {
  background: rgba(141,198,63,0.12);
  color: var(--ss-green-light);
  border: 1px solid rgba(141,198,63,0.25);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
}
.topbar-date { color: var(--ss-muted); font-size: 12px; font-family: 'DM Mono', monospace; }

/* ── MAIN ──────────────────────────────────────────────── */
.main-content { margin-left: 230px; min-height: 100vh; display: flex; flex-direction: column; }
.content-area { padding: 28px; flex: 1; }

/* ── CARDS ─────────────────────────────────────────────── */
.ss-card { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 14px; overflow: hidden; margin-bottom: 20px; }
.ss-card-header { padding: 16px 20px; border-bottom: 1px solid var(--ss-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.ss-card-title  { font-size: 14px; font-weight: 600; }
.ss-card-body   { padding: 20px; }

/* ── STAT CARDS ────────────────────────────────────────── */
.stat-card { background: var(--ss-surface); border: 1px solid var(--ss-border); border-radius: 14px; padding: 20px; }
.stat-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ss-muted); font-family: 'DM Mono', monospace; margin-bottom: 8px; }
.stat-value { font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.stat-value.green  { color: var(--ss-green-light); }
.stat-value.mid    { color: var(--ss-green-mid); }
.stat-value.blue   { color: #60d0f0; }
.stat-value.orange { color: #f0a060; }
.stat-sub { font-size: 11px; color: var(--ss-muted); }

/* ── TABLES ────────────────────────────────────────────── */
.ss-table { width: 100%; border-collapse: collapse; }
.ss-table th {
  font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ss-muted); padding: 12px 16px;
  border-bottom: 1px solid var(--ss-border);
  font-family: 'DM Mono', monospace; font-weight: 500; white-space: nowrap;
}
.ss-table td { padding: 12px 16px; border-bottom: 1px solid rgba(42,51,48,0.6); vertical-align: middle; }
.ss-table tr:last-child td { border-bottom: none; }
.ss-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.ss-table.compact td, .ss-table.compact th { padding: 8px 12px; }

/* ── BADGES ────────────────────────────────────────────── */
.badge-green  { background:rgba(141,198,63,0.12); color:var(--ss-green-light); border:1px solid rgba(141,198,63,0.25); padding:3px 10px; border-radius:20px; font-size:11px; font-family:'DM Mono',monospace; display:inline-block; white-space:nowrap; }
.badge-mid    { background:rgba(90,158,47,0.12);  color:#7ac43a; border:1px solid rgba(90,158,47,0.25); padding:3px 10px; border-radius:20px; font-size:11px; font-family:'DM Mono',monospace; display:inline-block; white-space:nowrap; }
.badge-blue   { background:rgba(96,208,240,0.1);  color:#60d0f0; border:1px solid rgba(96,208,240,0.2); padding:3px 10px; border-radius:20px; font-size:11px; font-family:'DM Mono',monospace; display:inline-block; white-space:nowrap; }
.badge-orange { background:rgba(240,160,96,0.1);  color:#f0a060; border:1px solid rgba(240,160,96,0.2); padding:3px 10px; border-radius:20px; font-size:11px; font-family:'DM Mono',monospace; display:inline-block; white-space:nowrap; }
.badge-red    { background:rgba(240,96,96,0.1);   color:#f06060; border:1px solid rgba(240,96,96,0.2);  padding:3px 10px; border-radius:20px; font-size:11px; font-family:'DM Mono',monospace; display:inline-block; white-space:nowrap; }
.badge-muted  { background:rgba(90,107,98,0.15);  color:var(--ss-muted); border:1px solid rgba(90,107,98,0.25); padding:3px 10px; border-radius:20px; font-size:11px; font-family:'DM Mono',monospace; display:inline-block; white-space:nowrap; }
.badge-warn   { background:rgba(240,200,60,0.12); color:#f0c83c; border:1px solid rgba(240,200,60,0.25); padding:3px 10px; border-radius:20px; font-size:11px; font-family:'DM Mono',monospace; display:inline-block; white-space:nowrap; }
.review-flag  { background:rgba(240,200,60,0.1); border:1px solid rgba(240,200,60,0.3); border-radius:4px; padding:2px 7px; font-size:10px; color:#f0c83c; font-family:'DM Mono',monospace; }
.dot          { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; }

/* ── FORMS ─────────────────────────────────────────────── */
.form-control, .form-select {
  background: var(--ss-surface2) !important;
  border-color: var(--ss-border) !important;
  color: var(--ss-text) !important;
  font-family: 'Sora', sans-serif;
  font-size: 13px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ss-green-mid) !important;
  box-shadow: 0 0 0 3px rgba(90,158,47,0.15) !important;
}
.form-label { font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--ss-muted); margin-bottom: 6px; font-family: 'DM Mono', monospace; }
.form-select option { background: var(--ss-surface2); }
.form-check-input:checked { background-color: var(--ss-green-mid); border-color: var(--ss-green-mid); }
.form-text { color: var(--ss-muted); font-size: 11px; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn-ss         { background:var(--ss-green-mid); color:#fff; border:none; font-family:'Sora',sans-serif; font-weight:600; font-size:13px; padding:9px 20px; border-radius:8px; transition:all 0.2s; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn-ss:hover   { background:var(--ss-green-light); color:#0f1110; transform:translateY(-1px); }
.btn-ss-outline { background:none; border:1px solid var(--ss-border); color:var(--ss-text); font-family:'Sora',sans-serif; font-size:13px; padding:8px 18px; border-radius:8px; transition:all 0.2s; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.btn-ss-outline:hover { border-color:var(--ss-green-mid); color:var(--ss-green-light); }
.btn-ss-danger  { background:none; border:1px solid rgba(240,96,96,0.3); color:#f06060; font-family:'Sora',sans-serif; font-size:13px; padding:8px 18px; border-radius:8px; transition:all 0.2s; cursor:pointer; }
.btn-ss-danger:hover { background:rgba(240,96,96,0.08); }
.btn-sm-icon    { background:none; border:1px solid var(--ss-border); color:var(--ss-muted); padding:5px 9px; border-radius:6px; font-size:13px; transition:all 0.2s; cursor:pointer; }
.btn-sm-icon:hover { border-color:var(--ss-green-mid); color:var(--ss-green-light); }
.btn-ss.btn-sm, .btn-ss-outline.btn-sm { padding:6px 14px; font-size:12px; }

/* ── MODALS ─────────────────────────────────────────────── */
.ss-modal { background:var(--ss-surface); border:1px solid var(--ss-border); }
.ss-modal .modal-header { border-color:var(--ss-border); }
.ss-modal .modal-footer { border-color:var(--ss-border); }
.modal-subtitle { font-size:12px; color:var(--ss-muted); margin-top:2px; }

/* ── TIMER ──────────────────────────────────────────────── */
.timer-display { font-family:'DM Mono',monospace; font-size:80px; color:var(--ss-green-light); letter-spacing:-2px; line-height:1; text-align:center; }
.timer-display.running { animation:timerPulse 2s ease-in-out infinite; }
@keyframes timerPulse { 0%,100%{opacity:1} 50%{opacity:0.65} }
.timer-status   { text-align:center; font-size:10px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ss-muted); font-family:'DM Mono',monospace; margin-top:6px; margin-bottom:20px; }
.timer-greeting { text-align:center; font-size:15px; color:var(--ss-text); margin-bottom:16px; font-weight:300; }
.timer-greeting strong { color:var(--ss-green-light); font-weight:600; }

/* ── HOURS DISPLAY ──────────────────────────────────────── */
.hours-actual  { color:var(--ss-muted); font-family:'DM Mono',monospace; font-size:12px; }
.hours-billed  { color:var(--ss-green-light); font-family:'DM Mono',monospace; font-size:13px; font-weight:500; }
.hours-arrow   { color:var(--ss-muted); font-size:11px; margin:0 4px; }

/* ── SPLIT SESSION ──────────────────────────────────────── */
.split-part { background:var(--ss-surface2); border:1px solid var(--ss-border); border-radius:10px; padding:16px; margin-bottom:12px; }
.split-part.valid   { border-color:rgba(141,198,63,0.4); }
.split-part.invalid { border-color:rgba(240,96,96,0.4); }
.split-time-badge { font-family:'DM Mono',monospace; font-size:13px; color:var(--ss-green-light); }
.split-total-bar { background:var(--ss-surface2); border-radius:8px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; margin-top:8px; border:1px solid var(--ss-border); }

/* ── DURATION DISPLAY ───────────────────────────────────── */
.duration-display { text-align:center; padding:16px; background:var(--ss-surface2); border-radius:10px; margin-bottom:16px; }
.duration-big     { font-family:'DM Mono',monospace; font-size:48px; color:var(--ss-green-light); font-weight:500; line-height:1; }
.duration-label   { font-size:10px; color:var(--ss-muted); letter-spacing:1.5px; text-transform:uppercase; margin-top:6px; font-family:'DM Mono',monospace; }
.long-session-warn { background:rgba(240,200,60,0.1); border:1px solid rgba(240,200,60,0.3); border-radius:8px; padding:10px 14px; font-size:12px; color:#f0c83c; margin-bottom:12px; display:none; }

/* ── INVOICE ─────────────────────────────────────────────── */
.invoice-wrapper { background:#fff; color:#1a1a1a; border-radius:12px; padding:48px; font-family:'Sora',sans-serif; }
.invoice-wrapper .inv-title { font-size:42px; font-weight:700; color:#2d7a0a; letter-spacing:-1px; }
.invoice-wrapper table { width:100%; border-collapse:collapse; }
.invoice-wrapper th { border-bottom:2px solid #e0e0e0; padding:10px 12px; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#666; text-align:left; }
.invoice-wrapper td { padding:12px; border-bottom:1px solid #f0f0f0; font-size:13px; }
.inv-group-header td { background:#f8faf5; font-weight:600; font-size:12px; letter-spacing:0.5px; color:#2d7a0a; padding:8px 12px; border-bottom:1px solid #e0e0e0; }
.inv-detail-row td  { color:#666; font-size:12px; padding:6px 12px 6px 24px; }
.invoice-logo-bars  { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.invoice-logo-bar   { height:4px; border-radius:2px; }
.ilb-top { width:32px; background:#8dc63f; }
.ilb-mid { width:24px; background:#5a9e2f; }
.ilb-btm { width:16px; background:#2d7a0a; }

/* ── SETTINGS GROUPS ─────────────────────────────────────── */
.settings-group        { background:var(--ss-surface); border:1px solid var(--ss-border); border-radius:14px; overflow:hidden; margin-bottom:20px; }
.settings-group-header { padding:14px 20px; border-bottom:1px solid var(--ss-border); display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.settings-group-header:hover { background:rgba(255,255,255,0.02); }
.settings-group-header .icon { color:var(--ss-green-light); font-size:16px; }
.settings-group-title  { font-size:14px; font-weight:600; flex:1; }
.settings-group-body   { padding:20px; }

/* ── PROGRESS BAR ────────────────────────────────────────── */
.ss-progress { height:6px; background:var(--ss-surface2); border-radius:3px; overflow:hidden; }
.ss-progress-bar { height:100%; border-radius:3px; transition:width 0.5s ease; }

/* ── PERMISSIONS GRID ────────────────────────────────────── */
.perm-table th { font-size:10px; text-align:center; padding:8px 6px; }
.perm-table td { text-align:center; padding:10px 6px; }
.perm-table td:first-child { text-align:left; padding-left:16px; }
.perm-check { width:18px; height:18px; accent-color:var(--ss-green-mid); cursor:pointer; }
.perm-section-row td { background:rgba(141,198,63,0.04); padding:8px 16px; font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ss-muted); font-family:'DM Mono',monospace; }

/* ── MISC ────────────────────────────────────────────────── */
.deleted-row td { opacity:0.4; text-decoration:line-through; }
.orphan-detail-box { background:var(--ss-surface2); border-radius:10px; padding:16px; }
.orphan-icon { font-size:28px; }
.alert-ss { background:rgba(141,198,63,0.08); border:1px solid rgba(141,198,63,0.2); border-radius:10px; color:var(--ss-text); font-size:12px; padding:10px 16px; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:190; }
.hamburger { display:none; background:none; border:none; color:var(--ss-text); font-size:22px; margin-right:8px; cursor:pointer; }

/* ── LOGIN ───────────────────────────────────────────────── */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--ss-bg); }
.login-card { background:var(--ss-surface); border:1px solid var(--ss-border); border-radius:20px; padding:48px 40px; width:100%; max-width:420px; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar       { transform:translateX(-100%); }
  .sidebar.open  { transform:translateX(0); }
  .sidebar-overlay.open { display:block; }
  .main-content  { margin-left:0; }
  .hamburger     { display:block; }
  .timer-display { font-size:52px; }
  .hide-mobile   { display:none !important; }
  .content-area  { padding:16px; }
}

/* ── PRINT ────────────────────────────────────────────────── */
@media print {
  .sidebar, .topbar, .no-print { display:none !important; }
  .main-content { margin-left:0; }
  .invoice-wrapper { box-shadow:none; border-radius:0; padding:20px; }
  body { background:#fff; color:#000; }
  .content-area { padding:0; }
}

/* ============================================================
   app.css additions — Global Timer Bar
   Add these rules to your existing app.css
   ============================================================ */

/* ── Timer dot indicator ─────────────────────────────────── */
.gtimer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gtimer-dot.running {
    background: var(--ss-green-light);
    box-shadow: 0 0 0 0 rgba(90, 200, 90, 0.6);
    animation: gtimer-pulse 1.4s ease-in-out infinite;
}
.gtimer-dot.paused {
    background: var(--ss-muted);
    animation: none;
}
.gtimer-dot.idle {
    background: #f0a060;
    box-shadow: 0 0 0 0 rgba(240, 160, 96, 0.6);
    animation: gtimer-pulse-idle 1s ease-in-out infinite;
}

@keyframes gtimer-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(90, 200, 90, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(90, 200, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(90, 200, 90, 0); }
}
@keyframes gtimer-pulse-idle {
    0%   { box-shadow: 0 0 0 0 rgba(240, 160, 96, 0.7); }
    70%  { box-shadow: 0 0 0 6px rgba(240, 160, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(240, 160, 96, 0); }
}

/* ── Timer time display ──────────────────────────────────── */
.gtimer-time {
    color: var(--ss-text);
    letter-spacing: 0.04em;
}
.gtimer-time.idle-warn {
    color: #f0a060;
}

/* ── Timer idle warning on tracker page ─────────────────── */
.timer-idle-warn {
    color: #f0a060 !important;
    animation: idle-flash 1.5s ease-in-out infinite;
}
@keyframes idle-flash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Pause segment rows in stop modal ────────────────────── */
.pause-segments-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ss-border);
}
.pause-segment-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.pause-segment-time {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--ss-muted);
    margin-bottom: 6px;
}

/* ============================================================
   app.css additions — Global Timer Bar
   Add these rules to your existing app.css
   ============================================================ */

/* ── Timer dot indicator ─────────────────────────────────── */
.gtimer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gtimer-dot.running {
    background: var(--ss-green-light);
    box-shadow: 0 0 0 0 rgba(90, 200, 90, 0.6);
    animation: gtimer-pulse 1.4s ease-in-out infinite;
}
.gtimer-dot.paused {
    background: var(--ss-muted);
    animation: none;
}
.gtimer-dot.idle {
    background: #f0a060;
    box-shadow: 0 0 0 0 rgba(240, 160, 96, 0.6);
    animation: gtimer-pulse-idle 1s ease-in-out infinite;
}

@keyframes gtimer-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(90, 200, 90, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(90, 200, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(90, 200, 90, 0); }
}
@keyframes gtimer-pulse-idle {
    0%   { box-shadow: 0 0 0 0 rgba(240, 160, 96, 0.7); }
    70%  { box-shadow: 0 0 0 6px rgba(240, 160, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(240, 160, 96, 0); }
}

/* ── Timer time display ──────────────────────────────────── */
.gtimer-time {
    color: var(--ss-text);
    letter-spacing: 0.04em;
}
.gtimer-time.idle-warn {
    color: #f0a060;
}

/* ── Timer idle warning on tracker page ─────────────────── */
.timer-idle-warn {
    color: #f0a060 !important;
    animation: idle-flash 1.5s ease-in-out infinite;
}
@keyframes idle-flash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Pause segment rows in stop modal ────────────────────── */
.pause-segments-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ss-border);
}
.pause-segment-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.pause-segment-time {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--ss-muted);
    margin-bottom: 6px;
}
/* ============================================================
   app.css additions — Global Timer Bar
   Add these rules to your existing app.css
   ============================================================ */

/* ── Timer dot indicator ─────────────────────────────────── */
.gtimer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gtimer-dot.running {
    background: var(--ss-green-light);
    box-shadow: 0 0 0 0 rgba(90, 200, 90, 0.6);
    animation: gtimer-pulse 1.4s ease-in-out infinite;
}
.gtimer-dot.paused {
    background: var(--ss-muted);
    animation: none;
}
.gtimer-dot.idle {
    background: #f0a060;
    box-shadow: 0 0 0 0 rgba(240, 160, 96, 0.6);
    animation: gtimer-pulse-idle 1s ease-in-out infinite;
}

@keyframes gtimer-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(90, 200, 90, 0.6); }
    70%  { box-shadow: 0 0 0 6px rgba(90, 200, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(90, 200, 90, 0); }
}
@keyframes gtimer-pulse-idle {
    0%   { box-shadow: 0 0 0 0 rgba(240, 160, 96, 0.7); }
    70%  { box-shadow: 0 0 0 6px rgba(240, 160, 96, 0); }
    100% { box-shadow: 0 0 0 0 rgba(240, 160, 96, 0); }
}

/* ── Timer time display ──────────────────────────────────── */
.gtimer-time {
    color: var(--ss-text);
    letter-spacing: 0.04em;
}
.gtimer-time.idle-warn {
    color: #f0a060;
}

/* ── Timer idle warning on tracker page ─────────────────── */
.timer-idle-warn {
    color: #f0a060 !important;
    animation: idle-flash 1.5s ease-in-out infinite;
}
@keyframes idle-flash {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Pause segment rows in stop modal ────────────────────── */
.pause-segments-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--ss-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ss-border);
}
.pause-segment-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--ss-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.pause-segment-time {
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: var(--ss-muted);
    margin-bottom: 6px;
}

/* ── Session summary in stop modal ──────────────────────── */
.timer-summary-grid { display: flex; flex-direction: column; gap: 4px; }
.tsrow { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--ss-border); }
.tsrow:last-child { border-bottom: none; }
.tsrow-net { margin-top: 4px; padding-top: 8px; border-top: 2px solid var(--ss-border); border-bottom: none; }
.tslabel { font-size: 12px; color: var(--ss-muted); }
.tsval { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 600; }