/* Shared admin adaptation; the existing desktop and dedicated attendance UI stay in place. */
.admin-menu-toggle,
.admin-mobile-title,
.admin-drawer-heading,
.admin-mobile-links,
.admin-mobile-account,
.admin-menu-backdrop { display: none; }
.admin-menu-backdrop[hidden] { display: none; }
.admin-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.admin-cell-value { display: contents; }
.admin-table-scroll:focus-visible { outline: 2px solid #0f766e; outline-offset: 2px; }

@media (max-width: 1023px) {
    .admin-shell .admin-header { position: fixed; height: 56px; z-index: 1000; }
    .admin-shell .admin-header > .layui-layout-right { display: none; }
    .admin-shell .admin-logo { left: 0; width: 100%; height: 56px; justify-content: flex-start; padding: 0 14px; background: #202938 !important; }
    .admin-mobile-ready .admin-shell .admin-logo { left: 96px; width: calc(100% - 96px); padding-left: 0; }
    .admin-shell .admin-system-name { display: none; }
    .admin-mobile-title { display: block; min-width: 0; font-size: 16px; }
    .admin-mobile-ready .admin-menu-toggle { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 80px; box-sizing: border-box; min-height: 44px; margin: 6px 8px; padding: 0 8px; border: 1px solid #617082; border-radius: 6px; color: #fff; background: transparent; cursor: pointer; }
    .admin-menu-toggle .layui-icon { font-size: 20px; }
    .admin-shell .layui-side { position: relative; top: auto; bottom: auto; width: 100%; height: auto; margin-top: 56px; }
    .admin-shell .layui-side-scroll { width: 100%; height: auto; }
    .admin-shell .layui-nav-tree { width: 100%; }
    .admin-shell .layui-nav-tree a { box-sizing: border-box; min-height: 46px; height: auto; line-height: 1.5; padding-top: 12px; padding-bottom: 12px; white-space: normal; }
    .admin-shell .layui-nav-tree .admin-menu-text { overflow-wrap: anywhere; }
    html:not(.admin-mobile-ready) .admin-shell .layui-nav-child { display: block; }
    .admin-mobile-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px; border-bottom: 1px solid #3b4657; }
    .admin-mobile-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: #e5edf5; border: 1px solid #526172; border-radius: 5px; }
    .admin-mobile-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px max(12px,env(safe-area-inset-bottom)); border-top: 1px solid #3b4657; color: #e5edf5; }
    .admin-mobile-account > span { min-width: 0; overflow-wrap: anywhere; }
    .admin-mobile-account .admin-logout { height: 44px; border: 1px solid #526172; border-radius: 5px; white-space: nowrap; }
    body.layui-layout-body { overflow: auto; }
    .admin-shell .admin-body { position: relative; top: auto; left: 0; bottom: auto; width: 100%; overflow: visible; }
    .admin-mobile-ready body.layui-layout-body { overflow: hidden; }
    .admin-mobile-ready .admin-shell .admin-body { position: absolute; top: 56px; bottom: 0; overflow-y: auto; overflow-x: hidden; width: auto; padding-bottom: env(safe-area-inset-bottom); }
    .admin-mobile-ready .admin-shell .layui-side { position: fixed; z-index: 1101; top: 0; bottom: 0; width: min(320px,calc(100vw - 48px)); height: 100%; height: 100dvh; margin: 0; display: flex; flex-direction: column; visibility: hidden; transform: translateX(-100%); }
    .admin-mobile-ready .admin-shell .layui-side-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .admin-menu-open .admin-shell .layui-side { transform: none; visibility: visible; }
    .admin-menu-open .admin-menu-backdrop { display: block; position: fixed; z-index: 1100; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: #0f172a80; cursor: pointer; }
    .admin-drawer-heading { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 12px 0 18px; border-bottom: 1px solid #3b4657; color: white; }
    .admin-drawer-heading strong { font-size: 16px; }
    .admin-drawer-heading button { width: 44px; height: 44px; border: 0; border-radius: 5px; color: white; font-size: 28px; background: transparent; cursor: pointer; }
    html:not(.admin-mobile-ready) #admin-menu-close { display: none; }
    .admin-shell button:focus-visible,.admin-shell a:focus-visible { outline: 3px solid #20b89b; outline-offset: 2px; }
    .admin-page { padding: 16px; }
    .admin-page-title h1 { font-size: 22px; line-height: 1.4; overflow-wrap: anywhere; }
    .admin-page-title p { line-height: 1.65; }
    .admin-filter,.admin-toolbar { flex-wrap: wrap; }
    .admin-filter > * { min-width: 0; }
    .admin-filter .layui-form-select { min-width: 0; max-width: 100%; }
    .admin-filter .layui-form-select .layui-input { width: 100%; }
    .admin-panel { box-sizing: border-box; min-width: 0; }
    .admin-panel:has(> table.admin-table) { overflow-x: auto; }
    .admin-body .layui-btn { min-height: 44px; height: auto; padding: 10px 14px; line-height: 22px; white-space: normal; }
    .admin-body .admin-actions .layui-btn { min-height: 44px; line-height: 22px; font-size: 14px; }
    .admin-body .layui-btn + .layui-btn { margin-left: 0; }
    .admin-body .admin-toolbar,.admin-body .admin-form-actions { gap: 8px; }
    .admin-pagination-links { flex-wrap: wrap; }
    .admin-pagination-links > a,.admin-pagination-links > span { min-width: 44px; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }

    /* Each dashboard chart uses the entire mobile content column. */
    .admin-dashboard-grid { margin: 14px 0 0; gap: 14px; }
    .admin-dashboard-grid > [class*="layui-col-"] { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; padding: 0; box-sizing: border-box; }
    .admin-dashboard-grid .admin-visual-panel { width: 100%; min-width: 0; margin: 0; }
    .admin-dashboard-grid .admin-panel-title { line-height: 1.5; overflow-wrap: anywhere; }
    .admin-dashboard-grid .admin-donut-layout,
    .admin-dashboard-grid .admin-radar-layout,
    .admin-dashboard-grid .admin-login-visual,
    .admin-dashboard-grid .admin-snapshot-hero { grid-template-columns: minmax(0,1fr); justify-items: center; gap: 18px; }
    .admin-dashboard-grid .admin-donut-legend,
    .admin-dashboard-grid .admin-radar-scores,
    .admin-dashboard-grid .admin-login-stats { width: 100%; min-width: 0; }
    .admin-dashboard-grid .admin-donut-legend li,
    .admin-dashboard-grid .admin-radar-scores li,
    .admin-dashboard-grid .admin-login-stats > div { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 12px; }
    .admin-dashboard-grid .admin-donut-legend span,
    .admin-dashboard-grid .admin-radar-scores span,
    .admin-dashboard-grid .admin-login-stats span { min-width: 0; overflow-wrap: anywhere; }
    .admin-dashboard-grid .admin-donut-legend i,
    .admin-dashboard-grid .admin-chart-legend i { flex: none; }
    .admin-dashboard-grid .admin-radar { width: calc(100% - 80px); max-width: 230px; height: auto; overflow: visible; }
    .admin-dashboard-grid .admin-radar text { font-size: 12px; }
    .admin-dashboard-grid .admin-donut > div > span,
    .admin-dashboard-grid .admin-mini-ring > div > span { max-width: 100%; padding: 0 6px; box-sizing: border-box; overflow-wrap: anywhere; }
    .admin-dashboard-grid .admin-snapshot-hero > div:last-child { width: 100%; text-align: center; overflow-wrap: anywhere; }
}

@media (max-width: 767px) {
    .admin-page { padding: 14px 12px 28px; }
    .admin-panel { padding: 14px 12px; }
    .admin-filter { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
    .admin-filter > .layui-input,.admin-filter > select,.admin-filter > .layui-form-select { flex: 1 1 100%; width: 100%; margin: 0; }
    .admin-filter > .layui-btn { flex: 1 1 auto; margin: 0; }
    .admin-body .layui-input,.admin-body .layui-select,.admin-body select,.admin-login-panel .layui-input { min-height: 44px; font-size: 16px; }
    .admin-body .layui-form-select dl { max-width: 100%; max-height: 240px; }
    .admin-body .layui-form-select dl dd { min-height: 44px; height: auto; line-height: 1.5; padding: 11px 12px; white-space: normal; overflow-wrap: anywhere; }
    .admin-form { max-width: 100%; }
    .admin-form .layui-form-label,.admin-login-panel .layui-form-label { float: none; display: block; width: auto; padding: 0 0 8px; text-align: left; font-weight: 600; line-height: 1.5; }
    .admin-form .layui-input-block,.admin-login-panel .layui-input-block { margin-left: 0; min-width: 0; }
    .admin-form .layui-input-inline { float: none; width: 100%; margin: 0 0 8px; }
    .admin-form .layui-textarea { width: 100%; min-height: 110px; font-size: 16px; box-sizing: border-box; }
    .admin-form .layui-form-radio { min-height: 44px; margin-top: 0; line-height: 44px; }
    .admin-form .layui-form-checkbox { margin-bottom: 8px; max-width: 100%; }
    .admin-form-actions { margin-left: 0; flex-wrap: wrap; padding-top: 8px; }
    .admin-form-actions > .layui-btn { flex: 1 1 auto; }
    .admin-inline-form { max-width: 100%; flex-wrap: wrap; }
    .admin-inline-form > * { min-width: 0; max-width: 100%; }
    .admin-panel:has(> .admin-table-scroll > .admin-mobile-records) { padding: 0; border: 0; background: transparent; min-height: 0; }
    .admin-mobile-records,.admin-mobile-records tbody { display: block; width: 100%; min-width: 0; }
    .admin-mobile-records thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
    .admin-mobile-records tbody tr { display: block; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #dce3e9; border-radius: 6px; background: #fff; }
    .admin-mobile-records tbody td { display: grid; grid-template-columns: 84px minmax(0,1fr); gap: 10px; width: auto; min-width: 0; padding: 7px 0; border: 0; text-align: left; white-space: normal; overflow: visible; font-size: 14px; line-height: 1.6; }
    .admin-mobile-records tbody td::before { content: attr(data-label); color: #64748b; font-size: 13px; overflow-wrap: anywhere; }
    .admin-mobile-records .admin-cell-value { display: block; min-width: 0; overflow-wrap: anywhere; }
    .admin-mobile-records .admin-cell-value:empty::before { content: '—'; color: #94a3b8; }
    .admin-mobile-records td.admin-actions { border-top: 1px solid #eef1f4; margin-top: 5px; padding-top: 12px; align-items: start; }
    .admin-mobile-records td.admin-actions .admin-cell-value { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .admin-mobile-records td.admin-actions form { margin: 0; }
    .admin-mobile-records .admin-record-empty td { display: block; padding: 24px 8px; text-align: center; }
    .admin-mobile-records .admin-record-empty td::before { content: none; }
    .admin-resource-table tbody tr,.admin-file-asset-table tbody tr,.admin-assignment-list-table tbody tr { border-radius: 6px; padding: 14px 12px; box-shadow: none; }
    .admin-resource-table tbody td,.admin-file-asset-table tbody td { min-width: 0; }
    .admin-assignment-roster-head,.admin-assignment-grade-head { overflow-wrap: anywhere; }
    .admin-login-page { min-height: 100vh; min-height: 100dvh; padding: 70px 16px 28px; box-sizing: border-box; }
    .admin-login-panel { width: 100%; max-width: 420px; padding: 26px 22px; box-sizing: border-box; }
    .admin-login-brand { gap: 12px; }
    .admin-login-logo { flex: 0 0 44px; }
    .admin-login-brand h1 { font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; }
    .admin-login-btn { min-height: 44px; }
    .admin-dashboard-grid .admin-trend-chart { gap: 4px; padding-right: 0; padding-left: 0; }
    .admin-dashboard-grid .admin-trend-bars { gap: 3px; }
    .admin-dashboard-grid .admin-trend-bar-main { width: clamp(7px,2vw,14px); }
    .admin-dashboard-grid .admin-trend-bar-sub { width: clamp(5px,1.5vw,10px); }
    .admin-dashboard-grid .admin-trend-day em { white-space: nowrap; }
}

@media (max-width: 820px) {
    .admin-learner-portrait .portrait-stage { display:flex; flex-direction:column; gap:14px; padding:18px; min-height:0; }
    .admin-learner-portrait .portrait-stage::before { display:none; }
    .admin-learner-portrait .portrait-person { order:0; width:100%; max-width:420px; }
    .admin-learner-portrait .portrait-orbit { order:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
    .admin-learner-portrait .portrait-secondary-grid { grid-template-columns:minmax(0,1fr); gap:0; }
}
@media (max-width: 560px) {
    .admin-learner-portrait .portrait-stage { padding:12px; border-radius:17px; }
    .admin-learner-portrait .portrait-person { padding:20px 17px; }
    .admin-learner-portrait .portrait-orbit, .admin-learner-portrait .portrait-trait-grid { grid-template-columns:minmax(0,1fr); }
    .admin-learner-portrait .portrait-section { padding:18px 14px; border-radius:16px; }
    .admin-learner-portrait .portrait-filters { gap:6px; }
    .admin-learner-portrait .portrait-filters a { padding:8px 10px; }
    .admin-learner-portrait .portrait-note footer { align-items:flex-start; }
}