/* TESEA cross-browser + responsive compatibility layer
   Loaded after app.css so it fixes layout regressions without replacing preserved styles. */

/* Design-token aliases used by later workspace modules. */
:root{
  --surface:var(--s);
  --surface-2:var(--s2);
  --card:var(--s);
  --text:var(--ink);
  --border:var(--line);
  --soft:var(--s2);
  --brand:var(--b);
  --brand-soft:var(--b3);
  --b-soft:var(--b3);
  color-scheme:light;
}
html[data-theme="dark"]{
  --surface:var(--s);
  --surface-2:var(--s2);
  --card:var(--s);
  --text:var(--ink);
  --border:var(--line);
  --soft:var(--s2);
  --brand:var(--b);
  --brand-soft:var(--b3);
  --b-soft:var(--b3);
  color-scheme:dark;
}

/* Browser-normalisation and overflow safety. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{min-width:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,video,canvas,audio,iframe{max-width:100%}
img,svg{height:auto}

/* Logo presentation and exact fit in header topbar (original logo preserved) */
header.topbar .brand,
.brand-button,
div#app:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > button:nth-of-type(3) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  margin: 0 4px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
  transition: opacity 0.2s ease !important;
}

[data-theme="light"] header.topbar .brand,
[data-theme="light"] .brand-button {
  background: #ffffff !important;
}

header.topbar .brand img,
.brand-button img,
.topbar .brand img,
div#app > div > header > button > img,
div#app:nth-of-type(1) > div:nth-of-type(1) > header:nth-of-type(1) > button:nth-of-type(3) > img:nth-of-type(1) {
  height: 36px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: 200px !important;
  object-fit: contain !important;
  object-position: left center !important;
  display: block !important;
  filter: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
button,input,select,textarea{max-width:100%;border-radius:0;font:inherit}
button,[role="button"],a{-webkit-tap-highlight-color:transparent}
button,input,select,textarea{-webkit-appearance:none;appearance:none}
select{background-image:none}
textarea{resize:vertical}
pre,code{white-space:pre-wrap;overflow-wrap:anywhere}
a,.table td,.table th,.card,.list-row,.moderation-quote,.generated-question{overflow-wrap:anywhere;word-break:normal}

/* Keyboard focus is visible across Chromium, Firefox and Safari. */
:where(button,a,input,select,textarea,[tabindex]):focus{outline:2px solid transparent;outline-offset:2px}
:where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid rgba(150,47,80,.32);outline-offset:2px}

/* Backdrop filter fallback: old Safari/Firefox still gets a solid surface. */
.topbar{background:var(--s);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
@supports (background:color-mix(in srgb,white 90%,transparent)){
  .topbar{background:color-mix(in srgb,var(--s) 95%,transparent)}
}

/* Viewport fixes for mobile browser chrome and safe areas. */
.app-shell{min-height:100vh;min-height:100dvh}
.sidebar{height:calc(100vh - var(--top));height:calc(100dvh - var(--top));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.topbar{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.main{padding-bottom:max(60px,calc(28px + env(safe-area-inset-bottom)))}

/* CSS Grid/Flex overflow repair. */
.layout,.main,.page-head,.grid,.grid2,.grid2e,.grid4,.kpis,.subject-grid,.lesson-shell,.form-grid,
.class-grid,.class-builder-layout,.class-manage-grid,.assessment-assignment-layout,.assignment-cards,
.moderation-workspace,.crm-dashboard-grid,.retention-grid,.campaign-grid,.crm-detail-grid,.automation-card,
.qbank-layout,.qbank-studio-layout,.assessment-studio-layout,.studio-layout,.curriculum-layout,.community-layout,
.subscription-layout,.settings-layout,.users-layout,.live-studio-layout,.evidence-layout{min-width:0}
.layout>* ,.grid>* ,.grid2>* ,.grid2e>* ,.grid4>* ,.kpis>* ,.subject-grid>* ,.lesson-shell>* ,.form-grid>*,
.class-grid>* ,.class-builder-layout>* ,.class-manage-grid>* ,.assessment-assignment-layout>*,
.moderation-workspace>* ,.crm-dashboard-grid>* ,.retention-grid>* ,.campaign-grid>* ,.crm-detail-grid>*{min-width:0}

.actions{min-width:0}.actions>.btn,.actions>button,.actions>a{max-width:100%}
.table-wrap,.tabs,.class-management-tabs{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.table{width:100%;max-width:none}

/* Media embeds and document readers. */
.media-stage{position:relative;min-height:240px}
@supports not (aspect-ratio:16 / 9){
  .media-stage{height:0;padding-bottom:56.25%;min-height:0}
  .media-stage>*{position:absolute;inset:0;margin:auto}
}
.pdf-stage{overflow:auto;-webkit-overflow-scrolling:touch}
.paper{width:min(100%,720px)}

/* Modal/dialog consistency. */
.modal{padding:clamp(10px,3vw,28px);overscroll-behavior:contain}
.modal-card{width:min(720px,100%);max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px);overflow:auto;-webkit-overflow-scrolling:touch}
.modal-head{position:sticky;top:0;z-index:2;background:var(--s)}
.modal-foot{position:sticky;bottom:0;z-index:2;background:var(--s)}

/* Public/auth pages: prevent wide content from pushing viewport. */
.landing,.auth-screen{width:100%;min-width:0}
.landing-box,.landing-main,.landing-footer{width:min(1240px,calc(100% - 32px))}
.hero-box{overflow:hidden}
.hero-copy,.hero-visual,.auth-panel,.auth-aside{min-width:0}
.brand-button img{display:block;max-height:44px;width:auto}

/* Better interaction on non-hover/touch devices. */
@media (hover:none){
  .card.click:hover,.subject-card:hover{transform:none;box-shadow:none}
  .btn,.nav-item,.tab,.icon-btn{min-height:44px}
  .icon-btn{min-width:44px}
}

/* Tablet / smaller desktop. */
@media (max-width:1200px){
  .main{padding-left:22px;padding-right:22px}
  .subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid4,.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campaign-grid,.class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:1024px){
  .main{padding:22px 18px max(50px,env(safe-area-inset-bottom))}
  .page-head h1{font-size:clamp(26px,4vw,30px)}
  .grid,.grid2,.grid2e{grid-template-columns:1fr}
  .lesson-shell,.class-builder-layout,.class-manage-grid,.assessment-assignment-layout,
  .moderation-workspace,.crm-dashboard-grid,.retention-grid,.crm-detail-grid{grid-template-columns:1fr}
  .lesson-aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-toolbar{grid-template-columns:minmax(0,1fr) minmax(150px,220px) auto}
}

/* Main mobile navigation breakpoint. */
@media (max-width:820px){
  :root{--top:62px}
  .topbar{gap:8px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .topbar>.brand{flex:1;min-width:0}
  .topbar>.brand img{max-width:132px}
  .top-actions{gap:5px;min-width:0}
  .role-switch{max-width:112px;padding:0 9px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .sidebar{width:min(86vw,300px);left:min(-86vw,-300px);box-shadow:18px 0 45px rgba(0,0,0,.16)}
  .sidebar.open{left:0}
  .main{width:100%;max-width:none;padding:18px 14px max(44px,calc(24px + env(safe-area-inset-bottom)))}
  .page-head{gap:12px}.page-head .actions{width:100%}
  .page-head .actions>.btn,.page-head .actions>button,.page-head .actions>select{flex:1 1 auto}
  .subject-grid,.grid4,.kpis,.grid,.grid2,.grid2e,.form-grid,.campaign-grid,.class-grid{grid-template-columns:1fr}
  .form-grid .field.full{grid-column:auto}
  .lesson-aside{grid-template-columns:1fr}
  .paper{padding:clamp(18px,5vw,28px);min-height:auto}
  .pdf-stage{padding:10px;min-height:0}
  .short-stage{min-height:min(68vh,620px);min-height:min(68dvh,620px)}
  .live-stage{min-height:360px}
  .landing-box{height:auto;min-height:62px;margin-top:8px;padding:10px 12px;gap:10px}
  .landing-main{padding-top:10px}
  .hero-box{padding:clamp(30px,7vw,48px) clamp(18px,5vw,30px)}
  .hero h1{font-size:clamp(34px,9vw,42px)}
  .hero-proof{gap:12px;flex-wrap:wrap}
  .landing-footer{gap:12px;flex-wrap:wrap}
  .auth-wrap{grid-template-columns:1fr!important}
  .auth-aside{display:none}
  .auth-top{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
}

@media (max-width:640px){
  .main{padding-left:12px;padding-right:12px}
  .card,.kpi,.subject-card{padding:15px}
  .page-head h1{font-size:26px}
  .section-head{align-items:flex-start;flex-direction:column}
  .section-head>.btn,.section-head>.actions{align-self:stretch}
  .actions{width:100%}
  .actions>.btn,.actions>button,.actions>a{flex:1 1 140px;white-space:normal;text-align:center}
  .kpis,.class-kpis,.metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .class-stat-row,.assignment-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .moderation-meta{grid-template-columns:1fr}
  .moderation-case .actions{display:grid;grid-template-columns:1fr 1fr}
  .moderation-case .actions>*{width:100%}
  .crm-toolbar{grid-template-columns:1fr}
  .crm-stage-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .automation-card{grid-template-columns:1fr}
  .assignment-flow{grid-template-columns:1fr}
  .funnel{grid-template-columns:1fr}
  .path-step{grid-template-columns:34px minmax(0,1fr)}
  .path-step>*:last-child{grid-column:2}
  .modal-foot{display:flex;flex-wrap:wrap;gap:8px}
  .modal-foot>.btn,.modal-foot>button{flex:1 1 140px}
  .table{min-width:620px}
  .top-actions .icon-btn[data-nav="announcements"]{display:none}
  .landing-nav .nav-cta{gap:6px}
  .landing-nav .nav-cta .btn.ghost{display:none}
  .landing-nav .nav-cta .btn{padding-left:10px;padding-right:10px}
  .hero-actions .btn{width:100%}
  .access-box{align-items:flex-start;flex-direction:column}
  .access-box .actions{width:100%}
  .auth-panel{padding:24px 18px!important}
}

@media (max-width:480px){
  :root{--r:12px}
  .topbar{gap:5px}
  .mobile-menu,.topbar>.icon-btn[data-action="back"],.top-actions>.icon-btn{width:40px;height:40px;min-width:40px}
  .role-switch{font-size:12px;max-width:94px}
  .topbar>.brand img{max-width:104px}
  .main{padding-top:14px}
  .page-head{margin-bottom:16px}
  .card,.kpi,.subject-card,.question,.moderation-case{border-radius:11px;padding:14px}
  .kpis,.class-kpis,.metric-strip{grid-template-columns:1fr 1fr;gap:8px}
  .kpi strong{font-size:24px}
  .class-stat-row{grid-template-columns:1fr 1fr}
  .moderation-case .actions{grid-template-columns:1fr}
  .table{min-width:560px}
  .lesson-reader{padding:16px}.lesson-reader h1{font-size:25px}.lesson-reader p,.lesson-reader li{font-size:15px;line-height:1.7}
  .landing-box,.landing-main,.landing-footer{width:calc(100% - 20px)}
  .landing-nav .brand-button img{max-width:116px}
  .landing-nav .nav-cta .btn{min-height:38px;font-size:12px}
  .hero-box{padding:28px 16px}
  .hero h1{font-size:34px}
  .subject-strip{grid-template-columns:1fr!important}
  .benefit-row{grid-template-columns:1fr!important}
  .auth-top .btn{font-size:12px;padding:0 10px}
}

@media (max-width:360px){
  .topbar>.brand{display:none}
  .role-switch{max-width:110px}
  .kpis,.class-kpis,.metric-strip,.class-stat-row{grid-template-columns:1fr}
  .landing-nav{justify-content:space-between}
  .landing-nav .nav-cta .btn:first-of-type{display:none}
  .page-head h1{font-size:24px}
}

/* Print/PDF accessibility for notes and records. */
@media print{
  .topbar,.sidebar,.actions,.mobile-menu,.landing-nav,.landing-footer,.toast,.modal{display:none!important}
  .layout{display:block!important}.main{max-width:none!important;padding:0!important}
  body{background:#fff!important;color:#000!important}
  .card,.lesson-reader,.paper{box-shadow:none!important;border-color:#bbb!important}
  a{color:#000!important;text-decoration:underline}
}

/* Reduced motion and high-contrast support. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media (forced-colors:active){
  .btn,.card,.nav-item,.subject-card,.table-wrap,.modal-card{forced-color-adjust:auto}
  .progress span{background:Highlight}
}