/**
 * Aumsetu Portal — Shared Sidebar Navigation Styles
 *
 * Handles:
 *   - SVG icon container styling (18px, stroke inherits color)
 *   - Collapse/expand state (via body.sb-collapsed)
 *   - Floating chevron toggle button
 *   - Hover-tooltip in collapsed mode
 *   - Mobile responsive rules
 *
 * Depends on: base sidebar CSS already in each /app/*.html page
 * (defines .sidebar, .sb-link, .sb-icon, .sb-section, .sb-foot).
 */

/* ═════ CSS variables ═════ */
:root {
  --sidebar-w-collapsed: 68px;
}
body.sb-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }

/* Smooth layout transition when collapsing */
.layout { transition: grid-template-columns .22s ease; }
.sidebar {
  transition: padding .22s ease;
  overflow-x: visible; /* let tooltip escape sidebar bounds */
}

/* ═════ SVG icon container ═════ */
.sb-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  color: currentColor;
  stroke-width: 2;
}
.sb-icon.sb-icon--svg {
  background: #F1F5F9;
  color: #0F2A6E;
  transition: background .12s ease, color .12s ease, transform .15s ease;
}
.sb-link:hover .sb-icon.sb-icon--svg {
  background: #E0E7FF;
  color: #1E40AF;
  transform: scale(1.05);
}
.sb-link.active .sb-icon.sb-icon--svg {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #ffffff;
}

/* ═════ Floating chevron toggle ═════ */
.sb-toggle {
  position: fixed;
  top: calc(var(--topbar-h, 54px) + 16px);
  left: calc(var(--sidebar-w) - 13px);
  width: 26px;
  height: 26px;
  background: #ffffff;
  border: 1.5px solid #E2E8F0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 99;
  color: #0F2A6E;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(15, 42, 110, .10);
  transition: left .22s ease, background .12s ease, color .12s ease, transform .18s ease, box-shadow .12s ease;
}
.sb-toggle:hover {
  background: #0F2A6E;
  color: #ffffff;
  border-color: #0F2A6E;
  box-shadow: 0 4px 14px rgba(15, 42, 110, .25);
}
.sb-toggle:focus-visible {
  outline: 2px solid #F59E0B;
  outline-offset: 2px;
}
body.sb-collapsed .sb-toggle { transform: rotate(180deg); }

/* ═════ COLLAPSED STATE ═════ */
body.sb-collapsed .sidebar { padding: 18px 8px; }

/* Hide section headers */
body.sb-collapsed .sb-section { display: none; }

/* Compact the footer */
body.sb-collapsed .sb-foot {
  padding: 12px 4px;
  font-size: 9px;
}
body.sb-collapsed .sb-foot .ver { font-size: 10px; }

/* Hide label text (font-size:0 trick — no HTML changes needed) */
body.sb-collapsed .sb-link {
  font-size: 0;
  justify-content: center;
  padding: 10px 6px;
  gap: 0;
}
body.sb-collapsed .sb-link .sb-icon {
  font-size: 13px;
  width: 36px;
  height: 36px;
}
body.sb-collapsed .sb-link .sb-icon svg {
  width: 20px;
  height: 20px;
}
body.sb-collapsed .sb-link .badge,
body.sb-collapsed .sb-link .new { display: none; }
body.sb-collapsed .sb-link.active::before { left: -8px; }

/* ═════ HOVER TOOLTIP IN COLLAPSED MODE ═════ */
body.sb-collapsed .sb-link { position: relative; }

body.sb-collapsed .sb-link:hover::after {
  content: attr(data-label);
  position: fixed;
  left: calc(var(--sidebar-w-collapsed) + 10px);
  background: #0F172A;
  color: #ffffff;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .2px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  z-index: 200;
  pointer-events: none;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  margin-top: -4px;
}
body.sb-collapsed .sb-link:hover::before {
  content: "";
  position: fixed;
  left: calc(var(--sidebar-w-collapsed) + 4px);
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #0F172A;
  z-index: 201;
  pointer-events: none;
  margin-top: 4px;
}

/* ═════ MOBILE RESPONSIVE ═════ */

/* SAFETY NET — never let a child element push viewport wider than screen.
   Prevents the "labels cut off on left" bug where the body scrolls right
   because something inside (rigid grid, table, image) is wider than viewport. */
html, body { max-width: 100vw; overflow-x: hidden; }

/* CRITICAL — Grid/Flex items default to min-width:auto which prevents them
   from shrinking below their intrinsic content size. On mobile, input[type=
   number] has UA min-width ≈150-200px → forces .form-row.two (1fr 1fr) to
   be 400px+, wider than 360px viewport → whole card gets clipped on the
   LEFT (right column is what user tries to see). Setting min-width:0 lets
   grid items shrink normally. This is the real root cause of the "labels
   cut off" bug. */
.form-row > *, .form-row.two > *, .toolbar > *, .calc-grid > *,
.compare-grid > *, .feat-grid > *, .p-grid > *, .layout > * {
  min-width: 0;
  min-height: 0;
}
input, select, textarea, button { min-width: 0; max-width: 100%; }
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
/* Word-break for long unbreakable strings (URLs, emails) */
.rl-cn, .rl-sum, .card, .page-hd .sub, .hero-band p { word-wrap: break-word; overflow-wrap: break-word; }

@media (max-width: 900px) {
  .sb-toggle { display: none; }
  body.sb-collapsed { --sidebar-w: 0; }
}

/* Tablet + phone (≤720px) — compact topbar so logo / firm name /
   brandChip / Dashboard / Logout stop overlapping on narrow screens */
@media (max-width: 720px) {
  .topbar { padding: 0 10px !important; gap: 8px !important; }
  .tb-logo { width: 30px !important; height: 30px !important; padding: 2px !important; }
  .tb-brand { min-width: 0 !important; overflow: hidden !important; }
  .tb-firm { font-size: 13px !important; max-width: 42vw; }
  .tb-tag { font-size: 9px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tb-actions { gap: 6px !important; flex-shrink: 0 !important; }
  .tb-btn { padding: 6px 10px !important; font-size: 11px !important; gap: 4px !important; }
  #brandChip {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px !important;
    padding: 3px 8px !important;
  }
  /* Content padding */
  .main { padding: 18px 14px !important; }
}

/* Phone (≤480px) — even more compact; hide redundant chrome */
@media (max-width: 480px) {
  .topbar { padding: 0 8px !important; gap: 6px !important; }
  .tb-firm { font-size: 12.5px !important; max-width: 32vw; }
  /* Page title already shown in .page-hd h1 — hide the tag on phones */
  .tb-tag { display: none !important; }
  /* Branding chip: firm name already in tb-firm; hide bulky chip on phones */
  #brandChip { display: none !important; }
  /* "← Dashboard" link → icon-only home symbol */
  .tb-actions a.tb-btn:not(.danger) {
    font-size: 0 !important;
    padding: 6px 8px !important;
    min-width: 32px;
    justify-content: center;
  }
  .tb-actions a.tb-btn:not(.danger)::before {
    content: "⌂";
    font-size: 15px;
    font-weight: 900;
    color: #fff;
  }
  .tb-btn.danger { padding: 6px 9px !important; font-size: 11px !important; }
  /* Content — tighter */
  .main { padding: 14px 12px !important; }
  .page-hd { margin-bottom: 14px !important; }
  .page-hd h1 { font-size: 19px !important; letter-spacing: -.2px !important; }
  .page-hd .sub { font-size: 12.5px !important; }
  .hero-band { padding: 14px 16px !important; border-radius: 12px !important; }
  .hero-band h2 { font-size: 15px !important; }
  .hero-band p { font-size: 12.5px !important; line-height: 1.5 !important; }

  /* ─── Collapse rigid multi-col grids that break mobile ─────────── */
  /* Two-column form rows → stack */
  .form-row.two { grid-template-columns: 1fr !important; gap: 8px !important; }
  /* Reports Library toolbar (search + type + export + reload) → stack */
  .toolbar { grid-template-columns: 1fr !important; gap: 8px !important; }
  /* Reports Library row (icon + name + type + date + actions) → compact */
  .rl-row { grid-template-columns: 36px 1fr auto !important; gap: 10px !important; padding: 12px 14px !important; }
  .rl-row .rl-type, .rl-row .rl-date { display: none !important; }
  .rl-row .rl-act { grid-column: 1 / -1 !important; margin-top: 4px !important; flex-wrap: wrap !important; }
  /* Tables — scroll inside their wrapper instead of overflowing viewport */
  .tbl-wrap, .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  /* Editor overlay grid on posters/calculators → single column */
  .editor { grid-template-columns: 1fr !important; }
  /* Compare-grid (3-col) → single column */
  .compare-grid { grid-template-columns: 1fr !important; }
  /* Feature card grid → single column */
  .feat-grid { grid-template-columns: 1fr !important; }
  /* Any inline `style="grid-template-columns:1fr auto auto auto"` on toolbars */
  [style*="grid-template-columns:1fr auto auto auto"],
  [style*="grid-template-columns: 1fr auto auto auto"] {
    grid-template-columns: 1fr !important;
  }
  /* Bigger touch targets on inputs/buttons */
  input, select, button { font-size: 14px !important; }
}

/* Tablet (≤600px, above phone breakpoint) — moderate collapse */
@media (max-width: 600px) {
  .form-row.two { grid-template-columns: 1fr !important; gap: 8px !important; }
  .toolbar { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}