/* ==========================================================================
   Road Safety Thai v3.3.7 — UI Polish & Responsive Cleanup
   Non-invasive presentation layer. Vue bundle is intentionally untouched.
   ========================================================================== */

:root{
  --rst-bg:#f4f7fb;
  --rst-surface:#ffffff;
  --rst-surface-soft:#f8fafc;
  --rst-border:#e3eaf3;
  --rst-text:#0f172a;
  --rst-text-2:#334155;
  --rst-muted:#64748b;
  --rst-muted-2:#94a3b8;
  --rst-primary:#2563eb;
  --rst-primary-2:#0ea5e9;
  --rst-teal:#0f9f9a;
  --rst-success:#16a34a;
  --rst-warning:#f59e0b;
  --rst-danger:#dc2626;
  --rst-radius-lg:22px;
  --rst-radius-md:16px;
  --rst-shadow:0 10px 28px rgba(15,23,42,.07);
  --rst-shadow-soft:0 6px 18px rgba(15,23,42,.05);
}

/* Global readability */
html,body{
  background:var(--rst-bg)!important;
  color:var(--rst-text)!important;
  font-size:16px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
body{
  line-height:1.55;
}
.app-main{
  padding-bottom:32px;
}
h1,h2,h3,strong{
  color:var(--rst-text);
}
p,small,span{
  letter-spacing:.005em;
}

/* App shell / sidebar */
.desktop-sidebar{
  background:#fff!important;
  border-right:1px solid var(--rst-border)!important;
  box-shadow:8px 0 24px rgba(15,23,42,.025);
}
.profile-card{
  border:1px solid var(--rst-border)!important;
  box-shadow:var(--rst-shadow-soft);
}
.profile-copy strong{
  font-size:1rem!important;
}
.profile-copy small{
  font-size:.78rem!important;
  color:var(--rst-muted)!important;
}
.side-nav{
  gap:4px!important;
}
.side-nav a{
  min-height:50px;
  padding:11px 14px!important;
  border-radius:14px!important;
  font-size:.95rem!important;
  font-weight:700!important;
}
.side-nav a svg{
  width:20px!important;
  height:20px!important;
  flex:0 0 auto;
}
.side-nav a.router-link-active{
  box-shadow:inset 0 0 0 1px rgba(37,99,235,.08);
}

/* Main page headings */
.section-topline{
  margin-bottom:18px!important;
}
.section-topline h1{
  font-size:clamp(2rem,2.8vw,3rem)!important;
  line-height:1.12!important;
  letter-spacing:-.035em;
  margin-bottom:7px!important;
}
.section-topline p{
  font-size:1rem!important;
  color:#52637a!important;
  line-height:1.65!important;
}
.welcome-kicker,
.section-topline .welcome-kicker{
  font-size:.9rem!important;
  font-weight:800!important;
  padding:8px 13px!important;
}

/* Shared cards */
.panel-card,
.metric-card,
.native-card,
.readiness-summary-panel,
.systems-panel{
  border:1px solid var(--rst-border)!important;
  border-radius:var(--rst-radius-lg)!important;
  box-shadow:var(--rst-shadow-soft)!important;
}
.panel-card{
  padding:22px!important;
}
.panel-head h2,
.section-heading h2{
  font-size:1.3rem!important;
  line-height:1.3!important;
}
.panel-head small,
.section-heading small{
  font-size:.72rem!important;
  letter-spacing:.08em!important;
}

/* Dashboard hero */
.dashboard-hero,
.digital-license-card{
  box-shadow:0 18px 44px rgba(37,99,235,.12)!important;
}
.dashboard-hero h1,
.dashboard-hero h2{
  letter-spacing:-.035em;
}
.dashboard-hero p{
  font-size:1rem!important;
  line-height:1.55!important;
}

/* Student dashboard metrics */
.student-metric-grid{
  gap:14px!important;
}
.student-metric-grid .metric-card{
  min-height:164px;
  padding:18px!important;
  display:flex;
  align-items:center;
  gap:14px;
}
.student-metric-grid .metric-card small{
  font-size:.78rem!important;
  line-height:1.4!important;
  color:#475569!important;
}
.student-metric-grid .metric-card strong:not(.rst-v3363-mini-ring){
  font-size:1.7rem!important;
  line-height:1.05!important;
}
.student-metric-grid .metric-card p{
  font-size:.78rem!important;
  line-height:1.45!important;
  color:var(--rst-muted)!important;
}
.metric-icon{
  width:46px!important;
  height:46px!important;
  border-radius:14px!important;
}

/* v3.3.6.3 score rings – slightly larger/cleaner */
.rst-v3363-mini-ring{
  width:72px!important;
  height:72px!important;
  flex-basis:72px!important;
  font-size:.95rem!important;
  box-shadow:inset 0 0 0 1px #eef2f7,0 3px 10px rgba(15,23,42,.04)!important;
}
.license-score.rst-v3363-main-ring{
  width:158px!important;
  height:158px!important;
}
.license-score.rst-v3363-main-ring strong{
  font-size:2.7rem!important;
}

/* Dashboard learning journey */
.lesson-progress-list{
  gap:8px!important;
}
.lesson-progress-row{
  padding:12px 10px!important;
  border-radius:14px!important;
}
.lesson-progress-row:hover{
  background:#f8fbff!important;
}
.lesson-progress-row strong{
  font-size:.95rem!important;
  line-height:1.35!important;
}
.lesson-progress-row small{
  font-size:.75rem!important;
  line-height:1.45!important;
  color:#718096!important;
}
.lesson-no{
  width:46px!important;
  height:46px!important;
  border-radius:14px!important;
  font-size:.78rem!important;
}
.progress-track{
  height:8px!important;
  border-radius:999px!important;
}

/* Behavior panel */
.behavior-panel{
  text-align:center;
}
.behavior-panel h2{
  font-size:1.35rem!important;
}
.behavior-score-ring{
  width:136px!important;
  height:136px!important;
}
.behavior-score-ring strong{
  font-size:2.35rem!important;
}
.behavior-advice,
.behavior-panel p{
  font-size:.8rem!important;
  line-height:1.6!important;
}
.scale-row span{
  font-size:.65rem!important;
  padding:8px 6px!important;
}

/* Digital license card */
.digital-license-card{
  border-radius:26px!important;
  padding:24px!important;
}
.license-v22-grid{
  gap:24px!important;
}
.license-holder{
  gap:16px!important;
}
.license-holder-photo{
  width:112px!important;
  min-height:132px;
  border-radius:20px!important;
}
.license-holder h2{
  font-size:1.65rem!important;
}
.license-holder h3{
  font-size:1.1rem!important;
}
.holder-code,
.holder-class{
  font-size:.82rem!important;
  line-height:1.5!important;
}
.license-score-block>p{
  font-size:.78rem!important;
}
.license-meta span{
  font-size:.72rem!important;
  padding:9px 12px!important;
}
.license-qr-box{
  border-radius:22px!important;
  padding:14px!important;
}
.license-qr-box img{
  max-width:198px!important;
}
.license-qr-box small{
  font-size:.66rem!important;
}

/* Readiness breakdown */
.readiness-summary-panel{
  padding:20px!important;
}
.readiness-summary-panel .readiness-components{
  gap:14px!important;
}
.readiness-summary-panel .readiness-components article.rst-v3363-component-card{
  min-height:172px!important;
  border-radius:18px!important;
  padding:16px 12px!important;
}
.rst-v3363-component-ring{
  width:88px!important;
  height:88px!important;
  font-size:1.3rem!important;
}
.rst-v3363-component-ring::after{
  top:57px!important;
  font-size:.55rem!important;
}
.rst-v3363-component-card>span{
  font-size:.74rem!important;
  font-weight:800!important;
}
.rst-v3363-component-card>small{
  font-size:.66rem!important;
  line-height:1.5!important;
}
.readiness-learning-points{
  font-size:.72rem!important;
  padding:12px 14px!important;
}
.readiness-formula{
  font-size:.68rem!important;
  line-height:1.5!important;
}

/* Learning page */
.learning-page .section-topline h1,
.learning-page h1{
  font-size:clamp(2rem,2.7vw,2.8rem)!important;
}
.learning-page .metric-card,
.learning-page .summary-card{
  min-height:130px;
}
.learning-page .metric-card small,
.learning-page .summary-card small{
  font-size:.75rem!important;
}
.learning-page .metric-card strong,
.learning-page .summary-card strong{
  font-size:1.55rem!important;
}
.lesson-card,
.learning-card{
  border:1px solid var(--rst-border)!important;
  border-radius:20px!important;
  box-shadow:var(--rst-shadow-soft)!important;
  padding:20px!important;
}
.lesson-card:hover,
.learning-card:hover{
  transform:translateY(-1px);
  box-shadow:var(--rst-shadow)!important;
}
.lesson-card h3,
.learning-card h3{
  font-size:1.05rem!important;
  line-height:1.4!important;
}
.lesson-card p,
.learning-card p{
  font-size:.83rem!important;
  line-height:1.6!important;
  color:#5b6b81!important;
}
.lesson-card small,
.learning-card small{
  font-size:.72rem!important;
}
.lesson-card .progress-track,
.learning-card .progress-track{
  height:9px!important;
}

/* Improve chip readability */
.tag,
.pill,
.badge,
[class*="chip"]{
  line-height:1.25!important;
}
.lesson-card [class*="tag"],
.learning-card [class*="tag"]{
  font-size:.68rem!important;
  padding:6px 9px!important;
  border-radius:999px!important;
}

/* Notifications / helper text */
.notification-list strong,
.simple-list strong,
.event-list strong{
  font-size:.84rem!important;
}
.notification-list p,
.simple-list small,
.event-list small{
  font-size:.74rem!important;
  line-height:1.55!important;
}

/* Images */
.avatar-image,
.license-holder-photo img,
.profile-card img,
.dashboard-hero img{
  object-fit:cover!important;
  object-position:center!important;
}
.avatar-image{
  image-rendering:auto;
}

/* Prevent text overflow globally in cards */
.metric-card,
.panel-card,
.lesson-card,
.learning-card,
.native-card,
.license-holder,
.profile-copy{
  min-width:0;
}
.metric-card *,
.panel-card *,
.lesson-card *,
.learning-card *,
.native-card *,
.license-holder *,
.profile-copy *{
  overflow-wrap:anywhere;
}
.side-nav a,
.side-nav span{
  white-space:normal!important;
}

/* Tablet */
@media (max-width:1180px){
  .student-metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .dashboard-split{
    grid-template-columns:1fr!important;
  }
  .digital-license-card .license-v22-grid{
    grid-template-columns:minmax(0,1fr) minmax(180px,.7fr)!important;
  }
}

/* Small tablet */
@media (max-width:900px){
  .app-main{
    padding-left:18px!important;
    padding-right:18px!important;
  }
  .section-topline h1{
    font-size:2.15rem!important;
  }
  .digital-license-card{
    padding:20px!important;
  }
  .digital-license-card .license-v22-grid{
    grid-template-columns:1fr!important;
  }
  .license-score-block{
    order:2;
  }
  .license-qr-box{
    order:3;
    max-width:300px;
    margin-inline:auto;
  }
}

/* Mobile */
@media (max-width:700px){
  html,body{font-size:15px}
  .app-main{
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .section-topline{
    margin-bottom:14px!important;
  }
  .section-topline h1{
    font-size:1.8rem!important;
  }
  .section-topline p{
    font-size:.9rem!important;
  }
  .student-metric-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .student-metric-grid .metric-card{
    min-height:auto;
    padding:14px!important;
  }
  .rst-v3363-mini-ring{
    width:64px!important;
    height:64px!important;
    flex-basis:64px!important;
  }
  .digital-license-card{
    border-radius:20px!important;
    padding:16px!important;
  }
  .license-holder{
    align-items:flex-start!important;
  }
  .license-holder-photo{
    width:90px!important;
    min-height:108px;
  }
  .license-holder h2{
    font-size:1.35rem!important;
  }
  .license-meta{
    display:grid!important;
    grid-template-columns:1fr 1fr;
  }
  .license-meta span{
    text-align:center;
  }
  .readiness-summary-panel .readiness-components{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  .readiness-summary-panel .readiness-components article.rst-v3363-component-card{
    min-height:158px!important;
  }
  .panel-card{
    padding:16px!important;
  }
}

/* Narrow mobile */
@media (max-width:430px){
  .readiness-summary-panel .readiness-components{
    grid-template-columns:1fr!important;
  }
  .license-meta{
    grid-template-columns:1fr!important;
  }
  .license-holder{
    display:grid!important;
    grid-template-columns:84px 1fr!important;
  }
  .license-holder-photo{
    width:84px!important;
    min-height:100px;
  }
}

/* Accessibility */
:focus-visible{
  outline:3px solid rgba(37,99,235,.28)!important;
  outline-offset:2px!important;
}
@media (prefers-reduced-motion:reduce){
  *{
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}