/* ═══════════════════════════════════════════════════════════════════
   ITI Ke Gyani — Professional Refinement Layer  (theme-pro)
   Loaded LAST (via @import at the end of itigyani.css AND compat.css)
   so it wins cleanly without rewriting existing files.

   Goal: take the existing saffron + navy identity and make it read as a
   premium, enterprise-grade product — refined neutrals, restrained
   accent use, tighter layered shadows, crisp solid borders, a consistent
   radius scale, more generous focus states. Plus a full dark theme for
   the internal panels (see the [data-theme="dark"] section at the end).
   ═══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────
   1. REFINED DESIGN TOKENS
   Overriding these :root vars instantly upgrades every component that
   already references them (surfaces, borders, text, shadows, radii).
   ────────────────────────────────────────────────────────────────── */
:root {
  /* Sophisticated cool-neutral gray scale */
  --gray-50:  #F8FAFC;
  --gray-100: #F1F4F9;
  --gray-200: #E7EBF2;
  --gray-300: #D6DCE6;
  --gray-400: #AAB2C2;
  --gray-500: #828B9C;
  --gray-600: #5C6473;
  --gray-700: #3F4654;
  --gray-800: #262C38;
  --gray-900: #161B22;

  /* Surfaces — slightly cooler, calmer than the old flat grays */
  --bg:        #F4F6FA;
  --off-white: #FAFBFD;
  --surface:   #FFFFFF;

  /* Crisp SOLID borders (replaces muddy rgba blacks) */
  --border:    #EAEEF4;
  --border-md: #DEE4EC;
  --border-lg: #CDD4E0;

  /* Text — confident near-black + balanced secondary/muted */
  --text-primary:   #141A23;
  --text-secondary: #48505E;
  --text-muted:     #8A93A6;

  /* Accent — saffron stays the brand, but used selectively */
  --saffron:       #FF6B00;
  --saffron-dark:  #E25C00;
  --saffron-soft:  #FFF4EC;
  --accent-weak:   rgba(255,107,0,0.08);
  --ring:          rgba(255,107,0,0.32);

  /* Brand navy — a touch deeper & cooler for a premium feel */
  --navy:       #0A1424;
  --navy-mid:   #0E1D38;
  --navy-light: #14274A;

  /* Tighter, layered, low-opacity shadow system */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.04);
  --shadow-md: 0 2px 4px rgba(16,24,40,0.04), 0 6px 16px rgba(16,24,40,0.07);
  --shadow-lg: 0 4px 8px rgba(16,24,40,0.04), 0 16px 36px rgba(16,24,40,0.10);
  --shadow-orange: 0 6px 18px rgba(255,107,0,0.22);

  /* Consistent radius scale (slightly tighter = more enterprise) */
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;
  --r-xl: 16px;
}

/* ──────────────────────────────────────────────────────────────────
   2. GLOBAL FOCUS-VISIBLE — accessible, on-brand, professional
   ────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible,
.sidebar-item:focus-visible,
.tab-btn:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible,
.nav-search-input:focus-visible,
.search-box input:focus-visible { outline: none; }

/* ──────────────────────────────────────────────────────────────────
   3. NAVBAR — cleaner glass, refined links
   ────────────────────────────────────────────────────────────────── */
.navbar-pub {
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.nav-links-pub a,
.nav-drop-trigger { font-weight: 600; color: var(--gray-600); }
.nav-links-pub a:hover,
.nav-drop-trigger:hover { background: var(--gray-100); color: var(--text-primary); }
.nav-logo-icon {
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(255,107,0,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.nav-search-input {
  background: var(--gray-50);
  border: 1px solid var(--border-md);
}
.nav-search-input:focus {
  background: var(--surface);
  border-color: var(--saffron);
  box-shadow: 0 0 0 4px var(--ring);
}
.nav-drop-menu {
  border: 1px solid var(--border-md);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.nav-drop-menu a:hover { background: var(--saffron-soft); color: var(--saffron-dark); }

/* ──────────────────────────────────────────────────────────────────
   4. BUTTONS — calmer, more refined; rounded-rect reads enterprise
   ────────────────────────────────────────────────────────────────── */
.btn {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.005em;
  transition: transform .18s cubic-bezier(.22,1,.36,1),
              box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary {
  background: var(--saffron);
  border-color: var(--saffron);
  box-shadow: 0 1px 2px rgba(255,107,0,0.20), 0 4px 12px rgba(255,107,0,0.22);
}
.btn-primary:hover {
  background: var(--saffron-dark);
  box-shadow: 0 2px 4px rgba(255,107,0,0.22), 0 8px 22px rgba(255,107,0,0.30);
}
.btn-outline {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border-lg);
}
.btn-outline:hover {
  border-color: var(--saffron);
  color: var(--saffron-dark);
  background: var(--saffron-soft);
}
.btn-lg { border-radius: 12px; }
.btn-icon, .btn-icon-sm { border-radius: var(--r-sm); }

/* ──────────────────────────────────────────────────────────────────
   5. CARDS — crisp solid borders, refined shadow & hover
   ────────────────────────────────────────────────────────────────── */
.service-card, .course-card, .exam-card, .topper-card, .mela-card,
.testimonial-card, .notice-board, .update-col, .card, .stat-card-dash,
.job-row {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.service-card:hover, .course-card:hover, .exam-card:hover,
.topper-card:hover, .mela-card:hover, .job-row:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-md);
}
.course-card:hover { border-color: var(--saffron); }
.stat-card-dash:hover, .card:hover { box-shadow: var(--shadow-sm); }
.update-col-head { background: var(--navy); }
.course-cat, .service-name { letter-spacing: 0; }

/* ──────────────────────────────────────────────────────────────────
   6. SECTIONS / HERO — calmer accents, refined rhythm
   ────────────────────────────────────────────────────────────────── */
.section-bg { background: var(--off-white); }
.section-label { color: var(--saffron-dark); letter-spacing: 0.12em; }
.hero { background: var(--navy); }
.hero-eyebrow {
  background: rgba(255,107,0,0.12);
  border: 1px solid rgba(255,107,0,0.24);
  color: #FFB070;
}

/* ──────────────────────────────────────────────────────────────────
   7. FORMS — roomier inputs, refined focus ring
   ────────────────────────────────────────────────────────────────── */
.form-input, .form-select, .form-textarea {
  height: 42px;
  background: var(--surface);
  border: 1px solid var(--border-md);
  border-radius: var(--r-md);
}
.form-textarea { height: auto; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--saffron);
  box-shadow: 0 0 0 4px var(--ring);
}
.form-label { color: var(--text-secondary); font-weight: 600; }

/* ──────────────────────────────────────────────────────────────────
   8. DASHBOARD CHROME — sidebar, topbar, tables, stats
   ────────────────────────────────────────────────────────────────── */
.app-sidebar { background: var(--navy); border-right: 1px solid rgba(255,255,255,0.05); }
.sidebar-item.active { background: rgba(255,107,0,0.16); }
.sidebar-section { color: rgba(255,255,255,0.30); letter-spacing: 0.12em; }

.app-topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-icon-btn {
  background: var(--gray-50);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.topbar-icon-btn:hover { background: var(--surface); border-color: var(--border-md); }

.stat-card-dash { border-radius: var(--r-lg); }
.stat-icon-wrap { border-radius: 10px; }

table.dash-table thead th {
  background: var(--gray-50);
  color: var(--gray-500);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.05em;
}
table.dash-table tbody td { border-bottom: 1px solid var(--border); }
table.dash-table tbody tr:hover td { background: var(--gray-50); }

.page-title { color: var(--text-primary); }
.card-header { border-bottom: 1px solid var(--border); }

/* ──────────────────────────────────────────────────────────────────
   9. BADGES / PILLS — flatter, refined
   ────────────────────────────────────────────────────────────────── */
.badge { letter-spacing: 0.02em; font-weight: 700; }
.tab-btn.active { color: var(--saffron-dark); border-bottom-color: var(--saffron); }
.page-btn:hover { border-color: var(--saffron); color: var(--saffron-dark); }
.page-btn.active { background: var(--saffron); border-color: var(--saffron); }

/* ──────────────────────────────────────────────────────────────────
   10. PROFESSIONAL ICON BASELINE  (paired with icons.js / ig_icon)
   Inline SVGs inherit text color and align with the text baseline.
   ────────────────────────────────────────────────────────────────── */
.ig-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.125em;
  flex-shrink: 0;
  line-height: 0;
}
.ig-icon svg { display: block; width: 1em; height: 1em; stroke: currentColor; }
.sidebar-item-icon .ig-icon svg,
.sidebar-item-icon svg { width: 18px; height: 18px; }
.nav-logo-icon svg { width: 20px; height: 20px; color: #fff; }
.social-btn svg { width: 17px; height: 17px; }

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — internal panels only.
   The early script in i18n_head.php sets html[data-theme="dark"] ONLY
   on /panels/ paths, so the public site is never affected even though
   the preference is shared in localStorage.
   ══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --bg:        #0E131B;
  --off-white: #1B222D;
  --surface:   #161D27;
  --gray-50:   #1B222D;
  --gray-100:  #212A35;
  --gray-200:  #28323F;
  --border:    #283140;
  --border-md: #333E4E;
  --border-lg: #404B5C;
  --text-primary:   #E8EBF1;
  --text-secondary: #AEB6C4;
  --text-muted:     #828C9D;
  --saffron-soft: rgba(255,107,0,0.14);
  --accent-weak:  rgba(255,107,0,0.12);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.50);
  --shadow-lg: 0 18px 42px rgba(0,0,0,0.60);
  color-scheme: dark;
}

html[data-theme="dark"] body { background: var(--bg); color: var(--text-primary); }
html[data-theme="dark"] .app-main,
html[data-theme="dark"] .app-content { background: var(--bg); }

/* Topbar */
html[data-theme="dark"] .app-topbar { background: var(--surface); border-bottom-color: var(--border); }
html[data-theme="dark"] .topbar-page-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .topbar-user-name { color: var(--text-primary); }
html[data-theme="dark"] .topbar-breadcrumb,
html[data-theme="dark"] .page-sub { color: var(--text-muted); }
html[data-theme="dark"] .topbar-icon-btn { background: var(--gray-100); border-color: var(--border); color: var(--text-secondary); }
html[data-theme="dark"] .topbar-divider { background: var(--border); }

/* Cards & surfaces */
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card-dash,
html[data-theme="dark"] .notice-board,
html[data-theme="dark"] .update-col { background: var(--surface); border-color: var(--border); color: var(--text-primary); }
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .divider { border-color: var(--border); }
html[data-theme="dark"] .stat-value { color: var(--text-primary); }
html[data-theme="dark"] .stat-label { color: var(--text-muted); }

/* Tables */
html[data-theme="dark"] table.dash-table thead th { background: var(--gray-50); color: var(--text-muted); border-bottom-color: var(--border); }
html[data-theme="dark"] table.dash-table tbody td { border-bottom-color: var(--border); color: var(--text-secondary); }
html[data-theme="dark"] table.dash-table tbody tr:hover td { background: var(--gray-100); }
html[data-theme="dark"] .user-cell-name { color: var(--text-primary); }

/* Forms */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .search-box input { background: var(--gray-100); border-color: var(--border-md); color: var(--text-primary); }
html[data-theme="dark"] .form-label { color: var(--text-secondary); }
html[data-theme="dark"] ::placeholder { color: var(--text-muted); opacity: .8; }

/* Tabs / pagination */
html[data-theme="dark"] .tab-bar { border-bottom-color: var(--border); }
html[data-theme="dark"] .tab-btn { color: var(--text-muted); }
html[data-theme="dark"] .tab-btn.active { color: #FF9A52; }
html[data-theme="dark"] .page-btn { background: var(--surface); border-color: var(--border-md); color: var(--text-secondary); }

/* Modals */
html[data-theme="dark"] .modal-box { background: var(--surface); color: var(--text-primary); }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--border); }
html[data-theme="dark"] .modal-footer { background: var(--gray-100); }

/* Empty state / misc text */
html[data-theme="dark"] .empty-title { color: var(--text-primary); }
html[data-theme="dark"] .empty-sub { color: var(--text-muted); }

/* Buttons that were light-on-light */
html[data-theme="dark"] .btn-outline { background: var(--surface); color: var(--text-secondary); border-color: var(--border-lg); }
html[data-theme="dark"] .btn-outline:hover { background: var(--accent-weak); color: #FF9A52; }

/* ── Safety nets for hard-coded light surfaces ──
   Catches inline white backgrounds and the most common panel card
   classes that set background:#fff in per-page <style> blocks. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background-color:#fff"] { background: var(--surface) !important; }

html[data-theme="dark"] .scard,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kcard,
html[data-theme="dark"] .qb-stat-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .cand-card,
html[data-theme="dark"] .post-row,
html[data-theme="dark"] .rule-card,
html[data-theme="dark"] .faq-q,
html[data-theme="dark"] .cat-row,
html[data-theme="dark"] .sub-row,
html[data-theme="dark"] .step-item,
html[data-theme="dark"] .exam-block,
html[data-theme="dark"] .row-block,
html[data-theme="dark"] .preview-tbl,
html[data-theme="dark"] .media-tab,
html[data-theme="dark"] .welcome-banner,
html[data-theme="dark"] .panel-card,
html[data-theme="dark"] .box { background: var(--surface) !important; border-color: var(--border) !important; }