/* ── Reset & Base ────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:#f0f4f8;color:#1a2b3c;min-height:100vh}

/* ── Variables ───────────────────────────────────────────────────── */
:root{
  --primary:#1F4E79;
  --primary-light:#2E75B6;
  --primary-dark:#16375a;
  --accent:#4472C4;
  --bg:#f0f4f8;
  --card:#ffffff;
  --border:#d0dce8;
  --text:#1a2b3c;
  --text-muted:#5a7a99;
  --red:#dc3545;
  --red-light:#fde8ea;
  --amber:#fd7e14;
  --amber-light:#fff3cd;
  --green:#198754;
  --green-light:#d1e7dd;
  --yellow-light:#fffbe6;
  --blue-light:#e8f0fb;
  --holiday-bg:#fff3cd;
  --weekend-bg:#e8f0fb;
  --row-alt:#f7fafd;
  --shadow:0 2px 8px rgba(31,78,121,.10);
  --radius:8px;
}

/* ── Header ──────────────────────────────────────────────────────── */
header{
  background:var(--primary);color:#fff;padding:18px 32px;
  display:flex;align-items:center;gap:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
header h1{font-size:1.35rem;font-weight:700;letter-spacing:.3px}
header p{font-size:.8rem;opacity:.75;margin-top:2px}

/* ── Main Layout ─────────────────────────────────────────────────── */
main{max-width:1300px;margin:0 auto;padding:28px 20px}

/* ── Upload Section ──────────────────────────────────────────────── */
.upload-section{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px}
@media(max-width:700px){.upload-section{grid-template-columns:1fr}}

.drop-zone{
  background:var(--card);border:2.5px dashed var(--border);
  border-radius:var(--radius);padding:28px 20px;text-align:center;
  cursor:pointer;transition:border-color .2s,background .2s;position:relative;
}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--primary-light);background:var(--blue-light)}
.drop-zone.uploaded{border-style:solid;border-color:var(--green)}
.drop-zone input[type=file]{
  position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;
}
.drop-icon{font-size:2.4rem;margin-bottom:10px;display:block}
.drop-label{font-weight:700;color:var(--primary);font-size:.95rem;margin-bottom:4px}
.drop-sub{font-size:.78rem;color:var(--text-muted)}
.file-info{margin-top:10px;font-size:.8rem;color:var(--green);font-weight:600;display:none}
.file-info.visible{display:block}
.file-info span{color:var(--text-muted);font-weight:400}

/* ── Action Bar ──────────────────────────────────────────────────── */
.action-bar{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
#btnAnalyse{
  display:none;background:var(--primary);color:#fff;border:none;
  padding:12px 32px;border-radius:var(--radius);font-size:1rem;font-weight:700;
  cursor:pointer;transition:background .2s,transform .1s;letter-spacing:.3px;
}
#btnAnalyse:hover{background:var(--primary-dark)}
#btnAnalyse:active{transform:scale(.97)}
#btnAnalyse.visible{display:inline-flex;align-items:center;gap:8px}
#btnAnalyse:disabled{opacity:.6;cursor:not-allowed}

/* ── Spinner ─────────────────────────────────────────────────────── */
.spinner{
  display:none;width:20px;height:20px;
  border:3px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner.visible{display:block}

/* ── Period / Error Bars ─────────────────────────────────────────── */
#periodBar{
  display:none;background:var(--blue-light);border:1px solid var(--border);
  border-radius:var(--radius);padding:10px 18px;font-size:.88rem;
  color:var(--primary);font-weight:600;margin-bottom:18px;
}
#periodBar.visible{display:block}

#errorBanner{
  display:none;background:#fff5f5;border:1px solid var(--red);
  border-radius:var(--radius);padding:12px 18px;color:var(--red);
  font-size:.88rem;margin-bottom:16px;
}
#errorBanner.visible{display:block}

/* ── Results + Tabs ──────────────────────────────────────────────── */
#results{display:none}
#results.visible{display:block}

.tab-nav{
  display:flex;gap:4px;border-bottom:2px solid var(--primary);
  margin-bottom:20px;flex-wrap:wrap;
}
.tab-btn{
  background:none;border:2px solid transparent;border-bottom:none;
  padding:10px 20px;cursor:pointer;font-size:.88rem;font-weight:600;
  color:var(--text-muted);border-radius:6px 6px 0 0;
  transition:all .2s;position:relative;top:2px;
}
.tab-btn:hover{color:var(--primary);background:var(--blue-light)}
.tab-btn.active{color:var(--primary);background:var(--card);border-color:var(--primary);border-bottom-color:var(--card)}

.tab-badge{
  display:inline-block;background:var(--primary);color:#fff;
  font-size:.7rem;padding:1px 7px;border-radius:10px;
  margin-left:6px;font-weight:700;
}
.tab-btn.active .tab-badge{background:var(--accent)}

.tab-pane{display:none}
.tab-pane.active{display:block}

/* ── Summary Bar ─────────────────────────────────────────────────── */
.summary-bar{
  background:var(--primary);color:#fff;border-radius:var(--radius);
  padding:10px 18px;font-size:.87rem;font-weight:600;
  margin-bottom:16px;display:flex;gap:24px;flex-wrap:wrap;align-items:center;
}
.summary-bar span{opacity:.85;font-weight:400}

/* ── Table Toolbar ───────────────────────────────────────────────── */
.table-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.table-toolbar input{
  flex:1;min-width:180px;padding:8px 14px;
  border:1px solid var(--border);border-radius:var(--radius);
  font-size:.85rem;outline:none;transition:border-color .2s;
}
.table-toolbar input:focus{border-color:var(--primary-light)}
.btn-export{
  background:var(--primary-light);color:#fff;border:none;
  padding:8px 18px;border-radius:var(--radius);font-size:.83rem;
  font-weight:600;cursor:pointer;transition:background .2s;white-space:nowrap;
}
.btn-export:hover{background:var(--primary)}

/* ── Table ───────────────────────────────────────────────────────── */
.table-wrap{
  overflow:auto;max-height:560px;
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
table{width:100%;border-collapse:collapse;font-size:.83rem;min-width:600px}
thead th{
  background:var(--primary);color:#fff;padding:10px 14px;
  text-align:left;position:sticky;top:0;z-index:2;
  white-space:nowrap;cursor:pointer;user-select:none;
  transition:background .15s;
}
thead th:hover{background:var(--primary-light)}
.sort-icon{margin-left:4px;opacity:.55;font-size:.75rem}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s}
tbody tr:hover{background:#eaf2fb!important}
tbody td{padding:8px 14px;vertical-align:middle}
.row-alt{background:var(--row-alt)}
.row-normal{background:var(--card)}

/* ── Cell Highlight ──────────────────────────────────────────────── */
.cell-absent{background:var(--red-light)}
.cell-cascade{background:var(--amber-light)}
.cell-halfday{background:var(--yellow-light)}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge{
  display:inline-block;padding:3px 11px;border-radius:12px;
  font-size:.74rem;font-weight:700;letter-spacing:.3px;
}
.badge-red{background:var(--red);color:#fff}
.badge-green{background:var(--green);color:#fff}

/* ── Calendar ────────────────────────────────────────────────────── */
.calendar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(155px,1fr));
  gap:10px;
}
.cal-card{
  border-radius:var(--radius);padding:12px 14px;
  border:1px solid var(--border);font-size:.83rem;
}
.cal-card.holiday{background:var(--holiday-bg);border-color:#ffc107}
.cal-card.weekend{background:var(--weekend-bg);border-color:var(--accent)}
.cal-card.working{background:var(--card)}
.cal-date{font-weight:700;font-size:.95rem;color:var(--primary)}
.cal-day{color:var(--text-muted);font-size:.75rem}
.cal-type{margin-top:4px;font-size:.75rem;font-weight:600}
.cal-card.holiday .cal-type{color:#856404}
.cal-card.weekend .cal-type{color:var(--accent)}
.cal-card.working .cal-type{color:var(--text-muted)}

.legend{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px;font-size:.82rem;align-items:center}
.legend-chip{
  display:flex;align-items:center;gap:6px;
}
.legend-swatch{
  width:14px;height:14px;border-radius:3px;display:inline-block;border:1px solid;
}

/* ── No Data ─────────────────────────────────────────────────────── */
.no-data{text-align:center;padding:44px;color:var(--text-muted);font-size:.9rem}

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:#f0f4f8}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--primary-light)}

/* ══════════════════════════════════════════════════════════════════
   MEMO TAB (Tab 5)
══════════════════════════════════════════════════════════════════ */

/* Action buttons row */
.memo-actions{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px;
}
.btn-print{
  background:#c0392b;color:#fff;border:none;padding:9px 22px;
  border-radius:var(--radius);font-size:.87rem;font-weight:700;
  cursor:pointer;transition:background .2s;display:inline-flex;align-items:center;gap:7px;
}
.btn-print:hover{background:#a93226}
.btn-word{
  background:#1d6f42;color:#fff;border:none;padding:9px 22px;
  border-radius:var(--radius);font-size:.87rem;font-weight:700;
  cursor:pointer;transition:background .2s;display:inline-flex;align-items:center;gap:7px;
}
.btn-word:hover{background:#175c37}

/* Printable section wrapper */
.memo-print-section{
  background:var(--card);border-radius:var(--radius);
  padding:32px 36px;border:1px solid var(--border);
}

/* Memo document heading */
.memo-doc-title{
  text-align:center;font-size:1.05rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.6px;color:var(--primary);
  margin-bottom:18px;padding-bottom:14px;border-bottom:2px solid var(--primary);
  line-height:1.4;
}
.memo-month-line{
  font-size:.95rem;font-weight:600;margin-bottom:10px;color:var(--text);
}
.memo-intro-text{
  font-size:.9rem;margin-bottom:18px;color:var(--text);line-height:1.6;
}
.memo-footer-text{
  font-size:.9rem;margin-top:22px;padding-top:16px;
  border-top:1px solid var(--border);font-style:italic;color:var(--text-muted);
}

/* Reason cell in memo table */
.reason-cell{
  font-size:.81rem;line-height:1.65;
  min-width:260px;white-space:pre-wrap; /* respect \n if any reach DOM */
}

/* Memo table should not restrict height (it's a formal doc, show all rows) */
.memo-table-wrap{max-height:600px}

/* ══════════════════════════════════════════════════════════════════
   PRINT STYLES
══════════════════════════════════════════════════════════════════ */

/* Elements hidden when body has printing-memo class (JS-driven) */
body.printing-memo header,
body.printing-memo .upload-section,
body.printing-memo .action-bar,
body.printing-memo #periodBar,
body.printing-memo #errorBanner,
body.printing-memo .tab-nav,
body.printing-memo #tab-lop,
body.printing-memo #tab-half,
body.printing-memo #tab-summary,
body.printing-memo #tab-calendar,
body.printing-memo .no-print{display:none!important}

body.printing-memo #results{display:block!important}
body.printing-memo #tab-memo{display:block!important}

/* Actual @media print — used by browser print engine */
@media print{
  @page{margin:1in;size:A4 portrait}

  /* Hide everything except the memo pane */
  header,
  .upload-section,
  .action-bar,
  #periodBar,
  #errorBanner,
  .tab-nav,
  #tab-lop,
  #tab-half,
  #tab-summary,
  #tab-calendar,
  .no-print,
  .memo-actions{display:none!important}

  /* Show results + memo pane even if not currently active tab */
  #results{display:block!important}
  #tab-memo{display:block!important}

  /* Body reset */
  body{
    background:white!important;
    font-family:"Times New Roman",Times,serif!important;
    font-size:12pt!important;
    color:black!important;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }

  /* Remove card shadows / backgrounds */
  .memo-print-section{
    padding:0!important;border:none!important;
    background:white!important;box-shadow:none!important;
  }
  .memo-doc-title{
    color:black!important;border-bottom-color:black!important;
    font-size:13pt!important;
  }

  /* Scrollable wrappers become normal in print */
  .table-wrap,.memo-table-wrap{
    max-height:none!important;overflow:visible!important;
    border:none!important;box-shadow:none!important;
  }

  /* Memo table formatting */
  #tblMemo{border-collapse:collapse!important;width:100%!important}
  #tblMemo thead th{
    background:#1F4E79!important;color:white!important;
    border:1px solid black!important;
    padding:5pt 7pt!important;font-size:10pt!important;
    font-weight:bold!important;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  #tblMemo tbody td{
    border:1px solid black!important;
    padding:4pt 6pt!important;font-size:10pt!important;
    vertical-align:top!important;color:black!important;
  }
  #tblMemo tbody tr{background:white!important}
  .reason-cell{font-size:9.5pt!important;line-height:1.5!important}
}