/* Admin workspace additions. The admin body carries both tw-teacher (the shared workspace skin in
   teacher-workspace.css) and tw-admin (the rules below). */

/* ---------- Home ---------- */
body.tw-admin #app .aw-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
body.tw-admin #app .tw-kpi--pink { background: #ffe9f2; border-color: #fbd0e2; color: #9b1d55; }
body.tw-admin #app .tw-kpi.at-admin-home-income-metric { position: relative; cursor: default; }
body.tw-admin #app .tw-kpi.at-admin-home-income-metric b { font-size: 20px; }
body.tw-admin #app .aw-income-toggle { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: grid; place-items: center; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0 !important; border-radius: 50%; background: rgba(255, 255, 255, .7) !important; color: inherit !important; cursor: pointer; }
body.tw-admin #app .aw-income-toggle .tw-icon { width: 16px; height: 16px; }
body.tw-admin #app .aw-income-toggle[aria-pressed="true"] { opacity: .7; }
body.tw-admin #app .aw-follow-icon { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--tw-tone) 14%, #fff); color: var(--tw-tone); }
body.tw-admin #app .aw-follow-icon .tw-icon { width: 18px; height: 18px; }
body.tw-admin #app .aw-follow-count { min-width: 30px; padding: 3px 9px; border-radius: var(--ds-radius-full); background: var(--ds-primary-50); color: var(--ds-primary-700); font-weight: 800; text-align: center; }
body.tw-admin #app .aw-gchips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.tw-admin #app .aw-home-note { margin: 4px 0 0; color: var(--ds-text-subtle); font-size: var(--ds-text-xs); text-align: center; }
body.tw-admin #app .content > .notice.aw-footnote { display: none; }

/* ---------- Shared table tools ---------- */
body.tw-admin #app .aw-accounts { display: grid; gap: 14px; padding: 16px; }
body.tw-admin #app .aw-search { flex: none; width: 100%; }
body.tw-admin #app .aw-search input { min-height: 46px; font-size: var(--ds-text-md); }
body.tw-admin #app .aw-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.tw-admin #app .aw-table-tools .tw-tabs { flex: 0 1 auto; }
body.tw-admin #app .aw-table-tools .tw-tabs button { flex: 0 0 auto; padding: 0 14px; }
body.tw-admin #app .aw-table-tools .ds-select { flex: 0 1 200px; min-width: 150px; }
body.tw-admin #app .aw-search-inline { flex: 1 1 220px; max-width: 340px; }
body.tw-admin #app .aw-results { margin-inline-start: auto; color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-admin #app .aw-toolbar-card { padding: 12px; margin-bottom: 14px; }
body.tw-admin #app .aw-table-wrap { overflow: visible; }
body.tw-admin #app .aw-table th, body.tw-admin #app .aw-table td { padding-block: 10px; }
body.tw-admin #app .aw-table tbody tr:hover { background: var(--ds-primary-50); }
body.tw-admin #app .aw-person-copy { display: grid; line-height: 1.3; }
body.tw-admin #app .aw-person-copy small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 500; }
body.tw-admin #app .aw-stack { display: grid; gap: 2px; line-height: 1.35; }
body.tw-admin #app .aw-stack a { color: var(--ds-primary-700); font-size: var(--ds-text-xs); text-decoration: none; }
body.tw-admin #app .aw-stack a:hover { text-decoration: underline; }
body.tw-admin #app .aw-missing { display: inline-flex; align-items: center; gap: 5px; color: var(--ds-text-subtle); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-missing .tw-icon { width: 14px; height: 14px; color: #d99200; }
body.tw-admin #app .aw-status { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border: 0 !important; border-radius: var(--ds-radius-full); font: inherit; font-size: var(--ds-text-xs) !important; font-weight: 700; white-space: nowrap; box-shadow: none !important; }
body.tw-admin #app .aw-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
body.tw-admin #app .aw-status.is-on { background: #e3f7ef !important; color: #0c6e52 !important; }
body.tw-admin #app .aw-status.is-off { background: #fff3dc !important; color: #8a5a00 !important; }
body.tw-admin #app .aw-status.is-none { background: var(--ds-surface-muted) !important; color: var(--ds-text-muted) !important; cursor: pointer; }
body.tw-admin #app .aw-status.is-none:hover { background: var(--ds-primary-50) !important; color: var(--ds-primary-700) !important; }
body.tw-admin #app .aw-danger { color: var(--ds-red-700) !important; }
body.tw-admin #app .aw-danger:hover { background: var(--ds-red-50) !important; }

/* Row action menu */
body.tw-admin #app .aw-menu { position: relative; display: inline-block; }
body.tw-admin #app .aw-menu > summary { list-style: none; cursor: pointer; }
body.tw-admin #app .aw-menu > summary::-webkit-details-marker { display: none; }
body.tw-admin #app .aw-menu[open] > summary { background: var(--ds-primary-50) !important; color: var(--ds-primary-700) !important; }
body.tw-admin #app .aw-menu-list { position: absolute; z-index: 30; inset-block-start: calc(100% + 6px); inset-inline-end: 0; display: grid; min-width: 210px; padding: 6px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); box-shadow: var(--ds-shadow-lg); }
body.tw-admin #app .aw-menu-list button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border: 0 !important; border-radius: var(--ds-radius-sm); background: transparent !important; color: var(--ds-ink) !important; font: inherit; font-size: var(--ds-text-sm); font-weight: 600; text-align: start; cursor: pointer; box-shadow: none !important; }
body.tw-admin #app .aw-menu-list button:hover, body.tw-admin #app .aw-menu-list button:focus-visible { background: var(--ds-surface-muted) !important; }
body.tw-admin #app .aw-menu-list button .tw-icon { width: 17px; height: 17px; color: var(--ds-text-muted); }
body.tw-admin #app .aw-menu-list button.is-warn, body.tw-admin #app .aw-menu-list button.is-warn .tw-icon { color: #8a5a00 !important; }
body.tw-admin #app .aw-menu-list button.is-danger { margin-top: 4px; border-top: 1px solid var(--ds-border) !important; border-radius: 0 0 var(--ds-radius-sm) var(--ds-radius-sm); }
body.tw-admin #app .aw-menu-list button.is-danger, body.tw-admin #app .aw-menu-list button.is-danger .tw-icon { color: var(--ds-red-700) !important; }

/* ---------- Groups ---------- */
body.tw-admin #app .aw-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
body.tw-admin #app .aw-group { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: var(--ds-shadow-xs); }
body.tw-admin #app .aw-group.is-paused { background: var(--ds-surface-muted); }
body.tw-admin #app .aw-group > header { display: flex; align-items: flex-start; gap: 12px; height: auto; padding: 0; border: 0; background: none; position: static; }
body.tw-admin #app .aw-group > header > div { flex: 1; min-width: 0; }
body.tw-admin #app .aw-group h3 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-lg); }
body.tw-admin #app .aw-group header p { margin: 2px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-group-facts { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); }
body.tw-admin #app .aw-group-facts > div { display: grid; gap: 2px; }
body.tw-admin #app .aw-group-facts dt { display: flex; align-items: center; gap: 5px; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-group-facts dt .tw-icon { width: 14px; height: 14px; }
body.tw-admin #app .aw-group-facts dd { margin: 0; color: var(--ds-ink); font-weight: 700; }
body.tw-admin #app .aw-group-students { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
body.tw-admin #app .aw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-full); background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-text-xs); font-weight: 600; }
body.tw-admin #app .aw-chip .tw-avatar--sm { width: 22px; height: 22px; font-size: 11px; }
body.tw-admin #app .aw-chip--more { padding-inline: 10px; background: var(--ds-primary-50); color: var(--ds-primary-700); }
body.tw-admin #app .aw-group > footer { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ds-border); }
body.tw-admin #app .aw-group > footer .aw-danger { margin-inline-start: auto; }
body.tw-admin #app .aw-group > footer .ds-btn--sm { padding-inline: 10px; }
body.tw-admin #app .tw-sidebar-user .tw-avatar { font-size: 13px; letter-spacing: .02em; }

/* ---------- Schedule ---------- */
body.tw-admin #app .aw-day { margin-bottom: 18px; }
body.tw-admin #app .aw-day h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--ds-ink); font-size: var(--ds-text-md); }
body.tw-admin #app .aw-day h3 small { margin-inline-start: auto; color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 600; }
body.tw-admin #app .aw-day-tag { padding: 2px 10px; border-radius: var(--ds-radius-full); background: var(--ds-primary-600); color: #fff; font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-day ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.tw-admin #app .aw-class { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); }
body.tw-admin #app .aw-class.is-past { background: var(--ds-surface-muted); opacity: .85; }
body.tw-admin #app .aw-class.is-current { border-color: #9be0c5; box-shadow: 0 0 0 3px #e3f7ef; }
body.tw-admin #app .aw-class-time { display: grid; flex: 0 0 74px; line-height: 1.3; text-align: center; }
body.tw-admin #app .aw-class-time b { color: var(--ds-ink); font-size: var(--ds-text-md); }
body.tw-admin #app .aw-class-time small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-class-bar { flex: 0 0 4px; align-self: stretch; border-radius: 4px; background: var(--tw-tone); }
body.tw-admin #app .aw-class-main { display: grid; flex: 1; gap: 3px; min-width: 0; }
body.tw-admin #app .aw-class-main b { color: var(--ds-ink); }
body.tw-admin #app .aw-class-main small { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-class-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }

/* ---------- Lesson videos ---------- */
body.tw-admin #app .aw-video-tip { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
body.tw-admin #app .aw-video-tip .tw-icon { flex: 0 0 18px; width: 18px; height: 18px; }
body.tw-admin #app .aw-video-track { margin-bottom: 14px; padding: 16px; }
body.tw-admin #app .aw-video-head { position: static; display: flex; align-items: center; gap: 12px; height: auto; padding: 0; border: 0; background: none; }
body.tw-admin #app .aw-video-head > div { flex: 1; min-width: 0; }
body.tw-admin #app .aw-video-head h3 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-lg); }
body.tw-admin #app .aw-video-head p { margin: 2px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-video-head .tw-group-mark .tw-icon { width: 18px; height: 18px; }
body.tw-admin #app .aw-video-count { display: grid; text-align: center; line-height: 1.2; }
body.tw-admin #app .aw-video-count b { color: var(--ds-primary-700); font-size: var(--ds-text-xl); }
body.tw-admin #app .aw-video-count small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-video-progress { height: 6px; margin: 12px 0; overflow: hidden; border-radius: var(--ds-radius-full); background: var(--ds-surface-muted); }
body.tw-admin #app .aw-video-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ds-primary-500), var(--ds-sky-500)); }
body.tw-admin #app .aw-video-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
body.tw-admin #app .aw-video { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
body.tw-admin #app .aw-video.has-video { background: #f7fcfa; }
body.tw-admin #app .aw-video-number { display: grid; flex: 0 0 34px; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ds-primary-50); color: var(--ds-primary-700); font-weight: 800; }
body.tw-admin #app .aw-video-main { display: grid; flex: 1; gap: 4px; min-width: 0; }
body.tw-admin #app .aw-video-main b { overflow: hidden; color: var(--ds-ink); text-overflow: ellipsis; white-space: nowrap; }
body.tw-admin #app .aw-video-actions { display: flex; flex: 0 0 auto; gap: 6px; }

/* ---------- Discount codes (discount-codes.js) ---------- */
body.tw-admin #app .dc-code { display: grid; gap: 2px; }
body.tw-admin #app .dc-code-text { display: inline-flex; align-items: center; gap: 4px; }
body.tw-admin #app .dc-code-text bdi { padding: 3px 10px; border: 1px dashed var(--ds-primary-300); border-radius: 8px; background: var(--ds-primary-50); color: var(--ds-primary-800); font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: 800; letter-spacing: .04em; }
body.tw-admin #app .dc-copy { width: 30px; height: 30px; min-height: 30px; }
body.tw-admin #app .dc-copy .tw-icon { width: 15px; height: 15px; }
body.tw-admin #app .dc-code small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 500; }
body.tw-admin #app .dc-value { color: var(--ds-ink); font-size: var(--ds-text-lg); }
body.tw-admin #app .dc-uses { display: grid; gap: 4px; min-width: 110px; }
body.tw-admin #app .dc-uses small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .dc-uses-bar { height: 5px; overflow: hidden; border-radius: var(--ds-radius-full); background: var(--ds-surface-muted); }
body.tw-admin #app .dc-uses-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ds-primary-500); }
body.tw-admin #modal .dc-form fieldset { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: 12px; }
body.tw-admin #modal .dc-form legend { padding: 0 6px; font-weight: 700; }
body.tw-admin #modal .dc-form fieldset label, body.tw-admin #modal .dc-active { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
body.tw-admin #modal .dc-code-input { display: flex; gap: 8px; }
body.tw-admin #modal .dc-code-input input { flex: 1; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
body.tw-admin #modal .dc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.tw-admin #app .enrollment-discount-chip { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: var(--ds-radius-full); background: #e3f7ef; color: #0c6e52; font-size: 11px; font-weight: 700; }
@media (max-width: 720px) { body.tw-admin #modal .dc-row { grid-template-columns: 1fr; } }

/* ---------- Inboxes ---------- */
body.tw-admin #app .enrollment-admin-page { margin: 0; padding: 0; background: none; }
body.tw-admin #app .enrollment-summary { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  body.tw-admin #app .aw-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.tw-admin #app .aw-gchips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  body.tw-admin #app .aw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tw-admin #app .aw-gchips { grid-template-columns: 1fr; }
  body.tw-admin #app .aw-table-tools { gap: 8px; }
  body.tw-admin #app .aw-table-tools > :is(.tw-tabs, .ds-select, .ds-search, .aw-results) { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; margin: 0; }
  body.tw-admin #app .aw-table-tools .tw-tabs button { flex: 1; }
  body.tw-admin #app .aw-results { margin: 0; }
  body.tw-admin #app .aw-table .tw-cell-actions { justify-content: flex-end; }
  body.tw-admin #app .aw-group-grid { grid-template-columns: 1fr; }
  body.tw-admin #app .aw-class { flex-wrap: wrap; gap: 10px; }
  body.tw-admin #app .aw-class-time { flex-basis: 56px; }
  body.tw-admin #app .aw-class-main { flex-basis: calc(100% - 90px); }
  body.tw-admin #app .aw-class-actions { flex: 1 1 100%; justify-content: flex-end; }
  body.tw-admin #app .aw-video { flex-wrap: wrap; }
  body.tw-admin #app .aw-video-main { flex-basis: calc(100% - 50px); }
  body.tw-admin #app .aw-video-actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* ---------- Send announcement ---------- */
body.tw-admin #app .aw-mode-tabs { flex-wrap: wrap; }
body.tw-admin #app .aw-mode-tabs button { flex: 1 1 auto; }
body.tw-admin #app .aw-audience { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--ds-primary-200); border-radius: var(--ds-radius-md); background: var(--ds-primary-50); }
body.tw-admin #app .aw-audience-icon { display: grid; flex: 0 0 46px; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--tw-tone) 16%, #fff); color: var(--tw-tone); }
body.tw-admin #app .aw-audience-icon .tw-icon { width: 22px; height: 22px; }
body.tw-admin #app .aw-audience b { color: var(--ds-ink); font-size: var(--ds-text-lg); }
body.tw-admin #app .aw-audience p { margin: 4px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-admin #app .aw-broadcast-history { margin-top: 14px; }
body.tw-admin #app .aw-sent { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.tw-admin #app .aw-sent li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
body.tw-admin #app .aw-sent li.is-urgent { border-color: #f5b5b5; background: #fff6f6; }
body.tw-admin #app .aw-sent b { color: var(--ds-ink); font-size: var(--ds-text-sm); }
body.tw-admin #app .aw-sent small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-sent .ds-btn { justify-self: start; }

/* ---------- Support messages ---------- */
body.tw-admin #app .aw-inbox { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 14px; align-items: start; }
body.tw-admin #app .aw-inbox-list { padding: 8px; max-height: 70vh; overflow: auto; }
body.tw-admin #app .aw-inbox-list ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
body.tw-admin #app .aw-ticket { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid transparent !important; border-radius: var(--ds-radius-md); background: transparent !important; color: inherit !important; font: inherit; text-align: start; cursor: pointer; box-shadow: none !important; }
body.tw-admin #app .aw-ticket:hover { background: var(--ds-surface-muted) !important; }
body.tw-admin #app .aw-ticket.is-active { border-color: var(--ds-primary-200) !important; background: var(--ds-primary-50) !important; }
body.tw-admin #app .aw-ticket-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
body.tw-admin #app .aw-ticket-top { display: flex; justify-content: space-between; gap: 8px; }
body.tw-admin #app .aw-ticket-top b { color: var(--ds-ink); font-size: var(--ds-text-sm); }
body.tw-admin #app .aw-ticket-top small, body.tw-admin #app .aw-ticket-snippet { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-ticket-subject { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--ds-text); font-size: var(--ds-text-sm); text-overflow: ellipsis; white-space: nowrap; }
body.tw-admin #app .aw-ticket.is-new .aw-ticket-subject { color: var(--ds-ink); font-weight: 700; }
body.tw-admin #app .aw-ticket-snippet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.tw-admin #app .aw-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-primary-600); }
body.tw-admin #app .aw-role { display: inline-block; padding: 1px 8px; border-radius: var(--ds-radius-full); font-size: 11px; font-weight: 700; white-space: nowrap; }
body.tw-admin #app .aw-role--student { background: #efe9ff; color: #4b2aa8; }
body.tw-admin #app .aw-role--teacher { background: #e6f2ff; color: #1b5aa0; }
body.tw-admin #app .aw-inbox-detail { position: sticky; top: 84px; padding: 20px; }
body.tw-admin #app .aw-ticket-detail { display: grid; gap: 16px; }
body.tw-admin #app .aw-ticket-detail > header { position: static; display: block; height: auto; padding: 0; border: 0; background: none; }
body.tw-admin #app .aw-ticket-detail h2 { margin: 8px 0 2px; color: var(--ds-ink); font-size: var(--ds-text-xl); }
body.tw-admin #app .aw-ticket-detail header small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-sender { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); }
body.tw-admin #app .aw-sender > div { display: grid; flex: 1; gap: 3px; min-width: 0; }
body.tw-admin #app .aw-sender b { color: var(--ds-ink); }
body.tw-admin #app .aw-sender small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-sender a { color: var(--ds-primary-700); }
body.tw-admin #app .aw-ticket-message { padding: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); color: var(--ds-text); font-size: var(--ds-text-md); line-height: 1.8; white-space: normal; overflow-wrap: anywhere; }
body.tw-admin #app .aw-ticket-actions { position: static; display: flex; flex-wrap: wrap; gap: 8px; height: auto; padding: 0; border: 0; background: none; }
body.tw-admin #app .aw-ticket-tip { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .aw-ticket-tip .tw-icon { flex: 0 0 15px; width: 15px; height: 15px; color: var(--ds-primary-500); }
@media (max-width: 900px) {
  body.tw-admin #app .aw-inbox { grid-template-columns: 1fr; }
  body.tw-admin #app .aw-inbox-list { max-height: 360px; }
  body.tw-admin #app .aw-inbox-detail { position: static; }
  body.tw-admin #app .aw-ticket-actions > * { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Contact messages ---------- */
body.tw-admin #app .aw-reach-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
body.tw-admin #app .aw-reach { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); color: var(--ds-ink); text-decoration: none; }
body.tw-admin #app .aw-reach:hover { border-color: var(--ds-primary-300); background: var(--ds-primary-50); }
body.tw-admin #app .aw-reach > .tw-icon { flex: 0 0 20px; width: 20px; height: 20px; color: var(--ds-primary-600); }
body.tw-admin #app .aw-reach span { display: grid; min-width: 0; }
body.tw-admin #app .aw-reach small { overflow: hidden; color: var(--ds-text-muted); font-size: var(--ds-text-xs); text-overflow: ellipsis; white-space: nowrap; }
body.tw-admin #app .aw-reach--whatsapp { border-color: #9be0c5; background: #effaf5; }
body.tw-admin #app .aw-reach--whatsapp > .tw-icon { color: #0c9b6f; }
body.tw-admin #app .aw-ticket-actions .aw-danger { margin-inline-start: auto; }
body.tw-admin #app .aw-reach--whatsapp, body.tw-admin #app .aw-reach--whatsapp:hover { border-color: #0c9b6f !important; background: #0c9b6f !important; color: #fff !important; }
body.tw-admin #app .aw-reach--whatsapp :is(b, small, .tw-icon) { color: #fff !important; opacity: 1; }

/* ---------- Enrollment review (enrollment-admin.js) ---------- */
body.tw-admin #app .er-detail h2 small { color: var(--ds-text-muted); font-size: var(--ds-text-md); font-weight: 500; }
body.tw-admin #app .er-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: none; }
body.tw-admin #app .er-step { position: relative; display: flex; gap: 12px; padding: 0 0 18px; }
body.tw-admin #app .er-step:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 15px; top: 34px; bottom: 4px; width: 2px; background: var(--ds-border); }
body.tw-admin #app .er-step.is-done:not(:last-child)::before { background: #9be0c5; }
body.tw-admin #app .er-step-mark { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ds-border-strong); border-radius: 50%; background: var(--ds-surface); color: var(--ds-text-muted); font-weight: 800; }
body.tw-admin #app .er-step.is-current .er-step-mark { border-color: var(--ds-primary-500); color: var(--ds-primary-700); box-shadow: 0 0 0 4px var(--ds-primary-50); }
body.tw-admin #app .er-step.is-done .er-step-mark { border-color: #0c9b6f; background: #0c9b6f; color: #fff; }
body.tw-admin #app .er-step-mark .tw-icon { width: 16px; height: 16px; }
body.tw-admin #app .er-step > div { display: grid; flex: 1; gap: 8px; min-width: 0; padding-top: 4px; }
body.tw-admin #app .er-step b { color: var(--ds-ink); }
body.tw-admin #app .er-step-body { display: grid; gap: 10px; }
body.tw-admin #app .er-send { display: flex; flex-wrap: wrap; gap: 8px; }
body.tw-admin #app .aw-msg-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
body.tw-admin #app .aw-msg-tab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--tw-line, #ece6f6); border-radius: 14px; background: #fff; color: inherit; font: inherit; text-align: start; cursor: pointer; }
body.tw-admin #app .aw-msg-tab b { display: block; font-size: 15px; }
body.tw-admin #app .aw-msg-tab small { display: block; color: var(--tw-muted, #857d9c); font-size: 12.5px; }
body.tw-admin #app .aw-msg-tab.is-active { border-color: #7c3aed; background: #f7f3ff; box-shadow: inset 0 0 0 1px #7c3aed; }
@media (max-width: 560px) { body.tw-admin #app .aw-msg-tab small { display: none; } }
body.tw-admin #app .er-send .ds-btn { flex: 1 1 160px; justify-content: center; }
body.tw-admin #app .er-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
body.tw-admin #app .er-facts > div { padding: 10px 12px; border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); }
body.tw-admin #app .er-facts dt { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .er-facts dd { display: grid; gap: 2px; margin: 2px 0 0; color: var(--ds-ink); font-weight: 700; }
body.tw-admin #app .er-facts dd small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 500; }
body.tw-admin #app .er-amount { color: var(--ds-primary-700); font-size: var(--ds-text-xl); }
body.tw-admin #app .er-receipt { display: block; max-width: 260px; overflow: hidden; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); }
body.tw-admin #app .er-receipt img { display: block; width: 100%; max-height: 340px; object-fit: contain; }
body.tw-admin #app .er-credentials { display: grid; gap: 6px; margin: 0; padding: 12px; border: 1px solid #9be0c5; border-radius: var(--ds-radius-md); background: #effaf5; }
body.tw-admin #app .er-credentials > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.tw-admin #app .er-credentials dt { color: #2f5d4d; font-size: var(--ds-text-xs); }
body.tw-admin #app .er-credentials dd { display: flex; align-items: center; gap: 4px; margin: 0; }
body.tw-admin #app .er-credentials code { padding: 2px 8px; border-radius: 6px; background: #fff; color: var(--ds-ink); font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: 700; }
body.tw-admin #app .er-send { justify-self: start; }
body.tw-admin #app .er-contact { display: grid; gap: 8px; }
@media (max-width: 720px) { body.tw-admin #app .er-facts { grid-template-columns: 1fr; } }

/* ---------- Subscriptions (subscriptions-admin.js) ---------- */
body.tw-admin #app .aw-status.is-danger { background: #ffe4e4 !important; color: #b42318 !important; }
body.tw-admin #app .sub-period { display: grid; gap: 4px; min-width: 190px; }
body.tw-admin #app .sub-period > span:first-child { color: var(--ds-text); font-size: var(--ds-text-sm); }
body.tw-admin #app .sub-period small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .sub-bar { height: 6px; overflow: hidden; border-radius: var(--ds-radius-full); background: var(--ds-surface-muted); }
body.tw-admin #app .sub-bar span { display: block; height: 100%; border-radius: inherit; background: var(--ds-mint-500); }
body.tw-admin #app .sub-bar.ending span { background: #d99200; }
body.tw-admin #app .sub-bar.expired span { background: var(--ds-red-500); }
body.tw-admin #app .sub-bar.paused span { background: var(--ds-text-subtle); }
body.tw-admin #app .sub-actions { display: inline-flex; align-items: center; gap: 6px; }
body.tw-admin #app .sub-pending { color: var(--ds-primary-700); font-weight: 700; }
body.tw-admin #app .er-kind { display: inline-block; margin-inline-start: 4px; padding: 0 7px; border-radius: var(--ds-radius-full); background: var(--ds-sky-50); color: var(--ds-sky-700); font-size: 11px; font-weight: 700; vertical-align: middle; }
body.tw-admin #modal .sub-preview { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--ds-primary-50); color: var(--ds-primary-800); }
body.tw-admin #modal .sub-preview .tw-icon { flex: 0 0 18px; width: 18px; height: 18px; }
body.tw-admin #modal .sub-history td small { color: var(--ds-text-muted); }

/* ---------- Courses (courses-admin.js) ---------- */
body.tw-admin #app .crs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
body.tw-admin #app .crs-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
body.tw-admin #app .crs-card-preview .cc-card { box-shadow: none; }
body.tw-admin #app .crs-card-preview .cc-card:hover { transform: none; }
body.tw-admin #app .crs-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
body.tw-admin #app .crs-numbers { flex: 1 1 100%; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .crs-requests { padding: 2px 10px; border-radius: var(--ds-radius-full); background: var(--ds-primary-600); color: #fff; font-size: 11px; font-weight: 700; }
body.tw-admin #app .crs-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
body.tw-admin #app .crs-detail-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 14px 16px; }
body.tw-admin #app .crs-detail-head img { flex: 0 0 96px; width: 96px; height: 64px; border-radius: 12px; object-fit: cover; }
body.tw-admin #app .crs-detail-head > div { flex: 1; min-width: 0; }
body.tw-admin #app .crs-detail-head h2 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-xl); }
body.tw-admin #app .crs-detail-head p { margin: 2px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-admin #app .crs-section { margin-bottom: 18px; }
body.tw-admin #app .crs-section-head { position: static; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: auto; margin: 0 0 10px; padding: 0; border: 0; background: none; }
body.tw-admin #app .crs-section-head h3 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-lg); }
body.tw-admin #app .crs-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
body.tw-admin #app .crs-group { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); }
body.tw-admin #app .crs-group.is-done { background: var(--ds-surface-muted); }
body.tw-admin #app .crs-group > header, body.tw-admin #app .crs-group > footer { position: static; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: auto; padding: 0; border: 0; background: none; }
body.tw-admin #app .crs-group b { color: var(--ds-ink); }
body.tw-admin #app .crs-group small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .crs-progress { display: block; height: 6px; overflow: hidden; border-radius: var(--ds-radius-full); background: var(--ds-surface-muted); }
body.tw-admin #app .crs-progress span { display: block; height: 100%; border-radius: inherit; background: var(--ds-primary-500); }
body.tw-admin #app .crs-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .crs-note .tw-icon { flex: 0 0 15px; width: 15px; height: 15px; color: var(--ds-primary-500); }
body.tw-admin #app .crs-move { min-width: 150px; }
body.tw-admin #modal.crs-modal { width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; background: #fff; }
body.tw-admin #modal.crs-modal[open] { display: flex; flex-direction: column; }
body.tw-admin #modal .crs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid #ece6f5; background: #fff; }
body.tw-admin #modal .crs-head h2 { margin: 0; font-size: 20px; }
body.tw-admin #modal .crs-close { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: #f4f0fa; color: #4b3f66; font-size: 22px; line-height: 1; cursor: pointer; }
body.tw-admin #modal .crs-form-layout { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; padding: 20px 24px; background: #faf8fd; }
body.tw-admin #modal .crs-form { display: grid; gap: 16px; min-width: 0; }
body.tw-admin #modal .crs-sec { display: grid; gap: 14px; padding: 18px; border: 1px solid #ece6f5; border-radius: 14px; background: #fff; }
body.tw-admin #modal .crs-sec h3 { margin: 0; color: #322747; font-size: 15px; font-weight: 700; }
body.tw-admin #modal .crs-field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; color: #322747; font-size: 13px; font-weight: 600; }
body.tw-admin #modal .crs-field > span:first-child { display: flex; align-items: center; gap: 6px; min-height: 20px; }
body.tw-admin #modal .crs-field em { padding: 1px 7px; border-radius: 999px; background: #f3eefc; color: #6b6385; font-size: 11px; font-style: normal; font-weight: 500; }
body.tw-admin #modal .crs-field input, body.tw-admin #modal .crs-field select, body.tw-admin #modal .crs-field textarea { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 9px 12px; border: 1px solid #ddd3ee; border-radius: 10px; background: #fff; color: #231a35; font: inherit; font-weight: 400; }
body.tw-admin #modal .crs-field textarea { min-height: 76px; resize: vertical; line-height: 1.6; }
body.tw-admin #modal .crs-field :is(input, select, textarea):focus { outline: 2px solid #c4b5fd; outline-offset: 1px; border-color: #7c3aed; }
body.tw-admin #modal .crs-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.tw-admin #modal .crs-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.tw-admin #modal .crs-slug { display: flex; align-items: center; min-height: 44px; overflow: hidden; border: 1px solid #ddd3ee; border-radius: 10px; background: #f8f5fc; }
body.tw-admin #modal .crs-slug b { padding: 0 10px; color: #6b6385; font-size: 13px; font-weight: 500; }
body.tw-admin #modal .crs-slug input { flex: 1; min-width: 0; border: 0; border-radius: 0; }
body.tw-admin #modal .crs-covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
body.tw-admin #modal .crs-covers > label { position: relative; display: block; border-radius: 10px; cursor: pointer; }
body.tw-admin #modal .crs-covers > [hidden] { display: none; }
body.tw-admin #modal .crs-covers input[type="radio"], body.tw-admin #modal .crs-accents input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; pointer-events: none; }
body.tw-admin #modal .crs-covers img { display: block; width: 100%; aspect-ratio: 4/3; border: 3px solid transparent; border-radius: 10px; object-fit: cover; }
body.tw-admin #modal .crs-covers input:checked + img { border-color: #7c3aed; box-shadow: 0 0 0 3px #ede4fd; }
body.tw-admin #modal .crs-covers > .crs-cover-upload { display: grid; place-content: center; justify-items: center; gap: 2px; aspect-ratio: 4/3; box-sizing: border-box; border: 2px dashed #b9a2ea; background: #f6f1fe; color: #5b21b6; font-size: 12px; font-weight: 700; text-align: center; }
body.tw-admin #modal .crs-cover-upload:hover { border-color: #7c3aed; }
body.tw-admin #modal .crs-cover-upload:focus-within { outline: 2px solid #c4b5fd; outline-offset: 1px; }
body.tw-admin #modal .crs-cover-upload input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; }
body.tw-admin #modal .crs-cover-upload .tw-icon { width: 18px; height: 18px; }
body.tw-admin #modal .crs-hint { color: #6b6385; font-size: 12px; font-weight: 400; }
body.tw-admin #modal .crs-toggle { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid #ece6f5; border-radius: 12px; cursor: pointer; }
body.tw-admin #modal .crs-toggle:has(input:checked) { border-color: #c9b4f4; background: #faf6ff; }
body.tw-admin #modal .crs-toggle input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: #7c3aed; }
body.tw-admin #modal .crs-toggle span { display: grid; gap: 2px; min-width: 0; }
body.tw-admin #modal .crs-toggle b { color: #322747; font-size: 14px; font-weight: 600; }
body.tw-admin #modal .crs-toggle small { color: #6b6385; font-size: 12px; font-weight: 400; }
body.tw-admin #modal .crs-accents { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; }
body.tw-admin #modal .crs-accents label { position: relative; cursor: pointer; }
body.tw-admin #modal .crs-accents i { display: block; width: 28px; height: 28px; border: 3px solid #fff; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 1px #ddd3ee; }
body.tw-admin #modal .crs-accents input:checked + i { box-shadow: 0 0 0 3px var(--cc); }
body.tw-admin #modal .crs-preview-side { position: sticky; top: 0; display: grid; gap: 10px; min-width: 0; }
body.tw-admin #modal .crs-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.tw-admin #modal .crs-preview-title { margin: 0; color: #322747; font-size: 15px; font-weight: 700; }
body.tw-admin #modal .crs-preview { max-height: calc(100dvh - 240px); overflow: auto; padding: 12px; border: 1px solid #ece6f5; border-radius: 14px; background: #fff; }
body.tw-admin #modal .crs-page-preview { zoom: .55; }
body.tw-admin #modal .crs-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid #ece6f5; background: #fff; }
body.tw-admin #modal .crs-foot .at-auth-message { flex: 1; margin: 0; font-size: 13px; }
body.tw-admin #modal .crs-foot .at-auth-message:empty { visibility: hidden; }
@media (max-width: 900px) { body.tw-admin #modal .crs-form-layout { grid-template-columns: minmax(0, 1fr); padding: 14px; } body.tw-admin #modal .crs-preview-side { position: static; order: 2; } body.tw-admin #modal .crs-head, body.tw-admin #modal .crs-foot { padding: 12px 16px; } }
@media (max-width: 560px) { body.tw-admin #modal .crs-cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } body.tw-admin #modal .crs-cols2 { grid-template-columns: minmax(0, 1fr); } }

/* Course content (curriculum-admin.js): course switcher, sessions × content table, upcoming alerts. */
body.tw-admin #app .cm-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
body.tw-admin #app .cm-course { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-ink); font: inherit; text-align: start; cursor: pointer; }
body.tw-admin #app .cm-course:hover { border-color: var(--ds-primary-300, #c4b5fd); }
body.tw-admin #app .cm-course.is-on { border-color: var(--ds-primary-500); background: var(--ds-primary-50); box-shadow: 0 0 0 3px var(--ds-primary-100, #ede9fe); }
body.tw-admin #app .cm-course b { overflow: hidden; font-size: var(--ds-text-md, 15px); text-overflow: ellipsis; white-space: nowrap; }
body.tw-admin #app .cm-course small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .cm-meter { display: block; height: 5px; overflow: hidden; border-radius: var(--ds-radius-full); background: var(--ds-surface-muted); }
body.tw-admin #app .cm-meter span { display: block; height: 100%; border-radius: inherit; background: var(--ds-success-500, #16a34a); }
body.tw-admin #app .cm-panel { display: grid; gap: 14px; padding: 18px; }
body.tw-admin #app .cm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
body.tw-admin #app .cm-head h2 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-xl); }
body.tw-admin #app .cm-head p { margin: 2px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-admin #app .cm-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.tw-admin #app .cm-all-ready { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: var(--ds-radius-full); background: #e7f8ef; color: #0f7a4a; font-weight: 700; }
body.tw-admin #app .cm-all-ready .tw-icon { width: 16px; height: 16px; }
body.tw-admin #app .cm-alerts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.tw-admin #app .cm-alert { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #fde3b0; border-radius: var(--ds-radius-md); background: #fff8eb; }
body.tw-admin #app .cm-alert > div { flex: 1; min-width: 0; }
body.tw-admin #app .cm-alert b { display: block; color: #6b4300; font-size: var(--ds-text-sm); }
body.tw-admin #app .cm-alert small { color: #8a6a2c; font-size: var(--ds-text-xs); }
body.tw-admin #app .cm-alert-icon { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #ffecc7; color: #a05a00; }
body.tw-admin #app .cm-alert-icon .tw-icon { width: 17px; height: 17px; }
body.tw-admin #app .cm-table { display: grid; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); overflow: hidden; }
body.tw-admin #app .cm-row { display: grid; grid-template-columns: minmax(200px, 2.2fr) repeat(4, minmax(96px, 1fr)) 136px; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--ds-border); }
body.tw-admin #app .cm-row:first-child { border-top: 0; }
body.tw-admin #app .cm-row--head { background: var(--ds-surface-muted); color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 700; }
body.tw-admin #app .cm-row--head small { display: block; font-weight: 400; }
body.tw-admin #app .cm-row.is-done { background: #fbfefc; }
body.tw-admin #app .cm-session { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.tw-admin #app .cm-session b { overflow: hidden; color: var(--ds-ink); text-overflow: ellipsis; white-space: nowrap; }
body.tw-admin #app .cm-num { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--ds-primary-50); color: var(--ds-primary-700); font-weight: 800; }
body.tw-admin #app .cm-row.is-done .cm-num { background: #e7f8ef; color: #0f7a4a; }
body.tw-admin #app .cm-cell { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: var(--ds-text-xs); font-weight: 700; cursor: pointer; }
body.tw-admin #app .cm-cell .tw-icon { width: 15px; height: 15px; }
body.tw-admin #app .cm-cell.is-ready { background: #e7f8ef; color: #0f7a4a; }
body.tw-admin #app .cm-cell.is-missing { border-color: #f5c58a; border-style: dashed; background: #fff8eb; color: #9a5600; }
body.tw-admin #app .cm-cell.is-optional { border-color: var(--ds-border); border-style: dashed; background: transparent; color: var(--ds-text-muted); }
body.tw-admin #app .cm-cell:hover { filter: brightness(.97); box-shadow: 0 0 0 2px var(--ds-primary-100, #ede9fe); }
body.tw-admin #app .cm-open { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; text-align: end; }
body.tw-admin #app .cm-none { margin: 0; padding: 18px; color: var(--ds-text-muted); text-align: center; }
body.tw-admin #modal.cm-editor label.cm-focus { padding: 8px; border-radius: 12px; background: var(--ds-primary-50, #f5f3ff); box-shadow: 0 0 0 2px var(--ds-primary-300, #c4b5fd); }
body.tw-admin #modal.cm-editor .cm-current { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #0f7a4a; }
body.tw-admin #modal.cm-editor .cm-current .tw-icon { width: 14px; height: 14px; }
@media (max-width: 760px) {
  body.tw-admin #app .cm-courses { display: flex; overflow-x: auto; padding-bottom: 4px; }
  body.tw-admin #app .cm-course { flex: 0 0 200px; }
  body.tw-admin #app .cm-row--head { display: none; }
  body.tw-admin #app .cm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  body.tw-admin #app .cm-session { grid-column: 1 / -1; }
  body.tw-admin #app .cm-open { display: flex; grid-column: 1 / -1; justify-content: stretch; }
  body.tw-admin #app .cm-open button { flex: 1; min-height: 44px; }
  body.tw-admin #app .cm-cell { justify-content: flex-start; }
  body.tw-admin #app .cm-cell::before { content: attr(data-label) ":"; color: inherit; font-weight: 400; }
  body.tw-admin #app .cm-alert { flex-wrap: wrap; }
}

/* Reports (reports-admin.js): students missing a report, then the saved reports table. */
body.tw-admin #app .rp-page { display: grid; gap: 16px; }
body.tw-admin #app .rp-page > *, body.tw-admin #app .rp-list > * { min-width: 0; }
body.tw-admin #app .rp-gaps { padding: 16px 18px; border-color: #fde3b0; background: linear-gradient(180deg, #fffaf0, var(--ds-surface) 70%); }
body.tw-admin #app .rp-gaps > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
body.tw-admin #app .rp-gaps h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: #6b4300; font-size: var(--ds-text-lg); }
body.tw-admin #app .rp-gaps h3 .tw-icon { width: 18px; height: 18px; color: #c07a00; }
body.tw-admin #app .rp-gaps p { margin: 2px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-admin #app .rp-count { display: grid; min-width: 34px; height: 34px; padding: 0 8px; place-items: center; border-radius: var(--ds-radius-full); background: #ffecc7; color: #8a4f00; font-weight: 800; }
body.tw-admin #app .rp-gaps ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.tw-admin #app .rp-gaps li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); }
body.tw-admin #app .rp-gap-main { display: grid; flex: 1; gap: 4px; min-width: 0; }
body.tw-admin #app .rp-gap-main b { color: var(--ds-ink); }
body.tw-admin #app .rp-gap-main small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .rp-names { display: flex; flex-wrap: wrap; gap: 4px; }
body.tw-admin #app .rp-names span { padding: 1px 9px; border-radius: var(--ds-radius-full); background: #fff3dc; color: #8a5a00; font-size: 12px; font-weight: 700; }
body.tw-admin #app .rp-allgood { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 16px; border: 1px solid #b7ebcf; border-radius: var(--ds-radius-md); background: #effaf5; color: #0f6a42; font-weight: 700; }
body.tw-admin #app .rp-allgood .tw-icon { width: 18px; height: 18px; }
body.tw-admin #app .rp-list { display: grid; gap: 12px; padding: 16px 18px; }
body.tw-admin #app .rp-list-head { position: static; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; height: auto; padding: 0; border: 0; background: none; }
body.tw-admin #app .rp-list-head h3 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-lg); }
body.tw-admin #app .rp-list-head small { color: var(--ds-text-muted); }
body.tw-admin #app .rp-tools { display: grid; gap: 10px; }
body.tw-admin #app .rp-tools .tw-tabs { justify-self: start; }
body.tw-admin #app .rp-tools .tw-tabs button { flex: 0 0 auto; padding: 0 14px; }
body.tw-admin #app .rp-filters { display: flex; flex-wrap: wrap; gap: 8px; }
body.tw-admin #app .rp-filters .ds-search { flex: 1 1 240px; }
body.tw-admin #app .rp-filters .ds-select { width: auto; min-width: 140px; height: 42px; min-height: 42px; padding-block: 0; }
body.tw-admin #app .rp-table-wrap { overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
body.tw-admin #app .rp-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); }
body.tw-admin #app .rp-table td:nth-child(-n+3), body.tw-admin #app .rp-table td:nth-child(n+5) { white-space: nowrap; }
body.tw-admin #app .rp-table th { padding: 10px 12px; background: var(--ds-surface-muted); color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 700; text-align: start; white-space: nowrap; }
body.tw-admin #app .rp-table td { padding: 10px 12px; border-top: 1px solid var(--ds-border); vertical-align: middle; }
body.tw-admin #app .rp-table tbody tr:hover { background: var(--ds-primary-50, #f7f4ff); }
body.tw-admin #app .rp-student { display: grid; padding: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
body.tw-admin #app .rp-student b { color: var(--ds-ink); }
body.tw-admin #app .rp-student:hover b { color: var(--ds-primary-700); text-decoration: underline; }
body.tw-admin #app .rp-student small, body.tw-admin #app .rp-sub, body.tw-admin #app .rp-date { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .rp-sub { display: block; margin-top: 3px; }
body.tw-admin #app .rp-week { font-weight: 800; text-align: center; }
body.tw-admin #app .rp-phone { display: grid; }
body.tw-admin #app .rp-phone b { font-size: var(--ds-text-xs); }
body.tw-admin #app .rp-phone bdi { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .rp-addphone { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px dashed #f0b3b3; border-radius: var(--ds-radius-full); background: #fff5f5; color: #b42318; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
body.tw-admin #app .rp-addphone .tw-icon { width: 13px; height: 13px; }
body.tw-admin #app .rp-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 4px; }
body.tw-admin #app .rp-wa { background: #1fa855; border-color: #1fa855; color: #fff; }
body.tw-admin #app .rp-wa:hover:not(:disabled) { background: #178a45; }
/* action-colors.js paints every WhatsApp button green with !important; this one is the quiet alternative. */
body.tw-admin #app .rp-actions .rp-msg { border-color: transparent !important; background: transparent !important; color: var(--ds-primary-700) !important; box-shadow: none !important; }
body.tw-admin #app .rp-actions .rp-msg:hover:not(:disabled) { background: var(--ds-primary-50) !important; }
body.tw-admin #app .rp-actions button:disabled { opacity: .45; cursor: not-allowed; }
body.tw-admin #app .rp-none { padding: 18px; color: var(--ds-text-muted); text-align: center; }
@media (max-width: 760px) {
  body.tw-admin #app .rp-gaps li { flex-wrap: wrap; }
  body.tw-admin #app .rp-table-wrap { overflow: visible; border: 0; }
  body.tw-admin #app .rp-table thead { display: none; }
  body.tw-admin #app .rp-table, body.tw-admin #app .rp-table tbody, body.tw-admin #app .rp-table tr, body.tw-admin #app .rp-table td { display: block; width: 100%; }
  body.tw-admin #app .rp-table tr { margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
  body.tw-admin #app .rp-table td { padding: 3px 0; border: 0; }
  body.tw-admin #app .rp-week { text-align: start; }
  body.tw-admin #app .rp-week::before { content: "الأسبوع "; font-weight: 400; color: var(--ds-text-muted); }
  body.tw-admin #app .rp-actions { flex-wrap: wrap; justify-content: flex-start; margin-top: 6px; }
  body.tw-admin #app .rp-filters, body.tw-admin #app .rp-filters > *, body.tw-admin #app .rp-filters .ds-search, body.tw-admin #app .rp-filters .ds-select { flex: 1 1 100%; width: 100%; }
  body.tw-admin #app .rp-tools .tw-tabs { width: 100%; overflow-x: auto; }
  body.tw-admin #app .rp-table td:nth-child(n) { white-space: normal; }
}

/* Guardian enrollment states in the requests inbox (enrollment-admin.js). */
body.tw-admin #app .er-guardian { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
body.tw-admin #app .er-guardian li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); }
body.tw-admin #app .er-guardian li > .tw-icon { flex: 0 0 18px; width: 18px; height: 18px; color: var(--ds-primary-600); }
body.tw-admin #app .er-guardian li > span { display: grid; gap: 4px; }
body.tw-admin #app .er-guardian small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-admin #app .er-guardian li > span { min-width: 0; }
body.tw-admin #app .er-guardian .aw-status { justify-self: start; max-width: 100%; white-space: normal; line-height: 1.5; }

/* ---------- Admin form windows (afModal) ---------- */
body.tw-admin #modal.af-modal { width: min(620px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; background: #fff; }
body.tw-admin #modal.af-modal.at-group-modal { width: min(820px, calc(100vw - 32px)); }
body.tw-admin #modal.af-modal[open] { display: flex; flex-direction: column; }
body.tw-admin #modal .af-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid #ece6f5; background: #fff; }
body.tw-admin #modal .af-head h2 { margin: 0; font-size: 20px; }
body.tw-admin #modal .af-head p { margin: 4px 0 0; color: #6b6385; font-size: 13px; }
body.tw-admin #modal .af-close { flex: 0 0 36px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: #f4f0fa; color: #4b3f66; font-size: 22px; line-height: 1; cursor: pointer; }
body.tw-admin #modal .af-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
body.tw-admin #modal .af-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 14px; padding: 16px 22px; background: #faf8fd; }
body.tw-admin #modal .af-sec { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 16px; border: 1px solid #ece6f5; border-radius: 14px; background: #fff; }
body.tw-admin #modal .af-sec h3 { margin: 0; color: #322747; font-size: 15px; font-weight: 700; }
body.tw-admin #modal .af-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.tw-admin #modal .af-field { display: grid; align-content: start; gap: 6px; min-width: 0; margin: 0; color: #322747; font-size: 13px; font-weight: 600; }
body.tw-admin #modal .af-field > span:first-child { display: flex; align-items: center; gap: 6px; min-height: 20px; }
body.tw-admin #modal .af-field em { padding: 1px 7px; border-radius: 999px; background: #f3eefc; color: #6b6385; font-size: 11px; font-style: normal; font-weight: 500; }
body.tw-admin #modal .af-field small, body.tw-admin #modal .af-hint { color: #6b6385; font-size: 12px; font-weight: 400; line-height: 1.5; }
body.tw-admin #modal :is(.af-field input:not([type="radio"]):not([type="checkbox"]), .af-field select, .af-picker-tools input) { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0; padding: 9px 12px; border: 1px solid #ddd3ee; border-radius: 10px; background: #fff; color: #231a35; font: inherit; font-weight: 400; }
body.tw-admin #modal :is(.af-field input, .af-field select, .af-picker-tools input):focus { outline: 2px solid #c4b5fd; outline-offset: 1px; border-color: #7c3aed; }
body.tw-admin #modal .af-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
body.tw-admin #modal .af-seg { display: flex; min-height: 44px; padding: 3px; border: 1px solid #ddd3ee; border-radius: 10px; background: #f8f5fc; }
body.tw-admin #modal .af-seg label { position: relative; flex: 1; display: block; margin: 0; cursor: pointer; }
body.tw-admin #modal .af-seg input { position: absolute; width: 1px; height: 1px; min-height: 0; opacity: 0; }
body.tw-admin #modal .af-seg span { display: grid; place-items: center; height: 100%; min-height: 36px; border-radius: 8px; color: #4b3f66; font-weight: 600; }
body.tw-admin #modal .af-seg input:checked + span { background: #7c3aed; color: #fff; }
body.tw-admin #modal .af-seg input:focus-visible + span { outline: 2px solid #c4b5fd; outline-offset: 1px; }
body.tw-admin #modal .af-toggle { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 14px; border: 1px solid #ece6f5; border-radius: 12px; cursor: pointer; }
body.tw-admin #modal .af-toggle:has(input:checked) { border-color: #c9b4f4; background: #faf6ff; }
body.tw-admin #modal .af-toggle input { flex: 0 0 18px; width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: #7c3aed; }
body.tw-admin #modal .af-toggle span { display: grid; gap: 1px; min-width: 0; }
body.tw-admin #modal .af-toggle b { color: #322747; font-size: 14px; font-weight: 600; }
body.tw-admin #modal .af-toggle small { color: #6b6385; font-size: 12px; font-weight: 400; }
body.tw-admin #modal .af-picker-tools { display: flex; gap: 8px; }
body.tw-admin #modal .af-picker-tools input { flex: 1; min-width: 0; }
body.tw-admin #modal .af-picker-tools button { flex: 0 0 auto; }
body.tw-admin #modal .af-modal .at-student-picker-list, body.tw-admin #modal.af-modal .at-student-picker-list { max-height: 280px; overflow: auto; overscroll-behavior: contain; }
body.tw-admin #modal.af-modal .at-student-option[hidden] { display: none; }
body.tw-admin #modal .af-foot { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 12px 22px; border-top: 1px solid #ece6f5; background: #fff; }
body.tw-admin #modal .af-foot .at-auth-message { order: 3; flex: 1; margin: 0; font-size: 13px; }
body.tw-admin #modal .af-foot .at-auth-message:empty { visibility: hidden; }
@media (max-width: 560px) { body.tw-admin #modal .af-cols2 { grid-template-columns: minmax(0, 1fr); } body.tw-admin #modal .af-picker-tools { flex-wrap: wrap; } body.tw-admin #modal .af-picker-tools input { flex-basis: 100%; } body.tw-admin #modal .af-head, body.tw-admin #modal .af-body, body.tw-admin #modal .af-foot { padding-inline: 14px; } }

/* Admin lesson quiz preparation: retain usable radio/checkbox targets on touch. */
body.tw-admin #at-lesson-quiz-form input[type="checkbox"], body.tw-admin #at-lesson-quiz-form input[type="radio"] { width: 22px; min-width: 22px; height: 22px; accent-color: var(--ds-primary-600, #7c3aed); }
body.tw-admin #at-lesson-quiz-form .at-quiz-option-edit { min-height: 44px; }