/* IBD Dashboard — Rooms, Semester, Calendar, Misc Pages */
/* ─────────────────────────────────────────────
   21. SEMESTER WIZARD
   ───────────────────────────────────────────── */
.wiz-overlay       { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); z-index: 1000; display: none; align-items: center; justify-content: center; }
.wiz-overlay.open  { display: flex; }
.wiz-overlay.open .wiz-box { animation: modalIn .2s cubic-bezier(.34,1.56,.64,1); }
.wiz-box           { background: var(--bg-card); border-radius: var(--radius-xl); width: 100%; max-width: 680px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); }

.wiz-header        { background: var(--text-primary); padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.wiz-header-left h2 { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.wiz-header-left p  { font-size: 11px; color: rgba(255,255,255,0.5); }
.wiz-close         { background: rgba(255,255,255,0.1); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; }

.wiz-steps         { display: flex; padding: 0 24px; background: #f9fafb; border-bottom: 0.5px solid var(--border-card); flex-shrink: 0; overflow-x: auto; }
.wiz-step          { padding: 12px 16px; font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; border-bottom: 2px solid transparent; white-space: nowrap; }
.wiz-step.active   { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600; }
.wiz-step.done     { color: var(--success); }
.wiz-step-num      { width: 18px; height: 18px; border-radius: 50%; background: #e5e7eb; color: var(--text-secondary); font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; }
.wiz-step.active .wiz-step-num { background: var(--accent); color: #fff; }
.wiz-step.done  .wiz-step-num  { background: var(--success); color: #fff; }

.wiz-body          { flex: 1; overflow-y: auto; padding: 24px; background: var(--bg-card); }
.wiz-footer        { padding: 16px 24px; border-top: 0.5px solid var(--border-card); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background: var(--bg-card); }

.wiz-btn-next      { padding: 9px 24px; border-radius: 7px; border: none; background: var(--text-primary); color: #fff; font-size: 12px; cursor: pointer; font-weight: 500; transition: background .15s; }
.wiz-btn-next:hover { background: #2d2d4e; }
.wiz-btn-back      { padding: 9px 16px; border-radius: 7px; border: 0.5px solid #ddd; background: transparent; color: #555; font-size: 12px; cursor: pointer; }
.wiz-btn-back:hover { background: #f9fafb; color: var(--text-primary); }
.wiz-btn-launch    { padding: 9px 24px; border-radius: 7px; border: none; background: var(--success); color: #fff; font-size: 12px; cursor: pointer; font-weight: 500; }

.wiz-field         { margin-bottom: 14px; }
.wiz-field label   { display: block; font-size: 11px; font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; }
.wiz-field input,
.wiz-field select  { width: 100%; padding: 9px 12px; border: 0.5px solid #e0e0e0; border-radius: 7px; font-size: 12px; outline: none; background: var(--bg-card); color: var(--text-primary); }
.wiz-field input:focus { border-color: var(--accent); }

.wiz-row           { display: flex; gap: 12px; }
.wiz-row .wiz-field { flex: 1; }

.wiz-toggle        { display: flex; gap: 8px; margin-bottom: 14px; }
.wiz-toggle-btn    { flex: 1; padding: 10px; border-radius: var(--radius-sm); border: 0.5px solid #e0e0e0; background: var(--bg-card); color: var(--text-secondary); font-size: 12px; cursor: pointer; text-align: center; transition: all .15s; }
.wiz-toggle-btn.active { background: var(--text-primary); color: #fff; border-color: var(--text-primary); }

.wiz-info    { background: var(--accent-light); border: 0.5px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; font-size: 11px; color: var(--accent); margin-bottom: 14px; }
.wiz-warn    { background: #fef3e2; border: 0.5px solid #f5d99a; border-radius: 8px; padding: 10px 14px; font-size: 11px; color: var(--warning-dark); margin-bottom: 14px; }
.wiz-success { background: #eaf3de; border: 0.5px solid #c0dd97; border-radius: 8px; padding: 10px 14px; font-size: 11px; color: var(--success); margin-bottom: 14px; }

.class-assign-list   { display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto; }
.class-assign-item   { background: #fafbfc; border: 0.5px solid var(--border-card); border-radius: 8px; padding: 10px 14px; }
.class-assign-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; cursor: pointer; }
.class-assign-title  { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.class-assign-sub    { font-size: 10px; color: var(--text-muted); }
.class-assign-toggle { font-size: 10px; color: var(--accent); }
.class-assign-body   { display: none; }
.class-assign-body.open { display: block; }


/* ─────────────────────────────────────────────
   22. SEMESTER PAGE
   ───────────────────────────────────────────── */
.sem-page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.sem-status      { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 99px; font-size: 11px; font-weight: 500; }
.sem-status.open   { background: #eaf3de; color: var(--success); }
.sem-status.closed { background: #f5f5f5; color: #888; }
.sem-status.none   { background: #fef3e2; color: var(--warning-dark); }

.sem-card        { background: var(--bg-card); border: 0.5px solid var(--border-card); border-radius: 10px; padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.sem-card h3     { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.sem-card p      { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.sem-card-row    { display: flex; gap: 8px; flex-wrap: wrap; }

.sem-action-btn  { padding: 8px 16px; border-radius: 7px; font-size: 12px; cursor: pointer; font-weight: 500; }
.sem-open-btn    { border: none; background: var(--text-primary); color: #fff; }
.sem-close-btn   { border: 0.5px solid var(--danger); background: transparent; color: var(--danger); }
.sem-close-btn:hover { background: #fde8e8; }

.sem-archive-table { background: var(--bg-card); border: 0.5px solid var(--border-card); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-card); }

.review-item       { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 0.5px solid #f5f5f5; font-size: 12px; }
.review-item:last-child { border-bottom: none; }
.review-label { color: var(--text-muted); }
.review-val   { font-weight: 500; color: var(--text-primary); }
.review-warn  { color: var(--danger-dark); }


/* ─────────────────────────────────────────────
   23. MONITOR LOG
   ───────────────────────────────────────────── */
.ml-stat-row  { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 14px; }
.ml-scard     { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 0.5px solid var(--border-card); background: var(--bg-card); box-shadow: var(--shadow-card); }
.ml-scard-ico { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
.ml-scard-num { font-size: 19px; font-weight: 700; line-height: 1; color: var(--text-primary); }
.ml-scard-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; }

.ml-toolbar   { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
.ml-toolbar input { padding: 7px 12px; border: 0.5px solid #e0e0e0; border-radius: 8px; font-size: 12px; outline: none; background: var(--bg-card); color: var(--text-primary); width: 200px; }

.ml-tbl-wrap  { overflow-x: auto; border-radius: 10px; border: 0.5px solid var(--border-card); background: var(--bg-card); margin-bottom: 12px; box-shadow: var(--shadow-card); }
.ml-tbl       { border-collapse: collapse; font-size: 12px; width: 100%; min-width: 600px; }
.ml-tbl thead th { padding: 8px; text-align: center; font-size: 10px; font-weight: 500; color: var(--text-muted); white-space: nowrap; cursor: pointer; user-select: none; background: #fafbfc; border-bottom: 0.5px solid var(--border-card); }
.ml-tbl thead th:first-child { width: 36px; min-width: 36px; text-align: center; padding: 8px 4px; }
.ml-tbl thead th:nth-child(2) { text-align: left; padding-left: 14px; width: 1%; white-space: nowrap; }
.ml-tbl thead th:last-child  { text-align: center; min-width: 80px; }
.ml-tbl tbody tr { border-top: 0.5px solid #f5f5f5; }
.ml-tbl tbody tr:hover { background: #f9fafb; }
.ml-tbl td    { padding: 7px 8px; text-align: center; vertical-align: middle; color: var(--text-primary); }
.ml-tbl td:first-child { width: 36px; padding: 7px 4px; }
.ml-tbl td:nth-child(2) { text-align: left; padding-left: 14px; width: 1%; white-space: nowrap; }

/* ── Frozen identity columns (#, Student, Stage) ───────────────────────────────
   With 28+ session columns the grid scrolls horizontally, and past the first
   screenful you can no longer tell whose row you're reading. Pin the three
   identity columns so they stay put while the dates scroll under them.
   Sticky offsets must be FIXED px (a sticky cell can't derive its own left from
   a shrink-to-fit neighbour), so columns 2 and 3 get explicit widths here —
   these three numbers are load-bearing: 36 + 200 = 236. */
.ml-tbl th:nth-child(2), .ml-tbl tr.ml-srow td:nth-child(2) { width: 200px; min-width: 200px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ml-tbl th:nth-child(3), .ml-tbl tr.ml-srow td:nth-child(3) { width: 110px; min-width: 110px; }
.ml-tbl thead th:nth-child(-n+3),
.ml-tbl tr.ml-srow td:nth-child(-n+3) { position: sticky; background: var(--bg-card); }
.ml-tbl tr.ml-srow td:nth-child(-n+3) { z-index: 2; }
/* Header corner cells sit above both the sticky body cells and the scrolling
   header, so they need the highest layer. */
.ml-tbl thead th:nth-child(-n+3) { z-index: 4; background: #fafbfc; }
.ml-tbl thead th { z-index: 3; }
.ml-tbl th:nth-child(1), .ml-tbl tr.ml-srow td:nth-child(1) { left: 0; }
.ml-tbl th:nth-child(2), .ml-tbl tr.ml-srow td:nth-child(2) { left: 36px; }
.ml-tbl th:nth-child(3), .ml-tbl tr.ml-srow td:nth-child(3) { left: 236px; }
/* Edge shading marks where the frozen block ends and the scroll area begins. */
.ml-tbl th:nth-child(3), .ml-tbl tr.ml-srow td:nth-child(3) { box-shadow: inset -6px 0 6px -6px rgba(0,0,0,0.12); }
/* Row hover lives on the <tr>, which an opaque sticky cell would paint over. */
.ml-tbl tbody tr.ml-srow:hover td:nth-child(-n+3) { background: #f9fafb; }

/* The Student cell is now width-capped for the sticky offset above, so a long
   name truncates instead of pushing the frozen block out of alignment. */
.ml-stu-name  { font-size: 12px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-stu-id    { font-size: 10px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ml-cbadge    { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: 10px; font-weight: 500; }

/* Monitor log badge colours */
.ml-bp { background: #eaf3de; color: #3B6D11; }
.ml-bl { background: #fef3e2; color: #854F0B; }
.ml-ba { background: var(--accent-light); color: var(--accent); }
.ml-bu { background: #fde8e8; color: var(--danger-dark); }
.ml-bn { background: #f5f5f5; color: var(--text-muted); }
.ml-be { background: #ccfbf1; color: #0F766E; }
.ml-bd { background: #ffedd5; color: #9A3412; }
.ml-pct { font-size: 11px; font-weight: 500; }
/* ── Today live dashboard ── */
.td-sec   { background: var(--bg-card); border: 0.5px solid var(--border-card); border-radius: 10px; overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.td-sec-h { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: #fafbfc; border-bottom: 0.5px solid var(--border-card); font-size: 12.5px; font-weight: 600; }
.td-row   { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-top: 0.5px solid #f5f5f5; }
.td-row:first-of-type { border-top: none; }
.td-pill  { width: 92px; flex-shrink: 0; font-size: 10.5px; font-weight: 600; padding: 3px 0; border-radius: 99px; text-align: center; }
.td-feed  { background: var(--bg-card); border: 0.5px solid var(--border-card); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow-card); }
.td-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #639922; animation: tdpulse 1.6s infinite; }
@keyframes tdpulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Auto row numbers — renumber correctly when rows are sorted or filtered */
.ml-tbl tbody { counter-reset: mlrow; }
.ml-tbl tbody tr.ml-srow { counter-increment: mlrow; cursor: pointer; }
.ml-tbl td.ml-num { text-align: center; font-size: 11px; color: var(--text-muted); }
.ml-tbl td.ml-num::before { content: counter(mlrow); }
.ml-ex-cell { background: #fafbfc; }

.ml-stage     { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.ml-s-ok   { background: #eaf3de; color: #3B6D11; }
.ml-s-w1   { background: #fef3e2; color: #854F0B; }
.ml-s-w2   { background: #fde8e8; color: var(--danger-dark); }
.ml-s-drop { background: #F7C1C1; color: #501313; }

.ml-legend      { display: flex; gap: 12px; padding: 8px 14px; border-top: 0.5px solid var(--border-card); flex-wrap: wrap; align-items: center; }
.ml-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #888; }


/* ─────────────────────────────────────────────
   24. CALENDAR
   ───────────────────────────────────────────── */
.cal-grid        { display: grid; grid-template-columns: repeat(7,1fr); gap: 1px; background: #e5e7eb; border-radius: 10px; overflow: hidden; }
.cal-head        { background: #f9fafb; padding: 8px 0; text-align: center; font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.cal-day         { background: var(--bg-card); min-height: 72px; padding: 6px; cursor: pointer; transition: background .1s; position: relative; }
.cal-day:hover   { background: #f0f4ff; }
.cal-day.other-month      { background: #f9fafb; }
.cal-day.other-month .cal-day-num { color: var(--text-muted); }
.cal-day.today            { background: var(--accent-light); }
.cal-day.today .cal-day-num { color: var(--accent); font-weight: 700; }
.cal-day.is-holiday       { background: #f5f5f5; }
.cal-day.is-weekend .cal-day-num { color: var(--text-muted); }
.cal-day-num     { font-size: 12px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
.cal-tag         { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 500; display: inline-block; margin-top: 2px; }
.cal-tag.normal      { background: #eaf3de; color: #27500a; }
.cal-tag.online      { background: #eff6ff; color: var(--accent); }
.cal-tag.cancelled   { background: #fde8e8; color: var(--danger-dark); }
.cal-tag.room_change { background: #fef3e2; color: var(--warning-dark); }
.cal-tag.holiday     { background: #f3f4f6; color: var(--text-muted); }
.cal-tag.noclass     { background: #f0f0f0; color: #bbb; }
.cal-tag.completed   { background: #e7f6f3; color: #0F766E; }


/* ─────────────────────────────────────────────
   25. EMPTY STATES
   ───────────────────────────────────────────── */
.empty-state      { background: var(--bg-card); border: 0.5px solid var(--border-card); border-radius: var(--radius-md); padding: 3rem 2rem; text-align: center; box-shadow: var(--shadow-sm); }
.empty-state-icon { font-size: 36px; margin-bottom: 14px; display: block; line-height: 1; color: #aaa; }
.empty-state h3   { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.empty-state p    { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; max-width: 360px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.empty-state-btn  { padding: 8px 20px; border-radius: 7px; border: none; background: var(--text-primary); color: #fff; font-size: 12px; cursor: pointer; font-weight: 500; transition: opacity .15s; }
.empty-state-btn:hover { background: #2d2d4e; }


/* ─────────────────────────────────────────────
   26. LECTURER PILL
   ───────────────────────────────────────────── */
.lec-pill-mini    { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 0.5px solid #e0e0e0; border-radius: 6px; cursor: pointer; background: #fafafa; min-height: 26px; transition: border-color .12s; width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; }
.lec-pill-mini:hover { border-color: var(--accent); }
.lec-pill-av      { width: 18px; height: 18px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lec-pill-empty   { font-size: 10px; color: #bbb; font-style: italic; }
.lec-pill-name    { font-size: 10px; color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }


/* ─────────────────────────────────────────────
   27. SKELETON LOADING
   ───────────────────────────────────────────── */
/* Generic shimmer skeleton */
.skel {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 6px;
}
.skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  border-radius: 6px;
  display: inline-block;
}
.skeleton-row {
  height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
  margin-bottom: 8px;
}


/* ─────────────────────────────────────────────
   28. TOAST
   ───────────────────────────────────────────── */
.ibd-toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  border-radius: 99px; font-size: 12px; font-weight: 500;
  z-index: 9999;
  background: #1f2937; color: #fff;
  box-shadow: var(--shadow-lg);
  padding: 10px 20px;
  display: flex; align-items: center; gap: 8px;
  opacity: 0; animation: toastIn .3s ease forwards;
}
.ibd-toast.hide      { animation: toastOut .3s ease forwards; }
.ibd-toast-icon      { font-size: 14px; flex-shrink: 0; }


/* ─────────────────────────────────────────────
   29. DARK MODE TOGGLE — iOS pill
   ───────────────────────────────────────────── */
.dark-toggle  { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; margin-left: auto; padding: 4px; border-radius: 99px; }
.dark-toggle:hover { opacity: 0.8; }
.dm-track     { width: 38px; height: 22px; border-radius: 99px; background: rgba(255,255,255,0.2); position: relative; transition: background .25s; flex-shrink: 0; display: block; }
.dm-thumb     { width: 18px; height: 18px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: transform .25s; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }


/* ─────────────────────────────────────────────
   30. BUTTON CLICK FEEDBACK
   ───────────────────────────────────────────── */
.addclass-btn:active, .modal-save:active, .savebtn:active,
.rt-addbtn:active, .login-btn:active, .wiz-btn-next:active,
.wiz-btn-launch:active, .msave:active { transform: scale(0.97); }


/* ─────────────────────────────────────────────
   31. GENERIC INPUTS (light mode defaults)
   ───────────────────────────────────────────── */
input:not([type="file"]), select, textarea {
  background: var(--bg-card);
  border-color: #e0e0e0;
  color: var(--text-primary);
}
input:focus, select:focus { border-color: var(--accent); outline: none; }
input::placeholder { color: var(--text-muted); }


/* ─────────────────────────────────────────────
   32. EDIT / DELETE BUTTONS
   ───────────────────────────────────────────── */
.delbtn  { padding: 2px 8px; border-radius: 4px; border: 0.5px solid var(--danger); background: #fef2f2; color: var(--danger); font-size: 10px; cursor: pointer; transition: background .12s, transform .1s; }
.delbtn:hover  { background: #fee2e2; transform: scale(1.04); }
.editbtn { padding: 2px 8px; border-radius: 4px; border: 0.5px solid var(--accent); background: var(--accent-light); color: var(--accent); font-size: 10px; cursor: pointer; margin-right: 4px; transition: background .12s, transform .1s; }
.editbtn:hover { background: #d0e8f8; transform: scale(1.04); }


/* ─────────────────────────────────────────────
   DAILY RECORD (Reports)
   ───────────────────────────────────────────── */
/* Filter toolbar — groups the date range, status and class/date controls
   into one clean card instead of loose rows floating on the page. */
.dr-toolbar { background:var(--bg-card); border:0.5px solid var(--border-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:11px 13px; margin-bottom:14px; }
.dr-toolbar-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.dr-toolbar-bottom { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:11px; padding-top:11px; border-top:0.5px solid var(--border-card); }

/* Column header sits as a band attached to the top of the list card. */
.dr-cols { display:flex; align-items:center; padding:9px 32px 9px 14px; font-size:9.5px; font-weight:600; letter-spacing:.5px; color:var(--text-muted); background:var(--bg-card-hover); border-bottom:0.5px solid var(--border-card); }
.dr-cols .dr-sp { flex:1; }
.dr-cols span:not(.dr-sp) { width:clamp(58px, 9vw, 110px); padding:0 4px; box-sizing:border-box; text-align:center; }
.dr-dayh { display:flex; align-items:center; padding:11px 14px; cursor:pointer; background:var(--bg-card); transition:background .15s ease; user-select:none; }
.dr-dayh:hover { background:var(--bg-card-hover,#fafbff); }
.dr-dayh .ti { transition:transform .18s ease; }
.dr-num { width:clamp(58px, 9vw, 110px); text-align:center; font-size:12.5px; }
.dr-day + .dr-day { border-top:0.5px solid var(--border-card); }
.dr-day-body { border-top:0.5px solid var(--border-card); background:rgba(13,42,80,0.025); animation:drSlide .18s ease; overflow:hidden; }
@keyframes drSlide { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
.dr-row { display:flex; align-items:center; gap:10px; padding:7.5px 14px 7.5px 36px; cursor:pointer; transition:background .12s ease; }
.dr-row:hover { background:rgba(13,42,80,0.045); }
.dr-row + .dr-row { border-top:0.5px solid var(--border-card); }
.dr-row.dr-sel { background:#E6F1FB66; }
#dr-drawer { animation:drDrawer .2s ease; box-shadow:-8px 0 24px rgba(15,30,60,.08); }
@keyframes drDrawer { from { opacity:0; transform:translateX(24px); } to { opacity:1; transform:none; } }
#dr-dim { animation:drFade .2s ease; }
@keyframes drFade { from { opacity:0; } to { opacity:1; } }
[data-theme="dark"] .dr-dayh { background:var(--surface); }
[data-theme="dark"] .dr-dayh:hover { background:rgba(255,255,255,.05); }
[data-theme="dark"] .dr-day-body { background:rgba(255,255,255,.03); }
[data-theme="dark"] .dr-row:hover { background:rgba(255,255,255,.05); }
[data-theme="dark"] .dr-row.dr-sel { background:rgba(56,189,248,.12); }
[data-theme="dark"] #dr-list > div, [data-theme="dark"] #dr-drawer { background:var(--surface) !important; border-color:var(--border) !important; }
[data-theme="dark"] .dr-toolbar { background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .dr-toolbar-bottom { border-top-color:var(--border); }
[data-theme="dark"] .dr-cols { background:var(--surface2); border-bottom-color:var(--border); }
.dr-num { display:inline-flex; align-items:center; justify-content:center; }
.dr-numb { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:22px; padding:0 7px; border-radius:8px; font-size:12px; font-weight:700; box-shadow:0 1px 2px rgba(15,30,60,.10), inset 0 0 0 0.5px rgba(15,30,60,.06); transition:transform .12s ease; }
.dr-dayh:hover .dr-numb { transform:scale(1.08); }
.dr-cols span:not(.dr-sp) { display:inline-flex; align-items:center; justify-content:center; }
.dr-colb { display:inline-flex; align-items:center; justify-content:center; height:18px; padding:0 9px; border-radius:6px; font-size:9px; font-weight:700; letter-spacing:.3px; white-space:nowrap; box-shadow:inset 0 0 0 0.5px rgba(15,30,60,.06); }