/* ═══════════════════════════════════════════════════════════
   VisionX Eduvations — Main Stylesheet
   visionx-main.css
═══════════════════════════════════════════════════════════ */

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --maroon:     #7b1c3e;
  --maroon-dk:  #5a1230;
  --maroon-lt:  #f9f0f3;
  --gold:       #c9a84c;
  --gold-lt:    #f5e9c8;
  --link:       #7b1c3e;
  --link-hover: #c0392b;
  --body-bg:    #ffffff;
  --page-bg:    #f0ebe8;
  --text:       #1a1a1a;
  --muted:      #666;
  --border:     #d4c5c8;
  --row-alt:    #fdf8f9;
  --sel-bg:     #f5e8ec;
  --green-done: #2e7d32;
  --blue:       #1a5276;
}

body {
  font-family: 'Source Sans 3', 'Noto Sans', sans-serif;
  background: var(--page-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--link-hover); }

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */

.util-bar {
  background: #f0f0f0;
  border-bottom: 1px solid #ccc;
  padding: 4px 24px;
  font-size: 11px;
  color: #555;
  display: flex;
  justify-content: flex-end;
  gap: 18px;
}
.util-bar a { color: #444; }
.util-bar a:hover { color: var(--maroon); text-decoration: underline; }

.site-header {
  background: var(--maroon);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 82px;
}

.brand-logo {
  flex-shrink: 0;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 3px solid var(--gold);
  overflow: hidden;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-logo .logo-fallback { font-size: 28px; line-height: 1; }

.brand-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
}
.org-script-sep { color: rgba(255,255,255,0.35); font-size: 16px; padding: 0 8px; line-height: 1; }
.org-hi { font-family: 'Tiro Devanagari Hindi', serif; font-size: 15px; color: #f8d7a0; line-height: 1; white-space: nowrap; }
.org-en { font-family: 'Source Serif 4', Georgia, serif; font-size: 15px; font-weight: 600; color: white; letter-spacing: 0.2px; white-space: nowrap; }
.org-te { font-family: 'Mandali', sans-serif; font-size: 15px; color: #f0d8de; line-height: 1; white-space: nowrap; }

.brand-divider { width: 1px; height: 52px; background: var(--gold); opacity: 0.5; flex-shrink: 0; }

.page-title-block { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.page-title-block .pg-label { font-size: 11px; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; }
.page-title-block .pg-sep   { color: rgba(255,255,255,0.3); font-size: 14px; }
.page-title-block .pg-title { font-family: 'Source Serif 4', serif; font-size: 17px; font-style: italic; color: white; font-weight: 400; white-space: nowrap; }

.header-search { margin-left: auto; display: flex; align-items: center; flex-shrink: 0; }
.header-search input  { padding: 6px 10px; font-size: 12.5px; border: none; outline: none; width: 180px; background: rgba(255,255,255,0.92); font-family: 'Source Sans 3', sans-serif; }
.header-search button { background: var(--gold); border: none; padding: 6px 10px; cursor: pointer; font-size: 13px; color: var(--maroon-dk); }

/* ═══════════════════════════════════════════════════════════
   MAIN NAV
═══════════════════════════════════════════════════════════ */
.main-nav {
  background: #3a0f1e;
  border-bottom: 2px solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 100;
}
.main-nav ul { list-style: none; display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.main-nav ul li { position: relative; }
.main-nav ul li a { display: block; padding: 10px 16px; color: #f0d8de; font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background 0.15s; }
.main-nav ul li a:hover,
.main-nav ul li a.active-nav { background: var(--maroon); color: white; }

.main-nav ul li .subnav { display: none; position: absolute; top: 100%; left: 0; background: #2d0a16; border: 1px solid var(--gold); border-top: none; min-width: 180px; z-index: 200; list-style: none; padding: 4px 0; }
.main-nav ul li:hover .subnav { display: block; }
.main-nav ul li .subnav li a { padding: 8px 16px; font-size: 12.5px; color: #f0d8de; display: block; }
.main-nav ul li .subnav li a:hover { background: var(--maroon); }

/* ═══════════════════════════════════════════════════════════
   HERO BANNER
═══════════════════════════════════════════════════════════ */
.hero-banner {
  background:
    linear-gradient(rgba(74,64,32,0.80), rgba(74,64,32,0.80)),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="100"><rect width="1200" height="100" fill="%23736030"/><circle cx="150" cy="50" r="70" fill="%23997840" opacity="0.4"/><circle cx="600" cy="20" r="90" fill="%23856b38" opacity="0.3"/><circle cx="1050" cy="70" r="80" fill="%23856b38" opacity="0.3"/></svg>') center/cover;
  padding: 22px 28px 18px;
}
.hero-banner h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; font-style: italic; font-weight: 400; color: white; letter-spacing: 0.3px; }
.hero-banner p  { font-size: 12.5px; color: rgba(255,255,255,0.78); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════
   SELECTOR TOOLBAR
═══════════════════════════════════════════════════════════ */
.selector-toolbar {
  background: var(--maroon);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tb-label { color: rgba(255,255,255,0.75); font-size: 12px; white-space: nowrap; margin-right: 4px; }

.selector-toolbar select {
  padding: 6px 26px 6px 10px;
  font-size: 13px;
  border: none;
  border-radius: 3px;
  background: white;
  color: #222;
  font-family: 'Source Sans 3', sans-serif;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg fill='%23555' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
  min-width: 150px;
}
.selector-toolbar select:focus    { outline: 2px solid var(--gold); }
.selector-toolbar select:disabled { opacity: 0.55; cursor: not-allowed; }

.go-btn {
  background: var(--gold);
  color: var(--maroon-dk);
  border: none;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 3px;
  cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
  letter-spacing: 0.4px;
  transition: background 0.15s;
}
.go-btn:hover { background: #deba65; }
.tb-divider { width: 1px; height: 24px; background: rgba(255,255,255,0.25); margin: 0 6px; }

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL COURSES PANEL
═══════════════════════════════════════════════════════════ */
.prof-panel {
  display: none;
  background: var(--maroon);
  padding: 14px 28px;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.prof-panel .tb-label { color: rgba(255,255,255,0.75); font-size: 12px; margin-right: 6px; }

.exam-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 18px;
  border-radius: 4px;
  cursor: pointer;
  border: 1.5px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.08);
  color: white;
  font-family: 'Source Sans 3', sans-serif;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  position: relative;
}
.exam-btn:hover { background: rgba(255,255,255,0.18); border-color: var(--gold); color: white; text-decoration: none; }
.exam-btn.active-exam { background: var(--gold); border-color: var(--gold); color: var(--maroon-dk); }
.exam-btn .eb-name { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
.exam-btn .eb-desc { font-size: 10px; opacity: 0.8; white-space: nowrap; }
.exam-badge { position: absolute; top: -8px; right: -8px; background: var(--gold); color: var(--maroon-dk); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; letter-spacing: 0.3px; }
.exam-btn.soon { opacity: 0.52; cursor: not-allowed; }
.exam-btn.soon:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }

/* ═══════════════════════════════════════════════════════════
   PROGRESS STRIP
═══════════════════════════════════════════════════════════ */
.progress-strip {
  background: var(--maroon-lt);
  border-bottom: 1px solid var(--border);
  padding: 7px 28px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 11.5px;
}
.ps-item { display: flex; align-items: center; gap: 5px; color: #999; padding: 2px 5px; white-space: nowrap; }
.ps-item.done   { color: var(--green-done); }
.ps-item.active { color: var(--maroon); font-weight: 700; }
.ps-num { width: 17px; height: 17px; border-radius: 50%; border: 1.5px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; }
.ps-item.done   .ps-num { background: var(--green-done); border-color: var(--green-done); color: white; }
.ps-item.active .ps-num { background: var(--maroon); border-color: var(--maroon); color: white; }
.ps-arrow { color: #bbb; font-size: 10px; }

/* ═══════════════════════════════════════════════════════════
   PAGE BODY
═══════════════════════════════════════════════════════════ */
.page-body {
  max-width: 1060px;
  margin: 0 auto;
  background: var(--body-bg);
  padding: 22px 28px 60px;
  min-height: 70vh;
}

.section-heading {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--maroon);
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.content-section { margin-bottom: 26px; }
hr.ncert-hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

/* ═══════════════════════════════════════════════════════════
   BLOOM TAXONOMY GRID
═══════════════════════════════════════════════════════════ */
.bloom-table-outer { border: 1px solid var(--border); width: 100%; }
.bloom-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); }
.bloom-row:last-child { border-bottom: none; }
.bloom-cell { border-right: 1px solid var(--border); }
.bloom-cell:last-child { border-right: none; }
.bloom-cell.full { grid-column: 1 / -1; }

.bloom-option { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background 0.12s; width: 100%; }
.bloom-option:hover  { background: var(--maroon-lt); }
.bloom-option.active { background: var(--sel-bg); }
.bloom-option input  { display: none; }
.bloom-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.bloom-text strong { display: block; font-size: 13px; font-weight: 600; color: var(--maroon); font-family: 'Source Serif 4', serif; }
.bloom-text span   { font-size: 11.5px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════
   QUERY TABLE
═══════════════════════════════════════════════════════════ */
.query-table-wrap { border: 1px solid var(--border); max-height: 320px; overflow-y: auto; }

table.qt { width: 100%; border-collapse: collapse; }
table.qt thead th { background: var(--maroon); color: white; padding: 8px 12px; font-size: 12px; font-weight: 600; text-align: left; position: sticky; top: 0; font-family: 'Source Sans 3', sans-serif; letter-spacing: 0.3px; }
table.qt tbody tr { border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.1s; }
table.qt tbody tr:nth-child(even) { background: var(--row-alt); }
table.qt tbody tr:hover    { background: var(--maroon-lt); }
table.qt tbody tr.selected { background: var(--sel-bg); border-left: 3px solid var(--maroon); }
table.qt td { padding: 8px 12px; font-size: 12.5px; vertical-align: top; }
table.qt td:first-child { width: 30px; text-align: center; color: var(--muted); font-size: 11px; font-weight: 600; }
table.qt td:last-child  { width: 92px; }

.bloom-badge { display: inline-block; padding: 2px 7px; border-radius: 2px; font-size: 10.5px; font-weight: 600; background: #f5e8ec; color: var(--maroon); border: 1px solid var(--border); }
.bloom-badge.know  { background: #fef9c3; color: #854d0e; border-color: #f0dc90; }
.bloom-badge.under { background: #dcfce7; color: #166534; border-color: #a3d9b1; }
.bloom-badge.apply { background: #fde8d8; color: #9a3412; border-color: #f0bc98; }
.bloom-badge.creat { background: #f3e8ff; color: #6b21a8; border-color: #d4a8f8; }
.bloom-badge.test  { background: #fee2e2; color: #991b1b; border-color: #f8b4b4; }

.query-preview-box { background: #fffbf0; border: 1px solid #e0c97a; border-left: 4px solid var(--gold); padding: 10px 14px; font-size: 12.5px; color: #4a3800; line-height: 1.7; min-height: 38px; font-style: italic; margin-top: 10px; }
.query-preview-box.empty { color: var(--muted); }

.placeholder-cell { padding: 22px !important; text-align: center; color: var(--muted); font-style: italic; font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════
   FORMAT + LANGUAGE
═══════════════════════════════════════════════════════════ */
.format-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.format-chip { display: flex; flex-direction: column; align-items: center; padding: 9px 14px; border: 1px solid var(--border); border-radius: 3px; background: white; cursor: pointer; min-width: 76px; text-align: center; transition: border-color 0.12s, background 0.12s; }
.format-chip:hover  { border-color: var(--maroon); background: var(--maroon-lt); }
.format-chip.active { border-color: var(--maroon); background: var(--sel-bg); }
.format-chip input  { display: none; }
.fc-icon  { font-size: 18px; margin-bottom: 3px; }
.fc-label { font-size: 11.5px; font-weight: 600; color: var(--maroon); }

.lang-row { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-chip { padding: 5px 16px; font-size: 12.5px; border: 1px solid var(--border); border-radius: 20px; background: white; cursor: pointer; font-family: 'Source Sans 3', sans-serif; font-weight: 500; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.lang-chip:hover  { border-color: var(--maroon); color: var(--maroon); background: var(--maroon-lt); }
.lang-chip.active { background: var(--maroon); color: white; border-color: var(--maroon); font-weight: 600; }
.lang-chip input  { display: none; }

/* ═══════════════════════════════════════════════════════════
   ACTION BOX
═══════════════════════════════════════════════════════════ */
.action-box { background: var(--maroon-lt); border: 1px solid var(--border); padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.action-note    { font-size: 12px; color: var(--muted); font-style: italic; flex: 1; min-width: 160px; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-btn { padding: 8px 16px; border: none; border-radius: 3px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: 'Source Sans 3', sans-serif; display: flex; align-items: center; gap: 5px; letter-spacing: 0.2px; transition: opacity 0.12s, transform 0.1s; }
.ai-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-copy    { background: var(--maroon); color: white; }
.btn-copilot { background: #0078d4; color: white; }
.btn-chatgpt { background: #10a37f; color: white; }
.btn-gemini  { background: #1a73e8; color: white; }

/* ═══════════════════════════════════════════════════════════
   MODAL + TOAST
═══════════════════════════════════════════════════════════ */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 500; align-items: center; justify-content: center; }
.modal-overlay.open { display: flex; }
.modal-box { background: white; border-top: 4px solid var(--maroon); border-radius: 4px; padding: 24px; max-width: 540px; width: 92%; box-shadow: 0 8px 32px rgba(0,0,0,0.22); }
.modal-box h3 { font-family: 'Source Serif 4', serif; font-size: 16px; color: var(--maroon); margin-bottom: 12px; }
.modal-query-text { background: var(--maroon-lt); border: 1px solid var(--border); padding: 12px; font-size: 12.5px; line-height: 1.7; margin-bottom: 8px; max-height: 150px; overflow-y: auto; }
.modal-note { font-size: 12px; color: var(--muted); font-style: italic; margin-bottom: 14px; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-close { background: #dc2626; color: white; padding: 8px 18px; border: none; border-radius: 3px; cursor: pointer; font-size: 12.5px; font-weight: 600; font-family: 'Source Sans 3', sans-serif; }

#toast { display: none; position: fixed; bottom: 20px; right: 20px; padding: 10px 18px; border-radius: 4px; font-size: 13px; z-index: 9999; box-shadow: 0 4px 14px rgba(0,0,0,0.15); border-left: 4px solid; }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.site-footer { background: var(--maroon-dk); color: #e0c8ce; padding: 12px 28px; font-size: 12px; text-align: center; border-top: 3px solid var(--gold); }
.site-footer a { color: #f0d8de; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .site-header { padding: 10px 14px; }
  .header-search { display: none; }
  .org-te { display: none; }
  .selector-toolbar { padding: 10px 14px; }
  .selector-toolbar select { min-width: 110px; }
  .hero-banner { padding: 16px 14px; }
  .hero-banner h1 { font-size: 18px; }
  .page-body { padding: 16px 14px 40px; }
  .bloom-row { grid-template-columns: 1fr; }
  .action-box { flex-direction: column; align-items: flex-start; }
}