/* ===== ss-v80-auto-desktop-layout-style ===== */

/* V81 — laptop/desktop uses one wide workspace, not a narrow mobile pane.
   Phones/tablets with touch stay mobile even when browser desktop mode changes viewport. */
body.ss-desktop-ui{
  padding:18px 22px 34px!important;
  padding-bottom:34px!important;
  overflow-x:hidden!important;
  background-attachment:fixed;
}
body.ss-desktop-ui .container{
  width:min(100%, 1560px)!important;
  max-width:min(1560px, calc(100vw - 44px))!important;
  margin:0 auto!important;
  display:block!important;
}
body.ss-desktop-ui .app-header{
  width:100%!important;
  margin:0 0 16px!important;
  min-height:98px;
  padding:18px 24px!important;
  display:grid!important;
  grid-template-columns:minmax(280px,1fr) auto auto!important;
  gap:16px!important;
  align-items:center!important;
  border-radius:26px!important;
  overflow:hidden!important;
}
body.ss-desktop-ui .header-left{min-width:0!important;}
body.ss-desktop-ui .title-row{justify-content:flex-start!important;gap:14px!important;}
body.ss-desktop-ui .app-logo{width:66px!important;height:66px!important;border-radius:18px!important;}
body.ss-desktop-ui .app-title{font-size:clamp(1.75rem,2.1vw,2.45rem)!important;line-height:1.05!important;}
body.ss-desktop-ui .app-subtitle{max-width:none!important;font-size:1rem!important;white-space:normal!important;}
body.ss-desktop-ui .digital-clock{min-width:210px!important;justify-self:center!important;}
body.ss-desktop-ui .clock-time{font-size:1.28rem!important;}
body.ss-desktop-ui .clock-date{font-size:.86rem!important;}

/* Main form: wide desktop panel instead of phone column. */
body.ss-desktop-ui .control-panel{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  position:relative!important;
  top:auto!important;
  max-height:none!important;
  overflow:visible!important;
  margin:0 0 16px!important;
  border-radius:28px!important;
  padding:22px!important;
  box-shadow:0 20px 70px rgba(15,23,42,.14)!important;
}
body.ss-desktop-ui .selectors{
  display:grid!important;
  grid-template-columns:minmax(320px,1.35fr) minmax(260px,1fr)!important;
  gap:14px!important;
  align-items:start!important;
  margin-bottom:16px!important;
}
body.ss-desktop-ui .class-row{
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr)!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
}
body.ss-desktop-ui #classFilterToggle{height:56px!important;min-height:56px!important;border-radius:16px!important;}
body.ss-desktop-ui .class-filters{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(180px,1fr))!important;
  gap:12px!important;
  min-width:0!important;
}
body.ss-desktop-ui .selectors > select,
body.ss-desktop-ui .selectors .ss-select-wrap,
body.ss-desktop-ui .class-row .ss-select-wrap,
body.ss-desktop-ui .class-filters .ss-select-wrap{width:100%!important;min-width:0!important;}
body.ss-desktop-ui select,
body.ss-desktop-ui input,
body.ss-desktop-ui textarea,
body.ss-desktop-ui .ss-select-btn{
  min-width:0!important;
  max-width:100%!important;
  min-height:54px!important;
}
body.ss-desktop-ui .exam-panel{
  margin:14px 0!important;
  padding:18px 20px!important;
  border-radius:24px!important;
}
body.ss-desktop-ui .season-toggle{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  max-width:720px!important;
  margin:14px auto!important;
}
body.ss-desktop-ui .input-group{
  max-width:720px!important;
  margin:14px auto!important;
}
body.ss-desktop-ui .big-buttons-grid{
  grid-template-columns:repeat(3,minmax(160px,1fr))!important;
  gap:12px!important;
}
body.ss-desktop-ui .eval-btn{min-height:86px!important;border-radius:20px!important;}
body.ss-desktop-ui #currentStats{margin-top:16px!important;}
body.ss-desktop-ui .board-docs-btn{min-height:58px!important;border-radius:18px!important;}

/* Section buttons: compact dashboard-style rows on laptop. */
body.ss-desktop-ui .container > .toggle-btn{
  display:inline-flex!important;
  width:calc(25% - 12px)!important;
  min-width:240px!important;
  min-height:58px!important;
  margin:8px 6px!important;
  vertical-align:top!important;
  border-radius:18px!important;
  justify-content:center!important;
  white-space:normal!important;
  line-height:1.45!important;
}
body.ss-desktop-ui .container > .collapsible-content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  clear:both!important;
  margin:12px 0 18px!important;
  border-radius:26px!important;
  padding:20px!important;
  overflow:visible!important;
}

/* Desktop analytics: wide, stable charts. */
body.ss-desktop-ui .ss-an-shell{padding:2px 0 18px!important;max-width:none!important;}
/* ── SVG Bar Chart ── */
.ss-an-svgbar-wrap{padding:10px 4px 4px;overflow:visible}
.ss-an-svgbar-wrap svg{overflow:visible;font-family:inherit}
.ss-an-chart-card{overflow:visible!important}
.ss-an-legend-compact{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:5px;margin-top:10px}
.ss-an-legend-compact .ss-an-legend-item{padding:6px 8px;border-radius:10px}
.ss-an-legend-compact .ss-an-legend-name{font-size:.78rem}
.ss-an-legend-compact .ss-an-legend-count{font-size:.75rem}
/* ── KPI Cards enhanced ── */
.ss-an-kpi-value{letter-spacing:-0.02em}
.ss-an-kpi small{opacity:.85}
body.ss-desktop-ui .ss-an-hero{border-radius:30px!important;padding:24px!important;overflow:hidden!important;}
body.ss-desktop-ui .ss-an-filters{grid-template-columns:repeat(5,minmax(170px,1fr))!important;align-items:end!important;gap:12px!important;}
body.ss-desktop-ui .ss-an-kpis{grid-template-columns:repeat(4,minmax(210px,1fr))!important;gap:16px!important;}
body.ss-desktop-ui .ss-an-kpi{min-height:160px!important;padding:20px!important;border-radius:26px!important;}
body.ss-desktop-ui .ss-an-kpi-value{font-size:2.4rem!important;margin-top:14px!important;}
body.ss-desktop-ui .ss-an-kpi-label{font-size:.9rem!important;margin-top:10px!important;}
body.ss-desktop-ui .ss-an-kpi small{font-size:.78rem!important;margin-top:8px!important;}
body.ss-desktop-ui .ss-an-kpi-icon{width:46px!important;height:46px!important;font-size:1.35rem!important;border-radius:16px!important;}
body.ss-desktop-ui .ss-an-svgbar-wrap svg{max-height:260px!important}
body.ss-desktop-ui .ss-an-legend-compact{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))!important;}
body.ss-desktop-ui .ss-an-chart-card{min-height:360px!important;}
body.ss-desktop-ui .ss-an-kpi{min-height:142px!important;border-radius:24px!important;padding:18px!important;}
body.ss-desktop-ui .ss-an-grid{grid-template-columns:minmax(560px,1.15fr) minmax(380px,.85fr)!important;gap:16px!important;}
body.ss-desktop-ui .ss-an-card{border-radius:26px!important;padding:20px!important;overflow:hidden!important;min-width:0!important;}
body.ss-desktop-ui .ss-an-card-title{font-size:1.18rem!important;}
body.ss-desktop-ui .ss-an-bars{gap:12px!important;}
body.ss-desktop-ui .ss-an-bar-row{
  grid-template-columns:minmax(145px,190px) minmax(180px,1fr) minmax(96px,128px)!important;
  gap:13px!important;
  padding:11px 12px!important;
  min-width:0!important;
}
body.ss-desktop-ui .ss-an-track{height:18px!important;}
body.ss-desktop-ui .ss-an-donut-layout{grid-template-columns:minmax(230px,.78fr) minmax(250px,1fr)!important;gap:20px!important;align-items:center!important;}
body.ss-desktop-ui .ss-an-donut{width:min(260px,92%)!important;}
body.ss-desktop-ui .ss-an-legend{gap:8px!important;}
body.ss-desktop-ui .ss-an-legend-item{padding:9px 10px!important;}
body.ss-desktop-ui .ss-an-insights{grid-template-columns:repeat(3,minmax(210px,1fr))!important;gap:12px!important;}
body.ss-desktop-ui .ss-an-role-row{grid-template-columns:130px minmax(180px,1fr) 74px!important;}
body.ss-desktop-ui .ss-an-grade-row{grid-template-columns:minmax(220px,320px) minmax(260px,1fr) minmax(84px,120px)!important;}
body.ss-desktop-ui .ss-an-subject-grid{grid-template-columns:repeat(3,minmax(190px,1fr))!important;}
body.ss-desktop-ui .ss-an-teacher-row{grid-template-columns:minmax(190px,260px) minmax(260px,1fr) 70px!important;}
body.ss-desktop-ui .ss-teacher-aggregate,
body.ss-desktop-ui .ss-an-teacher-aggregate,
body.ss-desktop-ui [data-teacher-aggregate]{max-width:100%!important;min-width:0!important;}

body.ss-desktop-ui .table-responsive,
body.ss-desktop-ui #gradesContainer,
body.ss-desktop-ui #qnTemplatesContainer,
body.ss-desktop-ui #qnStudentsContainer,
body.ss-desktop-ui .grades-class-card,
body.ss-desktop-ui .class-container{max-width:100%!important;min-width:0!important;}
body.ss-desktop-ui .table-responsive{overflow:auto!important;}
body.ss-desktop-ui table{min-width:0;}
body.ss-desktop-ui .grades-class-card,
body.ss-desktop-ui .dashboard-card,
body.ss-desktop-ui .analytics-card,
body.ss-desktop-ui .chart-card,
body.ss-desktop-ui .stat-card,
body.ss-desktop-ui .pro-card{border-radius:24px!important;}

@media (min-width:1400px){
  body.ss-desktop-ui .container{max-width:min(1640px, calc(100vw - 48px))!important;}
  body.ss-desktop-ui .ss-an-grid{grid-template-columns:minmax(680px,1.2fr) minmax(430px,.8fr)!important;}
}
@media (min-width:1100px) and (max-width:1280px){
  body.ss-desktop-ui .container > .toggle-btn{width:calc(33.333% - 12px)!important;min-width:210px!important;}
  body.ss-desktop-ui .ss-an-kpis{grid-template-columns:repeat(2,minmax(220px,1fr))!important;}
  body.ss-desktop-ui .ss-an-grid{grid-template-columns:1fr!important;}
  body.ss-desktop-ui .ss-an-filters{grid-template-columns:repeat(3,minmax(160px,1fr))!important;}
}
@media (max-width:1099px){
  body.ss-mobile-ui .container{max-width:1000px;}
}