/* ==========================================================================
   Brand UI (works with your dark tokens if present; otherwise fallbacks)
   ========================================================================== */
:root{
  --brand-bg:             var(--bg, #121212);
  --brand-card:           var(--card, #1a1a1a);
  --brand-ink:            var(--ink, #e8ecf1);
  --brand-muted:          var(--muted, #b9c8dc);
  --brand-border:         var(--border, #2a2a2a);
  --brand-accent:         var(--accent, #81d4fa);
  --brand-accent-hover:   var(--accent-hover, #5fbef0);

  /* Vertical crop for the banner image used by .brand-fill */
  --brand-crop-y: 28%;
}

/* Pages using the brand header/footer should not inherit any global flex body */
body.brand-page{
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
  margin: 0;
  padding: 0;
}

/* Prevent subtle horizontal push on small screens (borders/scrollbars) */
html, body { width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Header (centered by default; make it full-width with .brand-header--full)
   -------------------------------------------------------------------------- */
.brand-header{
  background: var(--brand-card);
  color: var(--brand-ink);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 auto 16px;
  width: 100%;
  max-width: 1100px;       /* centered container width */
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Optional modifier: full-width top bar (e.g., for admin landing) */
.brand-header--full{
  max-width: 100%;
  border-radius: 0;
  margin: 0 0 16px;
}

/* Left side — occupies remaining space */
.brand-left{
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  color: inherit;
  text-decoration: none;
}

/* If you use an <img class="brand-logo"> instead of .brand-fill */
.brand-logo{
  display: block;
  width: 100%;
  height: 56px;
  max-height: 56px;
  object-fit: contain;
  object-position: left center;
  border-radius: 6px;
}

/* Background fill banner (most pages use this on the <a.brand-left>) */
.brand-fill{
  display: block;
  height: 200px; /* adjust if you want it taller/shorter */
  border-radius: 6px;
  background: url('/assets/images/banner.png')
              left var(--brand-crop-y) / cover no-repeat;
}

/* Right-side navigation */
.brand-nav{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-nav a{
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
  color: var(--brand-accent);
  background: transparent;
  border: 1px solid transparent;
}
.brand-nav a:hover{
  background: rgba(129,212,250,.08);
  border-color: var(--brand-border);
}
.brand-user   { color: var(--brand-muted); font-size: .9rem; }
.brand-logout {
  background: var(--brand-accent);
  color: #0b111a;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
}
.brand-logout:hover { background: var(--brand-accent-hover); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.brand-footer{
  width: 100%;
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 12px 14px;
  color: var(--brand-muted);
  border-top: 1px solid var(--brand-border);
  text-align: center;
}
.brand-footer a{ color: var(--brand-accent); text-decoration: none; }
.brand-footer a:hover{ color: var(--brand-accent-hover); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Shared wrappers (keep content centered and padded)
   -------------------------------------------------------------------------- */
.wrap,
.toolbar{
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding: 12px 16px;
}

/* If you embed the header inside a page toolbar, let it occupy a full row */
.toolbar{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.toolbar .header{ flex: 1 1 100%; min-width: 0; }
.toolbar .header .brand-header{ width: 100%; margin-bottom: 6px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Print: hide chrome
   -------------------------------------------------------------------------- */
@media print{
  .brand-header, .brand-footer { display: none !important; }
}

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 768px){
  .brand-logo { height: 44px; max-height: 44px; }
  .brand-user { display: none; } /* save space on narrow screens */
}

/* On narrow screens, banner gets its own row; links wrap beneath it */
@media (max-width: 640px){
  .brand-header{ flex-wrap: wrap; padding: 8px 10px; }
  .brand-left { flex: 1 1 100%; min-width: 0; }
  .brand-nav  { flex: 1 1 100%; justify-content: flex-end; gap: 10px; }
  .brand-fill { height: 250px; background-position: left var(--brand-crop-y); }
  /* If using <img.brand-logo> instead of .brand-fill */
  .brand-logo { height: 48px; max-height: 48px; object-fit: cover; object-position: left var(--brand-crop-y); }
}

/* --------------------------------------------------------------------------
   Utilities: tables & responsive card grid (used on “My Requests” mobile view)
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; }
.tbl { width: 100%; min-width: 520px; }

/* Desktop vs Mobile content toggles */
.table-desktop { display: block; }
.grid-mobile   { display: none; }

/* Card grid for mobile row-chunking */
.child-card-grid{
  display: grid;
  gap: 10px;
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 8px;
  padding: 12px;
}
.chip{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chip-label{ font-size: 12px; color: var(--brand-muted); }
.chip-value{ font-weight: 600; color: var(--brand-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-action{ display: flex; align-items: center; justify-content: flex-end; }

/* Breakpoints for grid densification */
@media (max-width: 900px){
  .table-desktop{ display: none; }
  .grid-mobile  { display: grid; gap: 12px; }
  .child-card-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chip-wide{ grid-column: span 2; } /* let Name breathe */
  .chip-action{ grid-column: 1 / -1; } /* button on its own row */
}
@media (max-width: 680px){
  .child-card-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chip-wide{ grid-column: span 2; }
}
@media (max-width: 480px){
  .child-card-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-wide{ grid-column: span 2; }
  .btn.small{ width: 100%; text-align: center; }
}