/* CRM visual system v2: one calm, dense workspace across every role and module. */
:root {
  --crm2-canvas: #f3f6fa;
  --crm2-surface: #ffffff;
  --crm2-surface-soft: #f8fafc;
  --crm2-line: #dfe6ef;
  --crm2-line-strong: #cbd6e3;
  --crm2-text: #182230;
  --crm2-muted: #667085;
  --crm2-blue: #2463df;
  --crm2-blue-soft: #eaf1ff;
  --crm2-green: #147d59;
  --crm2-green-soft: #e9f7f0;
  --crm2-orange: #a15c00;
  --crm2-orange-soft: #fff4df;
  --crm2-red: #c63838;
  --crm2-red-soft: #fff0ef;
  --crm2-radius: 12px;
  --crm2-shadow: 0 1px 2px rgba(24,34,48,.04),0 10px 26px rgba(24,34,48,.035);
}

#studentLearningReportModal { z-index: 180; }
#studentCreateModal { z-index: 180; }
body.admin-dialog-open { overflow: hidden !important; }
.modal-mask :is(button,a,input,select,textarea):focus-visible { outline: 2px solid #2463df; outline-offset: 3px; }
.student-create-dialog { width: min(720px,100%); max-height: min(760px,calc(100vh - 40px)); overflow: auto; }
.student-create-dialog .panel-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.student-create-dialog .panel-title .quiet-close { flex: 0 0 auto; }
.student-create-dialog .student-fields { padding-bottom: 12px; }
.student-form-notice { min-height: 22px; margin: 0 20px 4px; color: var(--crm2-green); font-size: 13px; line-height: 1.5; }
.student-form-notice.error { color: var(--crm2-red); }
.student-create-dialog .actions { position: sticky; bottom: 0; z-index: 1; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--crm2-line); background: #fff; }
.student-create-dialog .privacy-tip { padding-top: 12px; }
.crm-detail-summary { margin: 0 20px 12px; padding: 14px; border: 1px solid var(--crm2-line); border-radius: 12px; background: var(--crm2-surface-soft); }
.crm-detail-summary[hidden] { display: none; }
.crm-detail-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.crm-detail-summary-grid article { display: grid; align-content: start; gap: 6px; min-width: 0; }
.crm-detail-summary-grid small,.crm-detail-summary-grid span { color: var(--crm2-muted); font-size: 12px; overflow-wrap: anywhere; }
.crm-detail-summary-grid strong { font-size: 14px; color: #2e6ca4; }
.crm-detail-summary-grid select { width: 100%; min-width: 0; min-height: 36px; font-size: 12px; }
.crm-detail-summary-grid button[hidden] { display: none !important; }
.crm-detail-next { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--crm2-line); }
.crm-detail-next p { margin: 0; font-size: 13px; color: var(--crm2-muted); }
.crm-detail-next button { flex-shrink: 0; min-height: 40px; }
@media(max-width:620px) { .crm-detail-summary-grid { grid-template-columns: 1fr; gap: 10px; } .crm-detail-next { align-items: stretch; flex-direction: column; } }

body:not(.login-mode) { grid-template-columns: 248px minmax(0,1fr) !important; background: var(--crm2-canvas) !important; color: var(--crm2-text) !important; }
body:not(.login-mode) > aside {
  width: 248px !important; padding: 18px 15px 14px !important; background: #fff !important;
  border-right: 1px solid var(--crm2-line) !important; box-shadow: none !important;
}
body:not(.login-mode) > aside .brand { padding: 7px 10px 20px !important; border-bottom: 1px solid var(--crm2-line); }
body:not(.login-mode) > aside .brand strong { font-size: 16px; letter-spacing: -.01em; }
body:not(.login-mode) > aside .brand small { margin-top: 3px; color: var(--crm2-muted); }
body:not(.login-mode) > aside nav { padding-top: 10px; }
body:not(.login-mode) > aside .nav-section { padding: 8px 0 10px; border-bottom: 1px solid #edf1f5; }
body:not(.login-mode) > aside .nav-group-title { padding: 0 10px 6px; color: #8a98aa !important; font-size: 11px !important; font-weight: 600; letter-spacing: .04em; }
body:not(.login-mode) > aside nav button {
  min-height: 42px; padding: 8px 10px !important; border: 1px solid transparent !important; border-radius: 9px !important;
  color: #344054 !important; font-size: 14px; font-weight: 550; transition: background .15s ease,color .15s ease,border-color .15s ease;
}
body:not(.login-mode) > aside nav button:hover { background: #f5f7fb !important; color: var(--crm2-text) !important; }
body:not(.login-mode) > aside nav button.active {
  color: #174eaf !important; background: var(--crm2-blue-soft) !important; border-color: #cbdcff !important; box-shadow: none !important;
}
body:not(.login-mode) > aside nav button.active::after { display: none !important; }
body:not(.login-mode) > aside nav button.active .admin-icon { color: var(--crm2-blue) !important; background: #fff !important; }
body:not(.login-mode) > aside nav button > :last-child::after { display: none !important; }

body:not(.login-mode) > main,
body:not(.login-mode) main[id] { margin-left: 0 !important; width: 100% !important; min-width: 0; }
body:not(.login-mode) main[id] { padding: 28px clamp(24px,3vw,44px) 56px !important; }
body:not(.login-mode) main[id] > * { max-width: 1540px; margin-left: auto; margin-right: auto; }
body:not(.login-mode) main[id] > header {
  min-height: 76px !important; margin-bottom: 18px !important; padding: 0 0 20px !important; align-items: flex-start !important;
}
body:not(.login-mode) main[id] > header h1,
body:not(.login-mode) main.crm-p0-page > header.crm-p0-header h1,
body:not(.login-mode) main:not(#dashboardView) > header h1 { margin: 4px 0 4px !important; color: #1f4f82 !important; font-size: 28px !important; letter-spacing: -.025em; }
body:not(.login-mode) main#dashboardView > header #dashboardHeading { color: #1f4f82 !important; }
body:not(.login-mode) main[id] > header p { margin: 0 !important; color: var(--crm2-muted) !important; }
body:not(.login-mode) main[id] > header .page-eyebrow,
body:not(.login-mode) .crm-drawer-head .page-eyebrow { display: block; margin-bottom: 1px; color: #df2f2f !important; font-weight: 700 !important; letter-spacing: .045em !important; }
body:not(.login-mode) :is(.page-actions,.crm-p0-header-actions) { display: flex; align-items: center; gap: 10px; }

body:not(.login-mode) :is(.dashboard-panel,.crm-p0-card,.student-list-panel,.student-editor,.enterprise-list-panel,.enterprise-card,.list-panel,.editor,.bank-preview-card) {
  border-color: var(--crm2-line) !important; border-radius: var(--crm2-radius) !important; box-shadow: var(--crm2-shadow) !important;
}
body:not(.login-mode) :is(.panel-title,.crm-section-head,.dashboard-panel > header) {
  min-height: 68px; padding: 18px 20px !important; border-bottom: 1px solid var(--crm2-line) !important;
}
body:not(.login-mode) :is(.panel-title,.crm-section-head,.dashboard-panel > header) :is(h2,h3,strong),
body:not(.login-mode) :is(.enterprise-list-panel,.crm-p0-card,.dashboard-panel) :is(.panel-title,.crm-section-head) :is(h2,h3,strong) { color: #2e6ca4 !important; font-size: 16px !important; font-weight: 650 !important; }
body:not(.login-mode) main[id] > section > :is(h2,h3),
body:not(.login-mode) main[id] :is(.section-rail-title,.editor-title) > strong { color: #2e6ca4 !important; }
body:not(.login-mode) #enterpriseView .enterprise-list-panel > .panel-title strong { color: #2e6ca4 !important; }
body:not(.login-mode) :is(.panel-title,.crm-section-head,.dashboard-panel > header) :is(h2,h3,strong)::before { display: none !important; }
body:not(.login-mode) :is(.panel-title,.crm-section-head,.dashboard-panel > header)::before { display: none !important; }

body:not(.login-mode) :is(.summary,.crm-order-summary) { border-radius: var(--crm2-radius) !important; box-shadow: var(--crm2-shadow); }
body:not(.login-mode) :is(.summary > div,.crm-order-summary > article) { display: grid !important; align-content: start; gap: 7px; min-height: 86px; padding: 17px 20px !important; position: relative; }
body:not(.login-mode) :is(.summary > div,.crm-order-summary > article)::before { content: none !important; }
body:not(.login-mode) :is(.summary small,.crm-order-summary small) { display: block !important; margin: 0 !important; color: var(--crm2-muted) !important; font-size: 12px; font-weight: 550; line-height: 1.35; }
body:not(.login-mode) :is(.summary b,.crm-order-summary strong) { display: block !important; margin: 0 !important; color: var(--crm2-text); font-size: 24px; font-weight: 680; line-height: 1.15; }

body:not(.login-mode) .crm-filterbar,
body:not(.login-mode) .student-toolbar,
body:not(.login-mode) .crm-advanced-filters {
  padding: 14px 18px !important; background: var(--crm2-surface-soft) !important; border-top: 0 !important; border-bottom: 1px solid var(--crm2-line) !important;
}
body:not(.login-mode) :is(.crm-filterbar,.student-toolbar) :is(input,select,button) { min-height: 42px !important; background-color: #fff !important; }
body:not(.login-mode) .crm-search { background: #fff !important; border: 1px solid var(--crm2-line-strong) !important; border-radius: 8px !important; }
body:not(.login-mode) .crm-search:focus-within { border-color: #7ea7f4 !important; box-shadow: 0 0 0 3px rgba(36,99,223,.12); }

body:not(.login-mode) .crm-tabs { padding: 0 18px; gap: 22px !important; border-bottom: 1px solid var(--crm2-line); background: #fff; overflow-x: auto; }
body:not(.login-mode) .crm-tabs button { min-height: 48px; padding: 0 2px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--crm2-muted) !important; white-space: nowrap; }
body:not(.login-mode) .crm-tabs button.active { color: var(--crm2-blue) !important; box-shadow: inset 0 -2px var(--crm2-blue); }
body:not(.login-mode) .crm-tabs b { min-width: 20px; padding: 2px 5px; border-radius: 6px; background: #f0f3f7; color: #667085; }
body:not(.login-mode) .crm-tabs button.active b { background: var(--crm2-blue-soft); color: var(--crm2-blue); }

body:not(.login-mode) .crm-table-wrap,
body:not(.login-mode) .table-wrap { scrollbar-color: #c8d2df transparent; }
body:not(.login-mode) .crm-table thead,
body:not(.login-mode) .table-wrap thead { position: sticky; top: 0; z-index: 2; }
body:not(.login-mode) main th { height: 44px; padding: 10px 14px !important; background: #f8fafc !important; color: #5c6b7d !important; letter-spacing: .01em; }
body:not(.login-mode) main td { min-height: 58px; padding: 13px 14px !important; color: #344054 !important; vertical-align: middle; }
body:not(.login-mode) main tbody tr:hover td { background: #f7faff !important; }
body:not(.login-mode) main tbody tr:focus-within td { background: #f2f6ff !important; }
body:not(.login-mode) :is(.crm-pagination,.student-pagination) { min-height: 62px; background: #fff; }

body:not(.login-mode) button { font-weight: 570; }
body:not(.login-mode) button.primary { box-shadow: 0 1px 2px rgba(36,99,223,.18); }
body:not(.login-mode) button.primary:hover { background: #1955ca !important; border-color: #1955ca !important; }
body:not(.login-mode) :is(.text-action,a) { color: var(--crm2-blue); }
body:not(.login-mode) :is(.danger,.danger-outline) { color: var(--crm2-red) !important; }
body:not(.login-mode) :is(.danger,.danger-outline):not(.primary) { background: var(--crm2-red-soft) !important; border-color: #ffd2cf !important; }

body:not(.login-mode) :is(.crm-badge,.tag,.lead-stage,.entitlement-state,.learning-state,.bind-state) { border-radius: 6px !important; font-weight: 600 !important; }
body:not(.login-mode) :is(.converted,.active,.passed) { color: var(--crm2-green); }
body:not(.login-mode) :is(.async-state,.crm-empty-state,.history-empty) { min-height: 210px; background: #fbfcfe !important; border-color: #dbe3ed !important; }
body:not(.login-mode) :is(.async-state,.crm-empty-state,.history-empty) strong { color: #344054; }
body:not(.login-mode) :is(.async-state,.crm-empty-state,.history-empty) span { color: var(--crm2-muted); }

body:not(.login-mode) #dashboardView .dashboard-layout { gap: 14px !important; }
body:not(.login-mode) #dashboardView .dashboard-panel { margin: 0 !important; }
body:not(.login-mode) #dashboardView .dashboard-actions { border-color: var(--crm2-line) !important; }
body:not(.login-mode) #dashboardView .dashboard-actions button { min-height: 74px; background: #fff !important; border-color: var(--crm2-line) !important; }
body:not(.login-mode) #dashboardView .dashboard-actions button:hover { background: #f7faff !important; }
body:not(.login-mode) #dashboardView .workbench-section-title::before,
body:not(.login-mode) #dashboardView .panel-title::before,
body:not(.login-mode) #dashboardView .section-rail-title > strong::before { background: var(--crm2-blue) !important; }
body:not(.login-mode) #dashboardView :is(.panel-title,.section-rail-title) > strong,
body:not(.login-mode) #dashboardView .workbench-section-title { color: #2e6ca4 !important; }
body:not(.login-mode) #dashboardView .funnel-step .funnel-bar i { background: var(--crm2-blue) !important; }
body:not(.login-mode) #dashboardView .command-strip button:hover { background: #f7faff !important; }
body:not(.login-mode) #dashboardView .command-strip button:first-child .admin-icon { background: var(--crm2-blue-soft) !important; color: var(--crm2-blue) !important; }
body:not(.login-mode) > aside nav button.active::before { background: var(--crm2-blue) !important; }

body:not(.login-mode) #enterpriseView .enterprise-layout { display: block !important; }
body:not(.login-mode) #enterpriseView .enterprise-list-panel { min-height: 420px; }
body:not(.login-mode) #enterpriseView .enterprise-rows { display: grid; grid-template-columns: repeat(auto-fill,minmax(360px,1fr)); gap: 14px; padding: 18px; }
body:not(.login-mode) #enterpriseView .enterprise-rows > .async-state { grid-column: 1 / -1; width: 100%; }
body:not(.login-mode) #enterpriseView .enterprise-card { display: grid; grid-template-columns: 1fr; gap: 18px; min-height: 270px; padding: 20px !important; }
body:not(.login-mode) #enterpriseView .enterprise-card .lead-actions { padding-top: 14px; border-top: 1px solid var(--crm2-line); }
body:not(.login-mode) #enterpriseCreateModal .enterprise-form {
  width: min(720px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 0 !important; border-radius: 15px !important; background: #fff !important;
}
body:not(.login-mode) #enterpriseCreateModal .modal-header { position: sticky; top: 0; z-index: 2; padding: 20px 22px; background: #fff; border-bottom: 1px solid var(--crm2-line); }
body:not(.login-mode) #enterpriseCreateModal .fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 16px; padding: 20px 22px; }
body:not(.login-mode) #enterpriseCreateModal .fields .wide { grid-column: 1/-1; }
body:not(.login-mode) #enterpriseCreateModal .actions { position: sticky; bottom: 0; justify-content: flex-end; padding: 15px 22px; background: #fff; border-top: 1px solid var(--crm2-line); }
body:not(.login-mode) #enterpriseCreateModal #enterpriseSubmit { min-width: 150px; }

body:not(.login-mode) .modal-panel,
body:not(.login-mode) :is(.crm-detail-drawer,.crm-followup-drawer) { box-shadow: 0 24px 70px rgba(24,34,48,.20) !important; }
body:not(.login-mode) .modal-mask,
body:not(.login-mode) .crm-drawer-mask { background: rgba(15,23,42,.42) !important; backdrop-filter: blur(2px); }

@media(max-width:900px) {
  body:not(.login-mode) { grid-template-columns: 1fr !important; }
  body:not(.login-mode) > aside { width: 100% !important; padding: 10px 14px !important; border-right: 0 !important; border-bottom: 1px solid var(--crm2-line) !important; }
  body:not(.login-mode) > aside .brand { padding: 0 2px 10px !important; }
  body:not(.login-mode) > aside nav { padding-top: 0; }
  body:not(.login-mode) > aside .nav-section { padding: 0; border: 0; }
  body:not(.login-mode) > aside nav button { min-height: 42px; }
  body:not(.login-mode) > main,body:not(.login-mode) main[id] { margin-left: 0 !important; width: 100% !important; }
  body:not(.login-mode) main[id] { padding: 20px 14px 42px !important; }
  body:not(.login-mode) main[id] > header { min-height: 0 !important; }
  body:not(.login-mode) .crm-order-summary { overflow-x: auto; }
  body:not(.login-mode) .crm-order-summary > article { min-width: 180px; }
}

@media(max-width:620px) {
  body:not(.login-mode) main[id] > header h1 { font-size: 25px !important; }
  body:not(.login-mode) :is(.page-actions,.crm-p0-header-actions) { width: 100%; }
  body:not(.login-mode) :is(.page-actions,.crm-p0-header-actions) button { flex: 1; }
  body:not(.login-mode) :is(.summary,.crm-order-summary) { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; overflow: hidden; }
  body:not(.login-mode) :is(.summary > div,.crm-order-summary > article) { min-width: 0; min-height: 82px; border-right: 1px solid var(--crm2-line) !important; border-bottom: 1px solid var(--crm2-line) !important; }
  body:not(.login-mode) #enterpriseView .enterprise-rows { grid-template-columns: 1fr; padding: 12px; }
  body:not(.login-mode) #enterpriseCreateModal .fields { grid-template-columns: 1fr !important; padding: 16px; }
  body:not(.login-mode) #enterpriseCreateModal .fields .wide { grid-column: auto; }
  body:not(.login-mode) #enterpriseCreateModal .actions { padding: 12px 16px; }
  body:not(.login-mode) #enterpriseCreateModal #enterpriseSubmit { width: 100%; }
}

@media(prefers-reduced-motion:reduce) {
  body:not(.login-mode) > aside nav button { transition: none; }
  body:not(.login-mode) .modal-mask { backdrop-filter: none; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body:not(.login-mode) :is(.crm-phone-reveal,.phone-eye-button) {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  margin-left: 7px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--crm2-blue) !important;
  box-shadow: none !important;
  vertical-align: middle;
  cursor: pointer;
}
body:not(.login-mode) :is(.crm-phone-reveal,.phone-eye-button):hover {
  background: var(--crm2-blue-soft) !important;
}
body:not(.login-mode) :is(.crm-phone-reveal,.phone-eye-button):focus-visible {
  outline: 3px solid rgba(36,99,235,.2);
  outline-offset: 1px;
}
body:not(.login-mode) :is(.crm-phone-reveal,.phone-eye-button) .admin-icon {
  width: 19px;
  height: 19px;
}
body:not(.login-mode) .phone-eye-button.is-revealed {
  color: var(--crm2-green) !important;
}