/* ═══════════════════════════════════════════════════════════════
   PREMIUM ADAPTIVE DESIGN SYSTEM (INTEGRATED TO CUSTOM PORTAL)
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Safely map to your existing template colors, providing high-fidelity fallback states */
  --sp-bg:          var(--bg-body, #080D1A);
  --sp-surface:     var(--bg-card, #0D1526);
  --sp-border:      var(--border-color, rgba(255, 255, 255, 0.09));
  --sp-text:        var(--text-main, #F0F4FF);
  --sp-muted:       var(--text-muted, #6B7A99);
  
  --sp-blue:        #4F6EF7;
  --sp-blue-dim:    rgba(79, 110, 247, 0.08);
  --sp-blue-glow:   rgba(79, 110, 247, 0.2);
  --sp-mint:        #22C997;
  --sp-mint-dim:    rgba(34, 201, 151, 0.08);
  --sp-rose:        #F4637A;
  --sp-rose-dim:    rgba(244, 99, 122, 0.08);
  --sp-amber:       #F5A623;
  --sp-amber-dim:   rgba(245, 166, 35, 0.08);
  
  --sp-radius-lg:   16px;
  --sp-radius-md:   12px;
  --sp-radius-sm:   8px;
  --sp-radius-pill: 999px;
  --sp-shadow:      0 20px 60px rgba(0, 0, 0, 0.45);
  --sp-shadow-sm:   0 8px 24px rgba(0, 0, 0, 0.15);

  --heading-gradient: linear-gradient(135deg, #ffffff 30%, #a1a1aa 100%);
}

/* Light Theme Adaptive Fallbacks */
:root[data-theme="light"],
html[data-theme="light"],
body.light-theme {
  --sp-bg:          var(--bg-body, #F6F8FC);
  --sp-surface:     var(--bg-card, #FFFFFF);
  --sp-border:      var(--border-color, rgba(15, 23, 42, 0.08));
  --sp-text:        var(--text-main, #0F172A);
  --sp-muted:       var(--text-muted, #64748B);
  --heading-gradient: linear-gradient(135deg, #0F172A 30%, #64748B 100%);
}

/* ═══════════════════════════════════════════════════════════════
   SURFACES & CONTAINERS
   ═══════════════════════════════════════════════════════════════ */
.judging-main, .matrix-wrapper, .crit-form-panel, .score-panel, 
.border.border-slate-200.rounded-xl.bg-white,
#resIndWrapper, #resGrpWrapper, .results-toolbar, .weights-bar,
.bg-slate-800.text-white.rounded-lg,
.border-slate-200.rounded-xl.shadow-sm.bg-white {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  box-shadow: var(--sp-shadow-sm) !important;
  color: var(--sp-text) !important;
}

/* Premium Adaptive Modal Design */
.modal-box {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
  box-shadow: var(--sp-shadow) !important;
  width: 96%;
  max-width: 480px;
  border-radius: var(--sp-radius-lg);
  display: flex;
  flex-direction: column;
  max-height: 90vh !important; 
  overflow: hidden;
  margin: auto;
  backdrop-filter: blur(16px);
}
@media (min-width: 640px) { .modal-box { width: 100%; } }
.modal-box-lg { max-width: 580px; }

/* ═══════════════════════════════════════════════════════════════
   BADGES, TAGS, AND ADAPTIVE PLATES (PRESERVES READABILITY)
   ═══════════════════════════════════════════════════════════════ */
.bg-slate-50, .bg-slate-50\/50, .bg-slate-50\/80, .bg-slate-100 {
  background: var(--sp-bg) !important;
  opacity: 0.95;
}
.bg-white {
  background: var(--sp-surface) !important;
}
.group-card-footer, .score-team-list {
  background: transparent !important;
}

/* Standard badging system */
.bg-blue-50, .bg-blue-100 {
  background: rgba(79, 110, 247, 0.12) !important;
  color: #708dfc !important;
  border: 1px solid rgba(79, 110, 247, 0.2) !important;
}
.bg-purple-50, .bg-purple-100 {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #c084fc !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
}
.bg-yellow-50, .bg-yellow-100 {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

/* Force icons inside badges to stay matching & visible */
.bg-blue-50 i, .bg-blue-100 i { color: #708dfc !important; }
.bg-purple-50 i, .bg-purple-100 i { color: #c084fc !important; }
.bg-yellow-50 i, .bg-yellow-100 i { color: #fbbf24 !important; }

/* ─────────────────────────────────────────────────────────────
   HIGH-CONTRAST ACCESSIBILITY PATCH FOR SEMESTER & CATEGORY BADGES
   (Fixes unreadable grey backgrounds and dark text in Dark Mode)
   ───────────────────────────────────────────────────────────── */
/* Blue Badges (e.g. bg-blue-50/50, bg-blue-100/50, text-blue-600) */
.judging-main [class*="bg-blue-50"],
.judging-main [class*="bg-blue-100"],
.judging-main .bg-blue-50\/50,
.judging-main .bg-blue-100\/50 {
    background-color: rgba(79, 110, 247, 0.15) !important;
    border-color: rgba(79, 110, 247, 0.3) !important;
}
.judging-main .text-blue-600 {
    color: #93c5fd !important; /* Pastel Blue */
}

/* Purple Badges (e.g. bg-purple-50/50, bg-purple-100/50, text-purple-600) */
.judging-main [class*="bg-purple-50"],
.judging-main [class*="bg-purple-100"],
.judging-main .bg-purple-50\/50,
.judging-main .bg-purple-100\/50 {
    background-color: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
}
.judging-main .text-purple-600 {
    color: #c084fc !important; /* Pastel Purple */
}

/* ── LIGHT THEME ACCESSIBILITY ADAPTATIONS ── */
:root[data-theme="light"] .judging-main .text-blue-600,
html[data-theme="light"] .judging-main .text-blue-600,
body.light-theme .judging-main .text-blue-600 {
    color: #1d4ed8 !important; /* Dark Blue */
}
:root[data-theme="light"] .judging-main [class*="bg-blue-50"],
html[data-theme="light"] .judging-main [class*="bg-blue-50"],
body.light-theme .judging-main [class*="bg-blue-50"],
:root[data-theme="light"] .judging-main .bg-blue-50\/50,
html[data-theme="light"] .judging-main .bg-blue-50\/50,
body.light-theme .judging-main .bg-blue-50\/50 {
    background-color: rgba(29, 78, 216, 0.08) !important;
    border-color: rgba(29, 78, 216, 0.2) !important;
}

:root[data-theme="light"] .judging-main .text-purple-600,
html[data-theme="light"] .judging-main .text-purple-600,
body.light-theme .judging-main .text-purple-600 {
    color: #6b21a8 !important; /* Dark Purple */
}
:root[data-theme="light"] .judging-main [class*="bg-purple-50"],
html[data-theme="light"] .judging-main [class*="bg-purple-50"],
body.light-theme .judging-main [class*="bg-purple-50"],
:root[data-theme="light"] .judging-main .bg-purple-50\/50,
html[data-theme="light"] .judging-main .bg-purple-50\/50,
body.light-theme .judging-main .bg-purple-50\/50 {
    background-color: rgba(107, 33, 168, 0.08) !important;
    border-color: rgba(107, 33, 168, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════════
   BORDERS, DIVIDERS & TYPOGRAPHY HIERARCHY
   ═══════════════════════════════════════════════════════════════ */
.border-b.border-slate-100, .border-b.border-slate-200, 
.border-t.border-slate-100, .border-t.border-slate-200,
.border.border-slate-200, .border.border-slate-100,
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--sp-border) !important;
}

.text-slate-900, .text-slate-800, .text-slate-700 {
  color: var(--sp-text) !important;
}
.text-slate-600, .text-slate-500 {
  color: var(--sp-muted) !important;
}
.text-slate-400, .text-slate-300 {
  color: var(--sp-muted) !important;
  opacity: 0.8;
}

h1 i, h2 i, h3 i, h4 i, h5 i, h6 i {
  color: var(--sp-blue) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS AND ACTIONS
   ═══════════════════════════════════════════════════════════════ */
.btn, button.btn, a.btn, .tab-btn {
  background: linear-gradient(135deg, var(--sp-blue) 0%, #1552cc 100%) !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(79, 110, 247, 0.2) !important;
  color: #ffffff !important;
  border-radius: var(--sp-radius-md) !important;
  font-weight: 700 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn i, button.btn i, a.btn i, .tab-btn i {
  color: #ffffff !important;
}
.btn:hover, button.btn:hover, a.btn:hover, .tab-btn:hover {
  box-shadow: 0 6px 18px rgba(79, 110, 247, 0.35) !important;
  transform: translateY(-1.5px) !important;
  filter: brightness(1.08);
}
.btn:active, button.btn:active, a.btn:active, .tab-btn:active {
  transform: translateY(0) scale(0.97) !important;
}

.btn-primary { color: #ffffff !important; font-weight: 800 !important; }

.btn.btn-outline, .btn.btn-soft, .tab-btn:not(.active) {
  background: var(--sp-surface) !important;
  color: var(--sp-text) !important;
  border: 1px solid var(--sp-border) !important;
  box-shadow: none !important;
}
.btn.btn-outline i, .btn.btn-soft i, .tab-btn:not(.active) i {
  color: var(--sp-muted) !important;
}
.btn.btn-outline:hover, .btn.btn-soft:hover, .tab-btn:not(.active):hover {
  border-color: var(--sp-blue) !important;
  color: var(--sp-blue) !important;
  background: var(--sp-blue-dim) !important;
}

.tab-btn.active { 
  background: linear-gradient(135deg, var(--sp-blue) 0%, #1552cc 100%) !important;
  color: #ffffff !important; 
  box-shadow: 0 4px 12px rgba(79, 110, 247, 0.25) !important;
}

button[onclick^="close"] {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
  box-shadow: none !important;
  transition: all 0.2s;
}
button[onclick^="close"]:hover {
  border-color: var(--sp-rose) !important;
  color: var(--sp-rose) !important;
  background: var(--sp-rose-dim) !important;
}

.action-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--sp-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
  box-shadow: none !important;
}
.action-btn i { color: inherit !important; }
.action-btn:hover { transform: translateY(-1.5px); }
.action-btn:active { transform: translateY(0) scale(0.92) !important; }

.action-btn.gear:hover {
  border-color: var(--sp-blue) !important;
  color: var(--sp-blue) !important;
  background: var(--sp-blue-dim) !important;
  box-shadow: 0 4px 12px var(--sp-blue-glow) !important;
}
.action-btn.trash:hover {
  border-color: var(--sp-rose) !important;
  color: var(--sp-rose) !important;
  background: var(--sp-rose-dim) !important;
  box-shadow: 0 4px 12px rgba(244, 99, 122, 0.15) !important;
}
.action-btn.star:hover {
  border-color: var(--sp-amber) !important;
  color: var(--sp-amber) !important;
  background: var(--sp-amber-dim) !important;
  box-shadow: 0 4px 12px rgba(245, 166, 35, 0.15) !important;
}

.action-btn.action-btn-sm {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-radius: var(--sp-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════
   FORM FIELDS & SCROLLBAR CONTROLS
   ═══════════════════════════════════════════════════════════════ */
.inp, .select, .matrix-score-inp, .scoreInp, input[type="text"], input[type="number"], select, textarea {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  color: var(--sp-text) !important;
  border-radius: var(--sp-radius-sm) !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
.inp:focus, .select:focus, .matrix-score-inp:focus, .scoreInp:focus {
  border-color: var(--sp-blue) !important;
  box-shadow: 0 0 0 3px var(--sp-blue-glow) !important;
  outline: none !important;
}

input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: 6px !important;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
input[type="checkbox"]:checked {
  background: var(--sp-blue) !important;
  border-color: var(--sp-blue) !important;
}
input[type="checkbox"]:checked::after {
  content: '✔'; color: #ffffff; font-size: 11px; font-weight: 900;
}

.inp-offline {
  border-color: var(--sp-amber) !important;
  color: var(--sp-amber) !important;
  box-shadow: 0 0 0 2px var(--sp-amber-dim) !important;
}
.inp-saved, .scoreInp.text-green-600 {
  border-color: var(--sp-mint) !important;
  color: var(--sp-mint) !important;
  box-shadow: 0 0 0 2px var(--sp-mint-dim) !important;
}
.inp-error {
  border-color: var(--sp-rose) !important;
  color: var(--sp-rose) !important;
  box-shadow: 0 0 0 2px var(--sp-rose-dim) !important;
}

#matrixSyncStatus, .bg-slate-900, #cacheStatusPill {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  box-shadow: none !important;
}

th.sticky, td.sticky, .matrix-table thead th, .matrix-table td:first-child, .bg-slate-800 {
  background: var(--sp-surface) !important;
  border-color: var(--sp-border) !important;
  color: var(--sp-text) !important;
}

.weight-inp::-webkit-inner-spin-button, .weight-inp::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none; margin: 0; 
}
.weight-inp, input[type="number"] { 
  -moz-appearance: textfield; appearance: textfield; 
}
.weight-inp { 
  color: var(--sp-blue) !important; 
  border: 1px solid var(--sp-border) !important; 
  background: var(--sp-surface) !important;
  border-radius: var(--sp-radius-sm) !important;
}

.hover\:bg-slate-50:hover, tr.row-hover:hover > td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT STRUCTURAL BOUNDS
   ═══════════════════════════════════════════════════════════════ */
html, body { max-width: 100vw; overflow-x: hidden; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sp-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--sp-muted); }

.judging-main { border-radius: var(--sp-radius-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 500px; width: 100%; max-width: 100%; }
.tabs-bar { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0 12px; gap: 4px; }
.tabs-bar::-webkit-scrollbar { display: none; }

.tab-btn { 
  padding: 10px 14px; 
  font-size: 11px; 
  font-weight: 700; 
  white-space: nowrap; 
  flex-shrink: 0; 
  border: 1px solid var(--sp-border) !important; 
  background: var(--sp-surface) !important; 
  color: var(--sp-muted) !important;
  cursor: pointer; 
  text-transform: uppercase; 
  letter-spacing: .04em; 
  border-radius: var(--sp-radius-md) !important;
  box-shadow: none !important;
}
.tab-btn.active {
  background: linear-gradient(135deg, var(--sp-blue) 0%, #1552cc 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

@media (min-width: 640px) { .tabs-bar { padding: 0 20px; gap: 6px; } .tab-btn { padding: 11px 16px; font-size: 11px; } }
.matrix-wrapper { height: calc(100svh - 340px); min-height: 320px; display: flex; flex-direction: column; border-radius: var(--sp-radius-lg); overflow: hidden; }
@media (min-width: 768px) { .matrix-wrapper { height: calc(100svh - 280px); min-height: 400px; } }
.matrix-scroll-area { flex: 1; overflow-y: auto; overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; }
.matrix-table { width: 100%; min-width: 420px; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.matrix-table thead th { position: sticky; top: 0; z-index: 30; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .025em; padding: 10px 4px; text-align: center; word-wrap: break-word; height: 50px; }
@media (min-width: 768px) { .matrix-table thead th { font-size: 10px; } }
.matrix-table td:first-child, .matrix-table th:first-child { position: sticky; left: 0; z-index: 40; width: 110px; min-width: 90px; text-align: left; padding-left: 8px; padding-right: 4px; }
@media (min-width: 768px) { .matrix-table td:first-child, .matrix-table th:first-child { width: 160px; padding-left: 12px; } }
.matrix-table thead th:first-child { z-index: 50; }

.matrix-score-inp { 
  width: 100%; 
  height: 38px; 
  min-width: 36px; 
  border: 1px solid transparent !important; 
  background: transparent !important; 
  text-align: center; 
  font-weight: 900; 
  font-size: 12px; 
  transition: all .15s; 
  border-radius: 0 !important; 
  padding: 0; 
}
@media (min-width: 768px) { .matrix-score-inp { font-size: 14px; } }
.col-group { width: 44px; }
@media (min-width: 768px) { .col-group { width: 56px; } }
.crit-header-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; }
.score-layout { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }
@media (min-width: 768px) { .score-layout { flex-direction: row; } }
.score-team-list { width: 100%; flex-shrink: 0; padding: 12px; overflow-y: auto; max-height: 38vh; }
@media (min-width: 768px) { .score-team-list { width: 240px; max-height: none; height: 100%; } }
.score-panel { flex: 1; overflow-y: auto; padding: 16px; position: relative; min-height: 200px; -webkit-overflow-scrolling: touch; }
@media (min-width: 640px) { .score-panel { padding: 20px; } }
.criteria-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .criteria-grid { grid-template-columns: 1fr 2fr; } }
.groups-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .groups-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .groups-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .groups-grid { grid-template-columns: repeat(4, 1fr); } }
.group-card-footer { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 10px; margin-left: -12px; margin-right: -12px; margin-bottom: -12px; padding-left: 12px; padding-right: 12px; padding-bottom: 12px; border-radius: 0 0 var(--sp-radius-md) var(--sp-radius-md); }
.weights-bar { padding: 14px 18px; border-radius: var(--sp-radius-md); display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
@media (min-width: 640px) { .weights-bar { flex-direction: row; align-items: center; justify-content: space-between; } }
.results-toolbar { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--sp-radius-md); }
@media (min-width: 640px) { .results-toolbar { flex-direction: row; align-items: center; justify-content: space-between; } }
@media (max-width: 639px) { select.select, input.inp { min-height: 38px; font-size: 16px !important; } }

.tab-area { padding: 14px; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 640px) { .tab-area { padding: 20px; } }
.crit-form-panel { padding: 16px; border-radius: var(--sp-radius-md); height: max-content; }
@media (min-width: 1024px) { .crit-form-panel { position: sticky; top: 16px; } }

#offlineBanner { display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 9999; background: linear-gradient(90deg, #b45309, #d97706); color: white; text-align: center; font-size: 11px; font-weight: 850; padding: 8px 16px; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,0,0,.3); align-items: center; justify-content: center; gap: 8px; }
#offlineBanner.show { display: flex; }

#cacheStatusPill { position: fixed; bottom: 72px; right: 16px; z-index: 8000; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: var(--sp-radius-pill); display: flex; align-items: center; gap: 6px; transition: all .3s; opacity: 0; pointer-events: none; }
#cacheStatusPill.visible  { opacity: 1; pointer-events: auto; }
#cacheStatusPill.cached   { color: #10b981; }
#cacheStatusPill.pending  { color: #f5a623; }
#cacheStatusPill.syncing  { color: var(--sp-blue); }
#cacheStatusPill.error    { color: #ef4444; }