/* --------------------------------------------------
   THEME VARIABLES
-------------------------------------------------- */
:root{
  --bg: #eef2f7;
  --panel: rgba(255,255,255,0.8);
  --panel-strong: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --border: rgba(0,0,0,0.12);
  --glass-bg: rgba(255,255,255,0.25);
  --primary: #4f46e5;
  --accent: #6366f1;
  --shadow: rgba(15,23,42,0.12);
}

body.dark{
  --bg: #0d1117;
  --panel: rgba(30,34,44,0.8);
  --panel-strong: #1a1f29;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: rgba(255,255,255,0.08);
  --glass-bg: rgba(255,255,255,0.05);
  --primary: #818cf8;
  --accent: #a5b4fc;
  --shadow: rgba(0,0,0,0.6);
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: Inter, system-ui;
  background: var(--bg);
  color: var(--text);
  transition: .3s ease;
}

/* --------------------------------------------------
   NAVBAR
-------------------------------------------------- */
.navbar{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:var(--glass-bg);
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow:0 4px 20px var(--shadow);
}

.nav-logo img{
  width:42px;
  height:42px;
  border-radius:10px;
}

.nav-title{
  font-size:18px;
  font-weight:700;
}

.theme-toggle, .collapse-toggle{
  padding:8px 14px;
  border-radius:10px;
  background:var(--primary);
  color:white;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition:.2s;
}

.theme-toggle:hover, .collapse-toggle:hover{
  transform:scale(1.06);
}

/* --------------------------------------------------
   GRID LAYOUT
-------------------------------------------------- */
.page{
  display:grid;
  grid-template-columns: 320px 1fr 420px;
  height: calc(100vh - 64px);
  transition:.3s;
}

/* COLLAPSE MODE */
.page.collapsed-left{
  grid-template-columns: 80px 1fr 420px;
}

/* --------------------------------------------------
 LEFT PANEL
-------------------------------------------------- */
.right-top-classes{
  padding:20px;
  overflow-y:auto;
  background:var(--panel);
  backdrop-filter:blur(10px);
  border-right:1px solid var(--border);
}

/* Developer Card */
.dev-card{
  padding:18px;
  border-radius:18px;
  background:var(--panel-strong);
  box-shadow:0 6px 20px var(--shadow);
  text-align:center;
}

.dev-card img{
  width:120px;
  height:120px;
  border-radius:50%;
  border:3px solid var(--primary);
}

/* Skill Chips */
.skills-container{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.skill-chip{
  background:var(--glass-bg);
  padding:6px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  font-size:12px;
}

/* Class Box */
#class-dropdown{
  width:100%;
  margin-top:16px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel-strong);
}

.class-info-box{
  margin-top:12px;
  padding:14px;
  border-radius:12px;
  background:var(--panel);
  border:1px solid var(--border);
  font-size:14px;
  line-height:1.4;
}

/* --------------------------------------------------
   CENTER AREA
-------------------------------------------------- */
.center-area{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  gap:20px;
}

#file-input{
  padding:14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel-strong);
  width:320px;
  text-align:center;
}

.model-sections{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.predict-btn{
  background:var(--primary);
  color:white;
  padding:12px 20px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-weight:600;
  transition:.2s;
}

.predict-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px var(--shadow);
}

/* --------------------------------------------------
   RIGHT PANEL
-------------------------------------------------- */
.right-results{
  padding:20px;
  border-left:1px solid var(--border);
  background:var(--panel);
  backdrop-filter:blur(10px);
  overflow-y:auto;
}

#prediction-output{
  padding:20px;
  background:var(--panel-strong);
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 6px 20px var(--shadow);
}

/* Tables */
.pred-table{
  width:100%;
  border-collapse:collapse;
}

.pred-table th, .pred-table td{
  padding:10px;
  border-bottom:1px solid var(--border);
}

.pred-table th{
  font-weight:700;
  background:var(--glass-bg);
}

/* Confusion table */
.confusion-table{
  width:100%;
  border-collapse:collapse;
  margin-top:14px;
}

.confusion-table th, .confusion-table td{
  padding:8px;
  border:1px solid var(--border);
}

/* --------------------------------------------------
   RESPONSIVE DESIGN
-------------------------------------------------- */

/* TABLETS */
@media (max-width:1200px){
  .page{
    grid-template-columns: 260px 1fr 300px;
  }
}

/* MOBILE */
@media (max-width:900px){
  .page{
    grid-template-columns: 1fr;
  }

  .right-top-classes,
  .right-results{
    display:none;
  }

  #file-input{
    width:90%;
  }

  .model-sections{
    flex-direction:column;
    width:100%;
    align-items:center;
  }
}


/* ---------------------------------------------
   DARK MODE — FULL TEXT VISIBILITY FIX
--------------------------------------------- */

body.dark {
  color: var(--text);
}

/* Panels */
body.dark .right-top-classes,
body.dark .right-results,
body.dark #prediction-output,
body.dark .dev-card,
body.dark .class-info-box {
  background: var(--panel-strong) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Headings */
body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6 {
  color: var(--text) !important;
}

/* Normal text */
body.dark p,
body.dark span,
body.dark label,
body.dark div,
body.dark td,
body.dark th {
  color: var(--text) !important;
}

/* Dropdown */
body.dark #class-dropdown {
  background: var(--panel-strong) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}

/* Skill chips */
body.dark .skill-chip {
  background: var(--glass-bg) !important;
  color: var(--text) !important;
  border-color: var(--border);
}

/* Tables */
body.dark .pred-table th,
body.dark .pred-table td,
body.dark .confusion-table th,
body.dark .confusion-table td {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Buttons */
body.dark .predict-btn,
body.dark .theme-toggle,
body.dark .collapse-toggle {
  color: #fff !important;
}

/* Nutrition box override */
body.dark .nutri-line,
body.dark .class-info-box strong {
  color: var(--text) !important;
}