/*
 * UX4G green theme — retargets the UX4G / Bootstrap primary tokens to the Telangana light-green
 * identity (#3f8f2e), so UX4G components adopt our look instead of the stock UX4G purple (#613AF5).
 * Loaded after app.css; only recolours the primary/link tokens so the existing SSR design is intact.
 */
:root {
  --bs-primary: #3f8f2e;
  --bs-primary-rgb: 63, 143, 46;
  --bs-primary-text-emphasis: #2f6f22;
  --bs-primary-bg-subtle: #e9f4e3;
  --bs-primary-border-subtle: #bfe0ad;
  --bs-link-color: #3f8f2e;
  --bs-link-color-rgb: 63, 143, 46;
  --bs-link-hover-color: #2f6f22;
  /* UX4G's own custom properties, where present */
  --ux4g-primary: #3f8f2e;
  --ux-primary: #3f8f2e;
  --theme-color: #3f8f2e;
}

/* Buttons: the same softer green family as the progress bars — lighter than the old dark
   #3f8f2e, with a subtle top-light gradient for a finished feel. */
.btn-primary, .btn-gp {
  --bs-btn-bg: #55ab3b;
  --bs-btn-border-color: #4da339;
  --bs-btn-hover-bg: #4a9e37;
  --bs-btn-hover-border-color: #459434;
  --bs-btn-active-bg: #459434;
  --bs-btn-active-border-color: #40892f;
  --bs-btn-disabled-bg: #8cc97a;
  --bs-btn-disabled-border-color: #8cc97a;
  background: linear-gradient(180deg, #5eb746, #4da339);
  border-color: #4da339;
  color: #fff;
}
.btn-primary:hover, .btn-gp:hover {
  background: linear-gradient(180deg, #55ab3b, #459434);
  border-color: #459434;
  color: #fff;
}
.btn-outline-primary {
  --bs-btn-color: #459434;
  --bs-btn-border-color: #a9d59a;
  --bs-btn-hover-bg: #eef7e9;
  --bs-btn-hover-border-color: #7cc86a;
  --bs-btn-hover-color: #35782a;
  --bs-btn-active-bg: #e2f1da;
}
.form-control:focus, .form-select:focus {
  border-color: #7cc86a;
  box-shadow: 0 0 0 0.2rem rgba(63, 143, 46, 0.20);
}

/* Button focus: green ring everywhere — UX4G's stock focus is purple (#613AF5) and leaks
   through as an off-brand halo on focused/clicked buttons. */
.btn { --bs-btn-focus-shadow-rgb: 87, 173, 58; }
.btn:focus, .btn:focus-visible, .btn:active:focus {
  outline: 0;
  box-shadow: 0 0 0 0.22rem rgba(87, 173, 58, 0.25) !important;
}

/*
 * Restore the dropdown caret. app.css sets `background: var(--surface)` on .form-select — the
 * shorthand resets background-image, wiping the chevron — while Bootstrap/UX4G set appearance:none
 * (which removes the native arrow). Without this a <select> looks like a plain text box and reads
 * as "not a dropdown". Loaded last so it wins; only the image/padding are set, so the surface
 * colour from app.css is preserved.
 */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232f6f22' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}
.form-select-sm {
  background-position: right 0.6rem center;
  padding-right: 2rem;
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  background-image: none;
  padding-right: 0.75rem;
}

/*
 * Mobile-friendly fixed grids (Part II/III plan matrices etc.): the grid scrolls horizontally
 * inside its container while the indicator column stays pinned, so on a phone you always see
 * WHICH row you are typing into. Inputs keep a usable width instead of collapsing.
 */
.js-grid-wrap table th:first-child,
.js-grid-wrap table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface, #fff);
  min-width: 9rem;
  max-width: 14rem;
  box-shadow: 2px 0 0 rgba(0, 0, 0, 0.06);
}
.js-grid-wrap table thead th { white-space: nowrap; }
.js-grid-wrap table input.form-control { min-width: 5.5rem; }
@media (max-width: 576px) {
  .js-grid-wrap table th:first-child,
  .js-grid-wrap table td:first-child { min-width: 7.5rem; font-size: 0.8rem; }
}

/* ---- Plan-matrix polish: green header band, soft zebra, hover, emphasized totals ---- */
/* The card IS the table: the grid fills the card edge-to-edge (no inner panel), while the CELL
   padding keeps the text starting/ending exactly where the card above's text does. The wrap is a
   scroll container, so rounding it keeps visible corners round even mid-scroll. */
:root { --grid-card-pad: 1.25rem; }
@media (max-width: 576px) { :root { --grid-card-pad: 0.85rem; } }
.card-body > .js-grid-wrap {
  border: 0;
  margin: 0.6rem calc(-1 * var(--grid-card-pad)) calc(-1 * var(--grid-card-pad));
  border-radius: 0 0 var(--radius, 14px) var(--radius, 14px);
}
.card-body > .js-grid-wrap:first-child {
  margin-top: calc(-1 * var(--grid-card-pad));
  border-radius: var(--radius, 14px);
}
/* text aligns with the card's own text inset */
.js-grid-wrap table th:first-child,
.js-grid-wrap table td:first-child { padding-left: var(--grid-card-pad); }
.js-grid-wrap table th:last-child,
.js-grid-wrap table td:last-child { padding-right: var(--grid-card-pad); }
@media (max-width: 576px) {
  .card-body { padding: 0.85rem; }
}

/* ---- Progress bars: slim, soft green gradient — informative without dominating the page.
   The old 8px solid dark-green fill on every card read as a wall of green. ---- */
.progress { height: 5px; background: #edf3ea; }
.progress.thin { height: 4px; }
.progress.tall { height: 9px; }
.progress-bar {
  background: linear-gradient(90deg, #8fd07f, #57ad3a);
  border-radius: 999px;
}

/* ---- Professional menu styling (all viewports): rounded pill items + icon tiles ---- */
/* the menu never scrolls sideways — items wrap, and any few-px overflow is clipped */
.gp-sidebar { overflow-x: hidden; }
.gp-sidebar a {
  margin: 2px 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 10px;
  gap: 0.65rem;
}
/* icon chips: consistent rounded tiles that read as one system */
.gp-sidebar a i {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-tint, #f3f9ef);
  color: var(--primary-dark, #2f6f22);
  border-radius: 9px;
  font-size: 0.95rem;
}
.gp-sidebar a.active {
  background: var(--primary-soft, #e9f4e3);
  color: var(--primary-dark, #2f6f22);
  font-weight: 600;
  /* no left accent strip — the pill + solid icon tile already mark the active item
     (box-shadow:none also overrides app.css's older inset accent) */
  box-shadow: none;
}
.gp-sidebar a.active i {
  background: var(--primary, #3f8f2e);
  color: #fff;
}
.gp-sidebar .nav-head {
  letter-spacing: 0.09em;
  margin: 0.9rem 1rem 0.3rem;
}

/* slide-out extras (mobile only): floating panel + larger touch targets */
@media (max-width: 991.98px) {
  .gp-sidebar {
    width: 300px;
    border-radius: 0 18px 18px 0;
    box-shadow: 0 16px 48px rgba(23, 46, 16, 0.22);
    padding-bottom: 1.25rem;
  }
  .gp-sidebar a {
    margin: 2px 0.7rem;
    padding: 0.62rem 0.7rem;
    font-size: 0.95rem;
    gap: 0.7rem;
  }
  .gp-sidebar a i { width: 32px; height: 32px; font-size: 1rem; }
  .sidebar-brand { border-radius: 0 18px 0 0; }
}

/* Brand header at the top of the slide-out menu (mobile) — mirrors the desktop topbar brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem 0.85rem;
  border-bottom: 1px solid var(--border, #e3e8e0);
  margin-bottom: 0.4rem;
  background: var(--primary-tint, #f3f9ef);
}
.sidebar-brand img { width: 36px; height: 36px; }
.sidebar-brand .brand-title { font-size: 0.92rem; font-weight: 600; color: var(--text-primary, #1f2a1c); line-height: 1.2; }
.sidebar-brand .brand-sub { font-size: 0.72rem; color: var(--text-secondary, #5c6b57); }
.js-grid-wrap table { border: 0; }
.js-grid-wrap table th:first-child,
.js-grid-wrap table td:first-child { border-left: 0; }
.js-grid-wrap table th:last-child,
.js-grid-wrap table td:last-child { border-right: 0; }
.js-grid-wrap thead tr:first-child th { border-top: 0; }
.js-grid-wrap tfoot td { border-bottom: 0; }
/* belt-and-braces corner rounding on the painted cells themselves */
.js-grid-wrap table thead tr:first-child th:first-child { border-top-left-radius: 11px; }
.js-grid-wrap table thead tr:first-child th:last-child { border-top-right-radius: 11px; }
.js-grid-wrap table tfoot tr:last-child td:first-child { border-bottom-left-radius: 11px; }
.js-grid-wrap table tfoot tr:last-child td:last-child { border-bottom-right-radius: 11px; }
/* no outer top/bottom lines, and the Total row sits snug against the body — Bootstrap's
   .table-bordered / group-divider selectors out-rank ours, hence the !important */
.js-grid-wrap table > :not(:first-child) { border-top: 0 !important; }
.js-grid-wrap table thead tr:first-child th { border-top: 0 !important; }
.js-grid-wrap table tbody tr:last-child td { border-bottom: 0 !important; }
.js-grid-wrap table tfoot td { border-bottom: 0 !important; }
.js-grid-wrap table th:first-child,
.js-grid-wrap table td:first-child { border-left: 0 !important; }
.js-grid-wrap table th:last-child,
.js-grid-wrap table td:last-child { border-right: 0 !important; }
/* Data grids use neutral greys rather than the green brand tint: the green reads as a status colour
   elsewhere in the portal (progress, completed), so tinting every grid green competed with it and
   made dense tables look heavy. Brand green is kept for interaction (focus ring) only. */
.js-grid-wrap table { border-color: #e4e7ec; }
.js-grid-wrap thead th {
  background: #f4f5f7;
  color: #475467;
  font-size: 0.82rem;
  font-weight: 600;
  vertical-align: middle;
  border-color: #e4e7ec;
}
.js-grid-wrap thead th:first-child { background: #f4f5f7; }
.js-grid-wrap thead tr:nth-child(2) th { font-size: 0.75rem; }
.js-grid-wrap tbody td { vertical-align: middle; border-color: #eceef1; }
.js-grid-wrap tbody tr:nth-child(even) td { background: #fafafa; }
.js-grid-wrap tbody tr:hover td { background: #f2f4f7; }
.js-grid-wrap tbody td.text-muted-2 { text-align: center; white-space: nowrap; font-size: 0.8rem; }
.js-grid-wrap td input.form-control {
  background: transparent;
  border-radius: 6px;
}
.js-grid-wrap td input.form-control[type="number"] { text-align: right; }
/* the transparent-input rule above out-specifies .field-pending/.field-draft, so restate the tints
   here — otherwise a grid cell shows only the edge marker while a standalone field shows both. */
.js-grid-wrap td input.form-control.field-pending { background: #fffbfb; }
.js-grid-wrap td input.form-control.field-draft { background: #fffdf4; }
.js-grid-wrap td input.form-control:focus {
  background: #fff;
  box-shadow: inset 0 0 0 2px rgba(63, 143, 46, 0.28);
}
.js-grid-wrap tfoot .js-grid-total td {
  background: #eef0f3;
  border-top: 1px solid #dfe3e8 !important;
  color: #344054;
  font-weight: 600;
}

/* ==================== GIGW page furniture (full UX4G alignment) ==================== */

/* Skip link: visually hidden until keyboard focus, then a prominent pill over the topbar */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  padding: 0.55rem 1rem;
  background: var(--primary-dark, #2f6f22);
  color: #fff;
  border-radius: 0 0 10px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus, .skip-link:focus-visible {
  left: 0;
  color: #fff;
  outline: 3px solid #ffd54d;
  outline-offset: 0;
}

/* Accessibility tool cluster (A- A A+ / contrast) in the topbar */
.a11y-tools { gap: 4px; align-items: center; }
.a11y-btn {
  min-width: 32px;
  height: 30px;
  padding: 0 0.45rem;
  border: 1px solid var(--border-strong, #d2dacc);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text-primary, #1f2a24);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
}
.a11y-btn:hover { background: var(--primary-tint, #f3f9ef); border-color: var(--primary, #3f8f2e); }

/* GIGW footer: policy links + ownership line */
.gp-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.4rem;
  margin-bottom: 0.45rem;
}
.gp-footer .footer-links a {
  color: var(--text-secondary, #647567);
  text-decoration: none;
  font-weight: 600;
}
.gp-footer .footer-links a:hover { color: var(--primary-dark, #2f6f22); text-decoration: underline; }
.gp-footer .footer-legal { margin-bottom: 0.3rem; }

/* Statutory (public policy) pages */
.statutory-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.5rem 1rem 2.5rem;
}
.statutory-main h1 { font-size: 1.45rem; font-weight: 700; color: var(--primary-dark, #2f6f22); }
.statutory-main h2 { font-size: 1.05rem; font-weight: 700; margin-top: 1.4rem; }
.statutory-main .last-reviewed { color: var(--text-muted, #94a89a); font-size: 0.85rem; }

/* ==================== High-contrast (dark) view — GIGW contrast toggle ====================
   Token-level dark theme: app.css drives nearly everything through the custom properties below,
   so overriding them flips the whole UI without touching component CSS. A few hardcoded greys
   from the data-grid polish above are restated for legibility. */
html.hc-mode {
  --primary: #6fce55;
  --primary-dark: #8fd97a;
  --primary-soft: #1d2b18;
  --primary-tint: #17220f;
  --background: #10140e;
  --surface: #1a2017;
  --surface-2: #161c13;
  --text-primary: #eef3ea;
  --text-secondary: #b7c4b2;
  --text-muted: #8ba083;
  --border: #33402e;
  --border-strong: #46543f;
  --success-soft: #1d2b18;
  --warning-soft: #2e2716;
  --danger-soft: #331d1c;
  --info-soft: #16242e;
  --neutral-soft: #202721;
  --shadow-sm: none;
  --shadow: none;
}
html.hc-mode body { background: var(--background); color: var(--text-primary); }
html.hc-mode .card, html.hc-mode .gp-topbar, html.hc-mode .gp-sidebar,
html.hc-mode .modal-content, html.hc-mode .dropdown-menu {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}
html.hc-mode .gp-footer { background: var(--surface-2); color: var(--text-secondary); }
html.hc-mode .text-dark { color: var(--text-primary) !important; }
html.hc-mode .text-muted, html.hc-mode .text-muted-2 { color: var(--text-muted) !important; }
html.hc-mode .form-control, html.hc-mode .form-select {
  background-color: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
html.hc-mode .a11y-btn { background: var(--surface-2); color: var(--text-primary); border-color: var(--border-strong); }
html.hc-mode .btn-outline-secondary { color: var(--text-secondary); border-color: var(--border-strong); }
/* restate the data-grid greys for dark surfaces */
html.hc-mode .js-grid-wrap table { border-color: var(--border); }
html.hc-mode .js-grid-wrap thead th,
html.hc-mode .js-grid-wrap thead th:first-child { background: #202721; color: var(--text-secondary); border-color: var(--border); }
html.hc-mode .js-grid-wrap tbody td { border-color: var(--border); }
html.hc-mode .js-grid-wrap tbody tr:nth-child(even) td { background: #161c13; }
html.hc-mode .js-grid-wrap tbody tr:hover td { background: #202721; }
html.hc-mode .js-grid-wrap table th:first-child,
html.hc-mode .js-grid-wrap table td:first-child { background: var(--surface); }
html.hc-mode .js-grid-wrap tfoot .js-grid-total td { background: #202721; color: var(--text-primary); border-color: var(--border-strong) !important; }
html.hc-mode .js-grid-wrap td input.form-control:focus { background: #10140e; }
html.hc-mode .progress { background: #202721; }