:root{
  --bg:#0048a3;
  --fg:#e6edf3;
  --muted:#8b949e;
  --card:#0060da;
  --accent:#4B6BFB;
}

/* Base */
*{ box-sizing:border-box }
body{ margin:0; font:16px/1.35 system-ui; background:var(--bg); color:var(--fg) }
h1{ margin:0; font-size:18px }

header{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px; border-bottom:1px solid #21262d;
}
header .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-logo{ display:block; height:90px; width:auto; border-radius:8px; }
@media (min-width:700px){ .brand-logo{ height:32px; } }

main{ padding:14px; max-width:840px; margin:0 auto; }
.card{ background:var(--card); border:1px solid #21262d; border-radius:12px; padding:12px; margin:12px 0; }
.row{ display:flex; gap:8px }

/* Controls */
select, input, button{
  background:#0f141a; color:var(--fg); border:1px solid #31363c;
  border-radius:8px; padding:10px;
}
button[disabled]{ opacity:.5 }
button.start{ background:#00da24; border-color:#ffffff; width:100px; margin-right:100px }
button.stop{  background:#ff0000; border-color:#ffffff; width:100px }

/* Timers */
.timers{ display:flex; justify-content:space-between; gap:10px }
.timers .big{ font-size:40px; font-weight:800 }
.timers .label{ font-size:12px; color:var(--muted) }
@media (max-width:500px){ .timers{ flex-direction:column } .timers .big{ font-size:36px } }

/* Old 7-col grid (kept if still used) */
.grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px }
.grid .bar{ height:80px; display:flex; align-items:flex-end }
.grid .col{ flex:1; background:#0f141a; border:1px solid #2a2f36; border-radius:8px; overflow:hidden; padding:6px }
.grid .fill{ width:100%; background:var(--accent); border-radius:6px }
.grid .d{ font-size:11px; color:var(--muted); text-align:center; margin-top:6px }

/* Entries */
#entries .row{ justify-content:space-between; border-bottom:1px solid #21262d; padding:8px 0 }

/* Dialogs */
dialog{ border:1px solid #31363c; border-radius:10px; background:var(--card); color:var(--fg); padding:16px }
menu{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px }

/* =========================
   Horizontal activity bars
   ========================= */
.grid-h{ display:flex; flex-direction:column; gap:8px }
.grid-h .rowbar{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap }
.grid-h .label{ width:56px; opacity:.85; font-size:12px; white-space:nowrap; flex:0 0 auto }
.grid-h .total{ width:70px; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; flex:0 0 auto }

/* Track: cream, square, no border; with hourly dividers */
.grid-h .rowbar .hbar{
  position:relative; flex:1 1 auto; min-width:0;
  height:14px; background:#fff8e6; border:none; border-radius:0; overflow:hidden;
}
.grid-h .rowbar .hbar::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc((100% / 24) - 1px),
    rgba(0,0,0,.12) calc((100% / 24) - 1px),
    rgba(0,0,0,.12) calc(100% / 24)
  );
  opacity:.85;
}

/* Segments: square ends, above grid; color set inline from JS */
.grid-h .rowbar .seg{
  position:absolute; top:0; height:100%; border-radius:0; box-shadow:none; z-index:1;
  min-width:2px; /* keep tiny sessions visible */
}

@media (max-width:480px){
  .grid-h .rowbar .hbar{ height:18px }
  .grid-h .label{ width:48px }
  .grid-h .total{ width:64px }
}
@media (max-width:380px){
  .grid-h .label{ width:44px }
  .grid-h .total{ width:58px }
}

/* =========================
   Print (single clean block)
   ========================= */
@media print{
  /* Show only the report */
  body *{ visibility:hidden !important }
  #reportOutput, #reportOutput *{ visibility:visible !important }

  /* White, neutral page */
  html, body, #reportOutput{
    background:#fff !important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* No app chrome or shadows in the report content */
  #reportOutput *{ background:transparent !important; box-shadow:none !important }

  /* Hide dialogs/backdrops entirely */
  dialog, dialog::backdrop{ display:none !important; visibility:hidden !important }

  /* Position report for printing */
  #reportOutput{ position:absolute !important; left:0 !important; top:0 !important; width:100% !important }

  /* Tables */
  #reportOutput table{ border-collapse:collapse; width:100% }
  #reportOutput th, #reportOutput td{ border:1px solid #ddd; padding:6px 8px }
  #reportOutput thead th{ background:#f5f5f5; color:#000 }
}

/* Utility */
@media print{ .no-print{ display:none !important } }

/* Color swatches */
.swatches{ display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px }
.swatch{
  width:28px; height:28px; border-radius:6px; border:2px solid rgba(255,255,255,.35);
  background:#4B6BFB; padding:0; cursor:pointer; outline:none;
}
.swatch:focus{ box-shadow:0 0 0 2px rgba(255,255,255,.5) inset }
.swatch.selected{ border-color:#fff; box-shadow:0 0 0 2px #fff inset }

/* Use each swatch's data-color as background via inline style set in JS,
   but provide a default above for first render fallback. */