/* Paparan Tutor (the tutor's page): header, summary, calendar Isnin – Ahad, and a side column.
   Only .fl-* classes, so staff pages keep their own layout. */

/* A tutor has no tab bar: on wide screens the empty header strip goes too (on phones it holds the menu button). */
@media (min-width: 1024px) { .app-header:has(#topic-tabs:empty) { display: none; } }

.view:has(.fl-banner) { width: 100%; max-width: 1440px; margin-inline: auto; }

/* Header: who, and the month */
.fl-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.fl-pick .label { margin: 0; }
.fl-pick select { flex: 1; max-width: 420px; min-width: 180px; }
/* Superadmin, a tutor opened from Akaun Guru: back, the tutor's name, and their three pages */
.fl-sa-bar { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.fl-sa-bar .btn { gap: 6px; text-decoration: none; }
.fl-sa-who { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--gray-12); }
.fl-sa-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.fl-sa-tabs .chip { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.fl-sa-tabs .chip[aria-current="page"] { color: var(--green-11); background: var(--green-3); border-color: transparent; font-weight: 600; }
.ag-open { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.ag-open:hover { color: var(--green-11); }
.fl-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; }
.fl-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.fl-avatar { flex-shrink: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; font-size: 22px; font-weight: 700; color: var(--green-11); background: var(--green-3); }
.fl-name { margin: 0; font-family: var(--heading-font, inherit); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; color: var(--gray-12); }
.fl-id { margin: 4px 0 0; font-size: 13px; color: var(--gray-11); }
.fl-codes { margin-top: 8px; }
.fl-month { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Summary row */
.fl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fl-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow-card); }
.fl-stat-label { font-size: 12px; font-weight: 600; color: var(--gray-11); }
.fl-stat-num { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--gray-12); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fl-stat-num small { font-size: 15px; font-weight: 500; color: var(--gray-10); }
.fl-stat-sub { font-size: 12px; color: var(--gray-10); }
.fl-stat.is-pay { background: var(--green-2, var(--panel)); }
.fl-stat.is-pay .fl-stat-num { color: var(--green-11); }

/* Main area and side column */
.fl-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.fl-main, .fl-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fl-empty { margin: 0; padding: 0 16px 16px; font-size: 13px; line-height: 1.6; color: var(--gray-11); }

/* Status colours, shared by the calendar, the legend and the session table */
[data-tone="done"] { --status-bg: var(--green-3); --status-ink: var(--green-11); }
[data-tone="missed"] { --status-bg: var(--red-3); --status-ink: var(--red-11); }
[data-tone="covered"] { --status-bg: light-dark(#fff0df, #432915); --status-ink: light-dark(#9a4800, #ffb56b); }
[data-tone="upcoming"] { --status-bg: var(--gray-3); --status-ink: var(--gray-11); }
.fl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: auto; font-size: 12px; color: var(--gray-11); }
.fl-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.fl-legend > span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--status-ink); }
.fl-status { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--status-bg); color: var(--status-ink); font-size: 12px; font-weight: 500; }

/* Calendar: seven columns, Isnin to Ahad */
.fl-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 16px 16px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fl-cal-head { padding: 8px; font-size: 12px; font-weight: 600; color: var(--gray-11); text-align: left; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--gray-2); }
.fl-cal-head.is-weekend { color: var(--gray-10); }
.fl-cal-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 96px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fl-cal-cell.is-out { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--gray-2) 6px 7px); }
.fl-cal-cell.is-weekend:not(.is-out) { background: color-mix(in srgb, var(--gray-2) 60%, transparent); }
.fl-cal-cell.is-today { box-shadow: inset 0 0 0 2px var(--blue-9); }
.fl-cal-date { display: flex; align-items: center; gap: 6px; }
.fl-cal-n { font-size: 13px; font-weight: 700; color: var(--gray-12); font-variant-numeric: tabular-nums; }
.fl-cal-cell.is-past .fl-cal-n { color: var(--gray-10); }
.fl-cal-dn { display: none; font-size: 12px; color: var(--gray-11); }
.fl-cal-today { margin-left: auto; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--blue-11); background: var(--blue-3); }
.fl-ev { display: flex; flex-direction: column; min-width: 0; width: 100%; padding: 4px 6px; border: 0; border-radius: 6px; border-left: 3px solid var(--status-ink); background: var(--status-bg); font: inherit; font-size: 11.5px; line-height: 1.35; text-align: left; color: var(--gray-12); cursor: pointer; }
@media (hover: hover) { .fl-ev:hover { filter: brightness(.96); } }
.fl-ev:focus-visible, .fl-row:focus-visible { outline: 2px solid var(--blue-9); outline-offset: -2px; }
.fl-row { cursor: pointer; }
@media (hover: hover) { .fl-row:hover > td { background: var(--gray-2); } }

/* Students of one session (dialog) */
.fl-att-title { margin: 16px 0 6px; font-size: 13px; font-weight: 600; color: var(--gray-12); }
.fl-att { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.fl-att li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.fl-ev-time { font-size: 11px; color: var(--status-ink); font-variant-numeric: tabular-nums; }
.fl-ev-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-ev-meta { display: none; font-size: 11px; color: var(--gray-11); }

/* Next class */
.fl-next-item { display: flex; flex-direction: column; gap: 2px; margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: var(--gray-2); }
.fl-next-time { font-size: 13px; font-weight: 600; color: var(--blue-11); }
.fl-next-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; }

/* Weekly timetable, one row a day */
.fl-wk { list-style: none; margin: 0; padding: 0 16px 12px; }
.fl-wk-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.fl-wk-row:first-child { border-top: 0; }
.fl-wk-row.is-today .fl-wk-day { color: var(--blue-11); }
.fl-wk-day { font-size: 13px; font-weight: 600; color: var(--gray-12); }
.fl-wk-row.is-empty .fl-wk-day { color: var(--gray-10); font-weight: 500; }
.fl-wk-list { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 13px; }
.fl-wk-item { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.fl-wk-time { font-size: 12px; color: var(--gray-11); }

/* Bayaran */
.fl-pay-now { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 16px 12px; padding: 14px; border-radius: 10px; background: var(--green-2, var(--gray-2)); }
.fl-pay-amt { font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--green-11); }
.fl-pay-lines { margin: 0 16px 12px; font-size: 13px; }
.fl-pay-lines > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.fl-pay-lines dd { margin: 0; }
.fl-pay-hist { padding: 0 8px 8px; border-top: 1px solid var(--line); }
.fl-pay-hist-title { margin: 10px 8px 4px; font-size: 12px; font-weight: 600; color: var(--gray-11); }
.fl-pay-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px; font: inherit; font-size: 13px; text-align: left; color: inherit; background: transparent; cursor: pointer; }
@media (hover: hover) { .fl-pay-row:hover { background: var(--gray-3); } }
.fl-pay-row:focus-visible { outline: 2px solid var(--green-9); outline-offset: -2px; }

.fl-avatar { overflow: hidden; }
.fl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fl-eyebrow { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green-11); }
.fl-pay-now.is-draf { background: var(--amber-3, var(--gray-2)); }
.fl-pay-now.is-draf .fl-pay-amt { color: var(--amber-11, var(--gray-12)); }
.fl-diajar tfoot th { border-top: 1px solid var(--line-strong); }

/* Profil Pekerja */
.fl-profil-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.fl-profil-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fl-foto-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 16px; }
.fl-foto { display: grid; place-items: center; width: 140px; height: 140px; border-radius: 999px; overflow: hidden; font-size: 52px; font-weight: 700; color: var(--green-11); background: var(--green-3); box-shadow: 0 0 0 4px var(--panel), 0 0 0 5px var(--line-strong); }
.fl-foto img { width: 100%; height: 100%; object-fit: cover; }
.fl-foto-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fl-foto-actions label { cursor: pointer; }
.fl-foto-actions label:focus-within { outline: 2px solid var(--blue-9); outline-offset: 2px; }
.fl-foto-card .fl-info { align-self: stretch; padding: 0; }
.fl-info { display: grid; gap: 10px; margin: 0; padding: 0 16px 14px; }
.fl-info > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; font-size: 13px; }
.fl-foto-card .fl-info > div { grid-template-columns: 1fr; gap: 2px; }
.fl-info dt { color: var(--gray-11); }
.fl-info dd { margin: 0; color: var(--gray-12); overflow-wrap: anywhere; }
.fl-note { margin: 0; padding: 0 16px 14px; font-size: 12px; line-height: 1.6; color: var(--gray-10); }
.fl-foto-card .fl-note { padding: 0; align-self: stretch; }
.fl-latar { margin: 0 16px 16px; padding: 12px 14px; border-radius: 10px; background: var(--gray-2); font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.fl-edu { list-style: none; margin: 0; padding: 0 16px 12px; }
.fl-edu li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.fl-edu li:first-child { border-top: 0; }
.fl-edu-tahun { font-weight: 600; color: var(--gray-11); }
.fl-edu-row { margin: 0; padding: 10px 12px 12px; border: 1px solid var(--line); border-radius: 10px; }
.fl-edu-row legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--gray-11); }

/* Sessions table: full length, scrolled with the page (sideways only on a narrow screen) */
.fl-sessions .scroll-x { max-height: none; overflow-y: visible; }

@media (max-width: 1200px) {
  .fl-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 1000px) {
  .fl-grid, .fl-profil-grid { grid-template-columns: minmax(0, 1fr); }
  .fl-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
  .fl-side .fl-next { order: -1; }
}
@media (max-width: 760px) {
  .fl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-month { width: 100%; }
  .fl-legend { margin-left: 0; }
  .fl-info > div { grid-template-columns: 1fr; gap: 2px; }
  /* The calendar becomes a list of the days with classes, each with its day name and full details. */
  .fl-cal-grid { display: flex; flex-direction: column; gap: 8px; margin: 0 12px 12px; border: 0; }
  .fl-cal-head, .fl-cal-cell.is-out, .fl-cal-cell:not(.has-ev):not(.is-today) { display: none; }
  .fl-cal-cell { min-height: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
  .fl-cal-cell.is-weekend:not(.is-out) { background: none; }
  .fl-cal-dn { display: inline; }
  .fl-ev-name { white-space: normal; }
  .fl-ev-meta { display: block; }
  .fl-ev { font-size: 13px; padding: 6px 8px; }
}

/* The tutor's banner at the top of every tutor page: the same on each page, full width, and still when the page
   changes (only what is below it slides in). Navy like the tutor sidebar, with a gold line like the logo. */
.fl-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; padding: 24px 28px;
  border-radius: 16px; color: #e8f0f5; background: linear-gradient(120deg, #12283a 0%, #173a52 60%, #1d4a5e 100%);
  box-shadow: inset 0 -3px 0 #c9a24a, 0 2px 6px #0b1a2614; }
.fl-banner-who { display: flex; align-items: center; gap: 18px; min-width: 0; }
.fl-banner .fl-avatar { width: 76px; height: 76px; border-radius: 18px; font-size: 30px; color: #12283a; background: #e9d7a8;
  box-shadow: 0 0 0 3px #ffffff33; }
.fl-banner-kicker { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #d9bd75; }
.fl-banner-name { margin: 0; font-family: var(--heading-font, inherit); font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.fl-banner-full { margin: 4px 0 0; font-size: 13px; color: #b7c8d4; }
.fl-banner-facts { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0; }
.fl-banner-facts > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fl-banner-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9fb4c3; }
.fl-banner-facts dd { margin: 0; font-size: 15px; font-weight: 600; color: #fff; }
.fl-banner-facts .pr-codes { gap: 6px; }

/* Under the banner: the page's title, and the month on pages by month */
.fl-pagebar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.fl-page-title { margin: 0; font-family: var(--heading-font, inherit); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--gray-12); }
.fl-pagebar .fl-month { justify-content: flex-end; }

@media (prefers-reduced-motion: no-preference) {
  .view[data-enter="true"]:has(.fl-banner) { animation: none; }
  .view[data-enter="true"]:has(.fl-banner) > :not(.fl-banner):not(.fl-pick) { animation: view-in 260ms var(--ease-out) both; }
}
@media (max-width: 760px) {
  .fl-banner { padding: 20px; gap: 16px; }
  .fl-banner .fl-avatar { width: 60px; height: 60px; border-radius: 14px; font-size: 24px; }
  .fl-banner-facts { gap: 12px 24px; }
  .fl-pagebar .fl-month { width: 100%; justify-content: flex-start; }
}

/* Subjek & cawangan (Profil Pekerja): subjects as tags; in the dialog, the ticks in two columns */
.fl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--green-11); background: var(--green-3); }
.fl-subjek-form .check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; margin-bottom: 8px; }
@media (max-width: 480px) { .fl-subjek-form .check-list { grid-template-columns: 1fr; } }

/* Branches: the ones the tutor goes to lit (their own colour, with a soft glow); the others grey */
.fl-brs { gap: 6px; }
.fl-br.is-on { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent), 0 0 10px color-mix(in srgb, currentColor 45%, transparent); }
.fl-br.is-off { color: var(--gray-9) !important; background: var(--gray-3) !important; border-color: transparent !important; box-shadow: none; opacity: .7; }
.fl-banner .fl-br.is-off { color: #ffffff66 !important; background: #ffffff12 !important; }
.fl-banner .fl-br.is-on { box-shadow: 0 0 0 1px #ffffff40, 0 0 12px color-mix(in srgb, currentColor 60%, transparent); }

/* Kemas kini profil: one form, in sections */
.fl-form-sec { margin: 0; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 12px; }
.fl-form-sec > legend { padding: 0 8px; font-size: 13px; font-weight: 700; color: var(--gray-12); }
.fl-form-sec .fl-edu-row { padding: 10px 12px 12px; border: 1px dashed var(--line-strong); border-radius: 10px; }

/* Profil Pekerja: a bigger photo on the page; in Kemas kini profil, a smaller one beside its buttons */
.fl-foto-card .fl-foto { width: 190px; height: 190px; font-size: 68px; }
.fl-foto-edit { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 20px; }
.fl-foto.fl-foto-sm { width: 96px; height: 96px; font-size: 36px; flex-shrink: 0; }
.fl-foto-edit .fl-foto-actions { justify-content: flex-start; align-items: center; }
.fl-foto-edit .hint { width: 100%; margin: 4px 0 0; }
@media (max-width: 760px) { .fl-foto-card .fl-foto { width: 160px; height: 160px; font-size: 56px; } }

/* ---------- Komisen: the month as an invoice ---------- */
.kom { display: flex; flex-direction: column; gap: 20px; }
.kom-title { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px 24px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.kom-kicker { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green-11); }
.kom-title h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--gray-12); }
.kom-total { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.kom-total > span:first-child { font-size: 12px; color: var(--gray-11); }
.kom-total strong { font-size: 30px; line-height: 1.1; letter-spacing: -.03em; color: var(--green-11); }
.kom-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin: 0; padding: 8px 24px 16px; }
.kom-meta > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.kom-meta dt { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--gray-10); }
.kom-meta dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--gray-12); }
.kom-sec-title { margin: 0; padding: 14px 20px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray-12); border-bottom: 1px solid var(--line); background: var(--gray-2); }
.view .kom .kom-t th, .view .kom .kom-t td { text-align: left; padding: 10px 14px; font-size: 13px; vertical-align: top; }
.view .kom .kom-t .num { text-align: right; white-space: nowrap; }
.view .kom .kom-t .kom-c { text-align: center; }
.kom-t tfoot th { border-top: 2px solid var(--line-strong); font-weight: 700; color: var(--gray-12); background: var(--gray-2); }
.kom-t .kom-grand { font-size: 15px; color: var(--green-11); }
.kom-wrap { white-space: normal; overflow-wrap: anywhere; }
.kom-dim { margin-top: 2px; font-size: 12px; color: var(--gray-10); }
.kom-branch { display: flex; flex-direction: column; gap: 14px; }
.kom-branch-title { margin: 8px 0 0; padding: 10px 16px; border-radius: 10px; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: .1em; color: #fff; background: linear-gradient(120deg, #12283a, #1d4a5e); box-shadow: inset 0 -2px 0 #c9a24a; }
.kom-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 16px; margin: 0; padding: 14px 20px 6px; }
.kom-info > div { padding: 6px 0 10px; }
.kom-info dt { font-size: 11px; color: var(--gray-10); text-transform: uppercase; letter-spacing: .05em; }
.kom-info dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--gray-12); }
.kom-note { margin: 0; padding: 0 20px 8px; }
.view .kom .kom-att th.kom-c span { display: block; font-size: 11px; font-weight: 400; color: var(--gray-10); }
.kom-mark { display: inline-block; min-width: 44px; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; color: var(--gray-9); }
.kom-mark.is-hadir { color: var(--green-11); background: var(--green-3); }
.kom-mark.is-th { color: var(--red-11); background: var(--red-3); }
.kom-mark.is-off { color: var(--gray-9); background: var(--gray-3); font-weight: 500; }
.kom-mark.is-cuti { color: var(--blue-11); background: var(--blue-3); }
.kom-mark.is-ganti { color: var(--amber-11, #8a5a00); background: var(--amber-3, #fdf0cf); }
.kom-ganti-nota { color: var(--amber-11, #8a5a00); }
.view .kom .kom-status td { font-size: 11px; color: var(--gray-11); background: var(--gray-2); }
.kom-calc { margin: 0; padding: 12px 20px 16px; font-size: 12px; color: var(--gray-11); border-top: 1px solid var(--line); }
@media (max-width: 760px) {
  .kom-title { padding: 16px; }
  .kom-total { align-items: flex-start; }
  .kom-meta { padding: 4px 16px 12px; }
}

/* Komisen as real tables: every cell ruled, vertical lines included, like the paper invoice */
.view .kom .kom-t { border-collapse: collapse; width: 100%; }
.view .kom .kom-t th, .view .kom .kom-t td { border: 1px solid var(--line-strong); }
.view .kom .kom-t thead th { background: var(--gray-3); font-size: 12px; font-weight: 700; color: var(--gray-12); vertical-align: middle; }
.view .kom .scroll-x { margin: 12px 16px 16px; width: auto; }
.kom-class .scroll-x { margin-top: 0; }

/* The invoice's details and each class's details: label | value rows in a ruled box */
.kom-meta, .kom-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 16px; padding: 0;
  border-top: 1px solid var(--line-strong); border-left: 1px solid var(--line-strong); }
.kom-meta > div, .kom-info > div { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); padding: 0;
  border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.kom-meta dt, .kom-info dt { display: flex; align-items: center; padding: 9px 12px; border-right: 1px solid var(--line-strong); background: var(--gray-3);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gray-12); }
.kom-meta dd, .kom-info dd { display: flex; align-items: center; margin: 0; padding: 9px 12px; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.kom-info { margin-bottom: 12px; }
@media (max-width: 760px) {
  .kom-meta, .kom-info { grid-template-columns: 1fr; margin: 12px; }
  .view .kom .scroll-x { margin: 8px 12px 12px; }
}

/* Komisen: everything centred in its cell */
.view .kom .kom-t th, .view .kom .kom-t td, .view .kom .kom-t .num, .view .kom .kom-t .kom-c { text-align: center; vertical-align: middle; }
.kom-meta dt, .kom-meta dd, .kom-info dt, .kom-info dd { justify-content: center; text-align: center; }
.kom-calc, .kom-note { text-align: center; }

/* Komisen: the session columns (M1, M2, …) all the same width; a long status wraps inside its column */
.view .kom .kom-att .kom-m { width: 120px; min-width: 120px; max-width: 120px; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; }

/* Komisen on smaller screens. iPad / tablet: narrower session columns so the whole class table fits.
   Phone (iPhone 16 / 16 Plus): compact cells, HADIR as ✓, so a class's four sessions fit across the screen. */
.kom-mark .kom-s { display: none; }
@media (max-width: 1279px) {
  .view .kom .kom-t th, .view .kom .kom-t td { padding: 8px 8px; font-size: 12px; }
  .view .kom .kom-att .kom-m { width: 76px; min-width: 76px; max-width: 76px; }
}
@media (max-width: 600px) {
  .view .kom .kom-t th, .view .kom .kom-t td { padding: 6px 4px; font-size: 11px; }
  .view .kom .kom-t thead th { font-size: 10.5px; }
  .view .kom .kom-att .kom-m { width: 38px; min-width: 38px; max-width: 38px; }
  .view .kom .kom-att th.kom-c span { font-size: 9.5px; }
  .view .kom .kom-status td.kom-m { font-size: 8.5px; overflow-wrap: normal; word-break: keep-all; padding-inline: 1px; }
  .kom-mark { min-width: 0; padding: 2px 4px; font-size: 10px; }
  .kom-mark .kom-l { display: none; }
  .kom-mark .kom-s { display: inline; font-size: 12px; }
  .view .kom .scroll-x { margin: 8px 8px 10px; }
  .kom-sec-title { padding: 12px 14px; font-size: 12px; }
  .kom-branch-title { font-size: 13px; }
  .kom-total strong { font-size: 26px; }
}

/* Komisen: a session that was not this tutor's (taught by another, cancelled, made up later) is blacked out */
.view .kom .kom-att td.kom-x { background: #111 !important; }

/* Catatan: the tutor's note on the month, at the bottom of Komisen */
.kom-catatan { display: flex; flex-direction: column; }
.kom-catatan > .kom-dim, .kom-catatan > .kom-catatan-teks { margin: 16px 20px 0; text-align: center; }
.kom-catatan > .kom-dim:last-child { margin-bottom: 16px; }
.kom-catatan-teks { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; color: var(--gray-12); }
.kom-catatan textarea { margin: 12px 20px 0; width: auto; min-height: 96px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.6; }
.kom-catatan-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 20px 16px; }
.kom-catatan-foot .kom-dim { margin: 0; }
.kom-th { color: var(--red-11); font-size: .92em; }
.kom-panduan { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px 20px 16px 38px; font-size: 13.5px; line-height: 1.55; color: var(--gray-11); }
.kom-contoh { padding: 14px 16px 16px; }
.kom-contoh > p:first-child { margin: 0 0 10px; font-size: 13.5px; color: var(--gray-12); }