/* Doktor Akademi Coach — shared product foundation.
   This file is intentionally component- and shell-only. Page modules retain
   their existing markup and behaviour until their individual redesign pass. */
html,body{max-width:100%;overflow-x:clip}
:root,
html[data-theme],
html[data-theme="dark"]{
  color-scheme:light;
  --da-bg:#f5f7fb;
  --da-surface:#fff;
  --da-surface-soft:#f8f9fc;
  --da-surface-muted:#f0f3f8;
  --da-text:#172238;
  --da-text-muted:#67748d;
  --da-muted:var(--da-text-muted);
  --da-text-subtle:#748097;
  --da-placeholder:#7d889d;
  --da-border:#e6eaf1;
  --da-border-strong:#cfd6e3;
  --da-primary:#365ce6;
  --da-primary-hover:#2949bf;
  --da-primary-soft:#edf1ff;
  --da-primary-border:#c8d2ff;
  --da-success:#21725b;
  --da-success-soft:#e9f5f1;
  --da-success-ink:#185b48;
  --da-warning:#f59e0b;
  --da-warning-soft:#fff6df;
  --da-warning-ink:#945200;
  --da-danger:#ef5350;
  --da-danger-soft:#fff0f1;
  --da-danger-ink:#b42318;
  --da-ai:#8b5cf6;
  --da-ai-soft:#f2eeff;
  --da-info:#1579bd;
  --da-info-ink:#3c52aa;
  --da-surface-tint:#fafbff;
  --da-separator:#eef1f5;
  --da-radius-sm:8px;
  --da-radius-md:11px;
  --da-radius-lg:20px;
  --da-shadow-sm:0 1px 2px rgb(23 34 56 / .04);
  --da-shadow-md:0 12px 32px rgb(23 34 56 / .075);
  --da-focus:0 0 0 3px rgb(54 92 230 / .22);
  --da-sidebar-width:272px;
  --bg:var(--da-bg);
  --panel:var(--da-surface);
  --panel-2:var(--da-surface-soft);
  --line:var(--da-border);
  --text:var(--da-text);
  --muted:var(--da-text-muted);
  --brand:var(--da-primary);
  --brand2:#7187f8;
  --accent-ink:#fff;
  --shadow:var(--da-shadow-md);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--da-bg)}
body{min-width:320px;background:var(--da-bg);color:var(--da-text);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Authentication bootstrap failure is distinct from an invalid session. The
   server-rendered loading shell remains in place; no client-side logout occurs. */
/* Server-confirmed sessions get a deliberately neutral boot state. It is
   removed by showApp() only after the authenticated asset sequence settles. */
body.has-server-session:not(.app-ready)::before{content:"";position:fixed;z-index:9999;inset:0;background:var(--da-bg)}
body.has-server-session:not(.app-ready)::after{content:"Doktor Akademi Coach\AÇalışma alanın hazırlanıyor";position:fixed;z-index:10000;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;min-width:268px;padding:17px 22px 17px 62px;border:1px solid var(--da-border);border-radius:14px;background:var(--da-surface) url('brand-mark.svg') 18px 50%/30px 30px no-repeat;color:var(--da-text);font:700 13px/1.55 Inter,"Segoe UI",system-ui,sans-serif;white-space:pre;text-align:left;box-shadow:var(--da-shadow-md)}
body.has-server-session.app-bootstrap-failed:not(.app-ready)::after{content:"Uygulama kaynakları yüklenemedi.\ALütfen sayfayı yenileyip tekrar dene.";border-color:#f5c7c9;color:var(--da-danger)}
button,input,select,textarea{font:inherit}
button{min-height:40px;border:1px solid transparent;border-radius:var(--da-radius-md);background:var(--da-primary);color:#fff;font-weight:700;box-shadow:none;transition:background-color 180ms ease,border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}
button:hover{background:var(--da-primary-hover);filter:none;transform:none}
button:disabled{cursor:not-allowed;opacity:.56}
button.light,.light{background:var(--da-surface);border-color:var(--da-border);color:var(--da-text)}
button.light:hover,.light:hover{background:var(--da-surface-soft);border-color:var(--da-border-strong)}
button.danger,.danger{background:var(--da-danger-soft);border-color:#f5c7c9;color:var(--da-danger-ink)}
button.danger:hover,.danger:hover{background:#ffe2e4}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:none;box-shadow:var(--da-focus)}

input,select,textarea{min-height:44px;border:1px solid var(--da-border);border-radius:var(--da-radius-md);background:var(--da-surface);color:var(--da-text);font-size:16px;box-shadow:var(--da-shadow-sm)}
input::placeholder,textarea::placeholder{color:var(--da-placeholder);opacity:1}
input:focus,select:focus,textarea:focus{border-color:var(--da-primary);box-shadow:var(--da-focus)}
textarea{min-height:104px}

/* Authenticated application shell */
#app{display:block;min-height:100dvh;background:var(--da-bg)}
/* Desktop shell is deliberately explicit: no main surface can sit behind the
   navigation column, and only the navigation region itself is scrollable. */
#app>aside{position:fixed;z-index:20;inset:0 auto 0 0;display:flex;flex-direction:column;width:272px;height:100dvh;background:var(--da-surface);border-right:1px solid var(--da-border);box-shadow:8px 0 28px rgb(31 47 82 / .025)}
#app>aside .brand{display:flex;align-items:center;gap:11px;min-height:88px;margin:0 16px;padding:16px 2px;border-bottom:1px solid var(--da-border)}
#app>aside .brand>img{display:block;width:38px;height:38px;flex:0 0 38px;border-radius:12px;box-shadow:0 7px 16px rgb(79 110 247 / .2)}
#app>aside .brand h2{margin:0;color:var(--da-text);font-size:15px;letter-spacing:-.025em;line-height:1.2}
#app>aside .brand small{display:block;margin-top:4px;color:var(--da-text-muted);font-size:11px}
#app>aside nav{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;gap:2px;padding:12px;overflow-y:auto;overscroll-behavior:contain}
#app>aside nav button{position:relative;display:flex;align-items:center;gap:11px;min-width:0;min-height:42px;padding:0 11px;border:0;border-radius:10px;background:transparent;color:var(--da-text-muted);font-size:12px;font-weight:700;letter-spacing:-.01em;text-align:left;box-shadow:none}
#app>aside .nav-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;min-width:20px;flex:0 0 20px;overflow:hidden}
#app>aside .nav-icon svg{display:block;width:20px;height:20px;max-width:20px;max-height:20px;flex:0 0 20px}
#app>aside .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app>aside nav button:hover{background:#f1f4ff;color:var(--da-primary-hover);border-color:transparent}
#app>aside nav button.active{background:var(--da-primary-soft);color:var(--da-primary);border-color:transparent;box-shadow:none}
#app>aside nav button.active::before{content:"";position:absolute;left:0;width:3px;height:20px;border-radius:0 4px 4px 0;background:var(--da-primary)}
#app>aside>#logout{background:transparent;border-color:transparent;color:var(--da-text-muted)}
#app>aside>#logout:hover{background:var(--da-surface-muted);color:var(--da-text)}
#app>aside .nav-group{margin:14px 10px 4px;padding:0 2px;color:var(--da-text-muted);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}#app>aside .nav-group:first-child{margin-top:2px}.sidebar-footer{flex:0 0 auto;padding:12px;border-top:1px solid var(--da-border);background:var(--da-surface)}.sidebar-footer>#logout{width:100%;margin:0;min-height:40px;font-size:12px}#app>aside>#mobileMenuToggle{display:none}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.app-feedback-button{display:none}
#app>main{width:calc(100% - 272px);min-width:0;max-width:none;margin-left:272px;padding:18px clamp(22px,3.5vw,48px) 42px;background:var(--da-bg)}
.app-topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;width:min(100%,1280px);min-height:54px;margin:0 auto 18px;padding:8px 0 12px;border-bottom:1px solid var(--da-border)}.app-topbar__context{display:grid;gap:1px;min-width:0}.app-topbar__eyebrow{display:flex;align-items:center;gap:7px;color:var(--da-primary);font-size:10px;font-weight:850;letter-spacing:.1em}.app-topbar__eyebrow::before{content:"";display:block;width:20px;height:20px;flex:0 0 20px;border-radius:6px;background:url('brand-mark.svg') center/contain no-repeat;box-shadow:0 3px 8px rgb(79 110 247 / .16)}.app-topbar__context>span:last-child{overflow:hidden;color:var(--da-text-muted);font-size:12px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}.app-topbar__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}.app-topbar__account{min-height:36px;padding-inline:11px;font-size:12px}
#app>main>header{width:min(100%,1280px);margin:0 auto 22px;padding-bottom:16px;border-bottom:1px solid var(--da-border)}
#app>main>header[hidden]{display:none}
#app>main>header h1{color:var(--da-text);font-size:clamp(28px,3vw,40px);letter-spacing:-.035em}
#app>main>header small{color:var(--da-text-muted)}
.view{display:none;width:min(100%,1280px);margin-inline:auto}.view.active{display:block}

/* Shared visual primitives */
.card,.metrics article,.role-metrics article{border:1px solid var(--da-border);border-radius:var(--da-radius-lg);background:var(--da-surface);box-shadow:var(--da-shadow-sm)}
.card{padding:20px}
.card>.head{padding-bottom:14px;border-bottom:1px solid var(--da-border)}
.card h1,.card h2,.card h3,.card h4{color:var(--da-text)}
.card p,.card small,.task small,.repeat small{color:var(--da-text-muted)}
.eyebrow{color:var(--da-primary);font-size:11px;font-weight:800;letter-spacing:.1em}
.badge,.status{border:1px solid var(--da-primary-border);background:var(--da-primary-soft);color:var(--da-primary-hover);border-radius:999px}
.metrics article,.role-metrics article{min-height:120px;padding:18px}
.metrics article span,.role-metrics article span{color:var(--da-text-muted);font-size:13px}
.metrics article b,.role-metrics article b{color:var(--da-text)}
.task,.repeat{border-color:var(--da-border)}
.task p{color:var(--da-text-muted)}
.done-chip{background:var(--da-success-soft);color:var(--da-success)}
.priority.high{background:var(--da-danger-soft);color:var(--da-danger)}
.priority.medium{background:var(--da-warning-soft);color:var(--da-warning)}
.priority.low{background:var(--da-success-soft);color:var(--da-success)}
.empty-state,.empty{border-color:var(--da-border);background:var(--da-surface-soft);color:var(--da-text-muted)}
dialog{border:1px solid var(--da-border);border-radius:var(--da-radius-lg);background:var(--da-surface);color:var(--da-text);box-shadow:0 24px 80px rgb(16 24 40 / .2)}
dialog::backdrop{background:rgb(16 24 40 / .38)}
.avatar-crop-dialog{width:min(500px,calc(100vw - 28px));max-width:500px;max-height:calc(100dvh - 28px);padding:20px;overflow:auto;overscroll-behavior:contain}.avatar-crop-dialog .head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}.avatar-crop-dialog .head h2{margin:3px 0 0}.avatar-crop-dialog>p{margin-bottom:14px}.avatar-crop-dialog canvas{display:block;width:min(100%,420px);height:auto;aspect-ratio:1;margin:0 auto;border-radius:12px;background:var(--da-surface-muted);touch-action:none}.avatar-crop-dialog>label{display:grid;gap:7px;margin-top:14px;color:var(--da-text);font-size:12px;font-weight:700}.avatar-crop-dialog input[type="range"]{width:100%;min-height:28px;box-shadow:none}.avatar-crop-dialog .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.avatar-crop-dialog .actions button{min-width:0}
#toast{border:1px solid var(--da-border);border-radius:var(--da-radius-md);background:#1f2937;color:#fff;box-shadow:var(--da-shadow-md)}

/* Named product primitives. New and migrated screens use these classes rather
   than adding page-global overrides. Legacy markup can migrate incrementally. */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;width:min(100%,1280px);margin:0 auto 24px;padding:4px 0 18px;border-bottom:1px solid var(--da-border)}
.page-header__copy{min-width:0}.page-header__eyebrow{margin:0 0 5px;color:var(--da-primary);font-size:11px;font-weight:800;letter-spacing:.1em}.page-header__title{margin:0;color:var(--da-text);font-size:clamp(22px,2.4vw,32px);letter-spacing:-.04em}.page-header__description{margin:5px 0 0;color:var(--da-text-muted);font-size:14px}.page-header__actions{display:flex;flex-wrap:wrap;gap:8px}
.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 14px;border:1px solid transparent;border-radius:var(--da-radius-md);font-size:13px;font-weight:750;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer}.ui-button--primary{border-color:var(--da-primary);background:var(--da-primary);color:#fff}.ui-button--primary:hover{background:var(--da-primary-hover)}.ui-button--secondary{border-color:var(--da-border);background:var(--da-surface);color:var(--da-text)}.ui-button--secondary:hover{border-color:var(--da-border-strong);background:var(--da-surface-soft)}.ui-button--ghost{background:transparent;color:var(--da-primary)}.ui-button--danger{border-color:#fecaca;background:var(--da-danger-soft);color:var(--da-danger-ink)}
.ui-card{border:1px solid var(--da-border);border-radius:var(--da-radius-lg);background:var(--da-surface);box-shadow:var(--da-shadow-sm)}.ui-card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 20px 14px;border-bottom:1px solid var(--da-border)}.ui-card__body{padding:20px}.ui-card__title{margin:0;color:var(--da-text);font-size:18px;letter-spacing:-.025em}.ui-card__description{margin:4px 0 0;color:var(--da-text-muted);font-size:13px}
.ui-field{display:grid;gap:6px;min-width:0}.ui-field__label{color:var(--da-text);font-size:12px;font-weight:700}.ui-field__help,.ui-field__error{font-size:12px}.ui-field__help{color:var(--da-text-muted)}.ui-field__error{color:var(--da-danger-ink)}.ui-input,.ui-select,.ui-textarea{width:100%;min-height:42px;padding:10px 12px;border:1px solid var(--da-border);border-radius:var(--da-radius-md);background:var(--da-surface);color:var(--da-text);outline:0}.ui-textarea{min-height:112px;resize:vertical}.ui-input:focus,.ui-select:focus,.ui-textarea:focus{border-color:var(--da-primary);box-shadow:var(--da-focus)}.ui-input:disabled,.ui-select:disabled,.ui-textarea:disabled{background:var(--da-surface-muted);color:var(--da-text-muted);cursor:not-allowed}
.ui-status{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:750;line-height:1}.ui-status--info{background:var(--da-primary-soft);color:var(--da-primary-hover)}.ui-status--success{background:var(--da-success-soft);color:var(--da-success-ink)}.ui-status--warning{background:var(--da-warning-soft);color:var(--da-warning-ink)}.ui-status--danger{background:var(--da-danger-soft);color:var(--da-danger-ink)}.ui-status--ai{background:var(--da-ai-soft);color:var(--da-ai)}
.ui-tabs{display:flex;gap:4px;overflow-x:auto;padding:4px;border:1px solid var(--da-border);border-radius:var(--da-radius-md);background:var(--da-surface-soft)}.ui-tabs__tab{min-height:36px;padding:0 12px;border:0;border-radius:7px;background:transparent;color:var(--da-text-muted);font-size:12px;font-weight:700;white-space:nowrap}.ui-tabs__tab[aria-selected="true"]{background:var(--da-surface);color:var(--da-primary);box-shadow:var(--da-shadow-sm)}
.ui-empty{display:grid;justify-items:center;gap:6px;padding:32px 20px;border:1px dashed var(--da-border-strong);border-radius:var(--da-radius-md);background:var(--da-surface-soft);color:var(--da-text-muted);text-align:center}.ui-empty strong{color:var(--da-text)}.ui-upload{display:grid;justify-items:center;gap:8px;padding:24px;border:1px dashed #b8c4dd;border-radius:var(--da-radius-md);background:#fafbff;color:var(--da-text-muted);text-align:center}.ui-upload:focus-within{border-color:var(--da-primary);box-shadow:var(--da-focus)}.ui-table-wrap{overflow-x:auto;border:1px solid var(--da-border);border-radius:var(--da-radius-md);background:var(--da-surface)}.ui-table{width:100%;min-width:640px;border-collapse:collapse;font-size:13px}.ui-table th,.ui-table td{padding:12px 14px;border-bottom:1px solid var(--da-border);text-align:left}.ui-table th{background:var(--da-surface-soft);color:var(--da-text-muted);font-size:11px;letter-spacing:.05em;text-transform:uppercase}.ui-table tr:last-child td{border-bottom:0}
.ui-dialog{width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;overflow:auto}.ui-dialog__header,.ui-dialog__body,.ui-dialog__footer{padding:20px}.ui-dialog__header{border-bottom:1px solid var(--da-border)}.ui-dialog__footer{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--da-border)}

/* The update notice is a shell component. It is anchored to the content canvas
   rather than a page end, so short viewports and the sidebar cannot clip it. */
.app-update-notice{position:fixed;z-index:1200;inset-block-start:max(16px,env(safe-area-inset-top));inset-inline-start:calc(var(--da-sidebar-width) + clamp(20px,4vw,56px));inset-inline-end:clamp(20px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:min(100%,640px);margin-inline:auto;padding:13px 14px;border:1px solid var(--da-border);border-radius:var(--da-radius-md);background:var(--da-surface);box-shadow:var(--da-shadow-md);color:var(--da-text)}
.app-update-notice__message{min-width:0;color:var(--da-text-muted);font-size:12px;line-height:1.45}.app-update-notice__action{min-width:max-content;min-height:38px;padding-inline:12px;font-size:12px}

/* Responsive navigation controller. The control and backdrop are injected by
   app.js to preserve legacy route markup while providing a real drawer. */
.app-nav-backdrop,.app-nav-toggle{display:none}

/* Visual QA pass: evidence, messaging and account are migrated to the shared
   light primitives without changing their data, events or API contracts. */
#app>aside nav button.active,#app>aside nav button[aria-current="page"]{background:var(--da-primary-soft);color:var(--da-primary);box-shadow:inset 3px 0 0 var(--da-primary)}
#evidence .evidence-back{display:inline-flex;align-items:center;min-height:36px;margin:0 0 12px;padding:0;border:0;background:transparent;color:var(--da-primary);font-size:13px;font-weight:750;box-shadow:none}
#evidence .evidence-back:hover{background:transparent;color:var(--da-primary-hover)}
#evidenceList{display:grid;gap:0;min-width:0}#evidence .evidence-day-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-width:0;min-height:62px;margin:0;padding:11px 2px;border:0;border-bottom:1px solid var(--da-border);border-radius:0;background:transparent;color:var(--da-text);text-align:left;box-shadow:none}#evidence .evidence-day-row:hover{background:transparent;color:var(--da-text)}#evidence .evidence-day-row:first-child{border-top:1px solid var(--da-border)}#evidence .evidence-day-row>div{min-width:0}#evidence .evidence-day-row b,#evidence .evidence-day-row small{display:block}#evidence .evidence-day-row b{font-size:13px;line-height:1.35}#evidence .evidence-day-row small{overflow:hidden;margin-top:3px;color:var(--da-text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}#evidence .evidence-day-row>span{color:var(--da-primary);font-size:11px;font-weight:750;white-space:nowrap}
#evidence .evidence-subject{margin:0 0 10px;padding:13px 15px;border:1px solid var(--da-border);border-radius:var(--da-radius-lg);background:var(--da-surface);box-shadow:var(--da-shadow-sm)}
#evidence .evidence-subject-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--da-border)}
#evidence .evidence-subject-head span{color:var(--da-text-muted);font-size:10px;font-weight:800;letter-spacing:.1em}.evidence-subject-head h3{margin:3px 0 0;color:var(--da-text);font-size:16px}.evidence-subject-head>b{padding:5px 8px;border-radius:999px;background:var(--da-primary-soft);color:var(--da-primary);font-size:11px;white-space:nowrap}
#evidence .evidence-summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 0;border:0;border-bottom:1px solid #eef1f5;border-radius:0;background:transparent;color:var(--da-text);text-align:left;box-shadow:none}
#evidence .evidence-summary-row:last-child{border-bottom:0}.evidence-summary-row:hover{background:transparent;color:var(--da-text)}.evidence-summary-row b{display:block;font-size:13px}.evidence-summary-row small{display:block;overflow:hidden;margin-top:3px;color:var(--da-text-muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.review-badge{display:inline-flex;align-items:center;justify-content:center;min-height:26px;max-width:100%;padding:5px 8px;border:0;border-radius:999px;font-size:10px;font-weight:750;line-height:1.1;white-space:nowrap}.review-badge.green{background:var(--da-success-soft);color:#18845d}.review-badge.yellow{background:var(--da-warning-soft);color:#a85f00}.review-badge.red{background:var(--da-danger-soft);color:var(--da-danger)}.review-badge.blue{background:var(--da-primary-soft);color:var(--da-primary)}
#evidence .evidence-card{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(260px,.9fr);gap:14px;padding:0;border:0;background:transparent;box-shadow:none}.evidence-heading,.submission-stats,.student-note{grid-column:1/-1}.evidence-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 0}.evidence-heading h3{margin:4px 0 0;color:var(--da-text);font-size:18px;line-height:1.35;overflow-wrap:anywhere}.evidence-heading small{color:var(--da-text-muted);font-size:11px}.submission-stats{display:flex;flex-wrap:wrap;gap:6px}.submission-stats span{padding:5px 8px;border-radius:7px;background:var(--da-surface-soft);color:var(--da-text-muted);font-size:11px}.student-note{margin:0;padding:10px 12px;border-left:3px solid #cbd5ff;background:#fafbff;color:var(--da-text-muted);font-size:12px;line-height:1.5}.evidence-photos{min-width:0}.single-photo-viewer{display:grid;gap:9px;padding:10px;border:1px solid var(--da-border);border-radius:var(--da-radius-lg);background:var(--da-surface)}.single-evidence-image{display:block;width:100%;max-height:64dvh;object-fit:contain;border-radius:9px;background:var(--da-surface-soft)}.photo-controls{display:flex;align-items:center;justify-content:space-between;gap:8px}.photo-controls button{min-height:34px;padding:0 9px;font-size:11px}.photo-position{color:var(--da-text-muted);font-size:11px}.photo-original{color:var(--da-primary);font-size:12px;font-weight:700}.ai-note{align-self:start;padding:14px;border:1px solid var(--da-border);border-radius:var(--da-radius-lg);background:var(--da-surface)}.ai-note b{color:var(--da-ai);font-size:12px}.ai-note p{margin:7px 0;color:var(--da-text);font-size:12px;line-height:1.5}.ai-note small{color:var(--da-text-muted)}.review-actions{display:flex;flex-wrap:wrap;gap:8px;grid-column:2}.review-actions button{min-height:38px;font-size:12px}

/* Student-owned exam records deliberately share the evidence surface without
   ever reading plan tasks.  The form stays a compact dialog on touch devices. */
#exams .head-actions{display:flex;flex-wrap:wrap;gap:8px}#exams .exam-record{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"heading actions" "stats actions" "media actions";align-items:start;gap:10px 18px;padding:15px 16px;border:1px solid var(--da-border);border-radius:var(--da-radius-lg);background:var(--da-surface);box-shadow:var(--da-shadow-sm)}#exams .exam-record .evidence-heading{grid-area:heading;padding:0}#exams .exam-record .submission-stats{grid-area:stats}#exams .exam-record .exam-media-gallery{grid-area:media}#exams .exam-record__actions{grid-area:actions;align-self:end;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}#exams .exam-record__actions button{min-height:36px;padding-inline:11px;font-size:12px}.exam-entry-dialog{width:min(680px,calc(100vw - 32px))}.exam-entry-dialog h2,.exam-delete-dialog h2{margin:4px 0 0;font-size:22px;letter-spacing:-.035em}.exam-entry-dialog p,.exam-delete-dialog p{margin:6px 0 0;color:var(--da-text-muted);font-size:13px}.exam-entry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.exam-entry-grid__wide{grid-column:1/-1}.ui-field__label em{color:var(--da-text-muted);font-style:normal;font-weight:500}.exam-net-fields{display:grid;grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:14px;border:1px solid var(--da-border);border-radius:var(--da-radius-md)}.exam-net-fields legend{padding:0 5px;color:var(--da-text-muted);font-size:11px;font-weight:800;letter-spacing:.08em}.exam-image-upload{display:grid;gap:7px;padding:13px;border:1px dashed var(--da-border-strong);border-radius:var(--da-radius-md);background:var(--da-surface-muted)}.exam-image-upload small{color:var(--da-text-muted);font-size:12px}.exam-media-gallery{display:flex;flex-wrap:wrap;gap:8px;min-width:0}.exam-media-gallery a{display:block;width:74px;height:74px;overflow:hidden;border:1px solid var(--da-border);border-radius:10px;background:var(--da-surface-muted)}.exam-media-gallery img{display:block;width:100%;height:100%;object-fit:cover}.exam-entry-dialog .ui-dialog__footer,.exam-delete-dialog .ui-dialog__footer{position:sticky;bottom:0;background:var(--da-surface)}
#messages .message-center{overflow:hidden;padding:0;border:1px solid var(--da-border);border-radius:var(--da-radius-lg);background:var(--da-surface);box-shadow:var(--da-shadow-sm)}#messages .message-center>.head{padding:18px 20px;border-bottom:1px solid var(--da-border)}#messages .chat-center{display:grid;grid-template-columns:minmax(230px,290px) minmax(0,1fr);min-height:540px;margin:0;gap:0}#messages .message-contacts{padding:10px;border-right:1px solid var(--da-border);background:var(--da-surface-soft)}#messages .message-contact,#messages .message-contacts button{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;width:100%;min-width:0;margin:0 0 5px;padding:9px 10px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--da-text);text-align:left}#messages .message-contact::before{content:attr(data-initial);grid-column:1;grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:#e6eaff;color:var(--da-primary);font-size:12px;font-weight:850}#messages .message-contact>span{grid-column:2;grid-row:1;overflow:hidden;font-size:12px;font-weight:780;text-overflow:ellipsis;white-space:nowrap}#messages .message-contact>small{grid-column:2;grid-row:2;overflow:hidden;color:var(--da-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}#messages .message-contact>b{grid-column:3;grid-row:1/3;align-self:center;min-width:22px;padding:3px 6px;border-radius:999px;background:var(--da-primary);color:#fff;font-size:10px;text-align:center}#messages .message-contact.active,#messages .message-contacts button.active{border-color:#cfd7ff;background:var(--da-primary-soft);color:var(--da-primary)}#messages .message-contact.active::before{background:var(--da-primary);color:#fff}#messages .message-thread{display:grid;grid-template-rows:auto minmax(260px,1fr) auto;padding:0;background:var(--da-surface)}#messages .message-thread-title{padding:14px 18px;border-bottom:1px solid var(--da-border);color:var(--da-text);font-size:13px;font-weight:800}#messages .message-list{padding:16px;max-height:52vh;overflow:auto;background:#fbfcff;overscroll-behavior:contain}#messages .chat-message{display:flex;margin:8px 0}#messages .chat-message>div{max-width:min(76%,620px);min-width:0;padding:10px 12px;border:1px solid var(--da-border);border-radius:14px 14px 14px 5px;background:#f1f3f6;color:var(--da-text);box-shadow:none}#messages .chat-message.mine{justify-content:flex-end}#messages .chat-message.mine>div{border-color:#d3dcff;background:var(--da-primary-soft);color:#243a9b}#messages .chat-message b{display:block;font-size:12px;line-height:1.35;overflow-wrap:anywhere}#messages .chat-message p{margin:4px 0 5px;line-height:1.45;overflow-wrap:anywhere}#messages .chat-message small{color:var(--da-text-muted);font-size:10px}#messages .direct-message-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--da-border);background:var(--da-surface)}#messages .direct-message-form input{grid-column:1/-1}#messages .direct-message-form textarea{min-height:64px;max-height:132px;resize:vertical}#messages .direct-message-form button{min-width:96px}
#account .account-layout{gap:18px;align-items:start}#account .account-avatar{padding:20px;border:1px solid var(--da-border);border-radius:var(--da-radius-lg);background:var(--da-surface);box-shadow:var(--da-shadow-sm)}#account .account-tabs{gap:4px;padding:4px;border:1px solid var(--da-border);border-radius:var(--da-radius-md);background:var(--da-surface-soft)}#account .account-tabs button{min-height:38px;border:0;background:transparent;color:var(--da-text-muted)}#account .account-tabs button.active{background:var(--da-surface);color:var(--da-primary);box-shadow:var(--da-shadow-sm)}
footer{margin-top:32px;padding:16px 0;color:var(--da-text-muted);font-size:11px;text-align:center}

/* The persistent desktop sidebar already owns product identity. Keep the
   compact brand cue only where the sidebar is collapsed into a drawer. */
@media (min-width:961px){.app-topbar__eyebrow{display:none}}

@media (max-width:960px){
  :root{--da-sidebar-width:0px}
  .app-topbar{min-height:48px;margin-bottom:16px;padding:8px 0 10px 54px}.app-topbar__eyebrow{font-size:9px}.app-topbar__context>span:last-child{font-size:11px}
  /* Exception: v14.css still ships a fixed bottom navigation with !important.
     These declarations are limited to the shared drawer geometry until that
     legacy module can be retired after its own screen migration. */
  #app>aside{position:fixed!important;inset:0 auto 0 0!important;width:min(320px,86vw)!important;height:100dvh!important;max-width:320px!important;right:auto!important;bottom:auto!important;transform:translateX(-105%)!important}
  #app>aside.mobile-nav-open{transform:translateX(0)!important}
  #app>aside .brand{display:flex!important}
  #app>aside.mobile-nav-open .sidebar-brand{padding-left:48px}
  #app>aside>#logout{display:block!important}
  #app>aside nav{position:static!important;right:auto!important;bottom:auto!important;left:auto!important;display:grid!important;grid-template-columns:1fr!important;max-height:none!important;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
  #app>aside .mobile-nav-bar{display:none!important}
  body.app-drawer-open{overflow:hidden}
  #app{display:block}
  #app>aside{position:fixed;z-index:1001;inset:0 auto 0 0;width:min(320px,86vw);height:100dvh;max-width:320px;padding:18px 14px 14px;overflow-y:auto;transform:translateX(-105%);transition:transform 180ms ease;box-shadow:12px 0 32px rgb(16 24 40 / .16)}
  #app>aside.mobile-nav-open{transform:translateX(0)}
  #app>aside nav{border:0;background:transparent;box-shadow:none}
  #app>main{width:100%;margin-left:0;padding:20px 14px 32px}
  #app>main>header{margin-bottom:20px;padding-bottom:16px}
  .app-nav-backdrop{display:block;position:fixed;z-index:1000;inset:0;border:0;background:rgb(15 23 42 / .38);opacity:0;pointer-events:none;transition:opacity 180ms ease}.app-nav-backdrop.is-visible{opacity:1;pointer-events:auto}
  .app-nav-toggle{position:fixed;z-index:1002;top:max(12px,env(safe-area-inset-top));left:12px;display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;border:1px solid var(--da-border);border-radius:10px;background:var(--da-surface);color:var(--da-text);box-shadow:var(--da-shadow-md);font-size:0}.app-nav-toggle .nav-icon,.app-nav-toggle svg{display:block;width:20px;height:20px}.app-nav-toggle:hover{background:var(--da-surface-soft)}.app-nav-toggle{transition:opacity 160ms ease,transform 160ms ease,background 160ms ease}.app-nav-toggle.app-nav-toggle-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px)}
  #app>main>header{padding-left:54px}
  .card{padding:16px}
  .app-update-notice{inset-inline:12px;width:auto}
}
@media (min-width:961px) and (max-width:1120px){
  :root{--da-sidebar-width:224px}
  #app>aside{width:224px}
  #app>main{width:calc(100% - 224px);margin-left:224px;padding-inline:28px}
}
@media (max-width:720px){
  .page-header{align-items:stretch;flex-direction:column;gap:12px}.page-header__actions{width:100%}.page-header__actions .ui-button{flex:1}
  #evidence .evidence-card{grid-template-columns:1fr;gap:12px}.evidence-heading,.submission-stats,.student-note,.review-actions{grid-column:1}.evidence-heading{align-items:flex-start;flex-direction:column}.single-evidence-image{max-height:54dvh}.review-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.review-actions button{width:100%}
  #messages .chat-center{grid-template-columns:1fr;min-height:0}#messages .message-contacts{display:flex;gap:7px;overflow-x:auto;padding:9px;border-right:0;border-bottom:1px solid var(--da-border)}#messages .message-contact,#messages .message-contacts button{width:auto;min-width:150px;margin:0;white-space:nowrap}#messages .message-thread{min-height:450px}#messages .message-list{max-height:48dvh;padding:12px}#messages .chat-message>div{max-width:88%}#messages .direct-message-form{padding:10px 12px 12px}
  #account .account-layout{grid-template-columns:1fr}#exams .head-actions{width:100%}#exams .head-actions button{flex:1}#exams .exam-record{grid-template-columns:1fr;grid-template-areas:"heading" "stats" "media" "actions"}#exams .exam-record__actions{align-self:auto;justify-content:flex-start}#exams .exam-record__actions button{flex:1}.exam-entry-grid{grid-template-columns:1fr}.exam-net-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.exam-entry-dialog .ui-dialog__body{padding:16px}.exam-entry-dialog .ui-dialog__header,.exam-entry-dialog .ui-dialog__footer{padding:16px}
  #evidence .evidence-day-row{grid-template-columns:1fr auto;gap:9px;padding:11px 0}#evidence .evidence-subject{padding:12px}#evidence .evidence-summary-row{grid-template-columns:1fr;gap:7px}#evidence .evidence-summary-row .review-badge{justify-self:start}.photo-controls{gap:5px}.photo-controls button{padding-inline:8px}.extra-study-evidence__list article{min-width:0}
}
@media (max-width:480px){
  .app-topbar{margin-bottom:12px}.app-topbar__actions .badge{display:none}.app-topbar__account{min-height:34px;padding-inline:9px}
  #app>main{padding-inline:10px}
  .card{padding:14px}
  .metrics,.role-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics article,.role-metrics article{min-height:104px;padding:14px}
  .app-update-notice{grid-template-columns:1fr;align-items:stretch}.app-update-notice__action{width:100%}
  .avatar-crop-dialog{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:15px}.avatar-crop-dialog .head{align-items:center}.avatar-crop-dialog .head button{min-height:36px;padding-inline:10px}.avatar-crop-dialog .actions{display:grid;grid-template-columns:1fr 1fr}.avatar-crop-dialog .actions button{width:100%;padding-inline:8px}
}

/* Admin and coach workspaces: existing controls and data contracts, rebuilt as
   compact light SaaS surfaces. */
#admin{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:start}#admin>[hidden]{display:none}#admin>.metrics{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0}#admin>.metrics article{min-height:116px;display:flex;flex-direction:column;justify-content:space-between}#admin>.metrics article b{font-size:28px;letter-spacing:-.04em}#admin>.metrics article button{width:max-content;min-height:38px;padding:0 12px;font-size:12px}#admin>.card{grid-column:1/-1;min-width:0;margin:0;padding:20px}#admin h2{margin:0 0 14px;font-size:18px}#admin h3{margin:18px 0 10px;font-size:15px}#admin hr{margin:18px 0;border:0;border-top:1px solid var(--da-border)}#admin .grid{gap:10px}#admin #adminUsers,#admin #adminTopics{display:grid;gap:0;overflow:auto;max-height:440px;border:1px solid var(--da-border);border-radius:10px;background:var(--da-surface)}#admin .task{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin:0;padding:12px 14px;border:0;border-bottom:1px solid var(--da-border);border-radius:0;background:var(--da-surface);box-shadow:none}#admin .task:last-child{border-bottom:0}#admin .task b{font-size:13px}#admin .task small{font-size:11px}#admin .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}#admin .actions button{min-height:34px;padding:0 10px;font-size:11px}#admin #adminBookSelect{width:100%;margin-bottom:10px}
.role-hub{display:grid;gap:16px}.role-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:0 0 18px;border-bottom:1px solid var(--da-border)}.role-hero h2{margin:5px 0;color:var(--da-text);font-size:26px;letter-spacing:-.035em}.role-hero p{margin:0;color:var(--da-text-muted);font-size:13px}.role-controls{display:flex;flex-wrap:wrap;align-items:end;justify-content:flex-end;gap:8px}.role-controls label{display:grid;gap:5px;color:var(--da-text-muted);font-size:11px;font-weight:700}.role-controls select{min-width:130px}.role-week-navigator{display:flex;align-items:center;gap:7px;min-height:42px;padding:5px 7px;border:1px solid var(--da-border);border-radius:10px;background:var(--da-surface)}.role-week-navigator button{min-width:32px;min-height:32px;padding:0}.role-week-navigator span{display:block;color:var(--da-text-muted);font-size:10px}.role-week-navigator strong{display:block;font-size:11px}.role-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}.role-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.role-grid>.card,.role-stack>.card{margin:0}.role-task-list,.activity-timeline,#roleSubmissions,#roleNotes{overflow:hidden;border:1px solid var(--da-border);border-radius:10px;background:var(--da-surface)}.role-task-list .task,.activity-timeline .task{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;margin:0;padding:13px 14px;border:0;border-bottom:1px solid var(--da-border);border-radius:0;background:var(--da-surface);box-shadow:none}.role-task-list .task:last-child,.activity-timeline .task:last-child{border-bottom:0}.role-alerts{display:grid;gap:8px}.role-alerts>*{margin:0;border-color:#d7ddff;background:var(--da-primary-soft);color:var(--da-text)}
/* Removed smart-repeat interface. The old API can remain until its own backend retirement. */
#repeats,[data-open-view="repeats"],#dashboardRepeatList,.summary-repeats{display:none}
/* Compact source-program stepper; scoped to the existing planner markup. */
#resources .program-stepper,.study-planner .program-stepper,.planner-stepper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px}.program-stepper>*{min-height:72px;padding:12px;border:1px solid var(--da-border);border-radius:10px;background:var(--da-surface);color:var(--da-text)}.program-stepper .active{border-color:#cbd5ff;background:var(--da-primary-soft);color:var(--da-primary)}
@media (max-width:900px){#admin>.card:nth-of-type(1),#admin>.card:nth-of-type(2),#admin>.card:nth-of-type(3){grid-column:1/-1}.role-hero{flex-direction:column}.role-controls{justify-content:flex-start}.role-grid{grid-template-columns:1fr}.role-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){#admin>.metrics{grid-template-columns:1fr}#admin .task,.role-task-list .task,.activity-timeline .task{grid-template-columns:1fr;align-items:start}#admin .actions{justify-content:flex-start}.role-controls>*{width:100%}.role-controls select,.role-controls button{width:100%}.program-stepper{grid-template-columns:1fr}.role-metrics{grid-template-columns:1fr}}
/* Direct admin routes set [hidden]; legacy display declarations require this explicit boundary. */
#admin>[hidden]{display:none!important}
#adminSecurityCenter [hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:0.01ms!important;animation-iteration-count:1!important}}
.exam-media-item{display:grid;gap:5px;width:74px}.exam-media-item .exam-media-delete{min-height:30px;padding:4px 7px;font-size:11px}

/* UI-V1.1 approved visual correction. The selectors below deliberately stay
   inside the shared shell and student Today surface; route and data contracts
   remain owned by the existing application modules. */
:root {
  --da-sidebar-width: 236px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --da-bg: #101a2c;
  --da-surface: #19263b;
  --da-surface-soft: #202e45;
  --da-surface-muted: #26354d;
  --da-text: #e8eef9;
  --da-text-muted: #adbad0;
  --da-text-subtle: #93a3bd;
  --da-placeholder: #8796ae;
  --da-border: #304158;
  --da-border-strong: #43566f;
  --da-primary: #809cff;
  --da-primary-hover: #a5b7ff;
  --da-primary-soft: #263858;
  --da-primary-border: #40577b;
  --da-success: #69c6a7;
  --da-success-soft: #173d35;
  --da-success-ink: #8bd4bd;
  --da-surface-tint: #162338;
  --da-separator: #2b3a50;
  --da-shadow-sm: 0 1px 2px rgb(0 0 0 / .16);
  --da-shadow-md: 0 14px 34px rgb(0 0 0 / .22);
  --bg: var(--da-bg);
  --panel: var(--da-surface);
  --panel-2: var(--da-surface-soft);
  --line: var(--da-border);
  --text: var(--da-text);
  --muted: var(--da-text-muted);
  --brand: var(--da-primary);
}

#app > aside {
  width: 236px;
  padding: 0 19px;
  border-right: 0;
  background: #172640;
  box-shadow: 8px 0 28px rgb(12 24 44 / .1);
}

#app > aside .brand {
  min-height: 91px;
  margin: 0;
  padding: 16px 5px;
  border-color: rgba(255, 255, 255, .1);
}

.sidebar-brandmark {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #365ce6;
  color: #fff;
  font-size: 22px;
  font-weight: 850;
}

#app > aside .brand h2 {
  color: #fff;
  font-size: 17px;
}

#app > aside .brand small {
  color: #90a3c2;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
}

#app > aside nav {
  gap: 5px;
  padding: 13px 0;
}

#app > aside nav button {
  min-height: 43px;
  padding: 10px 12px;
  color: #b9c7dc;
  font-size: 12px;
  font-weight: 500;
}

#app > aside nav button:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

#app > aside nav button.active,
#app > aside nav button[aria-current="page"] {
  background: #365ce6;
  color: #fff;
  box-shadow: 0 7px 16px rgba(13, 28, 56, .24);
}

#app > aside nav button.active::before {
  display: none;
}

#app > aside .nav-group {
  margin: 8px 12px 10px;
  color: #7287a8;
  font-size: 10px;
  letter-spacing: 1.3px;
}

.sidebar-bottom {
  flex: 0 0 auto;
  display: grid;
  gap: 10px;
  padding: 10px 0 12px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.sidebar-support {
  padding: 15px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
}

.sidebar-support b {
  color: #eef3fb;
  font-size: 12px;
}

.sidebar-support span {
  color: #91a3bf;
  font-size: 11px;
  line-height: 1.5;
}

.sidebar-profile {
  min-width: 0;
  padding: 6px 7px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
}

.sidebar-profile > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #2d4264;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.sidebar-profile b,
.sidebar-profile small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-profile b {
  color: #f4f7fc;
  font-size: 12px;
}

.sidebar-profile small {
  margin-top: 2px;
  color: #8fa2bf;
  font-size: 10px;
}

.sidebar-footer {
  padding: 10px 0 13px;
  border-color: rgba(255, 255, 255, .09);
  background: transparent;
}

.sidebar-footer form,
.sidebar-footer #logout {
  width: 100%;
}

.sidebar-footer #logout {
  min-height: 44px;
  border-color: rgba(255, 255, 255, .09);
  background: rgba(255, 255, 255, .04);
  color: #b9c7dc;
  font-size: 12px;
}

#app > main {
  width: calc(100% - 236px);
  margin-left: 236px;
  padding: 0 34px 38px;
}

.app-topbar {
  width: calc(100% + 68px);
  min-height: 76px;
  margin: 0 -34px 28px;
  padding: 0 34px;
  border-bottom: 1px solid var(--da-border);
  background: var(--da-surface);
}

.app-topbar__context > span:last-child {
  font-size: 12px;
}

.app-topbar__actions {
  flex-wrap: wrap;
  gap: 9px;
}

.app-topbar__actions .theme-control,
.header-actions .theme-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid var(--da-border);
  border-radius: 11px;
  background: var(--da-bg);
  color: var(--da-text);
  font-size: 14px;
}

.theme-control #themeSelect {
  width: auto;
  max-width: 160px;
  min-height: 42px;
  padding: 7px 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--da-text);
  font-size: 16px;
  box-shadow: none;
}

.app-topbar__account {
  min-height: 44px;
  padding: 10px 13px;
  border-radius: 11px;
  font-size: 13px;
}

.app-topbar__actions .badge {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
}

.dashboard-profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-profile i {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--da-primary-soft);
  color: var(--da-primary);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.dashboard-profile b,
.dashboard-profile small {
  display: block;
  line-height: 1.25;
}

.dashboard-profile b {
  color: var(--da-text);
  font-size: 12px;
}

.dashboard-profile small {
  margin-top: 2px;
  color: var(--da-text-muted);
  font-size: 10px;
}

#app > main > header {
  width: 100%;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border: 0;
}

#app > main > header small {
  display: block;
  margin-bottom: 6px;
  color: var(--da-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
}

#app > main > header h1 {
  margin: 0;
  font-size: 31px;
  line-height: 1.25;
  letter-spacing: -1px;
}

#app > main > header p {
  margin: 7px 0 0;
  color: var(--da-text-muted);
  font-size: 13px;
}

.header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.header-planner-action {
  min-height: 44px;
  padding: 11px 17px;
  border-color: var(--da-border);
  background: var(--da-surface);
  color: var(--da-text);
  font-size: 13px;
  font-weight: 650;
}

.header-planner-action:hover {
  background: var(--da-surface-soft);
  border-color: var(--da-border-strong);
}

.header-planner-action > span[aria-hidden="true"] {
  display: none;
}

.view {
  width: 100%;
  max-width: none;
}

html[data-theme="dark"] #app > aside {
  background: #0d1626;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .metrics article,
html[data-theme="dark"] .role-metrics article,
html[data-theme="dark"] dialog,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color: var(--da-text);
  background: var(--da-surface);
  border-color: var(--da-border);
}

@media (min-width: 961px) and (max-width: 1120px) {
  :root {
    --da-sidebar-width: 224px;
  }

  #app > aside {
    width: 224px;
  }

  #app > main {
    width: calc(100% - 224px);
    margin-left: 224px;
    padding-inline: 26px;
  }

  .app-topbar {
    width: calc(100% + 52px);
    margin-inline: -26px;
    padding-inline: 26px;
  }
}

@media (max-width: 960px) {
  :root {
    --da-sidebar-width: 0px;
  }

  #app > aside {
    padding: 0 13px;
    background: #172640;
  }

  #app > main {
    width: 100%;
    margin-left: 0;
    padding: 0 16px 30px;
  }

  .app-topbar {
    width: calc(100% + 32px);
    min-height: 65px;
    margin: 0 -16px 22px;
    padding: 10px 16px 10px 66px;
    flex-wrap: wrap;
  }

  #app > main > header {
    padding-left: 0;
  }

  #app > main > header h1 {
    font-size: 26px;
  }
}

@media (max-width: 620px) {
  #app > main {
    padding-inline: 16px;
  }

  .app-topbar {
    width: calc(100% + 32px);
    margin-inline: -16px;
    padding-left: 62px;
    padding-right: 16px;
  }

  .app-topbar__actions .badge,
  .dashboard-profile span {
    display: none;
  }

  .app-topbar__actions {
    flex: 1 1 auto;
    gap: 7px;
  }

  .theme-control #themeSelect {
    max-width: 128px;
  }

  #app > main > header {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }

  .header-actions,
  .header-planner-action {
    width: 100%;
  }

  .header-planner-action {
    justify-content: center;
  }
}


/* Toasts stay visible above mobile browser controls and leave document flow. */
#toast{position:fixed;z-index:280;top:calc(12px + env(safe-area-inset-top,0px));right:18px;bottom:auto;left:auto;width:max-content;max-width:min(520px,calc(100vw - 36px));box-sizing:border-box;padding:12px 16px;border:1px solid var(--da-border);border-radius:var(--da-radius-md);background:#1f2937;color:#fff;box-shadow:var(--da-shadow-md);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-18px);transition:opacity 180ms ease,transform 180ms ease,visibility 0s linear 180ms}
#toast.show{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
@media(max-width:820px){
 #toast{top:calc(12px + env(safe-area-inset-top,0px));right:12px;bottom:auto;left:12px;width:auto;max-width:none;text-align:center;overflow-wrap:anywhere;transform:translateY(-18px)}
 #toast.show{transform:translateY(0)}
}