:root{
  --shell-bg: radial-gradient(circle at top left, rgba(56, 189, 248, 0.06), transparent 28%), var(--bg);
  --sidebar-bg: #0d1520;
  --sidebar-border: rgba(148,163,184,.10);
  --sidebar-hover: rgba(255,255,255,.035);
  --sidebar-active: rgba(96,165,250,.10);
  --shell-card: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}

body.light{
  --shell-bg: radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 28%), var(--bg);
  --sidebar-bg: #f4f7fb;
  --sidebar-border: rgba(15,23,42,.06);
  --sidebar-hover: rgba(15,23,42,.035);
  --sidebar-active: rgba(37,99,235,.08);
  --shell-card: linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,1));
}

html, body {
  min-height: 100%;
}

body {
  background: var(--shell-bg);
}

.app-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px minmax(0,1fr);
}

.sidebar{
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 16px 16px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.28) transparent;
}

body.light .sidebar{
  background: var(--sidebar-bg);
}

.sidebar::-webkit-scrollbar{
  width: 10px;
}

.sidebar::-webkit-scrollbar-track{
  background: transparent;
}

.sidebar::-webkit-scrollbar-thumb{
  background: rgba(148,163,184,.24);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.sidebar::-webkit-scrollbar-thumb:hover{
  background: rgba(148,163,184,.36);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.sidebar-brand-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 14px;
}

.sidebar-brand-logo{
  height: 34px;
  width: auto;
  display: block;
}

/* Safety clamp for the generic .brand-logo (header.php, ui_header.php, etc.).
   app_shell.css inherited from app.css used to size this; without the rule
   the natural-size 1536x512 PNG explodes the layout. Cap height defensively. */
.brand-logo {
  max-height: 40px;
  width: auto;
  height: auto;
  display: block;
}

body.light .brand-logo {
  opacity: 0.85;
}

/* Login page logo is much larger than sidebar/header marks — lift the 40px cap. */
.login-brand-logo {
  max-height: none;
  max-width: 312px;
  width: 100%;
  height: auto;
}

.sidebar-brand-kicker{
  color: rgba(154,164,178,.68);
  font-size: 12px;
  text-transform: lowercase;
  line-height: 1.1;
}

.sidebar-brand-title{
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(229,231,235,.88);
  line-height: 1.15;
  margin-top: 6px;
}

body.light .sidebar-brand-title{
  color: rgba(17,24,39,.82);
}

.sidebar-nav{
  flex: 1;
  overflow: visible;
  padding-right: 0;
}

.sidebar-group{
  margin: 0 0 18px;
}

.sidebar-group-label{
  padding: 0 10px 8px;
  color: rgba(154,164,178,.58);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

body.light .sidebar-group-label{
  color: rgba(107,114,128,.82);
}

/* Collapsible group toggle button */
.sidebar-group-toggle{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 10px 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(154,164,178,.58);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: inherit;
  text-align: left;
  gap: 6px;
  transition: color .15s ease;
}

.sidebar-group-toggle:hover{
  color: rgba(154,164,178,.9);
}

body.light .sidebar-group-toggle{
  color: rgba(107,114,128,.82);
}

body.light .sidebar-group-toggle:hover{
  color: rgba(17,24,39,.75);
}

.sidebar-group-toggle-label{
  flex: 1;
}

.sidebar-chevron{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  transition: transform .22s ease;
  opacity: .7;
}

.sidebar-group.is-collapsed .sidebar-chevron{
  transform: rotate(-90deg);
}

.sidebar-group-items{
  display: grid;
  gap: 4px;
}

.sidebar-link{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  color: rgba(229,231,235,.72);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

/* Active items get a brand-gradient left rail (replaces the plain dot accent). */
.sidebar-link.is-active::before{
  content: '';
  position: absolute;
  left: 3px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-grad);
}

body.light .sidebar-link{
  color: rgba(17,24,39,.72);
}

.sidebar-link:hover{
  background: var(--sidebar-hover);
  text-decoration: none;
}

.sidebar-link.is-active{
  background: var(--sidebar-active);
  border-color: rgba(96,165,250,.16);
  box-shadow: none;
  color: rgba(229,231,235,.94);
}

body.light .sidebar-link.is-active{
  color: rgba(17,24,39,.92);
  border-color: rgba(37,99,235,.12);
}

.sidebar-link-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.38);
  flex: 0 0 auto;
}

.sidebar-link.is-active .sidebar-link-dot{
  background: var(--brand-grad);
  box-shadow: 0 0 0 3px rgba(111,151,255,.12);
}

.sidebar-footer{
  border-top: 1px solid var(--sidebar-border);
  padding-top: 14px;
  display: grid;
  gap: 12px;
}

.sidebar-user{
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-avatar{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(96,165,250,.18);
  border: 1px solid rgba(96,165,250,.24);
  font-weight: 800;
}

.sidebar-user-name{
  font-weight: 700;
  color: rgba(229,231,235,.82);
  overflow-wrap: anywhere;
}

body.light .sidebar-user-name{
  color: rgba(17,24,39,.82);
}

.sidebar-user-sub{
  color: rgba(154,164,178,.64);
  font-size: 12px;
}

.sidebar-footer-btn{
  width: 100%;
  justify-content: center;
}

.app-main{
  min-width: 0;
  padding: 28px;
}

.page-shell{
  max-width: 1320px;
}

.wrap{
  max-width: none;
  margin: 0;
  padding: 0;
}

.page-hero-card{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 24px 18px;
  margin-top: 0;
  background: var(--shell-card);
}

.eyebrow{
  font-family: var(--font-display);
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 8px;
}

.page-title{
  margin: 0;
  font-size: 40px;
  line-height: 1.05;
}

.page-intro{
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.page-hero-actions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.tile-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.tile-card{
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 22px;
  padding: 22px;
  background: var(--shell-card);
  border: 1px solid var(--border);
  box-shadow: 0 16px 30px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease;
}

.tile-card:hover{
  transform: translateY(-2px);
  border-color: rgba(96,165,250,.34);
  text-decoration: none;
}

.tile-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  font-size: 20px;
}

.tile-title{
  margin: 18px 0 6px;
  color: var(--text);
  font-size: 28px;
  font-weight: 800;
}

.tile-copy{
  margin: 0;
  color: var(--muted);
}

.tile-warm{ background: linear-gradient(135deg, rgba(124,45,18,.55), rgba(17,24,39,.55)); }
.tile-gold{ background: linear-gradient(135deg, rgba(113,63,18,.55), rgba(17,24,39,.55)); }
.tile-blue{ background: linear-gradient(135deg, rgba(30,64,175,.35), rgba(17,24,39,.55)); }
.tile-purple{ background: linear-gradient(135deg, rgba(88,28,135,.45), rgba(17,24,39,.55)); }
.tile-cyan{ background: linear-gradient(135deg, rgba(8,47,73,.55), rgba(17,24,39,.55)); }
.tile-teal{ background: linear-gradient(135deg, rgba(4,120,87,.38), rgba(17,24,39,.55)); }

/* Defensive: ensure the grid and tiles always render. quick_links_preview.php
   relies on these display values; making them !important guards against any
   later theme rule that might accidentally hide them. */
.tile-grid { display: grid !important; }
.tile-wrap { display: block !important; }
.tile-card { display: block !important; }

/* Light-mode tile theming. The base .tile-warm/.tile-gold/... gradients use
   semi-transparent dark colors that mostly disappear over a white page;
   replace with denser tinted gradients in light mode + force readable light
   text on top. One rule per tile color; no inherit chains. */
body.light .tile-card {
  box-shadow: 0 12px 24px rgba(148,163,184,.24);
  color: #e6e9ef;                     /* default light text */
  border-color: rgba(15,23,42,.08);
}
body.light .tile-warm   { background: linear-gradient(135deg, rgba(124,45,18,.92),  rgba(60,30,30,.92)); color:#fff3e0; }
body.light .tile-gold   { background: linear-gradient(135deg, rgba(180,83,9,.92),   rgba(60,40,20,.92)); color:#fff3e0; }
body.light .tile-blue   { background: linear-gradient(135deg, rgba(30,64,175,.92),  rgba(20,40,80,.92)); color:#e6efff; }
body.light .tile-purple { background: linear-gradient(135deg, rgba(124,58,237,.92), rgba(40,30,80,.92)); color:#ede4ff; }
body.light .tile-cyan   { background: linear-gradient(135deg, rgba(2,132,199,.92),  rgba(15,40,60,.92)); color:#e2f4ff; }
body.light .tile-teal   { background: linear-gradient(135deg, rgba(13,148,136,.92), rgba(15,55,50,.92)); color:#e0fff8; }
body.light .tile-card .tile-title { color: inherit; font-weight: 700; }
body.light .tile-card .tile-copy  { color: rgba(255,255,255,.85); }
body.light .tile-card .tile-icon  { color: inherit; }
body.light .tile-external-icon svg { stroke: rgba(255,255,255,.85); }

.content-section{
  margin-top: 20px;
}

@media (max-width: 900px){
  .app-shell{
    grid-template-columns: 1fr;
  }

  .sidebar{
    position: relative;
    top: auto;
    height: auto;
    max-height: none;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
  }

  .app-main{
    padding: 18px;
  }

  .page-title{
    font-size: 32px;
  }
}

@media (max-width: 720px){
  .page-hero-card{
    flex-direction: column;
    padding: 18px;
  }

  .tile-grid{
    grid-template-columns: 1fr;
  }
}

.sidebar{
  gap: 14px;
  padding: 20px 14px 14px;
}

.sidebar-brand-row{
  padding: 2px 4px 10px;
}

.sidebar-nav{
  display: grid;
  gap: 2px;
}

.sidebar-group{
  margin: 0 0 10px;
}

.sidebar-group-label{
  padding: 0 10px 6px;
}

.sidebar-group-toggle{
  padding: 0 10px 6px;
}

.sidebar-group-items{
  gap: 2px;
}

.sidebar-link,
.sidebar-link-button{
  width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  gap: 9px;
  font: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sidebar-link-button{
  appearance: none;
}

.sidebar-footer{
  gap: 10px;
  padding-top: 12px;
}

.page-hero-card.compact{
  padding: 18px 20px 16px;
  margin-bottom: 16px;
  /* Stack the mode-switcher buttons below the title so the theme-aware TALON
     brand mark (anchored top-right) has clear space and never overlaps them. */
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

/* Keep the title/intro clear of the top-right brand mark. */
.page-hero-card.compact .hero-copy{
  padding-right: 150px;
}

.page-title-compact{
  font-size: 28px;
  line-height: 1.08;
}

.hero-copy{
  min-width: 0;
}

.hero-switcher{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.hero-switcher .btn{
  white-space: nowrap;
}

@media (max-width: 900px){
  .page-hero-card.compact{
    align-items: flex-start;
  }

  .hero-switcher{
    width: 100%;
  }
}

/* Brand mark is hidden at this width, so reclaim the reserved title gutter. */
@media (max-width: 820px){
  .page-hero-card.compact .hero-copy{
    padding-right: 0;
  }
}