/* =====================================================================
   Streamline 360 — app.css
   Oxfin-aligned dark BMS theme. Exact palette from spec.
   No CDN. No external dependencies. System fonts only.
   ===================================================================== */

/* === CSS VARIABLES — Exact Oxfin palette === */
:root {
  /* Backgrounds */
  --sl-bg-body:         #0B0D0F;
  --sl-bg-main:         #0B0D0F;
  --sl-bg-sidebar:      #0A0C0E;
  --sl-bg-header:       #07090B;
  --sl-bg-panel:        #101316;
  --sl-bg-panel-soft:   #0F1215;
  --sl-bg-input:        #15191D;
  --sl-bg-hover:        #1A1F25;
  --sl-bg-disabled:     #101316;

  /* Borders */
  --sl-border:          #262C33;
  --sl-border-soft:     #1D232A;
  --sl-border-strong:   #343B44;
  --sl-border-dashed:   #2B323A;

  /* Text */
  --sl-text-main:       #F4F7FB;
  --sl-text-secondary:  #C7D3E0;
  --sl-text-muted:      #8B9AAD;
  --sl-text-soft:       #667789;
  --sl-text-white:      #FFFFFF;

  /* Accents */
  --sl-accent-cyan:     #20BDF5;
  --sl-accent-blue:     #1A8DFF;
  --sl-accent-green:    #22C55E;
  --sl-accent-yellow:   #F5B82E;
  --sl-accent-orange:   #F97316;
  --sl-accent-red:      #EF4444;
  --sl-accent-pink:     #FF2E6C;
  --sl-accent-purple:   #8B5CF6;

  /* Kept for compatibility with existing page references */
  --sl-accent-lime:     #22C55E;
  --sl-accent-steel:    #8B9AAD;

  /* Radius */
  --sl-radius-sm:       6px;
  --sl-radius-md:       8px;
  --sl-radius-lg:       12px;

  /* Layout */
  --sl-sidebar-width:   240px;
  --sl-header-height:   56px;

  /* Typography */
  --sl-font:            Inter, 'Segoe UI', Roboto, Arial, sans-serif;
  --sl-font-mono:       'Courier New', Courier, monospace;

  --sl-transition:      0.16s ease;
}

/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; scroll-behavior: smooth; }

body {
  font-family: var(--sl-font);
  background: var(--sl-bg-body);
  color: var(--sl-text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--sl-accent-blue); text-decoration: none; }
a:hover { color: var(--sl-text-main); }

img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* === APP SHELL LAYOUT === */
.sl-app-body {
  background: var(--sl-bg-body);
  min-height: 100vh;
}

.sl-app-wrapper {
  margin-left: var(--sl-sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left var(--sl-transition);
}

/* =====================================================================
   SIDEBAR — Oxfin style
   ===================================================================== */
.sl-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sl-sidebar-width);
  height: 100vh;
  background: var(--sl-bg-sidebar);
  border-right: 1px solid var(--sl-border);
  display: flex;
  flex-direction: column;
  z-index: 900;
  overflow-y: auto;
  overflow-x: hidden;
  transition: transform var(--sl-transition);
}

/* Slim capsule scrollbar — Chromium/WebKit */
.sl-sidebar::-webkit-scrollbar { width: 4px; }
.sl-sidebar::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 99px; }
.sl-sidebar::-webkit-scrollbar-thumb { background: var(--sl-accent-cyan); border-radius: 99px; opacity: 0.7; }
.sl-sidebar::-webkit-scrollbar-thumb:hover { background: var(--sl-accent-blue); }
/* Firefox */
.sl-sidebar { scrollbar-width: thin; scrollbar-color: var(--sl-accent-cyan) rgba(0,0,0,0.2); }

.sl-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: var(--sl-header-height);
  border-bottom: 1px solid var(--sl-border);
  flex-shrink: 0;
}

.sl-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--sl-text-main);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.sl-sidebar-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.sl-sidebar-close {
  display: none;
  background: none;
  border: none;
  color: var(--sl-text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.sl-sidebar-nav {
  flex: 1;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Top-level nav links */
.sl-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  color: var(--sl-text-muted);
  font-size: 0.855rem;
  font-weight: 500;
  border-radius: 0;
  transition: background var(--sl-transition), color var(--sl-transition);
  cursor: pointer;
  position: relative;
  border-left: 2px solid transparent;
}

.sl-nav-link:hover {
  background: var(--sl-bg-hover);
  color: var(--sl-text-secondary);
  border-left-color: transparent;
}

.sl-nav-link.active {
  background: var(--sl-bg-hover);
  color: var(--sl-text-main);
  border-left: 2px solid var(--sl-accent-cyan);
}

.sl-nav-link.active .sl-nav-icon { color: var(--sl-accent-cyan); }

.sl-nav-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--sl-text-soft);
  transition: color var(--sl-transition);
}

.sl-nav-link:hover .sl-nav-icon { color: var(--sl-text-muted); }

.sl-nav-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Expandable nav groups */
.sl-nav-group { display: flex; flex-direction: column; }

.sl-nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--sl-text-muted);
  font-size: 0.855rem;
  font-weight: 500;
  font-family: var(--sl-font);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background var(--sl-transition), color var(--sl-transition);
}

.sl-nav-group-toggle:hover {
  background: var(--sl-bg-hover);
  color: var(--sl-text-secondary);
}

.sl-nav-group--open .sl-nav-group-toggle {
  color: var(--sl-text-main);
  background: var(--sl-bg-hover);
}

.sl-nav-chevron {
  margin-left: auto;
  transition: transform var(--sl-transition);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--sl-text-soft);
}

.sl-nav-group--open .sl-nav-chevron { transform: rotate(180deg); }

.sl-nav-children {
  background: rgba(0,0,0,0.18);
  border-left: 1px solid var(--sl-border-soft);
  margin-left: 28px;
  padding: 2px 0;
}

.sl-nav-child-link {
  display: block;
  padding: 7px 14px;
  color: var(--sl-text-muted);
  font-size: 0.82rem;
  transition: color var(--sl-transition), background var(--sl-transition);
  border-left: 2px solid transparent;
}

.sl-nav-child-link:hover {
  color: var(--sl-text-secondary);
  background: var(--sl-bg-hover);
}

.sl-nav-child-link.active {
  color: var(--sl-accent-cyan);
  border-left-color: var(--sl-accent-cyan);
  font-weight: 600;
}

/* Sidebar section divider labels */
.sl-nav-section-label {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--sl-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 14px 16px 4px;
  margin-top: 4px;
  pointer-events: none;
  user-select: none;
}

.sl-sidebar-footer {
  border-top: 1px solid var(--sl-border);
  padding: 8px 0;
  flex-shrink: 0;
}

/* =====================================================================
   TOP HEADER — fixed cluster issue
   ===================================================================== */
.sl-app-header {
  position: sticky;
  top: 0;
  z-index: 800;
  height: var(--sl-header-height);
  background: var(--sl-bg-header);
  border-bottom: 1px solid var(--sl-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
  gap: 12px;
}

.sl-app-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}

/* RIGHT SIDE — the main fix: one clean horizontal row */
.sl-app-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-right: 4px;
}

.sl-header-badge {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sl-header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sl-header-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sl-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sl-sidebar-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 4px;
  flex-shrink: 0;
}

.sl-sidebar-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--sl-text-muted);
  border-radius: 2px;
  transition: background var(--sl-transition);
}

.sl-sidebar-toggle:hover span { background: var(--sl-text-main); }

/* =====================================================================
   AVATAR — clean fixed size
   ===================================================================== */
.sl-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sl-accent-blue);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
  letter-spacing: 0;
}

.sl-username {
  font-size: 0.84rem;
  color: var(--sl-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* =====================================================================
   APP MAIN + FOOTER
   ===================================================================== */
.sl-app-main {
  flex: 1;
  padding: 24px;
  min-width: 0;
}

.sl-app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  border-top: 1px solid var(--sl-border);
  font-size: 0.76rem;
  color: var(--sl-text-soft);
  flex-shrink: 0;
}

.sl-footer-links { display: flex; gap: 16px; }
.sl-footer-links a { color: var(--sl-text-soft); font-size: 0.76rem; }
.sl-footer-links a:hover { color: var(--sl-text-muted); }

/* Mobile overlay */
.sl-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 850;
}

/* =====================================================================
   PAGE HEADING
   ===================================================================== */
.sl-page-header {
  margin-bottom: 22px;
}

.sl-page-header h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sl-text-main);
  margin-bottom: 4px;
}

.sl-page-header p {
  font-size: 0.855rem;
  color: var(--sl-text-muted);
}

/* =====================================================================
   PANELS / CARDS
   ===================================================================== */
.sl-panel {
  background: var(--sl-bg-panel);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
  padding: 20px;
}

.sl-panel-soft {
  background: var(--sl-bg-panel-soft);
  border: 1px solid var(--sl-border-soft);
  border-radius: var(--sl-radius-md);
  padding: 20px;
}

.sl-panel-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sl-text-main);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* =====================================================================
   GRID LAYOUTS
   ===================================================================== */
.sl-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sl-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.sl-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.sl-grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* =====================================================================
   STAT CARDS — coloured top border
   ===================================================================== */
.sl-stat-card {
  background: var(--sl-bg-panel);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}

.sl-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}

.sl-stat-card--pink::before   { background: var(--sl-accent-pink); }
.sl-stat-card--blue::before   { background: var(--sl-accent-blue); }
.sl-stat-card--green::before  { background: var(--sl-accent-green); }
.sl-stat-card--orange::before { background: var(--sl-accent-orange); }
.sl-stat-card--purple::before { background: var(--sl-accent-purple); }
.sl-stat-card--yellow::before { background: var(--sl-accent-yellow); }
.sl-stat-card--lime::before   { background: var(--sl-accent-green); }
.sl-stat-card--steel::before  { background: var(--sl-accent-steel); }
.sl-stat-card--red::before    { background: var(--sl-accent-red); }
.sl-stat-card--cyan::before   { background: var(--sl-accent-cyan); }

.sl-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--sl-text-main);
  line-height: 1.1;
  margin-bottom: 4px;
}

.sl-stat-label {
  font-size: 0.75rem;
  color: var(--sl-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =====================================================================
   MODULE TILES
   ===================================================================== */
.sl-tile {
  background: var(--sl-bg-panel);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
  padding: 18px;
  transition: border-color var(--sl-transition), background var(--sl-transition);
  cursor: pointer;
}

.sl-tile:hover {
  border-color: var(--sl-accent-cyan);
  background: var(--sl-bg-hover);
}

.sl-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--sl-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Tile icon colour variants using Oxfin accent palette */
.sl-tile-icon--pink   { background: rgba(255,46,108,0.14);   color: var(--sl-accent-pink); }
.sl-tile-icon--blue   { background: rgba(26,141,255,0.14);   color: var(--sl-accent-blue); }
.sl-tile-icon--cyan   { background: rgba(32,189,245,0.14);   color: var(--sl-accent-cyan); }
.sl-tile-icon--green  { background: rgba(34,197,94,0.14);    color: var(--sl-accent-green); }
.sl-tile-icon--orange { background: rgba(249,115,22,0.14);   color: var(--sl-accent-orange); }
.sl-tile-icon--purple { background: rgba(139,92,246,0.14);   color: var(--sl-accent-purple); }
.sl-tile-icon--yellow { background: rgba(245,184,46,0.14);   color: var(--sl-accent-yellow); }
.sl-tile-icon--lime   { background: rgba(34,197,94,0.14);    color: var(--sl-accent-green); }
.sl-tile-icon--steel  { background: rgba(139,154,173,0.14);  color: var(--sl-accent-steel); }
.sl-tile-icon--red    { background: rgba(239,68,68,0.14);    color: var(--sl-accent-red); }

.sl-tile-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--sl-text-main);
  margin-bottom: 4px;
}

.sl-tile-desc {
  font-size: 0.79rem;
  color: var(--sl-text-muted);
  line-height: 1.45;
}

.sl-tile-meta {
  margin-top: 12px;
  font-size: 0.76rem;
  color: var(--sl-text-soft);
}

/* =====================================================================
   BADGES — Oxfin status colours
   ===================================================================== */
.sl-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Success */
.sl-badge--green  { background: rgba(34,197,94,0.14);  color: var(--sl-accent-green); }
/* Danger */
.sl-badge--red    { background: rgba(239,68,68,0.14);  color: var(--sl-accent-red); }
/* Warning */
.sl-badge--yellow { background: rgba(245,184,46,0.14); color: var(--sl-accent-yellow); }
/* Info */
.sl-badge--blue   { background: rgba(26,141,255,0.14); color: var(--sl-accent-blue); }
.sl-badge--cyan   { background: rgba(32,189,245,0.14); color: var(--sl-accent-cyan); }
/* Pink / magenta */
.sl-badge--pink   { background: rgba(255,46,108,0.14); color: var(--sl-accent-pink); }
/* Orange */
.sl-badge--orange { background: rgba(249,115,22,0.14); color: var(--sl-accent-orange); }
/* Purple */
.sl-badge--purple { background: rgba(139,92,246,0.14); color: var(--sl-accent-purple); }
/* Neutral / steel */
.sl-badge--steel  { background: rgba(139,154,173,0.12); color: var(--sl-text-muted); }
/* Lime (alias) */
.sl-badge--lime   { background: rgba(34,197,94,0.14);  color: var(--sl-accent-green); }

/* =====================================================================
   BUTTONS
   ===================================================================== */
.sl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--sl-radius-sm);
  font-size: 0.84rem;
  font-weight: 600;
  font-family: var(--sl-font);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--sl-transition);
  text-decoration: none;
  white-space: nowrap;
}

.sl-btn:disabled,
.sl-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary */
.sl-btn-primary {
  background: var(--sl-accent-blue);
  color: var(--sl-text-white);
  border-color: var(--sl-accent-blue);
}
.sl-btn-primary:hover { background: #1278e0; color: var(--sl-text-white); }

/* Secondary / dark */
.sl-btn-secondary {
  background: var(--sl-bg-input);
  color: var(--sl-text-muted);
  border-color: var(--sl-border);
}
.sl-btn-secondary:hover { background: var(--sl-bg-hover); color: var(--sl-text-main); border-color: var(--sl-border-strong); }

/* Success */
.sl-btn-success {
  background: var(--sl-accent-green);
  color: var(--sl-text-white);
  border-color: var(--sl-accent-green);
}
.sl-btn-success:hover { background: #1aab52; color: var(--sl-text-white); }

/* Danger */
.sl-btn-danger {
  background: rgba(239,68,68,0.12);
  color: var(--sl-accent-red);
  border-color: rgba(239,68,68,0.3);
}
.sl-btn-danger:hover { background: var(--sl-accent-red); color: var(--sl-text-white); }

/* Warning */
.sl-btn-warning {
  background: var(--sl-accent-yellow);
  color: #0B0D0F;
  border-color: var(--sl-accent-yellow);
}
.sl-btn-warning:hover { background: #dda52a; }

/* =====================================================================
   FORM FIELDS — Oxfin input style
   ===================================================================== */
.sl-form-group { margin-bottom: 16px; }

.sl-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sl-text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sl-input,
.sl-select,
.sl-textarea {
  width: 100%;
  background: var(--sl-bg-input);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-sm);
  color: var(--sl-text-main);
  font-family: var(--sl-font);
  font-size: 0.875rem;
  padding: 9px 12px;
  transition: border-color var(--sl-transition), box-shadow var(--sl-transition);
  outline: none;
  appearance: none;
}

.sl-input:focus,
.sl-select:focus,
.sl-textarea:focus {
  border-color: var(--sl-accent-cyan);
  box-shadow: 0 0 0 3px rgba(32,189,245,0.1);
}

.sl-input:disabled,
.sl-select:disabled,
.sl-textarea:disabled {
  background: var(--sl-bg-disabled);
  color: var(--sl-text-soft);
  cursor: not-allowed;
}

.sl-input::placeholder,
.sl-textarea::placeholder { color: var(--sl-text-soft); }

.sl-textarea { resize: vertical; min-height: 96px; }

.sl-input--error { border-color: var(--sl-accent-red) !important; }

/* =====================================================================
   TABLES — Oxfin style
   ===================================================================== */
.sl-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-md);
}

.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.sl-table th {
  background: var(--sl-bg-panel-soft);
  color: var(--sl-text-main);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--sl-border);
  white-space: nowrap;
}

.sl-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--sl-border-soft);
  color: var(--sl-text-secondary);
  vertical-align: middle;
}

.sl-table tr:last-child td { border-bottom: none; }
.sl-table tbody tr:hover td { background: var(--sl-bg-hover); }

/* =====================================================================
   EMPTY STATE
   ===================================================================== */
.sl-empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--sl-text-soft);
}

.sl-empty-icon {
  font-size: 2.4rem;
  margin-bottom: 12px;
  opacity: 0.35;
}

.sl-empty-state h3 {
  font-size: 0.95rem;
  color: var(--sl-text-muted);
  margin-bottom: 6px;
  font-weight: 600;
}

.sl-empty-state p {
  font-size: 0.81rem;
  color: var(--sl-text-soft);
}

/* =====================================================================
   CHART PLACEHOLDER
   ===================================================================== */
.sl-chart-placeholder {
  background: var(--sl-bg-panel-soft);
  border: 1px dashed var(--sl-border-dashed);
  border-radius: var(--sl-radius-md);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sl-text-soft);
  font-size: 0.81rem;
}

/* =====================================================================
   PROGRESS BAR
   ===================================================================== */
.sl-progress {
  height: 4px;
  background: var(--sl-border);
  border-radius: 99px;
  overflow: hidden;
  margin-top: 8px;
}

.sl-progress-bar {
  height: 100%;
  border-radius: 99px;
  transition: width 0.4s ease;
}

/* =====================================================================
   DIVIDERS
   ===================================================================== */
.sl-divider {
  border: none;
  border-top: 1px solid var(--sl-border);
  margin: 20px 0;
}

/* =====================================================================
   UTILITY
   ===================================================================== */
.sl-mt-0  { margin-top: 0; }
.sl-mb-4  { margin-bottom: 4px; }
.sl-mb-8  { margin-bottom: 8px; }
.sl-mb-16 { margin-bottom: 16px; }
.sl-mb-24 { margin-bottom: 24px; }
.sl-gap-4 { gap: 4px; }
.sl-gap-8 { gap: 8px; }
.sl-flex         { display: flex; align-items: center; }
.sl-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sl-text-muted   { color: var(--sl-text-muted); }
.sl-text-soft    { color: var(--sl-text-soft); }
.sl-text-pink    { color: var(--sl-accent-pink); }
.sl-text-blue    { color: var(--sl-accent-blue); }
.sl-text-cyan    { color: var(--sl-accent-cyan); }
.sl-text-green   { color: var(--sl-accent-green); }
.sl-text-sm      { font-size: 0.8rem; }
.sl-text-xs      { font-size: 0.73rem; }
.sl-fw-600       { font-weight: 600; }

/* =====================================================================
   PUBLIC WEBSITE STYLES
   ===================================================================== */
.sl-public-body {
  background: var(--sl-bg-main);
  color: var(--sl-text-main);
  font-family: var(--sl-font);
}

.sl-public-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--sl-bg-header);
  border-bottom: 1px solid var(--sl-border);
}

.sl-public-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sl-public-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--sl-text-main);
}

.sl-public-logo img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.sl-public-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.sl-public-nav .sl-nav-link {
  color: var(--sl-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0;
  border: none;
}

.sl-public-nav .sl-nav-link:hover { color: var(--sl-text-main); background: none; }

.sl-public-nav .sl-btn-primary {
  background: var(--sl-accent-blue);
  color: #fff;
  padding: 7px 16px;
  border-radius: var(--sl-radius-sm);
  font-size: 0.84rem;
  font-weight: 600;
  transition: background var(--sl-transition);
}

.sl-public-nav .sl-btn-primary:hover { background: #1278e0; color: #fff; }

.sl-mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.sl-mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--sl-text-muted);
  border-radius: 2px;
}

.sl-public-main {
  min-height: calc(100vh - 60px - 120px);
}

.sl-hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px 60px;
  text-align: center;
}

.sl-hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--sl-text-main);
  line-height: 1.2;
  margin-bottom: 16px;
}

.sl-hero h1 span { color: var(--sl-accent-cyan); }

.sl-hero p {
  font-size: 1.05rem;
  color: var(--sl-text-muted);
  max-width: 580px;
  margin: 0 auto 32px;
  line-height: 1.7;
}

.sl-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.sl-public-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
}

.sl-section-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--sl-text-main);
  margin-bottom: 8px;
}

.sl-section-sub {
  font-size: 0.9rem;
  color: var(--sl-text-muted);
  margin-bottom: 32px;
}

.sl-divider-section {
  border: none;
  border-top: 1px solid var(--sl-border);
  margin: 0 24px;
}

.sl-public-footer {
  background: var(--sl-bg-header);
  border-top: 1px solid var(--sl-border);
  padding: 36px 24px;
}

.sl-public-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.sl-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sl-footer-logo  { width: 34px; height: 34px; object-fit: contain; }
.sl-footer-brand p { font-size: 0.79rem; color: var(--sl-text-soft); }

.sl-footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.sl-footer-nav a { font-size: 0.82rem; color: var(--sl-text-muted); }
.sl-footer-nav a:hover { color: var(--sl-text-main); }
.sl-footer-copy { font-size: 0.76rem; color: var(--sl-text-soft); }

.sl-public-content { max-width: 900px; margin: 40px auto; padding: 0 24px; }
.sl-public-content h1 { font-size: 1.6rem; font-weight: 700; color: var(--sl-text-main); margin-bottom: 8px; }
.sl-public-content h2 { font-size: 1.1rem; font-weight: 600; color: var(--sl-accent-cyan); margin-top: 28px; margin-bottom: 8px; }
.sl-public-content p, .sl-public-content li { font-size: 0.9rem; color: var(--sl-text-muted); line-height: 1.75; margin-bottom: 8px; }
.sl-public-content ul { list-style: disc; padding-left: 20px; }

.sl-meta-note { font-size: 0.79rem; color: var(--sl-text-soft); margin-top: 4px; }

/* =====================================================================
   AUTH PAGES
   ===================================================================== */
.sl-auth-body {
  background: var(--sl-bg-main);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sl-auth-box {
  background: var(--sl-bg-panel);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-radius-lg);
  padding: 36px;
  width: 100%;
  max-width: 420px;
}

.sl-auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
}

.sl-auth-logo img { width: 32px; height: 32px; object-fit: contain; }

.sl-auth-logo span {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--sl-text-main);
}

.sl-auth-title { font-size: 1.2rem; font-weight: 700; color: var(--sl-text-main); text-align: center; margin-bottom: 4px; }
.sl-auth-sub   { font-size: 0.84rem; color: var(--sl-text-muted); text-align: center; margin-bottom: 24px; }
.sl-auth-footer { text-align: center; margin-top: 20px; font-size: 0.82rem; color: var(--sl-text-soft); }
.sl-auth-footer a { color: var(--sl-accent-cyan); }

/* =====================================================================
   FLASH MESSAGES
   ===================================================================== */
.sl-flash-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.sl-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--sl-radius-sm);
  font-size: 0.84rem;
  border: 1px solid transparent;
}

.sl-flash--success { background: rgba(34,197,94,0.1);  border-color: rgba(34,197,94,0.25);  color: var(--sl-accent-green); }
.sl-flash--error   { background: rgba(239,68,68,0.1);  border-color: rgba(239,68,68,0.25);  color: var(--sl-accent-red); }
.sl-flash--warning { background: rgba(245,184,46,0.1); border-color: rgba(245,184,46,0.25); color: var(--sl-accent-yellow); }
.sl-flash--info    { background: rgba(32,189,245,0.1); border-color: rgba(32,189,245,0.25); color: var(--sl-accent-cyan); }

.sl-flash-icon { font-weight: 700; font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; }

/* =====================================================================
   SIGN-OUT & SIDEBAR USER
   ===================================================================== */
.sl-signout-link {
  color: var(--sl-text-soft);
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: var(--sl-radius-sm);
  transition: color var(--sl-transition), background var(--sl-transition);
  flex-shrink: 0;
  line-height: 0;
}

.sl-signout-link:hover {
  color: var(--sl-accent-red);
  background: rgba(239,68,68,0.1);
}

.sl-sidebar-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-top: 1px solid var(--sl-border-soft);
  margin-top: 6px;
}

.sl-avatar--sm {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* Sidebar sign-out button */
.sl-signout-btn {
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  font-family: var(--sl-font);
  font-size: 0.855rem;
  font-weight: 500;
  text-align: left;
}

/* Header sign-out button */
button.sl-signout-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sl-font);
}

/* =====================================================================
   Signup page — show/hide password + Companies House autocomplete
   (Core styles are inline on signup.php for portability; these are
   shared utilities if needed elsewhere.)
   ===================================================================== */
.sl-pw-wrap { position: relative; }
.sl-pw-wrap .sl-input { padding-right: 40px; }

.sl-pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--sl-text-soft);
  padding: 4px;
  display: flex;
  align-items: center;
  line-height: 0;
  transition: color var(--sl-transition);
}
.sl-pw-toggle:hover { color: var(--sl-text-muted); }