/* ============================================================
   PulseMVC — app.css
   Dark slate theme · Sky-blue accent · No pink/purple
   ============================================================ */

/* ── Custom Properties ──────────────────────────────────── */
:root {
  /* ── Color Palette ─────────────────────────────────────── */

  /* Backgrounds — dark slate, not pitch-black */
  --color-bg:             #141921;   /* page background       */
  --color-sidebar:        #0f1520;   /* sidebar               */
  --color-surface:        #1b2334;   /* cards, panels         */
  --color-surface-raised: #1f2a3e;   /* elevated cards        */
  --color-surface-hover:  #253048;   /* hover on surface      */
  --color-topbar:         #17202f;   /* topbar background     */

  /* Borders */
  --color-border:         #2a3650;
  --color-border-dim:     #1f2a3e;

  /* Primary accent — sky blue (no pink/purple) */
  --color-primary:        #38bdf8;
  --color-primary-dark:   #0ea5e9;
  --color-primary-dim:    rgba(56, 189, 248, 0.12);
  --color-primary-text:   #082f49;   /* text on primary bg    */

  /* Semantic colours */
  --color-success:        #34d399;
  --color-success-dim:    rgba(52, 211, 153, 0.12);
  --color-error:          #f87171;
  --color-error-dim:      rgba(248, 113, 113, 0.12);
  --color-warning:        #fbbf24;
  --color-warning-dim:    rgba(251, 191, 36, 0.12);
  --color-info:           #60a5fa;
  --color-info-dim:       rgba(96, 165, 250, 0.12);

  /* Text */
  --color-text:           #dde6f0;
  --color-text-muted:     #8fa3bf;
  --color-text-dim:       #57728c;
  --color-text-inverse:   #0f1520;

  /* Sidebar-specific text */
  --color-sidebar-text:   #a8c0d8;
  --color-sidebar-muted:  #526a82;
  --color-sidebar-active: #38bdf8;
  --color-sidebar-active-bg: rgba(56, 189, 248, 0.10);
  --color-sidebar-hover:  rgba(56, 189, 248, 0.06);

  /* ── Typography ─────────────────────────────────────────── */
  --font-sans:  system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  --font-size-base: 1rem;
  --line-height:    1.6;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* ── Sizing ─────────────────────────────────────────────── */
  --sidebar-width:          260px;
  --sidebar-collapsed-width: 64px;
  --topbar-height:          60px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgb(0 0 0 / .3);
  --shadow:     0 2px 8px rgb(0 0 0 / .35);
  --shadow-md:  0 4px 16px rgb(0 0 0 / .4);
  --shadow-lg:  0 8px 32px rgb(0 0 0 / .5);
  --shadow-sidebar: 4px 0 24px rgb(0 0 0 / .4);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition:      220ms ease;
  --transition-slow: 320ms ease;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size:   var(--font-size-base);
  line-height: var(--line-height);
  color:       var(--color-text);
  background:  var(--color-bg);
  min-height:  100vh;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 { line-height: 1.25; font-weight: 600; color: var(--color-text); }
code, pre { font-family: var(--font-mono); }
hr { border: none; border-top: 1px solid var(--color-border); }
::selection { background: var(--color-primary-dim); color: var(--color-primary); }

/* ── Typography Scale ───────────────────────────────────── */
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }
p + p { margin-top: var(--space-4); }

/* ============================================================
   SIDEBAR LAYOUT
   ============================================================ */

/* App shell: sidebar (fixed left) + scrollable main area */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar {
  position:   fixed;
  top:        0;
  left:       0;
  height:     100vh;
  width:      var(--sidebar-width);
  background: var(--color-sidebar);
  border-right: 1px solid var(--color-border-dim);
  box-shadow: var(--shadow-sidebar);
  display:    flex;
  flex-direction: column;
  z-index:    200;
  transition: transform var(--transition-slow), width var(--transition);
  overflow-x: hidden;
  overflow-y: auto;
  /* Custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

/* Sidebar brand / logo area */
.sidebar-brand {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  padding:      0 var(--space-5);
  height:       var(--topbar-height);
  border-bottom: 1px solid var(--color-border-dim);
  flex-shrink:  0;
  text-decoration: none;
}

.sidebar-brand-icon {
  width:            36px;
  height:           36px;
  background:       var(--color-primary-dim);
  border:           1px solid rgba(56,189,248,.25);
  border-radius:    var(--radius);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  color:            var(--color-primary);
}

.sidebar-brand-name {
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--color-text);
  letter-spacing: -.02em;
  white-space: nowrap;
}

/* Sidebar sections */
.sidebar-section {
  padding: var(--space-5) 0 var(--space-2);
}

.sidebar-section + .sidebar-section {
  border-top: 1px solid var(--color-border-dim);
  padding-top: var(--space-4);
}

.sidebar-section-label {
  font-size:     0.7rem;
  font-weight:   600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:         var(--color-sidebar-muted);
  padding:       0 var(--space-5) var(--space-2);
  white-space:   nowrap;
}

/* Sidebar nav items */
.sidebar-nav { padding: 0 var(--space-3); }

.sidebar-link {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  padding:      0.55rem var(--space-3);
  border-radius: var(--radius);
  color:        var(--color-sidebar-text);
  font-size:    0.875rem;
  font-weight:  500;
  transition:   background var(--transition-fast), color var(--transition-fast);
  white-space:  nowrap;
  cursor:       pointer;
  text-decoration: none;
  margin-bottom: 2px;
}

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

.sidebar-link.active {
  background: var(--color-sidebar-active-bg);
  color:      var(--color-sidebar-active);
}

.sidebar-link.active .sidebar-link-icon { color: var(--color-primary); }

.sidebar-link-icon {
  width:       18px;
  height:      18px;
  flex-shrink: 0;
  opacity:     .75;
}

.sidebar-link.active .sidebar-link-icon,
.sidebar-link:hover .sidebar-link-icon { opacity: 1; }

.sidebar-link-badge {
  margin-left:  auto;
  font-size:    0.7rem;
  font-weight:  600;
  padding:      1px 6px;
  border-radius: var(--radius-full);
  background:   var(--color-primary-dim);
  color:        var(--color-primary);
}

/* Sidebar footer: user profile */
.sidebar-user {
  margin-top:    auto;
  padding:       var(--space-4) var(--space-3);
  border-top:    1px solid var(--color-border-dim);
  flex-shrink:   0;
}

.sidebar-user-inner {
  display:      flex;
  align-items:  center;
  gap:          var(--space-3);
  padding:      var(--space-2) var(--space-3);
  border-radius: var(--radius);
  transition:   background var(--transition-fast);
  cursor:       pointer;
}

.sidebar-user-inner:hover { background: var(--color-sidebar-hover); }

.sidebar-avatar {
  width:            34px;
  height:           34px;
  border-radius:    var(--radius-full);
  background:       var(--color-primary-dim);
  border:           1px solid rgba(56,189,248,.2);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        0.8rem;
  font-weight:      700;
  color:            var(--color-primary);
  flex-shrink:      0;
}

.sidebar-user-info { overflow: hidden; }

.sidebar-user-name {
  font-size:     0.85rem;
  font-weight:   600;
  color:         var(--color-text);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size:  0.75rem;
  color:      var(--color-sidebar-muted);
  white-space: nowrap;
}

/* Mobile sidebar overlay */
.sidebar-overlay {
  display:    none;
  position:   fixed;
  inset:      0;
  background: rgb(0 0 0 / .6);
  z-index:    190;
  backdrop-filter: blur(2px);
}

/* ── Main Area ──────────────────────────────────────────── */
.app-main {
  margin-left: var(--sidebar-width);
  display:     flex;
  flex-direction: column;
  min-height:  100vh;
  flex:        1;
  min-width:   0;
  transition:  margin-left var(--transition);
}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  position:      sticky;
  top:           0;
  height:        var(--topbar-height);
  background:    var(--color-topbar);
  border-bottom: 1px solid var(--color-border-dim);
  display:       flex;
  align-items:   center;
  gap:           var(--space-4);
  padding-inline: var(--space-6);
  z-index:       100;
  flex-shrink:   0;
}

.topbar-toggle {
  display:      none;
  align-items:  center;
  justify-content: center;
  width:        36px;
  height:       36px;
  border:       none;
  background:   transparent;
  color:        var(--color-text-muted);
  border-radius: var(--radius);
  cursor:       pointer;
  flex-shrink:  0;
  transition:   background var(--transition-fast), color var(--transition-fast);
}

.topbar-toggle:hover { background: var(--color-surface-hover); color: var(--color-text); }

.topbar-title {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--color-text);
  flex:        1;
}

.topbar-breadcrumb {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-size:   0.8rem;
  color:       var(--color-text-muted);
}

.topbar-breadcrumb a { color: var(--color-text-muted); }
.topbar-breadcrumb a:hover { color: var(--color-primary); }
.topbar-breadcrumb .sep { opacity: .4; }

.topbar-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  margin-left: auto;
}

.topbar-btn {
  display:      flex;
  align-items:  center;
  justify-content: center;
  width:        36px;
  height:       36px;
  border:       1px solid var(--color-border);
  background:   var(--color-surface);
  color:        var(--color-text-muted);
  border-radius: var(--radius);
  cursor:       pointer;
  transition:   border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  flex-shrink:  0;
}

.topbar-btn:hover {
  border-color: var(--color-primary);
  color:        var(--color-primary);
  background:   var(--color-primary-dim);
}

/* ── Page Content ───────────────────────────────────────── */
.main-content {
  flex:    1;
  padding: var(--space-8) var(--space-6);
}

/* ── Footer ─────────────────────────────────────────────── */
.footer {
  background:    var(--color-sidebar);
  border-top:    1px solid var(--color-border-dim);
  padding:       var(--space-4) var(--space-6);
  color:         var(--color-text-dim);
  font-size:     0.8rem;
  flex-shrink:   0;
}

.footer-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-2);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */

.container {
  width:          100%;
  max-width:      1100px;
  margin-inline:  auto;
}

.container-sm  { max-width: 560px; }
.container-md  { max-width: 720px; }
.container-lg  { max-width: 960px; }

/* Grid */
.grid      { display: grid; gap: var(--space-6); }
.grid-2    { grid-template-columns: repeat(2, 1fr); }
.grid-3    { grid-template-columns: repeat(3, 1fr); }
.grid-4    { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Flex */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Spacing */
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

/* Display */
.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }
.sr-only      { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Text */
.text-center   { text-align: center; }
.text-right    { text-align: right; }
.text-muted    { color: var(--color-text-muted); }
.text-dim      { color: var(--color-text-dim); }
.text-primary  { color: var(--color-primary); }
.text-success  { color: var(--color-success); }
.text-error    { color: var(--color-error); }
.text-warning  { color: var(--color-warning); }
.text-xs       { font-size: 0.75rem; }
.text-sm       { font-size: 0.875rem; }
.text-lg       { font-size: 1.125rem; }
.text-xl       { font-size: 1.25rem; }
.font-bold     { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium   { font-weight: 500; }
.font-mono     { font-family: var(--font-mono); }

/* Width */
.w-full  { width: 100%; }
.min-w-0 { min-width: 0; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }

/* ============================================================
   CARD
   ============================================================ */
.card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
}

.card-body { padding: var(--space-6); }

.card-header {
  padding:       var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           var(--space-4);
}

.card-title {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--color-text);
}

.card-footer {
  padding:    var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}

/* Stat card shorthand */
.stat-card { padding: var(--space-5) var(--space-6); }

.stat-label {
  font-size:     0.75rem;
  font-weight:   600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:         var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.stat-value {
  font-size:   2rem;
  font-weight: 700;
  line-height: 1.1;
  color:       var(--color-text);
}

.stat-change {
  font-size:  0.8rem;
  margin-top: var(--space-1);
}

.stat-change.up   { color: var(--color-success); }
.stat-change.down { color: var(--color-error); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       0.5rem 1rem;
  border-radius: var(--radius);
  font-size:     0.875rem;
  font-weight:   500;
  border:        1px solid transparent;
  cursor:        pointer;
  transition:    background var(--transition-fast), color var(--transition-fast),
                 border-color var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  white-space:   nowrap;
  flex-shrink:   0;
  line-height:   1.4;
}

.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }

.btn-primary {
  background:   var(--color-primary);
  color:        var(--color-primary-text);
  border-color: var(--color-primary);
  font-weight:  600;
}
.btn-primary:hover {
  background:   var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color:        var(--color-primary-text);
  box-shadow:   0 0 0 3px var(--color-primary-dim);
}

.btn-secondary {
  background:   var(--color-surface);
  color:        var(--color-text-muted);
  border-color: var(--color-border);
}
.btn-secondary:hover {
  background:   var(--color-surface-hover);
  color:        var(--color-text);
  border-color: var(--color-text-dim);
}

.btn-danger {
  background:   var(--color-error);
  color:        #fff;
  border-color: var(--color-error);
  font-weight:  600;
}
.btn-danger:hover { background: #ef4444; box-shadow: 0 0 0 3px var(--color-error-dim); }

.btn-ghost {
  background:   transparent;
  color:        var(--color-text-muted);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--color-surface-hover); color: var(--color-text); }

.btn-outline-primary {
  background:   transparent;
  color:        var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline-primary:hover {
  background:   var(--color-primary-dim);
  box-shadow:   0 0 0 3px var(--color-primary-dim);
}

.btn-sm  { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
.btn-lg  { padding: 0.65rem 1.4rem; font-size: 1rem; }
.btn-xl  { padding: 0.8rem 1.75rem; font-size: 1.05rem; }
.btn-block { width: 100%; justify-content: center; }

/* Loading spinner on button */
.btn.loading { opacity: .7; cursor: wait; pointer-events: none; }
.btn.loading::after {
  content: '';
  width:  13px;
  height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
  margin-left: var(--space-1);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: var(--space-5); }

.form-label {
  display:       block;
  font-size:     0.82rem;
  font-weight:   600;
  color:         var(--color-text-muted);
  letter-spacing: .02em;
  margin-bottom: var(--space-2);
}

.form-label .required { color: var(--color-error); margin-left: 2px; }

.form-control {
  width:        100%;
  padding:      0.55rem 0.8rem;
  font-size:    0.9rem;
  color:        var(--color-text);
  background:   var(--color-surface-raised);
  border:       1px solid var(--color-border);
  border-radius: var(--radius);
  transition:   border-color var(--transition-fast), box-shadow var(--transition-fast);
  appearance:   none;
  outline:      none;
}

.form-control::placeholder { color: var(--color-text-dim); }

.form-control:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px var(--color-primary-dim);
}

.form-control.is-invalid { border-color: var(--color-error); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--color-error-dim); }

textarea.form-control { resize: vertical; min-height: 100px; }

select.form-control {
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238fa3bf' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.6rem center;
  background-size:     1rem;
  padding-right:       2.2rem;
}

.form-hint    { font-size: 0.78rem; color: var(--color-text-dim); margin-top: var(--space-1); }

.invalid-feedback {
  display:    block;
  font-size:  0.78rem;
  color:      var(--color-error);
  margin-top: var(--space-1);
}

.form-check {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  cursor:      pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width:  1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-3);
  padding:       var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border:        1px solid transparent;
  font-size:     0.875rem;
  margin-bottom: var(--space-4);
}

.alert-icon   { flex-shrink: 0; margin-top: 1px; }

.alert-close {
  margin-left: auto;
  flex-shrink: 0;
  background:  transparent;
  border:      none;
  cursor:      pointer;
  padding:     var(--space-1);
  border-radius: var(--radius-sm);
  color:       inherit;
  opacity:     .55;
  transition:  opacity var(--transition-fast);
}
.alert-close:hover { opacity: 1; }

.alert-success {
  background:   var(--color-success-dim);
  border-color: rgba(52, 211, 153, .25);
  color:        #6ee7b7;
}
.alert-error {
  background:   var(--color-error-dim);
  border-color: rgba(248, 113, 113, .25);
  color:        #fca5a5;
}
.alert-warning {
  background:   var(--color-warning-dim);
  border-color: rgba(251, 191, 36, .25);
  color:        #fcd34d;
}
.alert-info {
  background:   var(--color-info-dim);
  border-color: rgba(96, 165, 250, .25);
  color:        #93c5fd;
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
#toast-container {
  position:   fixed;
  top:        var(--space-4);
  right:      var(--space-4);
  z-index:    9999;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
  max-width:  360px;
  width:      100%;
  pointer-events: none;
}

.toast {
  display:        flex;
  align-items:    flex-start;
  gap:            var(--space-3);
  padding:        var(--space-3) var(--space-4);
  border-radius:  var(--radius-lg);
  border:         1px solid transparent;
  box-shadow:     var(--shadow-lg);
  font-size:      0.85rem;
  pointer-events: all;
  animation:      toast-in var(--transition-slow) ease forwards;
  position:       relative;
  overflow:       hidden;
}

.toast.toast-out { animation: toast-out var(--transition-slow) ease forwards; }

@keyframes toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}
@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; max-height: 100px; }
  to   { transform: translateX(110%); opacity: 0; max-height: 0; padding: 0; margin: 0; }
}

.toast-progress {
  position: absolute; bottom: 0; left: 0;
  height: 3px; background: currentColor; opacity: .3;
  animation: toast-progress linear forwards;
}
@keyframes toast-progress { from { width: 100%; } to { width: 0%; } }

.toast-success {
  background:   rgba(52,211,153,.1);
  border-color: rgba(52,211,153,.25);
  color:        #6ee7b7;
}
.toast-error {
  background:   rgba(248,113,113,.1);
  border-color: rgba(248,113,113,.25);
  color:        #fca5a5;
}
.toast-warning {
  background:   rgba(251,191,36,.1);
  border-color: rgba(251,191,36,.25);
  color:        #fcd34d;
}
.toast-info {
  background:   rgba(96,165,250,.1);
  border-color: rgba(96,165,250,.25);
  color:        #93c5fd;
}

.toast-body    { flex: 1; }
.toast-title   { font-weight: 600; margin-bottom: 1px; }
.toast-message { opacity: .8; }

.toast-close {
  background: transparent; border: none; cursor: pointer;
  padding: 2px; line-height: 1; opacity: .55; color: inherit;
  flex-shrink: 0; transition: opacity var(--transition-fast);
}
.toast-close:hover { opacity: 1; }

/* ============================================================
   SPINNER
   ============================================================ */
.spinner {
  display:      inline-block;
  width:        1.5rem;
  height:       1.5rem;
  border:       2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation:    spin .7s linear infinite;
}
.spinner-sm { width: 1rem; height: 1rem; }
.spinner-lg { width: 2.5rem; height: 2.5rem; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   TABLE
   ============================================================ */
.table-wrapper { overflow-x: auto; }

table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.875rem;
}

th, td {
  padding:    0.75rem var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border-dim);
}

th {
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--color-text-dim);
  background:     var(--color-surface-raised);
  white-space:    nowrap;
}

tbody tr { transition: background var(--transition-fast); }
tbody tr:hover { background: var(--color-surface-hover); }
tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   BADGE
   ============================================================ */
.badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 8px;
  border-radius: var(--radius-full);
  font-size:     0.72rem;
  font-weight:   600;
  letter-spacing: .02em;
}

.badge-success   { background: var(--color-success-dim); color: var(--color-success); }
.badge-error     { background: var(--color-error-dim);   color: var(--color-error); }
.badge-warning   { background: var(--color-warning-dim); color: var(--color-warning); }
.badge-info      { background: var(--color-info-dim);    color: var(--color-info); }
.badge-primary   { background: var(--color-primary-dim); color: var(--color-primary); }
.badge-secondary { background: var(--color-surface-raised); color: var(--color-text-muted); }

/* ============================================================
   AUTH LAYOUT (guest.html.twig)
   ============================================================ */
.auth-wrapper {
  min-height:      100vh;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-6);
  background:      radial-gradient(ellipse at 50% 0%, rgba(56,189,248,.06) 0%, transparent 70%),
                   var(--color-bg);
}

.auth-card {
  width:         100%;
  max-width:     420px;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-lg);
  padding:       var(--space-8) var(--space-8);
}

.auth-logo {
  text-align:    center;
  margin-bottom: var(--space-6);
}

.auth-logo-icon {
  width:            52px;
  height:           52px;
  background:       var(--color-primary-dim);
  border:           1px solid rgba(56,189,248,.25);
  border-radius:    var(--radius-lg);
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  color:            var(--color-primary);
  margin-bottom:    var(--space-3);
}

.auth-logo span {
  display:     block;
  font-size:   1.4rem;
  font-weight: 800;
  color:       var(--color-text);
  letter-spacing: -.03em;
}

.auth-title {
  text-align:    center;
  margin-bottom: var(--space-6);
}

.auth-title h1 {
  font-size:     1.4rem;
  margin-bottom: var(--space-1);
}

.auth-title p {
  color:     var(--color-text-muted);
  font-size: 0.875rem;
}

.auth-footer {
  text-align:  center;
  margin-top:  var(--space-5);
  font-size:   0.82rem;
  color:       var(--color-text-dim);
}

.auth-divider {
  display:    flex;
  align-items: center;
  gap:        var(--space-3);
  margin-block: var(--space-5);
  font-size:  0.8rem;
  color:      var(--color-text-dim);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   ERROR PAGES
   ============================================================ */
.error-page {
  min-height:     80vh;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  text-align:     center;
  padding:        var(--space-8);
}

.error-code {
  font-size:      6rem;
  font-weight:    800;
  line-height:    1;
  color:          var(--color-primary);
  letter-spacing: -.05em;
  margin-bottom:  var(--space-4);
  text-shadow:    0 0 60px var(--color-primary-dim);
}

.error-title   { font-size: 1.75rem; margin-bottom: var(--space-3); }
.error-message { color: var(--color-text-muted); max-width: 480px; margin-bottom: var(--space-8); }

/* ============================================================
   CODE BLOCK
   ============================================================ */
.code-block {
  background:    var(--color-sidebar);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-5) var(--space-6);
  overflow-x:    auto;
  font-family:   var(--font-mono);
  font-size:     0.85rem;
  line-height:   1.7;
  color:         #adbac7;
}

/* ============================================================
   RESPONSIVE — Mobile sidebar
   ============================================================ */

/* Tablets: show toggle button */
@media (max-width: 1024px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .app-main {
    margin-left: 0;
  }

  .topbar-toggle {
    display: flex;
  }

  /* When sidebar is open on mobile/tablet */
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-overlay {
    display: block;
  }
}

/* Small screens */
@media (max-width: 768px) {
  .main-content { padding: var(--space-5) var(--space-4); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .auth-card { padding: var(--space-6); }
  .error-code { font-size: 4rem; }
  #toast-container { max-width: calc(100vw - var(--space-8)); right: var(--space-4); }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
}

@media (max-width: 480px) {
  .main-content { padding: var(--space-4) var(--space-3); }
  .auth-card { padding: var(--space-5) var(--space-4); margin: var(--space-4); max-width: 100%; }
  .topbar { padding-inline: var(--space-4); }
  .footer-inner { flex-direction: column; text-align: center; }
  .btn-group-responsive { flex-direction: column; width: 100%; }
  .btn-group-responsive .btn { width: 100%; justify-content: center; }
}

/* Wide screens: content max-width */
@media (min-width: 1400px) {
  .main-content { padding: var(--space-8); }
}

/* ============================================================
   MODAL
   ============================================================ */
.modal {
  display:        none;
  position:       fixed;
  inset:          0;
  z-index:        1000;
  align-items:    center;
  justify-content: center;
  padding:        var(--space-4);
}

.modal.is-open {
  display: flex;
}

.modal-backdrop {
  position:   absolute;
  inset:      0;
  background: rgb(0 0 0 / .65);
  backdrop-filter: blur(3px);
  animation:  modal-fade-in 200ms ease forwards;
}

.modal-box {
  position:      relative;
  z-index:       1;
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-lg);
  width:         100%;
  max-width:     540px;
  max-height:    90vh;
  display:       flex;
  flex-direction: column;
  animation:     modal-slide-in 220ms cubic-bezier(.34,1.56,.64,1) forwards;
  overflow:      hidden;
}

.modal-sm { max-width: 380px; }
.modal-lg { max-width: 720px; }
.modal-xl { max-width: 960px; }

.modal-fullscreen {
  max-width:  none;
  width:      calc(100vw - var(--space-8));
  height:     calc(100vh - var(--space-8));
  max-height: none;
}

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-5) var(--space-6);
  border-bottom:   1px solid var(--color-border);
  flex-shrink:     0;
}

.modal-title {
  font-size:   1.05rem;
  font-weight: 600;
}

.modal-close {
  background:    transparent;
  border:        none;
  cursor:        pointer;
  font-size:     1.4rem;
  line-height:   1;
  color:         var(--color-text-muted);
  padding:       var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition:    color var(--transition-fast), background var(--transition-fast);
}

.modal-close:hover {
  color:      var(--color-text);
  background: var(--color-surface-hover);
}

.modal-body {
  padding:    var(--space-6);
  overflow-y: auto;
  flex:       1;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.modal-footer {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--space-3);
  padding:         var(--space-4) var(--space-6);
  border-top:      1px solid var(--color-border);
  background:      var(--color-surface-raised);
  flex-shrink:     0;
}

body.modal-open { overflow: hidden; }

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-slide-in {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* ============================================================
   TOOLTIP
   ============================================================ */
.tooltip-popup {
  position:      absolute;
  z-index:       9500;
  background:    var(--color-surface-raised);
  color:         var(--color-text);
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  padding:       .35rem .7rem;
  font-size:     .78rem;
  line-height:   1.4;
  white-space:   nowrap;
  pointer-events: none;
  box-shadow:    var(--shadow-md);
  opacity:       0;
  transform:     translateY(4px);
  transition:    opacity 150ms ease, transform 150ms ease;
}

.tooltip-popup.tooltip-visible {
  opacity:   1;
  transform: translateY(0);
}

.tooltip-popup[data-placement="bottom"] { transform: translateY(-4px); }
.tooltip-popup[data-placement="bottom"].tooltip-visible { transform: translateY(0); }
.tooltip-popup[data-placement="left"]  { transform: translateX(4px); }
.tooltip-popup[data-placement="left"].tooltip-visible  { transform: translateX(0); }
.tooltip-popup[data-placement="right"] { transform: translateX(-4px); }
.tooltip-popup[data-placement="right"].tooltip-visible { transform: translateX(0); }

/* ============================================================
   DROPDOWN
   ============================================================ */
.dropdown { position: relative; display: inline-flex; }

.dropdown-menu {
  display:       none;
  position:      fixed; /* positioned by JS */
  z-index:       800;
  min-width:     180px;
  background:    var(--color-surface-raised);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-lg);
  padding:       var(--space-2) 0;
  list-style:    none;
  animation:     dropdown-in 160ms cubic-bezier(.34,1.3,.64,1) forwards;
  overflow:      hidden;
}

.dropdown-menu-open { display: block; }

@keyframes dropdown-in {
  from { opacity: 0; transform: scale(.96) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.dropdown-item {
  display:    flex;
  align-items: center;
  gap:        var(--space-2);
  width:      100%;
  padding:    .5rem var(--space-4);
  font-size:  .875rem;
  color:      var(--color-text-muted);
  background: transparent;
  border:     none;
  cursor:     pointer;
  text-align: left;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--color-surface-hover);
  color:      var(--color-text);
  outline:    none;
}

.dropdown-item-danger:hover,
.dropdown-item-danger:focus {
  background: var(--color-error-dim);
  color:      var(--color-error);
}

.dropdown-divider {
  height:     1px;
  background: var(--color-border-dim);
  margin:     var(--space-2) 0;
}

.dropdown-header {
  padding:    .3rem var(--space-4);
  font-size:  .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:      var(--color-text-dim);
}

/* ============================================================
   TABS
   ============================================================ */
.tabs { display: flex; flex-direction: column; }

.tabs-nav {
  display:      flex;
  align-items:  center;
  gap:          var(--space-1);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0;
  overflow-x:   auto;
  scrollbar-width: none;
}

.tabs-nav::-webkit-scrollbar { display: none; }

/* Pill style variant: add class="tabs-nav tabs-nav-pills" */
.tabs-nav-pills {
  border-bottom: none;
  background:   var(--color-surface-raised);
  border-radius: var(--radius-lg);
  padding:      var(--space-1);
  gap:          2px;
}

.tab-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       .55rem var(--space-4);
  font-size:     .875rem;
  font-weight:   500;
  color:         var(--color-text-muted);
  background:    transparent;
  border:        none;
  border-bottom: 2px solid transparent;
  cursor:        pointer;
  white-space:   nowrap;
  margin-bottom: -1px;
  transition:    color var(--transition-fast), border-color var(--transition-fast);
}

.tab-btn:hover  { color: var(--color-text); }

.tab-btn.active {
  color:        var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight:  600;
}

.tab-btn:focus-visible {
  outline:        2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius:  var(--radius-sm);
}

/* Pills variant buttons */
.tabs-nav-pills .tab-btn {
  border-bottom: none;
  border-radius: var(--radius);
  margin-bottom: 0;
}

.tabs-nav-pills .tab-btn.active {
  background: var(--color-surface);
  color:      var(--color-text);
  box-shadow: var(--shadow-sm);
}

.tab-panels { padding-top: var(--space-5); }

.tab-panel { display: none; }
.tab-panel[hidden] { display: none; }
.tab-panel.active  { display: block; animation: tab-fade-in 180ms ease forwards; }

@keyframes tab-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   CHART
   ============================================================ */
.chart-wrapper {
  position:   relative;
  width:      100%;
  overflow:   hidden;
}

.chart-wrapper canvas {
  display: block;
  width:   100% !important;
}

/* ============================================================
   INFINITE SCROLL
   ============================================================ */
.infinite-spinner {
  text-align: center;
  padding:    var(--space-4) 0;
}

[data-load-more-wrapper] {
  text-align: center;
  padding:    var(--space-6) 0;
}