/* ═══════════════════════════════════════════════════════════════════
   SITHIYAM OS v5.1 — SCREEN-SPECIFIC OVERRIDES
   QB1, QB2, Pipeline, Hotels, Dashboard, etc.
   Load AFTER styles.css, quote-builder-v2.css, and design tokens.
   ═══════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   QB2 — Sticky position fixes for new nav
   ──────────────────────────────────────────────────────────────── */
#s-qb2 .qb2-topbar {
  top: 66px;
}
#s-qb2 .sec-nav {
  top: 118px; /* 66px nav + 52px topbar */
}
@media (max-width: 768px) {
  #s-qb2 .qb2-topbar { top: 0; }
  #s-qb2 .sec-nav { top: 0; }
}

/* QB2 section tabs — use Syne */
#s-qb2 .sec-tab {
  font-family: var(--fu);
  letter-spacing: .04em;
}

/* QB2 hero header */
#s-qb2 .hero-header {
  font-family: var(--fd);
}

/* QB2 section headings */
#s-qb2 .sec-heading {
  font-family: var(--fu);
  font-weight: 800;
  letter-spacing: .04em;
}

/* QB2 micro labels */
#s-qb2 .lbl,
#s-qb2 .sub-label {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t5);
}


/* ────────────────────────────────────────────────────────────────
   QB1 — Classic Quote Builder fixes
   ──────────────────────────────────────────────────────────────── */

/* Quote header toolbar — sticky position below nav */
#s-quote .day-toolbar,
#s-quote > div:first-child {
  /* Ensure toolbar isn't hidden behind nav */
}

/* Price summary card typography */
#priceSummary th,
.price-row .label {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t4);
}
#priceSummary .total-row td {
  font-family: var(--fd);
  font-weight: 600;
}

/* Finance / Margin cards */
#financeCard,
#profitTrackerCard {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
}

/* Day toolbar buttons */
.day-toolbar .btn,
.day-toolbar button {
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Day cards in QB1 */
.day-card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
  box-shadow: var(--sh1);
}
.day-card:hover {
  box-shadow: var(--sh2);
}

/* Day number badge */
.day-num {
  font-family: var(--fd);
  font-weight: 700;
}

/* Hotel select dropdowns in day cards */
.hotel-select {
  font-family: var(--fb);
  border-radius: var(--r1);
}


/* ────────────────────────────────────────────────────────────────
   PIPELINE — Kanban board
   ──────────────────────────────────────────────────────────────── */

/* Pipeline overview card */
.pipeline-overview {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
}

/* Pipeline section headings */
#s-pipeline h2 {
  font-family: var(--fu);
  font-weight: 800;
}
#s-pipeline h3,
#s-pipeline h4 {
  font-family: var(--fu);
  font-weight: 700;
}

/* Kanban columns */
.kanban-col,
.pipeline-col {
  background: var(--bgr);
  border-radius: var(--r3);
  border: 1px solid var(--b0);
}

/* Kanban column headers */
.kanban-col-header,
.pipeline-col-header {
  font-family: var(--fu);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Quote cards in pipeline */
.quote-card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
  box-shadow: var(--sh1);
  transition: box-shadow .15s var(--eio), transform .15s var(--eio);
}
.quote-card:hover {
  box-shadow: var(--sh2);
  transform: translateY(-1px);
}
.quote-card .client-name {
  font-family: var(--fu);
  font-weight: 700;
  color: var(--t1);
}
.quote-card .amount {
  font-family: var(--fd);
  font-weight: 600;
  color: var(--g3);
}


/* ────────────────────────────────────────────────────────────────
   CLIENTS
   ──────────────────────────────────────────────────────────────── */

#s-clients h2 {
  font-family: var(--fu);
  font-weight: 800;
}

.client-card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
  box-shadow: var(--sh1);
}
.client-card:hover {
  box-shadow: var(--sh2);
}
.client-card .name {
  font-family: var(--fu);
  font-weight: 700;
}


/* ────────────────────────────────────────────────────────────────
   HOTELS DATABASE
   ──────────────────────────────────────────────────────────────── */

#s-hotels h2 {
  font-family: var(--fu);
  font-weight: 800;
}

/* Hotel cards in database */
.hotel-db-card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
  box-shadow: var(--sh1);
}
.hotel-db-card:hover {
  box-shadow: var(--sh2);
}
.hotel-db-card .hotel-name {
  font-family: var(--fd);
  font-size: 24px;
  font-weight: 600;
  color: var(--t1);
}

/* Hotel tier filters */
.hotel-filters .filter-btn {
  font-family: var(--fu);
  font-size: 11px;
  font-weight: 700;
  border-radius: var(--rp);
}

/* Season/rate table in hotel detail */
.season-table th {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t5);
}
.season-table td {
  font-family: var(--fd);
  font-size: 15px;
}


/* ────────────────────────────────────────────────────────────────
   DASHBOARD
   ──────────────────────────────────────────────────────────────── */

#s-dash h2 {
  font-family: var(--fu);
  font-weight: 800;
}

/* Dashboard KPI stat values */
.dash-stat .value,
.kpi-value {
  font-family: var(--fd);
  font-size: 32px;
  font-weight: 600;
  color: var(--t1);
}
.dash-stat .label,
.kpi-label {
  font-family: var(--fu);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t5);
}

/* Dashboard cards */
.dash-card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
  box-shadow: var(--sh1);
}


/* ────────────────────────────────────────────────────────────────
   REVENUE
   ──────────────────────────────────────────────────────────────── */

#s-revenue h2 {
  font-family: var(--fu);
  font-weight: 800;
}

.revenue-card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
}

.revenue-stat {
  font-family: var(--fd);
  font-weight: 600;
}


/* ────────────────────────────────────────────────────────────────
   ACTIVITIES
   ──────────────────────────────────────────────────────────────── */

#s-acts h2 {
  font-family: var(--fu);
  font-weight: 800;
}

.activity-card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r2);
}
.activity-card .act-name {
  font-family: var(--fu);
  font-weight: 700;
}
.activity-card .act-price {
  font-family: var(--fd);
  font-weight: 600;
  color: var(--g3);
}


/* ────────────────────────────────────────────────────────────────
   TEMPLATES
   ──────────────────────────────────────────────────────────────── */

#s-templates h2 {
  font-family: var(--fu);
  font-weight: 800;
}


/* ────────────────────────────────────────────────────────────────
   PUBLIC QUOTE
   ──────────────────────────────────────────────────────────────── */

.public-quote-card {
  background: var(--bgf);
  border: 1px solid var(--b1);
  border-radius: var(--r3);
  box-shadow: var(--sh2);
}


/* ────────────────────────────────────────────────────────────────
   HOTEL CONTRACT ADMIN
   ──────────────────────────────────────────────────────────────── */

#hotelContractAdminHost h2,
#hotelContractAdminHost h3 {
  font-family: var(--fu);
  font-weight: 800;
}


/* ────────────────────────────────────────────────────────────────
   RIE (Route Intelligence)
   ──────────────────────────────────────────────────────────────── */

#rieAdminHost h2,
#rieAdminHost h3 {
  font-family: var(--fu);
  font-weight: 800;
}


/* ────────────────────────────────────────────────────────────────
   HEADING HIERARCHY — Global screen headings
   ──────────────────────────────────────────────────────────────── */

.screen > h2:first-of-type,
.screen > div > h2:first-child {
  font-family: var(--fu);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--t1);
}

.screen > p:first-of-type,
.screen > div > p:first-of-type {
  font-family: var(--fb);
  color: var(--t3);
  font-size: 13px;
}