/* SchoolBridge Studio — shared presentation layer.
 * Keep this file identical in both independently deployed portals.
 * Existing feature styles and API contracts remain in their original files.
 */
.studio-interface {
  --bg: #f5f7fa;
  --card: #ffffff;
  --primary: #205ecf;
  --primary-light: #3373db;
  --primary-muted: #edf3ff;
  --text: #172b43;
  --text-muted: #52657b;
  --text-light: #60738a;
  --border: #dce4ed;
  --border-light: #e9eef4;
  --font: 'DM Sans', 'Noto Sans Arabic', sans-serif;
  --font-display: var(--font);
  font-size: 15px;
  line-height: 1.6;
}
html[lang="ar"] .studio-interface { --font: 'Noto Sans Arabic', 'DM Sans', sans-serif; }
.studio-interface button, .studio-interface input, .studio-interface select, .studio-interface textarea { font-family: var(--font); }
.studio-interface button { transition: background-color .15s, border-color .15s, box-shadow .15s; }
.studio-interface :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.studio-interface :is(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .6; }
.studio-interface .app-shell { height: 100dvh; }
.studio-interface .sidebar { width: 264px; background: #fff; border-inline-end: 1px solid var(--border); }
.studio-interface .sidebar-logo { padding: 24px 20px; min-height: 92px; }
.studio-interface .sidebar-logo-title { font-size: 17px; letter-spacing: -.4px; }
.studio-interface .sidebar-logo-sub { font-size: 12px; color: var(--text-muted); }
.studio-interface .sidebar-logo-icon { width: 40px; height: 40px; flex: 0 0 40px; }
.studio-interface .sidebar-nav { padding: 8px 12px 24px; gap: 4px; overflow-y: auto; min-height: 0; }
.studio-interface .sidebar-nav button { min-height: 43px; font-size: 13px; line-height: 1.4; padding: 10px 12px; border-radius: 9px; color: #40546b; text-align: start; }
.studio-interface .sidebar-nav button svg { flex: 0 0 18px; width: 18px; height: 18px; }
.studio-interface .sidebar-nav button.active { color: #194fb2; background: #edf3ff; box-shadow: inset 3px 0 #205ecf; font-weight: 700; }
html[dir="rtl"] .studio-interface .sidebar-nav button.active { box-shadow: inset -3px 0 #205ecf; }
.studio-interface .sidebar-nav button:hover { background: #f1f5fa; }
.studio-interface .sidebar-nav .sidebar-group-toggle { min-height: 36px; margin-top: 12px; font-size: 11px; font-weight: 700; color: #60738a; text-transform: uppercase; letter-spacing: .07em; background: transparent; }
.studio-interface .sidebar-group-count { display: none; }
.studio-interface .sidebar-group-items { padding-inline-start: 0; }
.studio-interface .sidebar-group-items button { padding-inline-start: 12px; }
.studio-nav-heading { margin: 20px 12px 7px; font-size: 11px; color: #60738a; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
html[dir="rtl"] .studio-interface :is(.studio-nav-heading, .sidebar-group-toggle, .studio-eyebrow) { letter-spacing: 0; }
.studio-interface .sidebar-school { margin: 8px 16px; padding: 14px; background: #f6f8fc; border: 1px solid var(--border-light); border-radius: 12px; }
.studio-interface .sidebar-school :is(small, span, .school-label, .school-id) { font-size: 11px; color: var(--text-muted); overflow-wrap: anywhere; }
.studio-interface .sidebar-school :is(strong, .school-name) { display: block; font-size: 13px; color: var(--text); }
.studio-interface .sidebar-bottom { padding: 8px 16px 16px; }
.studio-interface .sidebar-bottom button { min-height: 42px; font-size: 13px; }
.studio-interface .sidebar.collapsed { width: 76px; }
.studio-interface .sidebar.collapsed :is(.studio-nav-heading, .studio-nav-search, .sidebar-group-toggle, .sidebar-logo-text, .sidebar-label, .sidebar-school) { display: none; }
.studio-interface .sidebar.collapsed .sidebar-group-items { display: block; max-height: none; overflow: visible; }
.studio-interface .sidebar.collapsed .sidebar-logo { padding: 24px 18px; }
.studio-interface .main { min-width: 0; }
.studio-interface .topbar { min-height: 80px; padding: 16px 32px; gap: 16px; z-index: 20; background: #ffffffed; backdrop-filter: blur(14px); }
.studio-interface .topbar-left { flex: 1; min-width: 0; }
.studio-interface .topbar-title { font-size: 20px; font-weight: 700; line-height: 1.35; letter-spacing: -.5px; }
.studio-interface .topbar-sub { font-size: 12px; margin-top: 3px; }
.studio-interface .topbar-right { gap: 10px; }
.studio-interface .topbar-icon-btn { width: 42px; height: 42px; flex-shrink: 0; }
.studio-interface .topbar-avatar { width: 40px; height: 40px; border-radius: 50%; background: #eaf1fc; color: #2057b1; border: 1px solid #d5e2f7; }
.studio-interface .page-content { padding: 28px 32px 56px; width: 100%; max-width: 1600px; margin-inline: auto; }
.studio-interface #content :is(p, label, td, input, select, textarea) { font-size: 14px; line-height: 1.6; }
.studio-interface #content :is(small, .muted, th, .badge-pill, .status-pill) { font-size: 12px; line-height: 1.5; }
.studio-interface #content :is(h2, h3, h4) { font-family: var(--font); color: var(--text); line-height: 1.4; letter-spacing: -.35px; }
.studio-interface #content h2 { font-size: 25px; }
.studio-interface #content h3 { font-size: 18px; }
.studio-interface #content h4 { font-size: 15px; }
.studio-interface #content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { min-height: 42px; border-radius: 9px; }
.studio-interface #content :is(input, select, textarea) { border-color: #cbd6e3; color: var(--text); background-color: #fff; }
.studio-interface #content :is(.btn-primary, .btn-secondary, .btn-ghost, .btn-subtle, .btn-danger) { min-height: 40px; font-size: 13px; font-weight: 600; line-height: 1.4; padding: 10px 15px; border-radius: 9px; white-space: normal; }
.studio-interface .btn-primary { color: #fff; background: #205ecf; border: 1px solid #205ecf; box-shadow: 0 2px 4px #205ecf18; }
.studio-interface .btn-primary:hover { background: #184eaf; border-color: #184eaf; }
.studio-interface :is(.btn-secondary, .btn-ghost) { background: #fff; color: #344d6c; border: 1px solid #ccd8e6; box-shadow: none; }
.studio-interface #content :is(.card, .mini-card, .teacher-section-card, .academic-panel, .admin-academic-panel, .admin-section-panel, .directory-user-card, .settings-section, .teacher-class-card) { border: 1px solid var(--border); border-radius: 14px; box-shadow: none; }
.studio-interface #content :is(.teacher-workspace-hero, .directory-page-hero, .settings-workspace-hero, .academic-command-hero, .admin-academic-hero) { border-radius: 16px; padding: 24px; background: #fff; border: 1px solid var(--border); box-shadow: none; gap: 20px; }
.studio-interface #content :is(.teacher-workspace-hero, .directory-page-hero, .settings-workspace-hero, .academic-command-hero, .admin-academic-hero)::after { content: none; }
.studio-interface #content :is(.directory-stat-strip, .teacher-workspace-metrics, .academic-metric-grid) { gap: 12px; }
.studio-interface #content :is(.directory-stat-strip, .teacher-workspace-metrics, .academic-metric-grid) > * { box-shadow: none; border-radius: 12px; }
.studio-interface #content :is(.directory-stat-strip, .teacher-workspace-metrics, .academic-metric-grid) :is(span, small) { font-size: 12px; }
.studio-interface #content :is(.directory-filter-bar, .directory-toolbar, .academic-toolbar, .admin-academic-toolbar) { border-radius: 12px; gap: 12px; }
.studio-interface #content .table-wrap { border-radius: 12px; }
.studio-interface #content :is(td, th) { padding: 14px 12px; vertical-align: middle; text-align: start; }
.studio-interface #content th { background: #f5f8fc; color: #52657b; font-weight: 600; }
.studio-interface #content tbody tr:hover { background: #f7faff; }
.studio-interface #content .core-records-table :is(strong, a) { font-size: 14px; }
.studio-interface #content :is(.settings-checklist, .settings-guidance-list, .settings-empty-state, .settings-save-bar, .branding-logo-manager, .settings-inline-check, .settings-technical-note, .integration-endpoint-card, .canteen-payment-mode) :is(strong, dt) { font-size: 14px; }
.studio-interface #content :is(.settings-checklist, .settings-guidance-list, .settings-empty-state, .settings-save-bar, .settings-inline-check, .settings-technical-note, .integration-endpoint-card, .canteen-payment-mode) :is(span, small, dd, code, pre) { font-size: 12px; line-height: 1.65; }
.studio-interface #content .settings-readiness-badge small { font-size: 11px; }
.studio-interface #content .settings-readiness-badge span { font-size: 12px; }
.studio-interface #content .settings-save-bar { bottom: 16px; flex-wrap: wrap; }
.studio-interface #content .settings-save-bar strong { color: #fff; }
.studio-interface #content .settings-save-bar span { color: #dbe6f3; }
.studio-interface #content .settings-save-state { font-size: 11px; }
.studio-interface #content :is(.coursework-card, .academic-lesson-card, .academic-focus-lesson, .academic-focus-day) { box-shadow: none; border-radius: 12px; }
.studio-interface #content .academic-toolbar.sticky { top: 80px; box-shadow: 0 4px 12px #152e4610; }
.studio-interface #content .academic-time { color: #915019; background: #fff1e4; }
.studio-interface [hidden] { display: none !important; }
.studio-interface #content .directory-user-fact > strong { font-size: 14px; line-height: 1.5; }
.studio-interface #content :is(.directory-user-fact > span, .directory-detail-chips span, .directory-remediation span, .directory-user-badges span) { font-size: 12px; line-height: 1.5; }
.studio-interface #content .directory-remediation strong { font-size: 14px; }
.studio-interface #content :is(.teacher-text-action, .teacher-class-card footer button, .teacher-student-card footer button) { min-height: 40px; font-size: 13px; }
.studio-interface #content .teacher-day-hero { padding: 30px; border-radius: 18px; border: 1px solid #d9e5f4; background: linear-gradient(110deg,#eef4ff,#f8fbff 68%,#fff5e9); box-shadow: none; }
.studio-interface #content .teacher-day-hero::after { content: none; }
.studio-interface #content .teacher-day-hero h2 { font-size: clamp(26px, 2.8vw, 36px); letter-spacing: -1px; margin: 8px 0; }
.studio-interface #content .teacher-day-status { min-width: 200px; background: #fff; border: 1px solid #d7e1ef; border-radius: 14px; padding: 18px; }
.studio-interface #content .teacher-day-status .btn-primary { margin-top: 12px; width: 100%; }
.studio-interface #content .teacher-day-status small { font-size: 12px; }
.studio-interface #content .teacher-quick-action { box-shadow: none; border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: #fff; }
.studio-interface #content .teacher-quick-action strong { font-size: 14px; }
.studio-interface #content .teacher-quick-action small { font-size: 12px; }
.studio-interface #content .teacher-quick-icon { background: #edf3ff; color: #205ecf; border-radius: 10px; }
.studio-interface #content .teacher-attention-card { border-radius: 12px; box-shadow: none; }
.studio-interface #content .teacher-attention-grid { grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); }
.studio-interface #content .teacher-rhythm-strip { border-radius: 14px; background: #fff; border: 1px solid var(--border); }
.studio-insights, .studio-analytics { border: 1px solid var(--border); background: #fff; border-radius: 14px; margin: 20px 0; }
.studio-insights > summary, .studio-analytics > summary { padding: 18px 22px; cursor: pointer; color: var(--text); }
.studio-insights > summary span, .studio-analytics > summary span { font-size: 13px; color: var(--text-muted); margin-inline-start: 12px; }
.studio-insights .teacher-kpi-grid { padding: 0 18px 18px; margin: 0; }
.studio-analytics > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.studio-analytics > summary strong, .studio-analytics > summary div span { display: block; margin: 0; }
.studio-analytics[open] > summary { border-bottom: 1px solid var(--border); }
.studio-analytics[open] > summary > span { transform: rotate(45deg); }
.studio-analytics-body { padding: 24px; }
.studio-desk-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px; border: 1px solid #d9e5f4; border-radius: 18px; background: linear-gradient(110deg,#eef4ff,#f8fbff 68%,#fff5e9); }
.studio-interface #content .studio-desk-head h2 { font-size: clamp(26px,2.8vw,36px); letter-spacing: -1px; margin: 8px 0; }
.studio-desk-head p { margin: 0; color: var(--text-muted); max-width: 580px; }
.studio-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #2057a4; }
.studio-desk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.studio-priorities { padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.studio-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.studio-section-title span { font-size: 12px; color: var(--text-muted); }
.studio-task { width: 100%; border: 0; border-top: 1px solid var(--border-light); display: flex; align-items: center; gap: 14px; padding: 17px 0; color: var(--text); background: #fff; text-align: start; cursor: pointer; }
.studio-task:hover { background: #f7faff; }
.studio-task-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 10px; background: #eef3fb; color: #3865a7; }
.studio-task-icon svg { width: 20px; height: 20px; }
.studio-task strong { display: block; font-size: 14px; }
.studio-task small { display: block; margin-top: 3px; color: var(--text-muted); }
.studio-task-arrow { margin-inline-start: auto; color: #60738a; }
html[dir="rtl"] .studio-task-arrow { transform: scaleX(-1); }
.studio-all-clear { padding: 18px; background: #eef8f3; border-radius: 10px; color: #266546; }
.studio-nav-search { margin: 0 16px 10px; }
.studio-nav-search input { width: 100%; min-height: 40px; padding: 9px 12px; border: 1px solid #dce4ed; border-radius: 9px; font-size: 13px; background: #f8fafd; }
.studio-nav-empty { padding: 12px; font-size: 13px; color: var(--text-muted); }
.studio-menu-button, .studio-nav-close, .studio-backdrop, .studio-chat-back { display: none; }
.studio-skip { position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 1000; padding: 12px 18px; background: #fff; border: 2px solid #205ecf; border-radius: 8px; transform: translateY(-160%); }
.studio-skip:focus { transform: none; }
.studio-interface .login-card { border-radius: 18px; box-shadow: 0 12px 40px #142c4910; padding: 32px; }
.studio-interface .login-card h2 { font-size: 24px; }
.studio-interface .login-card :is(label, input, button, .login-hint) { font-size: 14px; }
.studio-interface .login-card :is(input, .btn-full) { min-height: 46px; }
.studio-interface .login-screen { background: radial-gradient(ellipse at top,#eaf2ff,transparent 65%), #f7f9fc; }
.studio-interface .message-shell { border-radius: 14px; border: 1px solid var(--border); box-shadow: none; overflow: hidden; }
.studio-interface #content .chat { min-width: 0; }
.studio-interface #content .thread-btn { border-radius: 10px; }
.studio-interface #content .thread-family { font-size: 12px; }
.studio-interface #content .thread-time { font-size: 11px; }
.studio-interface #content .thread-main strong { font-size: 14px; }
.studio-publish-bar { position: sticky; bottom: 12px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding: 16px; border: 1px solid #cddcf0; border-radius: 12px; background: #f4f8ff; box-shadow: 0 6px 20px #172b4310; }
.studio-publish-bar strong, .studio-publish-bar small { display: block; }
.studio-interface #content .studio-publish-bar .composer-publish-button { width: auto; margin: 0; flex-shrink: 0; }
html[dir="rtl"] .studio-interface #content :is(h2,h3,h4,.teacher-eyebrow) { letter-spacing: 0; }
.studio-interface #content .chat-messages { background: #f7f9fc; }
.studio-interface #content .bubble { border-radius: 14px; box-shadow: none; font-size: 14px; }
.studio-interface #content :is(input[type="email"], input[type="url"], input[type="time"], input[type="date"], input[type="datetime-local"]) { direction: ltr; text-align: start; }
.studio-interface #content :is(code, pre) { unicode-bidi: plaintext; overflow-wrap: anywhere; }
.studio-interface #content :is(.coursework-meta, .coursework-attachments, .directory-actions, .academic-pagination) { flex-wrap: wrap; }
@media (max-width: 1200px) {
  .studio-interface .sidebar { width: 242px; }
  .studio-interface .page-content { padding: 24px; }
  .studio-interface .topbar { padding-inline: 24px; }
  .studio-desk-head { align-items: flex-start; flex-direction: column; }
  .studio-interface #content .teacher-quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .studio-interface .sidebar, .studio-interface .sidebar.collapsed { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(300px,86vw); z-index: 60; transform: translateX(-110%); visibility: hidden; transition: transform .2s, visibility .2s; box-shadow: 16px 0 50px #152e4626; }
  html[dir="rtl"] .studio-interface .sidebar, html[dir="rtl"] .studio-interface .sidebar.collapsed { transform: translateX(110%); }
  .studio-interface.studio-nav-open .sidebar { transform: translateX(0); visibility: visible; }
  .studio-interface .main { width: 100%; margin: 0; }
  .studio-interface .studio-menu-button { display: grid; place-items: center; font-size: 20px; }
  .studio-interface .studio-nav-close { display: block; position: absolute; inset-inline-end: 8px; inset-block-start: 5px; border: 0; background: transparent; font-size: 24px; width: 36px; height: 36px; color: var(--text); cursor: pointer; }
  .studio-interface.studio-nav-open .studio-backdrop { display: block; position: fixed; inset: 0; z-index: 50; background: #11253e66; border: 0; }
  .studio-interface .sidebar.collapsed :is(.sidebar-logo-text, .sidebar-label, .sidebar-school, .studio-nav-search, .studio-nav-heading) { display: block; }
  .studio-interface .sidebar.collapsed .sidebar-group-toggle { display: flex; }
  .studio-interface .sidebar.collapsed .sidebar-nav button { justify-content: flex-start; padding: 10px 12px; }
  .studio-desk-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .studio-interface .page-content { padding: 18px 16px 40px; }
  .studio-interface .topbar { min-height: 72px; padding: 12px 16px; gap: 10px; }
  .studio-interface .topbar-title { font-size: 17px; }
  .studio-interface .topbar-sub { font-size: 11px; }
  .studio-interface .topbar-right { gap: 6px; }
  .studio-interface .topbar-avatar { display: none; }
  .studio-interface #content :is(.teacher-day-hero, .studio-desk-head) { padding: 22px; flex-direction: column; align-items: stretch; }
  .studio-interface #content .teacher-day-status { min-width: 0; }
  .studio-interface #content .teacher-quick-actions { grid-template-columns: 1fr; }
  .studio-interface #content :is(input, select, textarea) { font-size: 16px; }
  .studio-interface #content :is(.teacher-workspace-hero, .directory-page-hero, .settings-workspace-hero, .academic-command-hero, .admin-academic-hero) { padding: 20px; }
  .studio-section-title { align-items: flex-start; flex-direction: column; gap: 4px; }
  .studio-priorities { padding: 18px; }
  .studio-analytics-body { padding: 16px; }
  .studio-insights > summary span { display: block; margin: 5px 0 0; }
  .studio-interface #content .academic-toolbar.sticky { position: static; }
  .studio-interface .message-shell { display: block; }
  .studio-interface #content .teacher-workspace-metrics { display: flex; flex-wrap: wrap; gap: 8px; }
  .studio-interface #content .teacher-workspace-metrics > * { flex: 1 1 85px; min-width: 0; padding: 10px; }
  .studio-interface #content .teacher-workspace-metrics strong { font-size: 22px; }
  .studio-interface #content .teacher-workspace-metrics span { font-size: 11px; }
  .studio-publish-bar { flex-wrap: wrap; }
  .studio-interface .message-shell:not(.studio-conversation-open) .chat { display: none; }
  .studio-interface .message-shell.studio-conversation-open .thread-list { display: none; }
  .studio-interface .message-shell .thread-list { max-height: none; }
  .studio-interface .message-shell .chat { min-height: 0; max-height: none; }
  .studio-interface .message-shell .chat-messages { min-height: 220px; max-height: 48dvh; overflow-y: auto; }
  .studio-interface .studio-chat-back { display: block; margin: 12px; align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-interface *, .studio-interface *::before, .studio-interface *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}