/* ============================================================
   SIGFinanciero — Design System v1.0
   Glassmorphism UI · 2026
   ============================================================ */

/* ── CSS Custom Properties (overridden per module) ─────────── */
:root {
  --sf-accent:      #38bdf8;
  --sf-accent-rgb:  56, 189, 248;
  --sf-accent-4:    rgba(var(--sf-accent-rgb), .04);
  --sf-accent-6:    rgba(var(--sf-accent-rgb), .06);
  --sf-accent-12:   rgba(var(--sf-accent-rgb), .12);
  --sf-accent-18:   rgba(var(--sf-accent-rgb), .18);
  --sf-accent-22:   rgba(var(--sf-accent-rgb), .22);
  --sf-accent-25:   rgba(var(--sf-accent-rgb), .25);
  --sf-accent-35:   rgba(var(--sf-accent-rgb), .35);
  --sf-accent-4s:   rgba(var(--sf-accent-rgb), .4);
  --sf-accent-5s:   rgba(var(--sf-accent-rgb), .5);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; background: linear-gradient(135deg, #6297c6, #a8b1d6, #f4c8d8); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.1); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.4); }

/* ── Background Animations ──────────────────────────────────── */
@keyframes sf-blob-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(15vw,10vh) scale(1.1); }
  66%     { transform: translate(-10vw,20vh) scale(0.9); }
}
@keyframes sf-blob-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(-20vw,-15vh) scale(1.2); }
  66%     { transform: translate(10vw,-10vh) scale(0.8); }
}
@keyframes sf-blob-3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(25vw,-25vh) scale(1.3); }
}
@keyframes sf-shape-pulse {
  0%,100% { transform: translateY(0) scale(1); opacity: .6; }
  50%     { transform: translateY(-20px) scale(1.05); opacity: .9; }
}
@keyframes sf-wave {
  0%,100% { transform: translateX(0) scaleY(1); }
  50%     { transform: translateX(-2vw) scaleY(1.1); }
}
@keyframes sf-skeleton  { 0%,100% { opacity:.35; } 50% { opacity:.65; } }

/* ── Background Layer 0 — Blobs ─────────────────────────────── */
.sf-blob-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#blob-1 {
  position: absolute; top: -10%; left: -10%; width: 50vw; height: 50vw;
  background: #c3f0db; border-radius: 50%; mix-blend-mode: screen;
  filter: blur(120px); opacity: .8; animation: sf-blob-1 20s ease-in-out infinite;
}
#blob-2 {
  position: absolute; top: 20%; right: -15%; width: 60vw; height: 60vw;
  background: #ffcce0; border-radius: 50%; mix-blend-mode: multiply;
  filter: blur(140px); opacity: .7; animation: sf-blob-2 25s ease-in-out infinite;
}
#blob-3 {
  position: absolute; bottom: -20%; left: 15%; width: 55vw; height: 55vw;
  background: #cba3ff; border-radius: 50%; mix-blend-mode: screen;
  filter: blur(130px); opacity: .7; animation: sf-blob-3 22s ease-in-out infinite;
}

/* ── Background Layer 1 — Shapes + Wave ─────────────────────── */
.sf-shape-layer { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.sf-shape-circle-1 {
  position: absolute; top: 10%; left: 8%; width: 160px; height: 160px;
  border-radius: 50%; background: rgba(255,255,255,.18); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25); animation: sf-shape-pulse 8s ease-in-out infinite;
}
.sf-shape-circle-2 {
  position: absolute; top: 35%; right: -5%; width: 340px; height: 340px;
  border-radius: 50%; background: rgba(130,180,223,.25); border: 1px solid rgba(255,255,255,.15);
  animation: sf-shape-pulse 12s ease-in-out infinite 2s;
}
#bg-wave {
  position: absolute; bottom: 0; left: 0; width: 110vw; height: 35vh;
  color: rgba(110,164,214,.55); animation: sf-wave 15s ease-in-out infinite;
}

/* ── App Shell ──────────────────────────────────────────────── */
.sf-app { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 20; }

/* ── Topbar ─────────────────────────────────────────────────── */
.sf-topbar {
  display: flex; align-items: stretch; height: 62px; padding: 10px 0;
  flex-shrink: 0;
  position: fixed; top: 0; left: 0; right: 0; z-index: 21;
  background: rgba(10,10,20,.75);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--sf-accent-4s);
}
.sf-topbar-left {
  width: 230px; flex-shrink: 0; display: flex; align-items: center;
  justify-content: center;
}
.sf-topbar-logo-link { display: flex; align-items: center; cursor: pointer; }
.sf-topbar-logo-link:hover { opacity: .75; }
.sf-topbar-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
  border-radius: 10px; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  transition: background .2s; text-decoration: none; align-self: stretch;
  letter-spacing: .02em; white-space: nowrap;
}
.sf-topbar-back:hover { background: rgba(255,255,255,.18); color: #fff; }
.sf-topbar-logo { height: 26px; width: auto; opacity: .88; }
.sf-topbar-divider { width: 1px; height: 28px; background: rgba(255,255,255,.15); align-self: center; flex-shrink: 0; }
.sf-topbar-center {
  flex: 1; padding-left: 24px; display: flex; align-items: center; gap: 10px; min-width: 0;
}
.sf-entity-indicator {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.sf-entity-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
  flex-shrink: 0; box-shadow: 0 0 10px rgba(74,222,128,.8);
}
.sf-entity-label { font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.sf-entity-name  { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; }
.sf-btn-change-entity {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none;
  border-radius: 10px; padding: 0 12px; color: #fff; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .02em; outline: none;
  transition: background .2s; white-space: nowrap; align-self: stretch;
  text-decoration: none;
}
.sf-btn-change-entity:hover { background: rgba(255,255,255,.09); }
.sf-topbar-user { display: flex; align-items: center; gap: 10px; min-width: 230px; justify-content: flex-end; padding: 0 12px; }
.sf-user-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1; }
.sf-user-role { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 2px; }
.sf-avatar {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center;
  justify-content: center; color: rgba(255,255,255,.8); flex-shrink: 0;
  cursor: pointer; outline: none; transition: background .2s;
}
.sf-avatar:hover { background: rgba(255,255,255,.22); }
/* Theme palette button — mismo estilo que .sf-avatar */
.sf-palette-btn {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center;
  justify-content: center; color: rgba(255,255,255,.8); cursor: pointer;
  transition: background .2s; flex-shrink: 0; outline: none;
}
.sf-palette-btn:hover { background: rgba(255,255,255,.22); }
/* Change entity round button (green border) */
.sf-change-entity-btn {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12);
  border: 2px solid rgba(74,222,128,.6); display: flex; align-items: center;
  justify-content: center; color: rgba(255,255,255,.8); cursor: pointer;
  transition: background .2s, border-color .2s; flex-shrink: 0; outline: none;
  text-decoration: none;
}
.sf-change-entity-btn:hover { background: rgba(74,222,128,.18); border-color: rgba(74,222,128,.9); }
/* Logout round button (topbar, same style as avatar/palette) */
.sf-logout-btn {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.3); display: flex; align-items: center;
  justify-content: center; color: rgba(255,255,255,.8); cursor: pointer;
  transition: background .2s, border-color .2s, color .2s; flex-shrink: 0; outline: none;
}
.sf-logout-btn:hover { background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.5); color: #fca5a5; }

/* ── Body row ────────────────────────────────────────────────── */
.sf-body-row { display: flex; flex: 1; overflow: hidden; padding-top: 62px; }
.sf-home-content { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; padding-top: calc(62px + 1.25rem); }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sf-sidebar { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; overflow: visible; padding: 24px 0; background: transparent; }
.sf-sidebar-nav {
  flex: 1; display: flex; flex-direction: column; overflow-y: auto;
  padding: 8px 0 12px;
  background: transparent;
}

/* ── Sidebar card navigation ─────────────────────────────────── */
.sf-sidebar-cards {
  display: flex; flex-direction: column; gap: 7px;
  padding: 6px 10px; overflow-y: auto; flex: 1;
}
.sf-sidebar-card {
  display: flex; flex-direction: column; gap: .35rem;
  background: rgba(10,10,25,.65);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 1rem .9rem;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s; cursor: pointer;
}
.sf-sidebar-card:hover {
  background: rgba(10,10,25,.8);
  transform: translateY(-2px);
}
.sf-sidebar-card.active {
  background: #009688;
  border-color: #009688;
}
.sf-sidebar-card-icon { font-size: 1.45rem; line-height: 1; }
.sf-sidebar-card-title {
  font-size: .82rem; font-weight: 700;
  color: rgba(255,255,255,.88); letter-spacing: .01em; line-height: 1.3;
}
.sf-sidebar-card-desc {
  font-size: .72rem; color: rgba(255,255,255,.4); line-height: 1.4;
}
.sf-sidebar-card-section {
  font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.3); padding: 8px 4px 2px; margin-top: 4px;
}
.sf-sidebar-mod-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-bottom: 8px; padding: 0 4px 0 28px;
}
.sf-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 20px; cursor: pointer;
  border: 1px solid var(--sf-accent-18); border-left: 3px solid transparent;
  border-right: 3px solid transparent; border-radius: 0 8px 8px 0;
  margin: 0 8px 5px 8px; font-size: 13.5px; font-weight: 500;
  color: rgba(255,255,255,.62); transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.sf-nav-item:hover {
  background: var(--sf-accent-12); color: #fff;
  border-color: var(--sf-accent-25); border-left-color: var(--sf-accent-5s);
}
.sf-nav-item.active {
  background: var(--sf-accent-18); color: #fff; font-weight: 700;
  border-color: var(--sf-accent-35); border-left-color: var(--sf-accent);
  border-right: 3px solid var(--sf-accent);
}
.sf-nav-item svg { flex-shrink: 0; }
nav .sf-nav-item:first-child { border-radius: 0 28px 8px 0; }
nav .sf-nav-item:last-child:not(:first-child) { border-radius: 0 8px 28px 0; }
.sf-sidebar-footer { margin-top: auto; padding: 16px 20px 0; border-top: 1px solid rgba(255,255,255,.08); }
.sf-sidebar-footer-v { font-size: 11px; color: rgba(255,255,255,.22); }

/* ── Sidebar scrollbar — más notorio que el global ───────────── */
.sf-sidebar-nav::-webkit-scrollbar,
.sf-sidebar-cards::-webkit-scrollbar { width: 12px; }
/* Firefox: mismos colores fijos (thumb verde / track opción no seleccionada) */
.sf-sidebar-nav,
.sf-sidebar-cards { scrollbar-color: #009688 rgba(10,10,25,.65); }
.sf-sidebar-nav::-webkit-scrollbar-track,
.sf-sidebar-cards::-webkit-scrollbar-track {
  /* Fondo del handle = color de una opción NO seleccionada (independiente del módulo) */
  background: rgba(10,10,25,.65);
  border-radius: 6px;
  margin: 6px 0;
}
.sf-sidebar-nav::-webkit-scrollbar-thumb,
.sf-sidebar-cards::-webkit-scrollbar-thumb {
  /* Handle = verde de una opción seleccionada (independiente del módulo) */
  background: #009688;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.sf-sidebar-nav::-webkit-scrollbar-thumb:hover,
.sf-sidebar-cards::-webkit-scrollbar-thumb:hover {
  background: #00b3a4;
  background-clip: padding-box;
  border: 2px solid transparent;
}

/* ── Main content ────────────────────────────────────────────── */
.sf-main { flex: 1; overflow-y: auto; padding: 24px; padding-right: 52px; display: flex; flex-direction: column; gap: 20px; }

/* ── KPI row ─────────────────────────────────────────────────── */
.sf-kpi-row { display: flex; gap: 16px; flex-wrap: wrap; }
.sf-kpi-card {
  flex: 1; min-width: 160px; background: rgba(10,10,25,.65); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 16px 18px;
  transition: transform .2s, box-shadow .2s;
}
.sf-kpi-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.35); }
.sf-kpi-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 4px; }
.sf-kpi-value { font-size: 26px; font-weight: 800; color: #fff; line-height: 1.1; }
.sf-kpi-detail { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 4px; }

/* ── Panel ───────────────────────────────────────────────────── */
.sf-panel {
  background: rgba(10,10,25,.65); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--sf-accent-25); border-radius: 18px;
  display: flex; flex-direction: column; overflow: hidden; flex: 1;
}
.sf-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--sf-accent-22); flex-shrink: 0;
}
.sf-panel-title { font-size: 15px; font-weight: 700; color: #fff; }
.sf-panel-count { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; }
.sf-panel-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ── Search input ────────────────────────────────────────────── */
.sf-search {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px; padding: 7px 13px; color: #fff; font-size: 13px; outline: none;
  transition: background .15s, border-color .15s; width: 200px;
}
.sf-search::placeholder { color: rgba(255,255,255,.3); }
.sf-search:focus { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }

/* ── Buttons ─────────────────────────────────────────────────── */
.sf-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px;
  border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  transition: background .15s, transform .15s; white-space: nowrap; text-decoration: none;
}
.sf-btn:hover { background: rgba(255,255,255,.28); transform: translateY(-1px); color: #fff; }
.sf-btn:active { transform: translateY(0); }
.sf-btn-sm { padding: 5px 12px; font-size: 12px; }
.sf-btn-danger { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.4); }
.sf-btn-danger:hover { background: rgba(239,68,68,.35); }
.sf-btn-accent { background: var(--sf-accent-18); border-color: var(--sf-accent-35); }
.sf-btn-accent:hover { background: var(--sf-accent-25); }
.sf-btn-icon {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.sf-btn-icon:hover { background: rgba(255,255,255,.18); color: #fff; }
.sf-btn-icon.danger:hover { background: rgba(239,68,68,.25); color: #fca5a5; }

/* ── Table ───────────────────────────────────────────────────── */
.sf-table-wrap { overflow: auto; flex: 1; }
.sf-table { width: 100%; border-collapse: collapse; }
.sf-table thead th {
  padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--sf-accent);
  border-bottom: 1px solid var(--sf-accent-35); white-space: nowrap;
  background: rgba(0,0,0,.18); position: sticky; top: 0; z-index: 1;
}
.sf-table tbody tr { border-bottom: 1px solid var(--sf-accent-12); transition: background .12s; }
.sf-table tbody tr:last-child { border-bottom: none; }
.sf-table tbody tr:hover { background: rgba(255,255,255,.06); }
.sf-table tbody td { padding: 11px 16px; font-size: 13px; color: rgba(255,255,255,.88); }
.sf-table tbody td.muted { color: rgba(255,255,255,.4); font-size: 12px; }
.sf-table-empty { text-align: center; padding: 48px; color: rgba(255,255,255,.25); font-size: 13px; }

/* ── Panel footer + Pagination ──────────────────────────────── */
.sf-panel-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-top: 1px solid var(--sf-accent-18); flex-shrink: 0;
}
.sf-panel-footer-info { font-size: 11px; color: rgba(255,255,255,.3); }
.sf-pagination { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-page-btn {
  padding: 4px 12px; border-radius: 7px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--sf-accent-25); background: var(--sf-accent-6);
  color: rgba(255,255,255,.5); transition: background .12s; outline: none;
}
.sf-page-btn.active { background: var(--sf-accent-22); color: #fff; font-weight: 700; border-color: var(--sf-accent-5s); }
.sf-page-btn:hover:not(.active) { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
.sf-page-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Badges ──────────────────────────────────────────────────── */
.sf-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.sf-badge-activo    { background: rgba(16,185,129,.25);  color: #6ee7b7; border: 1px solid rgba(16,185,129,.4); }
.sf-badge-inactivo  { background: rgba(239,68,68,.25);   color: #fca5a5; border: 1px solid rgba(239,68,68,.4); }
.sf-badge-ejecucion { background: rgba(245,158,11,.25);  color: #fcd34d; border: 1px solid rgba(245,158,11,.4); }
.sf-badge-liquidado { background: rgba(99,102,241,.25);  color: #c7d2fe; border: 1px solid rgba(99,102,241,.4); }
.sf-badge-nuevo     { background: rgba(6,182,212,.25);   color: #67e8f9; border: 1px solid rgba(6,182,212,.4); }
.sf-badge-aprobado  { background: rgba(34,197,94,.25);   color: #86efac; border: 1px solid rgba(34,197,94,.4); }
.sf-badge-anulado   { background: rgba(156,163,175,.2);  color: #d1d5db; border: 1px solid rgba(156,163,175,.35); }
.sf-badge-pendiente { background: rgba(251,191,36,.2);   color: #fcd34d; border: 1px solid rgba(251,191,36,.35); }

/* ── Right panel ─────────────────────────────────────────────── */
.sf-right-panel {
  position: fixed; right: 0; top: calc(62px + 20px); bottom: 20px;
  width: 36px; z-index: 18; overflow: hidden;
  background: rgba(10,10,20,.88); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--sf-accent-35); border-right: none;
  border-bottom-left-radius: 80px; border-top-left-radius: 80px;
  transition: width .28s cubic-bezier(.4,0,.2,1),
              box-shadow .28s ease,
              border-top-left-radius .28s ease,
              border-bottom-left-radius .28s ease;
}
.sf-right-panel:hover {
  width: 230px;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
  box-shadow: -150vw 0 40px 150vw rgba(0,0,0,.28);
}
/* Trigger strip — absolutely pinned to the right 36px; the collapsed face */
.sf-right-panel-trigger {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 36px; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; cursor: pointer;
  opacity: 1; transition: opacity .15s ease;
}
.sf-right-panel:hover .sf-right-panel-trigger { opacity: 0; }
.sf-trigger-bolt { color: #fbbf24; flex-shrink: 0; }
.sf-right-trigger-label {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 800; line-height: 1;
  color: #fff; text-transform: uppercase; user-select: none; letter-spacing: 0;
}
.sf-right-trigger-label span { display: block; }
/* Full panel body — fills the panel, content kept clear of the 36px trigger */
.sf-right-panel-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  padding: 24px 10px 24px 16px;
  opacity: 0; transition: opacity .15s ease .08s;
}
.sf-right-panel:hover .sf-right-panel-body { opacity: 1; }
.sf-right-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.85); margin-bottom: 10px; padding: 0 4px; text-align: right;
}
.sf-quick-btn {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer;
  border-radius: 80px 0 0 80px; margin-bottom: 5px; background: transparent;
  border: 1px solid var(--sf-accent-18); border-left: 3px solid transparent;
  border-right: 3px solid transparent; color: rgba(255,255,255,.65);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.sf-quick-btn:hover { background: var(--sf-accent-12); color: #fff; border-color: var(--sf-accent-25); border-left-color: var(--sf-accent-5s); }
.sf-quick-btn.current {
  background: var(--sf-accent-18); color: #fff; font-weight: 700;
  border-color: var(--sf-accent-35); border-left: 3px solid var(--sf-accent);
  pointer-events: none; cursor: default;
}
.sf-right-panel a.sf-quick-btn:first-of-type { border-radius: 80px 0 0 80px; }
.sf-right-panel a.sf-quick-btn:last-of-type:not(:first-of-type) { border-radius: 80px 0 0 80px; }
.sf-right-divider { height: 1px; background: rgba(255,255,255,.08); margin: 14px 4px; }
.sf-right-panel-footer { margin-top: auto; padding: 16px 8px 4px; border-top: 1px solid rgba(255,255,255,.08); text-align: right; }
.sf-right-panel-footer-v { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.3); letter-spacing: .05em; }
.sf-right-panel-footer-c { font-size: 10px; color: rgba(255,255,255,.18); margin-top: 3px; }

/* ── Modal <dialog> ──────────────────────────────────────────── */
dialog.sf-modal {
  background: rgba(10,10,25,.92); backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 18px;
  color: #fff; padding: 0; width: min(540px, 92vw);
  box-shadow: 0 32px 80px rgba(0,0,0,.6); outline: none;
  margin: auto;
}
dialog.sf-modal::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); }

/* ── Theme selector modal ────────────────────────────────────── */
dialog.sf-theme-modal {
  background: rgba(8,8,18,.96); backdrop-filter: blur(28px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 20px;
  color: #fff; padding: 0; width: min(580px, 94vw);
  box-shadow: 0 32px 80px rgba(0,0,0,.7); outline: none; margin: auto;
}
dialog.sf-theme-modal::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(6px); }
.sf-theme-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sf-theme-modal-title { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .03em; }
.sf-theme-modal-body { padding: 20px; }
#theme-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { #theme-grid { grid-template-columns: 1fr 1fr; } }
.sf-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.sf-modal-title { font-size: 15px; font-weight: 700; color: #fff; }
.sf-modal-close {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 1; transition: background .15s;
}
.sf-modal-close:hover { background: rgba(255,255,255,.18); color: #fff; }
.sf-modal-body { padding: 22px; max-height: 70vh; overflow-y: auto; }
.sf-modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 22px 18px; border-top: 1px solid rgba(255,255,255,.08);
}
.sf-modal-loading { display: flex; justify-content: center; padding: 32px; }
.sf-modal-spinner {
  width: 32px; height: 32px; border: 3px solid rgba(255,255,255,.15);
  border-top-color: var(--sf-accent); border-radius: 50%;
  animation: sf-spin 0.7s linear infinite;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

/* ── Forms ───────────────────────────────────────────────────── */
.sf-form { display: flex; flex-direction: column; gap: 16px; }
.sf-form-row { display: flex; gap: 14px; }
.sf-form-row .sf-field { flex: 1; }
.sf-field { display: flex; flex-direction: column; gap: 6px; }
.sf-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.sf-help { font-size: 12px; color: rgba(255,255,255,.45); margin: -2px 0 2px; line-height: 1.45; }
.sf-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; overflow: hidden; width: fit-content; }
.sf-toggle button {
  background: transparent; border: none; color: rgba(255,255,255,.6);
  padding: 8px 16px; font-size: 13px; font-family: inherit; cursor: pointer; transition: background .15s, color .15s;
}
.sf-toggle button + button { border-left: 1px solid rgba(255,255,255,.14); }
.sf-toggle button.active { background: var(--sf-accent); color: #fff; font-weight: 600; }
.sf-input, .sf-select, .sf-textarea {
  background: rgba(10,10,28,.75); border: 1px solid rgba(255,255,255,.18);
  border-radius: 9px; padding: 9px 13px; color: #fff; font-size: 13px; outline: none;
  transition: background .15s, border-color .15s; width: 100%; font-family: inherit;
}
.sf-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 36px;
}
.sf-input::placeholder, .sf-textarea::placeholder { color: rgba(255,255,255,.25); }
.sf-input:focus, .sf-select:focus, .sf-textarea:focus {
  background: rgba(255,255,255,.13); border-color: var(--sf-accent-5s);
  box-shadow: 0 0 0 3px var(--sf-accent-12);
}
.sf-select option { background: #1a1a2e; color: #fff; }
select.sf-input option { background: #1a1a2e; color: #fff; }
.sf-modal select option { background: #1a1a2e; color: #fff; }
.sf-main select option { background: #1a1a2e; color: #fff; }
.sf-textarea { resize: vertical; min-height: 80px; }
.sf-input.error, .sf-select.error { border-color: rgba(239,68,68,.6); }
.sf-field-error { font-size: 11px; color: #fca5a5; margin-top: 2px; }
.sf-form-divider { height: 1px; background: rgba(255,255,255,.08); margin: 4px 0; }
.sf-form-section-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-accent); margin-bottom: 4px; }

/* Switch toggle */
.sf-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.sf-switch input { display: none; }
.sf-switch-track {
  width: 40px; height: 22px; border-radius: 11px; background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2); position: relative; transition: background .2s;
  flex-shrink: 0;
}
.sf-switch input:checked ~ .sf-switch-track { background: rgba(var(--sf-accent-rgb), .5); border-color: var(--sf-accent); }
.sf-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .2s;
}
.sf-switch input:checked ~ .sf-switch-track .sf-switch-thumb { left: 20px; }
.sf-switch-label { font-size: 13px; color: rgba(255,255,255,.75); }

/* ── Skeleton loading ────────────────────────────────────────── */
.sf-skeleton-cell {
  height: 13px; border-radius: 6px; background: rgba(255,255,255,.12);
  animation: sf-skeleton 1.4s ease-in-out infinite;
}

/* ── Filter bar ──────────────────────────────────────────────── */
.sf-filter-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 20px 12px; border-bottom: 1px solid var(--sf-accent-12); flex-shrink: 0;
}
.sf-filter-label { font-size: 11px; color: rgba(255,255,255,.4); font-weight: 600; white-space: nowrap; }

/* ── Select lookup (entity search field) ─────────────────────── */
.sf-lookup-wrap { position: relative; }
.sf-lookup-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
  background: rgba(10,10,30,.97); border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; max-height: 200px; overflow-y: auto;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
.sf-lookup-item {
  padding: 9px 14px; font-size: 13px; color: rgba(255,255,255,.8);
  cursor: pointer; transition: background .1s;
}
.sf-lookup-item:hover { background: var(--sf-accent-12); color: #fff; }
.sf-lookup-item.selected { background: var(--sf-accent-18); }

/* ── Inline info section (right panel) ───────────────────────── */
.sf-right-info-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 8px; padding: 0 4px; }
.sf-right-info-text { font-size: 11px; color: rgba(255,255,255,.38); line-height: 1.8; padding: 0 4px; }
.sf-right-info-text b { color: rgba(255,255,255,.65); font-weight: 700; }

/* ── Home / Hub page cards ───────────────────────────────────── */
.sf-hub { padding: 32px 28px; min-height: 100%; }
.sf-hub-welcome { margin-bottom: 32px; }
.sf-hub-title { font-size: 28px; font-weight: 800; color: #fff; line-height: 1.2; }
.sf-hub-sub { font-size: 14px; color: rgba(255,255,255,.5); margin-top: 6px; }
.sf-module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.sf-module-card {
  background: rgba(10,10,25,.65); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.15); border-radius: 18px; padding: 24px 20px;
  cursor: pointer; transition: transform .2s, box-shadow .2s, border-color .2s;
  text-decoration: none; display: flex; flex-direction: column; gap: 12px;
}
.sf-module-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(0,0,0,.4); border-color: rgba(255,255,255,.28); }
.sf-module-icon {
  width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2); display: flex; align-items: center;
  justify-content: center; font-size: 22px;
}
.sf-module-name { font-size: 14px; font-weight: 700; color: #fff; }
.sf-module-desc { font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.5; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sf-right-panel { display: none; }
  .sf-main { padding-right: 24px; }
}
@media (max-width: 768px) {
  .sf-sidebar { width: 64px; }
  .sf-sidebar-nav { padding: 16px 0; border-radius: 0; }
  .sf-nav-item span { display: none; }
  .sf-topbar-center { display: none; }
}