/* ============================================================================
   worktrack — theme (light, modelled on the original "Iconic Ram-Romklao"
   Apps Script tracker: navy header + countdown, white card board)
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800&family=Baloo+2:wght@600;700;800&display=swap');

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --navy:#2b3f8c; --navy2:#243271; --navy-ink:#1f2a44;
  --blue:#3b82f6; --blue-d:#2563eb; --blue-soft:#eff6ff; --blue-border:#bfdbfe;
  --orange:#f59e0b; --orange-d:#d97706;
  --green:#22c55e; --green-soft:#ecfdf5;
  --red:#ef4444; --red-soft:#fef2f2;
  --bg:#eef1f6; --card:#ffffff; --soft:#f8fafc; --soft2:#f1f5f9;
  --ink:#1f2a44; --dim:#64748b; --faint:#94a3b8;
  --line:#e5e9f0; --line2:#dde3ec;
  --radius:16px; --shadow:0 1px 3px rgba(20,30,60,.07),0 1px 2px rgba(20,30,60,.04);
  --shadow-lg:0 12px 40px rgba(20,30,60,.18);
}

html,body { background:var(--bg); color:var(--ink); font-family:'Prompt',sans-serif; }
body { min-height:100vh; }
a { color:var(--blue-d); text-decoration:none; }

/* --- app header (navy) ----------------------------------------------------*/
.topbar {
  background:linear-gradient(120deg,var(--navy) 0%,var(--navy2) 100%);
  color:#fff; padding:16px 26px; display:flex; align-items:center; gap:16px;
}
.brand { display:flex; align-items:center; gap:12px; }
.brand .ico {
  width:40px; height:40px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.12); font-size:21px;
}
.brand .txt { line-height:1.15; }
.brand .name { font-family:'Baloo 2','Prompt',sans-serif; font-size:23px; font-weight:800; letter-spacing:.01em; }
.brand .name span { color:var(--orange); }
.brand .sub { font-size:11px; color:#b9c2e6; letter-spacing:.04em; }
.ver { font-size:10px; color:#8b96c9; }
.spacer { flex:1; }

/* countdown badge group (delivery date + days left) */
.countdown { display:flex; gap:0; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
  border-radius:12px; overflow:hidden; }
.countdown .seg { padding:8px 16px; text-align:center; }
.countdown .seg + .seg { border-left:1px solid rgba(255,255,255,.18); }
.countdown .l { font-size:10px; color:#b9c2e6; }
.countdown .v { font-size:15px; font-weight:700; color:#fff; }
.countdown .v.warn { color:var(--orange); }

/* right-side controls in header */
.whoami { font-size:12px; color:#cdd5f0; text-align:right; line-height:1.3; }
.whoami b { color:#fff; }
.pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600;
  padding:4px 11px; border-radius:99px; background:rgba(255,255,255,.12); color:#dbe2f7; }
.pill.live::before { content:''; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 8px #4ade80; animation:pulse 2s infinite; }
.pill.off::before  { content:''; width:7px; height:7px; border-radius:50%; background:#94a3b8; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* --- tabs (white bar, icon + label, blue active underline) -----------------*/
.tabs { display:flex; gap:2px; padding:0 18px; background:var(--card);
  border-bottom:1px solid var(--line); overflow-x:auto; box-shadow:var(--shadow); }
.tab { padding:14px 18px; font-size:14px; font-weight:600; color:var(--dim);
  border:none; background:none; cursor:pointer; white-space:nowrap;
  border-bottom:3px solid transparent; transition:.15s; }
.tab:hover { color:var(--navy); }
.tab.active { color:var(--navy); border-bottom-color:var(--blue); font-weight:700; }
.panel { display:none; padding:22px; max-width:1280px; margin:0 auto; }
.panel.active { display:block; }

/* --- buttons --------------------------------------------------------------*/
.btn { font-family:'Prompt',sans-serif; font-size:13px; font-weight:600; cursor:pointer;
  padding:9px 16px; border-radius:10px; border:1px solid var(--line2);
  background:var(--card); color:var(--ink); transition:.15s; white-space:nowrap; }
.btn:hover { border-color:var(--blue-border); background:var(--blue-soft); color:var(--blue-d); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.primary { border:none; color:#fff; background:var(--blue); box-shadow:0 2px 8px rgba(59,130,246,.35); }
.btn.primary:hover { background:var(--blue-d); color:#fff; }
.btn.danger { color:var(--red); border-color:#fecaca; background:#fff; }
.btn.danger:hover { background:var(--red-soft); color:var(--red); }
.btn.sm { padding:6px 11px; font-size:12px; border-radius:8px; }
.btn.ghost { background:none; }
/* header buttons sit on navy → light style */
.topbar .btn { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; }
.topbar .btn:hover { background:rgba(255,255,255,.22); color:#fff; }

/* --- cards / layout -------------------------------------------------------*/
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grid { display:grid; gap:14px; }
.section-title { font-size:15px; font-weight:700; color:var(--navy-ink); margin:2px 0 14px; }
.section-title .hint { font-size:12px; font-weight:400; color:var(--dim); }
.muted { color:var(--dim); font-size:12px; }
.empty { text-align:center; color:var(--faint); padding:46px 12px; font-size:14px; }

/* --- inputs ---------------------------------------------------------------*/
label.fl { display:block; font-size:12px; font-weight:600; color:var(--navy-ink); margin:0 0 6px; }
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],select,textarea {
  width:100%; padding:10px 12px; font-family:'Prompt',sans-serif; font-size:14px;
  background:#fff; color:var(--ink); border:1px solid var(--line2); border-radius:10px; outline:none;
  transition:border-color .15s,box-shadow .15s; }
textarea { resize:vertical; min-height:74px; }
input:focus,select:focus,textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
input.error { border-color:var(--red); box-shadow:0 0 0 3px rgba(239,68,68,.15); animation:shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
select { appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b'><path d='M2 4l4 4 4-4z'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px; }

/* --- badges (status pills) ------------------------------------------------*/
.badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:4px 11px; border-radius:99px; border:1px solid transparent; }
.dot { width:7px; height:7px; border-radius:50%; }

/* --- progress bar ---------------------------------------------------------*/
.bar { height:7px; background:var(--soft2); border-radius:99px; overflow:hidden; }
.bar > i { display:block; height:100%; background:var(--blue); border-radius:99px; transition:width .4s; }

/* --- WORK BOARD: columns of cards (the original look) ----------------------*/
.board { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:16px; align-items:start; }
.col { background:transparent; }
.col-head { display:flex; align-items:center; gap:9px; padding:14px 16px; border-radius:13px;
  font-size:15px; font-weight:700; color:#fff; margin-bottom:12px; box-shadow:var(--shadow); }
.col-head .cnt { margin-left:auto; font-size:13px; font-weight:600; background:rgba(255,255,255,.22); padding:2px 9px; border-radius:99px; }
.col-head.c0 { background:linear-gradient(120deg,#3b6fd4,#2b4fa0); }
.col-head.c1 { background:linear-gradient(120deg,#e08f3c,#cf7320); }
.col-head.c2 { background:linear-gradient(120deg,#5aa469,#3f8a55); }
.col-head.c3 { background:linear-gradient(120deg,#8b5cf6,#6d28d9); }
.col-head.c4 { background:linear-gradient(120deg,#0ea5e9,#0369a1); }

/* work card */
.wcard { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:15px;
  box-shadow:var(--shadow); margin-bottom:12px; cursor:pointer; transition:.15s; }
.wcard:hover { box-shadow:0 6px 18px rgba(20,30,60,.12); transform:translateY(-1px); }
.wcard.doing { border-left:4px solid var(--blue); }
.wcard.blocked { border-left:4px solid var(--red); }
.wcard.done { border-left:4px solid var(--green); }
.wcard .top { display:flex; align-items:flex-start; gap:10px; }
.wcard .num { color:var(--faint); font-weight:700; font-size:14px; }
.wcard .ttl { flex:1; font-size:15px; font-weight:700; color:var(--navy-ink); line-height:1.35; }
.datebox { display:flex; gap:8px; background:var(--soft); border:1px solid var(--line); border-radius:10px;
  padding:9px 12px; margin:12px 0 10px; flex-wrap:wrap; }
.datebox .di { display:flex; align-items:center; gap:7px; font-size:13px; flex:1; min-width:120px; }
.datebox .di .lbl { color:var(--dim); }
.datebox .di .val { color:var(--navy-ink); font-weight:600; }
.datebox .di.over .val { color:var(--red); }
.wcard .foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:13px; }
.wcard .foot .meta { color:var(--dim); }
.wcard .foot .pct { font-weight:700; color:var(--navy-ink); }

/* --- table ----------------------------------------------------------------*/
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
table.tbl th { text-align:left; font-size:12px; color:var(--dim); font-weight:600;
  padding:9px 10px; border-bottom:2px solid var(--line); }
table.tbl td { padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.tbl tr:hover td { background:var(--soft); }

/* --- kanban (status view) -------------------------------------------------*/
.kanban { display:grid; grid-template-columns:repeat(5,minmax(180px,1fr)); gap:12px; overflow-x:auto; }
.kcol { background:var(--soft); border:1px solid var(--line); border-radius:13px; padding:11px; min-height:120px; }
.kcol h4 { font-size:13px; font-weight:700; margin-bottom:11px; display:flex; justify-content:space-between; }
.kcard { background:var(--card); border:1px solid var(--line); border-radius:11px; padding:11px; margin-bottom:9px;
  cursor:pointer; box-shadow:var(--shadow); transition:.15s; }
.kcard:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(20,30,60,.12); }
.kcard .t { font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--navy-ink); }

/* --- modal ----------------------------------------------------------------*/
.modal-bg { position:fixed; inset:0; background:rgba(20,30,60,.45); backdrop-filter:blur(2px);
  display:none; align-items:flex-start; justify-content:center; z-index:200; padding:42px 14px; overflow:auto; }
.modal-bg.open { display:flex; }
.modal { width:100%; max-width:560px; background:var(--card); border-radius:18px; padding:24px;
  box-shadow:var(--shadow-lg); }
.modal h3 { font-size:18px; font-weight:700; margin-bottom:18px; color:var(--navy-ink); }
.modal .fg { margin-bottom:14px; }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.x { cursor:pointer; color:var(--faint); font-size:24px; line-height:1; float:right; }
.x:hover { color:var(--ink); }

/* --- stat cards / dashboard ----------------------------------------------*/
.stat { text-align:center; padding:18px 14px; }
.stat .n { font-size:30px; font-weight:800; color:var(--navy); }
.stat .l { font-size:12px; color:var(--dim); margin-top:3px; }
.stat.orange .n { color:var(--orange-d); }
.stat.green .n { color:var(--green); }
.stat.red .n { color:var(--red); }

/* --- misc -----------------------------------------------------------------*/
.thumbs { display:flex; gap:8px; flex-wrap:wrap; }
.thumbs img { width:74px; height:74px; object-fit:cover; border-radius:9px; border:1px solid var(--line); cursor:pointer; }
hr.sep { border:none; border-top:1px solid var(--line); margin:18px 0; }
input[type=range] { accent-color:var(--blue); }

@media (max-width:640px){
  .kanban { grid-template-columns:repeat(5,80vw); }
  .board { grid-template-columns:1fr; }
  .panel { padding:14px; }
  .topbar { padding:14px 16px; flex-wrap:wrap; }
}