/* ═══════════════════════════════════════════════════════════════════
   OWLMARK PLANNER STUDIO
   Studio chrome comes from timetable-studio.css. This is the plan book:
   a weekly grid with room to write in every slot, daily pages built of
   lesson blocks, a detailed plan page and a week-notes page.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --pp-page-w:297mm; --pp-page-h:210mm;
  --pp-banner:#101A2D; --pp-accent:#C99A3D; --pp-ink:#22293A; --pp-paper:#FFFDF8;
}

#printable{
  background:none;box-shadow:none;border-radius:0;
  display:flex;flex-direction:column;gap:24px;align-items:center;
  width:auto;max-width:none;
}

.pp-page{
  position:relative;
  width:var(--pp-page-w);height:var(--pp-page-h);
  padding:10mm 11mm 8mm;
  background:var(--pp-paper);color:var(--pp-ink);
  font-family:'Lato','Manrope',sans-serif;font-size:9pt;line-height:1.35;
  display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(16,26,45,.3),0 0 0 1px rgba(201,154,61,.16);
  overflow:hidden;
}
body.lang-ar .pp-page{font-family:'Cairo',sans-serif}

/* ── Page head ──────────────────────────────────────────────────── */
.pp-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:8mm;
  padding-bottom:2.5mm;margin-bottom:3.5mm;
  border-bottom:.6mm solid var(--pp-banner);
}
.pp-title{
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:17pt;line-height:1.05;
  color:var(--pp-banner);
}
body.lang-ar .pp-title{font-family:'Cairo',sans-serif;font-size:15pt}
.pp-sub{margin-top:1mm;font-size:8pt;opacity:.7}
.pp-head-right{display:flex;flex-direction:column;align-items:flex-end;gap:.6mm;text-align:end}
.pp-head-right span{
  font-size:7.6pt;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.62;
}
body.lang-ar .pp-head-right span{letter-spacing:0;text-transform:none}

.pp-mark{
  margin-top:auto;padding-top:2.5mm;
  display:flex;align-items:center;justify-content:center;gap:1.8mm;
  border-top:.2mm solid rgba(16,26,45,.13);
  font-size:6.8pt;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(16,26,45,.38);
}
body.lang-ar .pp-mark{letter-spacing:.02em}
.pp-mark img{width:4mm;height:4mm;object-fit:contain;opacity:.6}

/* ── 1 · Weekly grid ────────────────────────────────────────────── */
.pp-week{width:100%;border-collapse:collapse;table-layout:fixed;flex:1}
.pp-week th,.pp-week td{border:.3mm solid rgba(16,26,45,.35);vertical-align:top}
.pp-week thead th{
  background:var(--pp-banner);color:#fff;padding:2mm 1.5mm;text-align:center;
  font-size:8.4pt;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
body.lang-ar .pp-week thead th{letter-spacing:0;text-transform:none}
.pp-week thead th span{display:block;font-size:7pt;font-weight:600;opacity:.75;letter-spacing:0}
.pp-week .pp-period{
  width:18mm;text-align:center;padding:1.5mm;
  background:rgba(16,26,45,.05);
}
.pp-week td.pp-period b{display:block;font-size:11pt;font-weight:800;color:var(--pp-banner)}
.pp-week td.pp-period span{display:block;font-size:6.6pt;opacity:.65;margin-top:.6mm}
.pp-slot{padding:0}
.pp-slot-head{
  padding:1.2mm 1.8mm;font-size:8pt;font-weight:800;
  background:rgba(16,26,45,.045);border-bottom:.2mm dotted rgba(16,26,45,.3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pp-slot.has .pp-slot-head{
  background:color-mix(in srgb, var(--pp-tint, var(--pp-accent)) 20%, transparent);
  border-inline-start:1.2mm solid var(--pp-tint, var(--pp-accent));
}
.pp-slot-head em{font-style:normal;font-weight:600;opacity:.65;font-size:7pt}
.pp-slot:not(.has) .pp-slot-head{opacity:.4;font-weight:600}
.pp-slot-space{
  height:100%;min-height:11mm;
  background-image:repeating-linear-gradient(180deg, transparent 0 5.5mm, rgba(16,26,45,.16) 5.5mm 5.7mm);
}

/* ── 2 · Daily pages ────────────────────────────────────────────── */
.pp-day{flex:1;display:flex;flex-direction:column;gap:2.4mm;overflow:hidden}
.pp-lesson{
  border:.3mm solid rgba(16,26,45,.3);border-radius:1.2mm;overflow:hidden;
  display:flex;flex-direction:column;flex:1;min-height:0;
}
.pp-lesson-head{
  display:flex;align-items:center;gap:2.5mm;padding:1.4mm 2.4mm;
  background:rgba(16,26,45,.05);border-bottom:.2mm solid rgba(16,26,45,.2);
}
.pp-lesson.has .pp-lesson-head{
  background:color-mix(in srgb, var(--pp-tint, var(--pp-accent)) 18%, transparent);
}
.pp-lesson-no{
  width:5.4mm;height:5.4mm;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--pp-banner);color:#fff;font-size:7pt;font-weight:800;
}
.pp-lesson-class{font-size:9.4pt;font-weight:800}
.pp-lesson-room{font-size:7.4pt;opacity:.7}
.pp-lesson-time{margin-inline-start:auto;font-size:7.4pt;font-weight:700;opacity:.7}
.pp-lesson:not(.has) .pp-lesson-class{opacity:.45}
.pp-lesson-body{
  flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:1.6mm 4mm;
  padding:1.8mm 2.4mm 2.2mm;min-height:0;
}
.pp-field{display:flex;flex-direction:column;gap:.8mm;min-height:0}
.pp-field-label{
  font-size:6.6pt;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pp-accent);
}
body.lang-ar .pp-field-label{letter-spacing:0;text-transform:none;font-size:7.4pt}
.pp-lines{display:flex;flex-direction:column;gap:3.6mm;padding-top:1.6mm;flex:1}
.pp-lines i{display:block;border-bottom:.2mm solid rgba(16,26,45,.28)}
.pp-lines.plain{gap:0}
.pp-lines.plain i{border-bottom:none}

/* ── 3 · Lesson plan ────────────────────────────────────────────── */
.pp-plan-meta{
  display:grid;grid-template-columns:repeat(4,1fr);gap:3mm 5mm;
  padding:2.5mm 3mm;margin-bottom:3.5mm;border-radius:1.5mm;
  border:.35mm solid var(--pp-banner);
}
.pp-meta-field{display:flex;flex-direction:column;gap:1mm}
.pp-meta-field span{font-size:6.8pt;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.62}
body.lang-ar .pp-meta-field span{letter-spacing:0;text-transform:none}
.pp-meta-field i{display:block;height:5mm;border-bottom:.25mm dotted rgba(16,26,45,.55)}
.pp-plan-grid{
  flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:3mm 5mm;
  align-content:start;overflow:hidden;
}
.pp-plan-field{display:flex;flex-direction:column}
.pp-plan-field.wide{grid-column:span 2}
.pp-plan-field h3,.pp-note-block h3{
  font-size:7.6pt;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--pp-accent);padding-bottom:1mm;
  border-bottom:.25mm solid var(--pp-accent);
}
body.lang-ar .pp-plan-field h3,body.lang-ar .pp-note-block h3{letter-spacing:0;text-transform:none;font-size:8.6pt}

/* ── 4 · Week notes ─────────────────────────────────────────────── */
.pp-notes-grid{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:4mm 6mm;align-content:start}
.pp-note-block{display:flex;flex-direction:column}
.pp-note-block:first-child{grid-column:span 2}

/* ── Empty state ────────────────────────────────────────────────── */
.pp-empty{align-items:center;justify-content:center}
.pp-empty-body{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:var(--ok-text-soft,#5B647A)}
.pp-empty-body img{width:54px;height:54px;opacity:.5}
.pp-empty-body strong{font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:var(--ok-navy,#101A2D)}

/* ── Panel: saved timetables ────────────────────────────────────── */
.tt-list{display:flex;flex-direction:column;gap:7px;max-height:230px;overflow-y:auto}
.tt-card{
  display:flex;flex-direction:column;gap:2px;text-align:start;cursor:pointer;
  padding:10px 12px;border-radius:12px;font-family:inherit;
  border:1.5px solid var(--ok-border,#DDD5C6);background:var(--ok-ivory,#FAF7EF);
  transition:.15s;position:relative;
}
.tt-card:hover{border-color:var(--ok-gold,#C99A3D);transform:translateY(-1px)}
.tt-card.active{border-color:var(--ok-gold,#C99A3D);background:rgba(201,154,61,.1);box-shadow:inset 0 0 0 1px var(--ok-gold,#C99A3D)}
.tt-card-name{font-size:.84rem;font-weight:800;color:var(--ok-navy,#101A2D)}
.tt-card-sub{font-size:.7rem;color:var(--ok-text-soft,#5B647A)}
.tt-card-count{
  position:absolute;top:10px;inset-inline-end:12px;
  font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ok-gold,#C99A3D);
}
body.lang-ar .tt-card-count{letter-spacing:0}

/* ── Panel: the week at a glance ────────────────────────────────── */
.grid-preview{
  display:grid;grid-template-columns:26px repeat(var(--pp-cols,5),1fr);gap:3px;
}
.gp-cell{
  min-height:24px;border-radius:5px;display:grid;place-items:center;
  font-size:.62rem;font-weight:700;
}
.gp-day,.gp-period{background:var(--ok-cream,#F2EBDD);color:var(--ok-navy,#101A2D);font-weight:800}
.gp-corner{background:transparent}
.gp-lesson{
  border:1px solid var(--ok-border,#DDD5C6);background:#fff;cursor:pointer;
  font-family:inherit;color:var(--ok-text-soft,#5B647A);padding:2px 3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.13s;
}
.gp-lesson:hover{border-color:var(--ok-gold,#C99A3D)}
.gp-lesson.has{
  background:color-mix(in srgb, var(--gp-tint, var(--ok-gold,#C99A3D)) 22%, #fff);
  border-color:color-mix(in srgb, var(--gp-tint, var(--ok-gold,#C99A3D)) 55%, #fff);
  color:var(--ok-navy,#101A2D);font-weight:800;
}

/* ── Panel: field chips ─────────────────────────────────────────── */
.field-list{display:flex;flex-wrap:wrap;gap:6px}
.field-chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:6px 11px;border-radius:999px;font-size:.72rem;font-weight:700;
  border:1.5px solid var(--ok-border,#DDD5C6);background:#fff;color:var(--ok-text-soft,#5B647A);
  transition:.15s;
}
.field-chip:hover{border-color:var(--ok-gold,#C99A3D)}
.field-chip.on{background:var(--ok-navy,#101A2D);border-color:var(--ok-navy,#101A2D);color:var(--ok-ivory,#FAF7EF)}
.field-chip input{position:absolute;opacity:0;pointer-events:none}

.sheet-list{display:flex;flex-direction:column;gap:7px}
.sheet-row{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  padding:10px 12px;border-radius:12px;
  border:1.5px solid var(--ok-border,#DDD5C6);background:var(--ok-ivory,#FAF7EF);transition:.15s;
}
.sheet-row:hover{border-color:var(--ok-gold,#C99A3D)}
.sheet-row.on{background:rgba(201,154,61,.1);border-color:var(--ok-gold,#C99A3D)}
.sheet-row input{width:16px;height:16px;accent-color:var(--ok-gold,#C99A3D);flex:0 0 auto}
.sr-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-text strong{font-size:.82rem;color:var(--ok-navy,#101A2D)}
.sr-text small{font-size:.68rem;color:var(--ok-text-soft,#5B647A)}
.sr-count{font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ok-gold,#C99A3D);white-space:nowrap}
body.lang-ar .sr-count{letter-spacing:0}

.th-mini .thm-rule{height:3px;margin:3px 0}
.th-mini .thm-lines{display:flex;flex-direction:column;gap:2px;padding:2px 4px 4px}
.th-mini .thm-lines i{height:2px;border-radius:1px;background:rgba(16,26,45,.28);display:block}
.th-mini .thm-lines i.short{width:60%}

/* ── Print ──────────────────────────────────────────────────────── */
@media print{
  #printable{gap:0 !important;display:block !important;transform:none !important}
  .pp-page{
    box-shadow:none !important;
    width:var(--pp-page-w) !important;height:var(--pp-page-h) !important;
    break-after:page;page-break-after:always;margin:0 !important;
  }
  .pp-page:last-child{break-after:auto;page-break-after:auto}
  .pp-empty{display:none !important}
  .pp-week thead th,.pp-week .pp-period,.pp-slot-head,.pp-slot-space,
  .pp-lesson-head,.pp-lesson-no,.pp-mark{
    -webkit-print-color-adjust:exact !important;print-color-adjust:exact !important;
  }
  tr,td,th,.pp-lesson{page-break-inside:avoid !important;break-inside:avoid !important}
}