/* Colours taken from the workbook theme: dk2 #1F497D, "Text 2 lighter 60%" #8DB4E2,
   header grey (white −15%) #D9D9D9, info boxes #F2F2F2 with #3F3F3F text. */
:root {
  --navy: #1f497d;
  --names-head: #8db4e2;
  --head: #d9d9d9;
  --box: #f2f2f2;
  --box-text: #3f3f3f;
  --line: #000;
  --grid-bg: #e9ecef;
  --font-title: 'Noto Kufi Arabic', 'AF_Najed', Tahoma, sans-serif;
  --font-body: 'Noto Sans Arabic', Arial, Tahoma, sans-serif;
  --font-name: 'Noto Naskh Arabic', 'Times New Roman', serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--grid-bg);
  color: #000;
  display: flex;
  flex-direction: column;
}

/* ---------- toolbar ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--navy); color: #fff;
}
.brand { font-family: var(--font-title); font-weight: 700; font-size: 1.05rem; color: #fff; text-decoration: none; }
.sheet-buttons { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.actions { display: flex; align-items: center; gap: 8px; }
.save-status { font-size: .8rem; opacity: .85; }
.current-user { font-size: .85rem; font-weight: 600; direction: ltr; }
.save-status.error { color: #ffb3b3; opacity: 1; font-weight: 600; }

.btn, .nav-btn {
  font: inherit; font-size: .9rem;
  padding: 6px 14px; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.btn { background: #fff; color: var(--navy); font-weight: 600; }
.btn:hover { background: #e8eef7; }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); }
.nav-btn { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-btn:hover { background: rgba(255, 255, 255, .2); }
.nav-btn.active { background: #fff; color: var(--navy); font-weight: 700; }
:focus-visible { outline: 2px solid #f0a500; outline-offset: 2px; }

/* ---------- workspace ---------- */
.workspace { flex: 1; padding: 20px; overflow: auto; }
.sheet {
  background: #fff; margin: 0 auto; max-width: 1400px;
  padding: 28px 28px 36px; box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

/* Excel-style sheet tabs */
.sheet-tabs[hidden] { display: none; }
.sheet-tabs {
  position: sticky; bottom: 0;
  display: flex; gap: 2px; overflow-x: auto;
  padding: 0 12px; background: #d4d7db; border-top: 1px solid #b5b9be;
}
.tab {
  padding: 6px 16px; white-space: nowrap; font-size: .9rem;
  color: #333; text-decoration: none; background: #e6e8eb;
  border: 1px solid #b5b9be; border-top: 0; border-radius: 0 0 6px 6px;
}
.tab:hover { background: #f3f4f6; }
.tab.active { background: #fff; color: #1d6f42; font-weight: 700; border-bottom: 3px solid #1d6f42; }

/* ---------- grid tables ---------- */
.grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.grid th, .grid td { border: 1px solid var(--line); padding: 0; vertical-align: middle; }
.grid th { font-weight: 700; text-align: center; padding: 10px 6px; }
.grid .num { border-left: 3px double var(--line); border-right: 3px double var(--line); text-align: center; font-weight: 700; }

.cell-input {
  min-height: 2.4em; padding: 8px 10px;
  white-space: pre-wrap; word-break: break-word;
  outline: none; cursor: text;
}
.cell-input:hover { background: #f7fbff; }
.cell-input:focus { background: #fffbe6; box-shadow: inset 0 0 0 2px #1d6f42; }

/* names sheet */
.names-sheet { max-width: 1200px; }
.names-title { font-family: var(--font-body); font-size: 2rem; text-align: center; margin: 0 0 18px; }
.names-grid .c-num { width: 70px; }
.names-grid thead th { background: var(--names-head); font-family: var(--font-name); font-size: 1.25rem; border-bottom: 3px double var(--line); }
.names-grid .num { font-family: var(--font-name); }
.names-grid .cell-input.name { font-weight: 700; font-size: 1.05rem; min-height: 0; text-align: right; }
.row-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.row-actions .btn { background: var(--navy); color: #fff; }
.row-actions .btn-ghost { background: transparent; color: var(--navy); }
.hint { color: #666; font-size: .85rem; margin: 0 8px; }

/* follow-up sheet header */
.sheet-head { text-align: center; margin-bottom: 20px; }
.title { font-family: var(--font-title); font-size: 2.6rem; margin: 0 0 4px; font-weight: 700; }
.subtitle { font-family: var(--font-title); font-weight: 500; font-size: 1.6rem; margin: 0 0 18px; }
.info-boxes { display: grid; grid-template-columns: 2fr 2fr 1.4fr; gap: 16px; }
.info {
  background: var(--box); color: var(--box-text);
  border: 2px solid var(--box-text);
  font-family: var(--font-title); font-size: 1.4rem; padding: 10px;
}
.setting { display: inline-block; min-height: 0; padding: 0 4px; border-radius: 4px; min-width: 2ch; }
.setting:hover { background: rgba(0, 0, 0, .05); box-shadow: inset 0 -1px 0 #999; }
.semester-switch { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.semester-switch .nav-btn { color: var(--navy); background: #eef2f8; border-color: #c9d3e3; }
.semester-switch .nav-btn.active { background: var(--navy); color: #fff; }

/* follow-up sheet table — column ratios follow the sheet's merged columns
   (B | C | D:E | F:Q | R:T) */
.table-scroll { overflow-x: auto; }
.follow-grid { min-width: 1000px; }
.follow-grid .c-num { width: 5%; }
.follow-grid .c-student { width: 26%; }
.follow-grid .c-date { width: 11%; }
.follow-grid .c-statement { width: 40%; }
.follow-grid .c-party { width: 18%; }
.follow-grid thead th { background: var(--head); font-size: 1.15rem; border-bottom: 3px double var(--line); }
.follow-grid tbody tr { height: 110px; }
.follow-grid .student { font-family: var(--font-name); font-weight: 700; font-size: 1.15rem; padding: 8px 12px; }
.follow-grid .cell-input { min-height: 110px; text-align: center; }
.follow-grid .cell-input.date { word-break: normal; overflow-wrap: break-word; }
.follow-grid td:nth-child(4) .cell-input { text-align: right; }
.date-td { position: relative; }
.today {
  position: absolute; bottom: 4px; left: 4px;
  font: inherit; font-size: .7rem; padding: 2px 6px;
  border: 1px solid #c9d3e3; background: #eef2f8; color: var(--navy);
  border-radius: 4px; cursor: pointer; opacity: 0;
}
.date-td:hover .today, .date-td:focus-within .today, .today:focus { opacity: 1; }
.supervisor-label { font-family: var(--font-name); font-size: 1.2rem; border-right: 3px double var(--line) !important; }
.supervisor .cell-input { min-height: 160px; text-align: right; }

/* ---------- login ---------- */
.login {
  max-width: 360px; margin: 10vh auto; background: #fff; padding: 32px;
  border-radius: 10px; box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  display: flex; flex-direction: column; gap: 12px;
}
.login h1 { font-family: var(--font-title); color: var(--navy); font-size: 1.5rem; margin: 0 0 8px; text-align: center; }
.login input { font: inherit; padding: 10px; border: 1px solid #bbb; border-radius: 6px; }
.login .btn { background: var(--navy); color: #fff; padding: 10px; }
.login .error { color: #b00020; min-height: 1.2em; margin: 0; }
body.logged-out .toolbar .sheet-buttons, body.logged-out .actions, body.logged-out .sheet-tabs { display: none; }
.load-error { text-align: center; color: #b00020; }

/* ---------- portal home ---------- */
.home { max-width: 900px; margin: 4vh auto; }
.home h1 { font-family: var(--font-title); color: var(--navy); text-align: center; }
.workbook-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.workbook-card {
  display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 10px;
  background: #fff; color: var(--navy); text-decoration: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  border-top: 5px solid var(--navy);
}
.workbook-card.type-attendance { border-top-color: #92d050; }
.workbook-card:hover { box-shadow: 0 3px 12px rgba(0, 0, 0, .18); }
.workbook-title { font-family: var(--font-title); font-weight: 700; font-size: 1.15rem; }
.workbook-type { color: #666; font-size: .9rem; }

/* ---------- attendance workbook ---------- */
.c-blue { background: #00b0f0; }
.c-green { background: #92d050; }
.c-orange { background: #ffc000; }
.c-yellow { background: #ffff00; }
.c-rose { background: #c78a85; }
.strong { font-weight: 700; }
.red { color: #f00; }
.big { font-size: 1.2rem; }
.pill { padding: 2px 10px; }
.vertical { writing-mode: vertical-rl; text-orientation: mixed; }
.att-title { font-family: var(--font-body); font-size: 2rem; text-align: center; margin: 0 0 10px; }
.att-head-line {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-weight: 700; font-size: 1.1rem; margin: 0 0 14px; padding-bottom: 6px; border-bottom: 1px solid #000;
}
.att-grid { border-collapse: collapse; width: 100%; }
.att-grid th, .att-grid td { border: 1px solid #000; padding: 4px 6px; text-align: center; vertical-align: middle; }
.att-grid th { font-weight: 700; }
.att-grid .name { text-align: right; font-weight: 700; white-space: nowrap; }
.att-grid .cell-input { min-height: 1.6em; padding: 4px; }
.row-actions .btn { background: var(--navy); color: #fff; }

/* menu (the original "Mean" sheet) */
.att-menu {
  max-width: 1100px; margin: 0 auto; padding: 40px 24px 56px; border-radius: 10px;
  background: url('/wood.jpg') center / cover; box-shadow: 0 1px 6px rgba(0, 0, 0, .25);
}
.att-menu-title {
  margin: 0 auto 36px; max-width: 760px; padding: 18px 24px; text-align: center;
  font-family: var(--font-title); font-size: 1.6rem; font-weight: 700; color: #5a2d00;
  background: rgba(255, 248, 230, .85); border: 2px solid #8b5a2b; border-radius: 14px;
}
.att-menu-grid { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.att-menu-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.att-menu-btn {
  min-width: 150px; padding: 14px 20px; text-align: center; text-decoration: none;
  font-weight: 700; font-size: 1.1rem; color: #1f3864;
  background: linear-gradient(#fffaf0, #f3dfb8); border: 1px solid #a67c52; border-radius: 10px;
  box-shadow: 0 2px 0 #a67c52;
}
.att-menu-btn:hover { background: linear-gradient(#fff, #f7e7c8); }

/* info + data */
.att-info { max-width: 760px; }
.info-grid th { width: 40%; background: #f2f2f2; text-align: right; }
.info-grid td { text-align: right; }
.num-input { font: inherit; width: 8em; padding: 4px; }
.weekday-picks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.weekday-picks label { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; }
.att-data { max-width: 1300px; }
.data-grid thead th { background: #d9d9d9; font-size: 1.1rem; }
.data-grid .c-pos { width: 48px; }
.data-grid .c-name { width: 32%; }
.data-grid .c-place { width: 17%; }
.data-grid .c-date { width: 14%; }
.data-grid td.name .cell-input { white-space: normal; }

/* monthly sheet */
.att-month { max-width: none; }
.month-head { font-size: 1rem; }
.month-grid { width: auto; min-width: 100%; font-size: .85rem; }
.month-grid th, .month-grid td { padding: 2px; }
.month-grid .serial { width: 34px; }
.month-grid .name { min-width: 220px; padding: 2px 8px; font-size: .95rem; }
.month-grid .label { white-space: nowrap; padding: 2px 8px; }
.month-grid .day, .month-grid td { min-width: 30px; }
.month-grid .weekday { height: 72px; }
.vertical-text { writing-mode: vertical-rl; white-space: nowrap; font-size: .8rem; }
.month-grid .blank { background: #fff; }
.month-grid td.off { background: #d9d9d9; }
.month-grid td.absent { background: #969696; }
.month-grid .total-h { min-width: 90px; }
.month-grid .absent-name { min-width: 200px; text-align: right; font-weight: 700; }
.month-grid .has-absence { color: #f00; background: #ecd8d6; font-weight: 700; }
.month-grid tfoot td, .month-grid tfoot th { border-top-width: 2px; }
/* sticky student columns while scrolling the 31 days horizontally */
.month-grid .sticky-1, .month-grid .sticky-2 { position: sticky; z-index: 1; background: #fff; }
.month-grid .sticky-1 { right: 0; }
.month-grid .sticky-2 { right: 34px; }
.mark, .day-toggle {
  width: 100%; min-height: 26px; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 700; background: transparent; color: inherit;
}
.mark:hover, .day-toggle:hover { background: rgba(0, 0, 0, .08); }
.mark:focus-visible, .day-toggle:focus-visible { outline: 2px solid #1d6f42; outline-offset: -2px; }
.absent .mark { color: #f00; }
.supervisor-box { margin-top: 12px; }
.supervisor-box th { width: 220px; text-align: right; background: #fff; }
.supervisor-box td { text-align: right; }

/* summary + yearly sheets */
.att-summary { max-width: 1250px; }
.summary-grid { margin-bottom: 18px; border: 3px solid #000; }
.summary-grid td, .summary-grid th { padding: 10px 6px; font-size: 1.05rem; }
.summary-grid .total-row th, .summary-grid .total-row td { font-size: 1.25rem; font-weight: 700; }
.summary-grid .note { min-width: 160px; }
.summary-grid .semester-cell { background: #fff; width: 50px; }
.att-yearly { max-width: 1400px; }
.yearly-grid { border: 3px solid #000; }
.yearly-grid td { font-weight: 700; }
.yearly-grid .name { min-width: 220px; }

@media (max-width: 700px) {
  .workspace { padding: 8px; }
  .sheet { padding: 14px; }
  .title { font-size: 1.7rem; }
  .subtitle { font-size: 1.1rem; }
  .info-boxes { grid-template-columns: 1fr; gap: 8px; }
  .info { font-size: 1.1rem; }
  .today { opacity: 1; }
}

/* ---------- print (replaces the PrintPreview / PrintOut macros) ---------- */
@media print {
  /* @page size is set per sheet by app.js (landscape for the monthly attendance sheets) */
  body { background: #fff; display: block; }
  .no-print { display: none !important; }
  .workspace { padding: 0; overflow: visible; }
  .sheet { box-shadow: none; padding: 0; max-width: none; }
  .table-scroll { overflow: visible; }
  .follow-grid { min-width: 0; font-size: 10pt; }
  /* A4 is much narrower than the screen: widen the number and date columns so nothing spills or breaks mid-date */
  .follow-grid .c-num { width: 7%; }
  .follow-grid .c-student { width: 22%; }
  .follow-grid .c-date { width: 14%; }
  .follow-grid .c-statement { width: 39%; }
  .follow-grid .c-party { width: 18%; }
  .grid th { padding: 6px 2px; }
  .grid .cell-input { padding: 6px; }
  .follow-grid .student { padding: 6px; }
  .follow-grid thead { display: table-header-group; } /* repeat header row on each page, like Print_Titles */
  .follow-grid tbody tr { height: auto; page-break-inside: avoid; }
  .follow-grid .cell-input { min-height: 60px; }
  .follow-grid .student { font-size: 11pt; }
  .title { font-size: 22pt; }
  .subtitle { font-size: 15pt; margin-bottom: 10px; }
  .info { font-size: 13pt; padding: 6px; }
  .names-title { font-size: 20pt; }
  .names-grid { font-size: 12pt; }
  .cell-input:hover, .setting:hover { background: none; box-shadow: none; }
  th, .info { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* attendance workbook */
  .att-grid th, .att-grid td, .pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .att-title { font-size: 16pt; margin-bottom: 4px; }
  .att-head-line { font-size: 10pt; margin-bottom: 6px; }
  .att-grid { font-size: 9pt; }
  .att-grid th, .att-grid td { padding: 3px 4px; }
  .month-grid { width: 100%; min-width: 0; font-size: 6.5pt; table-layout: auto; }
  .month-grid th, .month-grid td, .month-grid .day { padding: 1px; min-width: 0; }
  .month-grid .name, .month-grid .label { white-space: normal; }
  .month-grid { line-height: 1.15; }
  .month-grid tfoot { display: table-row-group; } /* print the totals once, under the last student */
  .month-grid .weekday { height: 40px; }
  .att-month .att-title { font-size: 13pt; margin: 0; }
  .att-month .att-head-line { font-size: 8.5pt; margin-bottom: 3px; padding-bottom: 2px; }
  .att-month .supervisor-box { font-size: 8pt; margin-top: 3px; }
  .att-month .supervisor-box .cell-input { min-height: 0; padding: 1px 4px; }
  .month-grid .name, .month-grid .absent-name { min-width: 0; font-size: 7pt; padding: 1px 3px; }
  .month-grid .weekday { height: 44px; }
  .month-grid .vertical-text { font-size: 6pt; }
  .month-grid .sticky-1, .month-grid .sticky-2 { position: static; }
  .month-grid .big, .att-grid .big { font-size: 8pt; }
  .mark, .day-toggle { min-height: 0; }
  .month-grid .total-h { min-width: 0; }
  .supervisor-box { font-size: 9pt; margin-top: 6px; }
  .supervisor-box th { width: 30%; }
  .summary-grid td, .summary-grid th { padding: 5px 3px; font-size: 9pt; }
  .summary-grid .total-row th, .summary-grid .total-row td { font-size: 10pt; }
  .summary-grid { margin-bottom: 8px; }
  .yearly-grid { font-size: 8.5pt; }
  .yearly-grid th, .yearly-grid td { padding: 2px 3px; }
  .yearly-grid .name { min-width: 0; }
  .att-menu { display: none; }
}