/* =========================================================================
   Eskedyul sa Midweek nga Tigom — Sta. Fe Congregation
   ========================================================================= */
:root{
  --bg:#f4f6f9; --panel:#ffffff; --ink:#1b2430; --muted:#6b7684;
  --line:#e3e8ef; --brand:#2b5ba7; --brand-ink:#fff; --accent:#1f8a5b;
  --warn:#b3541e; --chip:#eef3fb; --chip-ink:#2b5ba7; --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.06);
  --radius:12px; --cell:#fff; --cell-hl:#fff7e6;
}
:root[data-theme="dark"]{
  --bg:#0f141a; --panel:#161d26; --ink:#e7edf5; --muted:#92a0b2;
  --line:#26303c; --brand:#5b8ad6; --brand-ink:#0b1016; --accent:#3bb47d;
  --warn:#e08a4e; --chip:#1b2937; --chip-ink:#9ec1f0; --shadow:none;
  --cell:#131a22; --cell-hl:#2a2410;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
.hidden{display:none!important}
.sub{color:var(--muted);font-size:.82em;display:block}
.msg{color:var(--warn);min-height:1.2em;font-size:.9em}

/* ---- buttons ---- */
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:.5em .9em;border-radius:9px;cursor:pointer;font-size:.92em}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn.ghost{background:transparent}
.btn.block{width:100%;padding:.7em;margin-top:.6em}
.btn.sm{padding:.3em .6em;font-size:.82em}
.btn.danger{color:var(--warn);border-color:var(--warn)}

/* ---- setup / auth ---- */
.fullscreen{min-height:100vh;display:grid;place-items:center;padding:20px}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;width:min(440px,100%)}
.brand{display:flex;gap:12px;align-items:center}
.brand.small .brand-mark{font-size:26px}
.brand-mark{font-size:34px}
.brand h1{font-size:1.15rem;margin:.1em 0}
.field{display:block;margin:.8em 0}
.field span{display:block;font-size:.85em;color:var(--muted);margin-bottom:.25em}
.field input,.field select,.field textarea{width:100%;padding:.55em .6em;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font:inherit}

/* ---- topbar ---- */
.topbar{display:flex;align-items:center;gap:16px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20;flex-wrap:wrap}
.topbar .brand strong{font-size:.95rem;letter-spacing:.02em}
.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.tab{border:none;background:transparent;color:var(--muted);padding:.5em .85em;border-radius:8px;cursor:pointer;font-weight:600;font-size:.9em}
.tab:hover{background:var(--chip)}
.tab.active{background:var(--brand);color:var(--brand-ink)}
.topbar-right{display:flex;gap:6px}

/* ---- layout ---- */
.view{padding:18px;max-width:1200px;margin:0 auto}
.page-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.page-head h2{margin:0;font-size:1.25rem}
.spacer{flex:1}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chip{background:var(--chip);color:var(--chip-ink);border-radius:20px;padding:.15em .7em;font-size:.78em;font-weight:600;white-space:nowrap}
.chip.warn{background:transparent;color:var(--warn);border:1px solid var(--warn)}
.muted{color:var(--muted)}
.hint{font-size:.8em;color:var(--muted)}

/* ---- meeting cards ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;cursor:pointer;transition:.1s}
.card:hover{border-color:var(--brand);transform:translateY(-1px)}
.card h3{margin:.1em 0 .2em;font-size:1rem}
.card .rd{color:var(--muted);font-size:.86em}
.card .meta{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}

/* ---- grid (Assign Bahin) ---- */
.gridwrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table.grid{border-collapse:separate;border-spacing:0;font-size:.82em;min-width:100%}
table.grid th,table.grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:4px 6px;text-align:center;white-space:nowrap}
table.grid thead th{position:sticky;top:0;background:var(--panel);z-index:2;font-weight:600}
table.grid thead th.datehdr{cursor:pointer}
table.grid thead th.datehdr:hover{color:var(--brand);text-decoration:underline}
table.grid td.name,table.grid th.name{position:sticky;left:0;background:var(--panel);text-align:left;z-index:1;min-width:150px;font-weight:600}
table.grid thead th.name{z-index:3}
table.grid td.cell{cursor:pointer;min-width:42px;background:var(--cell)}
table.grid td.cell:hover{background:var(--cell-hl)}
table.grid td.cnt{color:var(--muted);font-variant-numeric:tabular-nums}
.code-pill{display:inline-block;background:var(--chip);color:var(--chip-ink);border-radius:6px;padding:1px 6px;font-weight:700;font-size:.9em}
.month-sep{background:var(--bg)!important;color:var(--muted);font-weight:700}

/* ---- eskedyul editor ---- */
.ed-grid{display:grid;grid-template-columns:1fr;gap:10px}
.part{display:grid;grid-template-columns:30px 1fr;gap:8px;border:1px solid var(--line);border-radius:10px;padding:10px;background:var(--panel)}
.part .no{font-weight:700;color:var(--muted);text-align:center}
.part .body{display:grid;gap:6px}
.part .ln{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.part input,.part select{padding:.4em .5em;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--ink);font:inherit}
.part input.title{flex:1;min-width:200px;font-weight:600}
.part input.setting{flex:1;min-width:160px;text-transform:uppercase}
.sectionbar{background:var(--brand);color:var(--brand-ink);padding:.4em .8em;border-radius:8px;font-weight:700;letter-spacing:.03em;font-size:.86em;margin-top:6px}
.pick{min-width:180px}
.assignline{display:flex;gap:6px;align-items:center}
.assignline .role{min-width:88px;color:var(--muted);font-size:.85em}
.fairness{font-size:.74em;color:var(--muted)}

/* ---- table (members/legend) ---- */
table.list{width:100%;border-collapse:collapse}
table.list th,table.list td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left}
table.list th{color:var(--muted);font-size:.82em;text-transform:uppercase;letter-spacing:.03em}

/* ---- toast ---- */
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.6em 1.1em;border-radius:24px;z-index:50;box-shadow:var(--shadow)}

/* ---- modal ---- */
.modal-bg{position:fixed;inset:0;background:rgba(10,15,20,.45);display:grid;place-items:center;z-index:40;padding:16px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;width:min(460px,100%);box-shadow:var(--shadow)}
.modal h3{margin:.1em 0 .6em}
.codebtns{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.codebtns button{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:.4em .6em;cursor:pointer}
.codebtns button:hover{border-color:var(--brand);background:var(--chip)}

/* =========================== PRINT ==================================== */
.print-only{display:none}
@media print{
  .no-print{display:none!important}
  body{background:#fff;color:#000}
  #app{display:none!important}
  .print-only{display:block}
  @page{size:A4;margin:12mm}
  .sheet{max-width:none!important}
}
/* printable program sheet — matches the posted A4 layout */
.sheet{background:#fff;color:#000;width:100%;max-width:190mm;margin:0 auto;
       font-family:"Times New Roman",Georgia,serif;font-size:12pt;line-height:1.3;
       -webkit-print-color-adjust:exact;print-color-adjust:exact}
.sheet .hdr{border-top:2px solid #000;border-bottom:3px solid #000;text-align:center;padding:5px 0;margin-bottom:10px}
.sheet .cong{font-weight:700;font-size:16pt;letter-spacing:.02em}
.sheet .ttl{font-weight:700;font-size:15pt}
.sheet .meta{display:flex;justify-content:space-between;gap:22px;align-items:flex-start;margin:4px 0 8px}
.sheet .meta .wk{font-size:12.5pt}
.sheet .meta .rd{font-size:14pt;font-weight:700;margin-top:2px}
.sheet .meta .right{min-width:46%}
.sheet .fld{display:flex;gap:8px;align-items:flex-end;margin-bottom:5px}
.sheet .fld .lbl{white-space:nowrap}
.sheet .fld .nm{flex:1;border-bottom:1px solid #000;min-height:1.2em;padding:0 6px;font-weight:600}
.sheet table.prog{width:100%;border-collapse:collapse}
.sheet table.prog td{vertical-align:bottom;padding:4px 2px}
.sheet td.num{width:16px;text-align:left;vertical-align:top}
.sheet td.ttl2{vertical-align:top}
.sheet td.role{width:92px;text-align:right;white-space:nowrap;color:#111}
.sheet td.nm2{width:210px;border-bottom:1px solid #000;font-weight:600}
.sheet .pre{padding-left:6mm!important}
.sheet .setting{font-style:italic;font-size:11pt}
.sheet .song{font-weight:700}
.sheet .secbar{color:#fff;font-weight:700;font-size:12.5pt;letter-spacing:.02em;padding:4px 10px;margin:8px 0 2px;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.sheet .special{text-align:center;font-weight:700;margin:26px 0;font-size:14pt;line-height:1.8}
@media (max-width:640px){
  .tabs{order:3;width:100%}
}