/* ── IOCode — Component styles aligned with reference system ── */

/* ─── BODY — explicit color/bg so design-tokens.css cannot override ──────── */
body {
  color: #1e293b;
  background: #f5f6f8;
  font-family: 'Sarabun', 'Noto Sans Thai', 'Inter', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.375rem;
  -webkit-font-smoothing: antialiased;
}
[data-bs-theme="dark"] body {
  color: #e2e8f0;
  background: #1e2337;
}

/* ─── DESIGN TOKEN OVERRIDES for dark mode (data-bs-theme="dark") ─────────
   Ensures any template using design-token vars (--color-surface-on etc.)
   gets correct values in dark mode. */
[data-bs-theme="dark"] {
  /* Design tokens */
  --color-primary:        #1C75BC;
  --color-primary-darken: #155a9e;
  --color-background:     #1e2337;
  --color-background-on:  #e2e8f0;
  --color-surface:        #263050;
  --color-surface-on:     #e2e8f0;
  --border-color:         rgba(255,255,255,.08);
  --grey-50:  #1a2035;
  --grey-100: #2F3349;
  --grey-200: #2d3a56;
  --grey-300: #374259;
  --grey-400: #4a5568;
  --grey-500: #718096;
  --grey-600: #94a3b8;
  --grey-700: #b0bec5;
  --grey-800: #cfd8dc;
  --grey-900: #e2e8f0;
  --table-header-bg:    #2d3a56;
  --shadow-color:       16, 17, 33;
  --shadow-xs-alpha:    0.28;
  --shadow-sm-alpha:    0.32;
  --shadow-md-alpha:    0.35;
  --shadow-lg-alpha:    0.38;
  --shadow-xl-alpha:    0.42;
}

/* ─── COMPATIBILITY SHIM (old Apple CSS vars → current tokens) ─────────── */
:root {
  --bg:      #ffffff;
  --bg2:     #f8fafc;
  --bg3:     #f1f5f9;
  --bg4:     #f8fafc;
  --accent:  #1C75BC;
  --accent2: #26C6F9;
  --accent3: #72E128;
  --accent4: #FF4D49;
  --text:    #1e293b;
  --muted:   #64748b;
  --border:  #e2e8f0;
  --font:    'Sarabun', 'Noto Sans Thai', 'Inter', sans-serif;
  --mono:    var(--font-family-mono);
  --topbar:  56px;
  --sidebar: 260px;
}
[data-bs-theme="dark"] {
  --bg:     #263050;
  --bg2:    #1e2337;
  --bg3:    #2d3a56;
  --bg4:    #1a2035;
  --border: rgba(255,255,255,.08);
  --text:   #e2e8f0;
  --muted:  #94a3b8;
}

/* ─── CARDS (reference: radius 8px, shadow 0 1px 4px rgba(0,0,0,.06)) ─── */
.card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.06) !important;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}
.card:hover {
  box-shadow: 0 4px 12px 0 rgba(0,0,0,.1) !important;
  transform: translateY(-1px);
}
.card-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  background: #fff !important;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-title { font-size: .875rem !important; font-weight: 600; color: #334155; margin: 0; }
.card-body  { padding: 20px !important; }
.card-footer {
  padding: 14px 20px !important;
  border-top: 1px solid #e2e8f0 !important;
  background: #fff !important;
}
[data-bs-theme="dark"] .card         { background: #263050 !important; border-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .card-header  { background: #263050 !important; border-bottom-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .card-footer  { background: #263050 !important; border-top-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .card-title   { color: #e2e8f0; }

/* ─── CARD SHADOW (stronger in dark so it's visible) ─────────────────── */
[data-bs-theme="dark"] .card {
  box-shadow: 0 1px 8px 0 rgba(0,0,0,.35) !important;
}
[data-bs-theme="dark"] .card:hover {
  box-shadow: 0 4px 16px 0 rgba(0,0,0,.45) !important;
}

/* ─── BUTTONS (reference: radius 6px, 7px 14px padding) ──────────────── */
.btn {
  border-radius: 6px !important;
  padding: 7px 14px !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  line-height: 1.4;
  border: 1px solid #e2e8f0;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-sm { padding: 5px 10px !important; font-size: .8125rem !important; }
.btn-xs { padding: 3px 7px  !important; font-size: .75rem !important; }
.btn-primary   { background: #1C75BC !important; border-color: #1C75BC !important; color: #fff !important; }
.btn-primary:hover { background: #155a9e !important; border-color: #155a9e !important; }
.btn-outline-primary { color: #1C75BC !important; border-color: #1C75BC !important; background: transparent !important; }
.btn-outline-primary:hover { background: #1C75BC !important; color: #fff !important; }
.btn-outline-secondary { color: #374151 !important; border-color: #e2e8f0 !important; background: #fff !important; }
.btn-outline-secondary:hover { background: #f1f5f9 !important; }
[data-bs-theme="dark"] .btn-outline-secondary {
  color: #e2e8f0 !important; border-color: rgba(255,255,255,.15) !important;
  background: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
  background: rgba(255,255,255,.08) !important;
}

/* btn-outline-light: invisible in light mode — remap to a visible secondary style */
.btn-outline-light {
  color: #374151 !important; border-color: #e2e8f0 !important;
  background: transparent !important;
}
.btn-outline-light:hover { background: #f1f5f9 !important; color: #1e293b !important; }
[data-bs-theme="dark"] .btn-outline-light {
  color: rgba(255,255,255,.85) !important; border-color: rgba(255,255,255,.25) !important;
  background: transparent !important;
}
[data-bs-theme="dark"] .btn-outline-light:hover {
  background: rgba(255,255,255,.1) !important; color: #fff !important;
}

/* btn-outline-info: use dark readable text for the tonal info style */
.btn-outline-info {
  color: #0369a1 !important; border-color: #26C6F9 !important;
  background: transparent !important;
}
.btn-outline-info:hover {
  background: #e0f2fe !important; color: #0369a1 !important;
}
[data-bs-theme="dark"] .btn-outline-info {
  color: #26C6F9 !important; border-color: #26C6F9 !important;
}
[data-bs-theme="dark"] .btn-outline-info:hover {
  background: rgba(38,198,249,.12) !important; color: #26C6F9 !important;
}
.btn-success { background: #72E128 !important; border-color: #72E128 !important; color: #fff !important; }
.btn-danger  { background: #FF4D49 !important; border-color: #FF4D49 !important; color: #fff !important; }
.btn-warning { background: #FDB528 !important; border-color: #FDB528 !important; color: #fff !important; }

/* ─── TABLES (reference: striped header, row hover #f8fafc) ─────────── */
.table {
  font-size: .875rem;
  color: #374151;
  border-color: #f1f5f9;
}
.table thead th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-weight: 600;
  font-size: .75rem !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 14px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  white-space: nowrap;
}
.table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle;
  color: #374151;
}
.table tbody tr:last-child td { border-bottom: none !important; }
.table tbody tr:hover td { background: #f8fafc; }
[data-bs-theme="dark"] .table          { color: #e2e8f0; border-color: rgba(255,255,255,.06); }
[data-bs-theme="dark"] .table thead th { background: #2d3a56 !important; color: #94a3b8 !important; border-bottom-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .table td       { border-bottom-color: rgba(255,255,255,.06) !important; color: #e2e8f0; }
[data-bs-theme="dark"] .table tbody tr:hover td { background: rgba(255,255,255,.03); }

/* ─── BADGES (reference: light-bg semantic colors, pill) ─────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px !important;
  font-size: .75rem; font-weight: 500;
  background: #f1f5f9; color: #475569;
}
.bg-primary   { background: #1C75BC !important; color: #fff !important; }
.bg-success   { background: #72E128 !important; color: #fff !important; }
.bg-warning   { background: #FDB528 !important; color: #fff !important; }
.bg-danger    { background: #FF4D49 !important; color: #fff !important; }
.bg-info      { background: #26C6F9 !important; color: #fff !important; }
.bg-secondary { background: #6D788D !important; color: #fff !important; }

/* bg-info on badges: tonal style */
.badge.bg-info { background: #e0f2fe !important; color: #0369a1 !important; }
[data-bs-theme="dark"] .badge.bg-info { background: rgba(38,198,249,.18) !important; color: #67e8f9 !important; }

/* Base badge dark mode */
[data-bs-theme="dark"] .badge { background: rgba(255,255,255,.1); color: #94a3b8; }

/* Soft/tonal badge variants — light mode */
.badge.bg-primary-lt   { background: #eff6ff !important; color: #1d4ed8 !important; }
.badge.bg-success-lt   { background: #f0fdf4 !important; color: #166534 !important; }
.badge.bg-warning-lt   { background: #fffbeb !important; color: #92400e !important; }
.badge.bg-danger-lt    { background: #fef2f2 !important; color: #991b1b !important; }
.badge.bg-info-lt      { background: #e0f2fe !important; color: #0369a1 !important; }
.badge.bg-secondary-lt { background: #f8fafc !important; color: #475569 !important; }

/* Soft/tonal badge variants — dark mode */
[data-bs-theme="dark"] .badge.bg-primary-lt   { background: rgba(28,117,188,.25)  !important; color: #93c5fd !important; }
[data-bs-theme="dark"] .badge.bg-success-lt   { background: rgba(114,225,40,.2)   !important; color: #86efac !important; }
[data-bs-theme="dark"] .badge.bg-warning-lt   { background: rgba(253,181,40,.2)   !important; color: #fcd34d !important; }
[data-bs-theme="dark"] .badge.bg-danger-lt    { background: rgba(255,77,73,.2)    !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .badge.bg-info-lt      { background: rgba(38,198,249,.15)  !important; color: #67e8f9 !important; }
[data-bs-theme="dark"] .badge.bg-secondary-lt { background: rgba(255,255,255,.08) !important; color: #94a3b8 !important; }

/* ─── FORMS (reference: border #e2e8f0, radius 6px, focus #1C75BC) ───── */
.form-control, .form-select {
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: .875rem;
  color: #374151 !important;
  background: #fff !important;
  transition: border-color .15s, box-shadow .15s;
}
.form-control:focus, .form-select:focus {
  border-color: #1C75BC !important;
  outline: 2px solid rgba(28,117,188,.15) !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
.form-label { font-size: .875rem; font-weight: 500; color: #374151; margin-bottom: 4px; }
.form-text  { font-size: .8125rem; color: #64748b; }
.form-floating .form-control:focus,
.form-floating .form-control:not(:placeholder-shown) { border-color: #1C75BC !important; }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select  {
  background: #2d3a56 !important; color: #e2e8f0 !important;
  border-color: rgba(255,255,255,.1) !important;
}
[data-bs-theme="dark"] .form-label { color: #e2e8f0; }

/* ─── ALERTS ──────────────────────────────────────────────────────────── */
.alert { border-radius: 8px !important; font-size: .875rem; }

/* ─── DROPDOWNS ───────────────────────────────────────────────────────── */
.dropdown-menu {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.1) !important;
  font-size: .875rem;
}
.dropdown-item { padding: 8px 14px !important; border-radius: 4px; color: #374151 !important; }
.dropdown-item:hover { background: #f1f5f9 !important; }
.dropdown-item.text-danger:hover { background: #fef2f2 !important; }
[data-bs-theme="dark"] .dropdown-menu { background: #263050 !important; border-color: rgba(255,255,255,.08) !important; }
[data-bs-theme="dark"] .dropdown-item { color: #e2e8f0 !important; }
[data-bs-theme="dark"] .dropdown-item:hover { background: rgba(255,255,255,.06) !important; }

/* ─── SIGN-IN PAGE ────────────────────────────────────────────────────── */
.form-signin {
  max-width: 360px;
  width: 100%;
  padding: 32px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,.06);
}
[data-bs-theme="dark"] .form-signin {
  background: #263050;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 1px 12px 0 rgba(0,0,0,.4);
}
.form-signin .form-floating:focus-within { z-index: 2; }
.form-signin input[type="text"]     { margin-bottom: -1px; border-bottom-right-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.form-signin input[type="password"] { margin-bottom: 12px; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }

/* ─── BREADCRUMB ──────────────────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 0; margin-bottom: 1rem; font-size: .875rem; }
.breadcrumb-item a { text-decoration: none; color: #1C75BC; }
.breadcrumb-item.active { color: #64748b; }
.breadcrumb-item + .breadcrumb-item::before { color: #94a3b8; }
[data-bs-theme="dark"] .breadcrumb-item a { color: #60a5fa; }
[data-bs-theme="dark"] .breadcrumb-item.active { color: #94a3b8; }

/* ─── CODEMIRROR ──────────────────────────────────────────────────────── */
.CodeMirror {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-family: var(--font-family-mono);
  font-size: 14px;
}
.CodeMirror-focused {
  border-color: #1C75BC;
  outline: 2px solid rgba(28,117,188,.15);
  outline-offset: 0;
}
[data-bs-theme="dark"] .CodeMirror {
  border-color: rgba(255,255,255,.12);
  background: #1e2337;
  color: #e2e8f0;
}
[data-bs-theme="dark"] .CodeMirror-focused {
  border-color: #1C75BC;
  outline-color: rgba(28,117,188,.25);
}

/* ─── ASSIGNMENT DESCRIPTION PROSE ───────────────────────────────────── */
.assignment-description { line-height: 1.75; font-size: .9375rem; }
.assignment-description p  { margin-bottom: 1rem; }
.assignment-description ul,
.assignment-description ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.assignment-description code {
  background: #f8fafc; padding: .15rem .4rem;
  border-radius: 4px; font-size: .875em;
  font-family: var(--font-family-mono); color: #1C75BC;
}
[data-bs-theme="dark"] .assignment-description code {
  background: rgba(255,255,255,.08); color: #60a5fa;
}
.assignment-description pre {
  background: #1e2030; color: #c8d3f5;
  padding: 1.25rem; border-radius: 8px; overflow-x: auto;
}

/* ─── DIFF MARKS ──────────────────────────────────────────────────────── */
mark.diff-repl { background: rgba(253,181,40,.28); padding: 0 2px; }
mark.diff-del  { background: rgba(255,77,73,.2);   padding: 0 2px; text-decoration: line-through; }
mark.diff-ins  { background: rgba(114,225,40,.22); padding: 0 2px; }

/* ─── UTILITIES ───────────────────────────────────────────────────────── */
.avatar-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: #1C75BC; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; text-transform: uppercase;
}
.text-monospace { font-family: var(--font-family-mono) !important; }
.border-dashed  { border-style: dashed !important; }
.btn.loading    { pointer-events: none; opacity: .6; }
.text-primary   { color: #1C75BC !important; }
.bg-primary-lt  { background: #eff6ff !important; color: #1d4ed8 !important; }
[data-bs-theme="dark"] .bg-primary-lt { background: rgba(28,117,188,.2) !important; color: #93c5fd !important; }