/* ============================================================
   recursos.css — Entreredes Portal
   Portado del handoff de diseño + extensiones admin/forms
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --c-primary:     #008432;
  --c-primary-600: #006d28;
  --c-primary-50:  #e8f5ec;
  --c-secondary:   #A9C80A;
  --c-secondary-50:#f4f8da;
  --c-ink:         #151515;
  --c-ink-2:       #3a3d3a;
  --c-ink-3:       #6b6f6c;
  --c-ink-4:       #9aa09c;
  --c-line:        #e7eae6;
  --c-line-2:      #eef1ec;
  --c-bg:          #f6f7f4;
  --c-surface:     #ffffff;
  --c-surface-2:   #fbfbf8;
  --c-danger:      #d63031;
  --c-danger-50:   #fff0f0;
  --c-warning:     #e67e22;
  --c-warning-50:  #fff8f0;
  --c-success:     #008432;
  --c-success-50:  #e8f5ec;

  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;

  --shadow-sm: 0 1px 2px rgba(21,21,21,.04), 0 1px 1px rgba(21,21,21,.03);
  --shadow-md: 0 4px 12px rgba(21,21,21,.06), 0 1px 3px rgba(21,21,21,.04);
  --shadow-lg: 0 24px 60px -20px rgba(21,21,21,.18), 0 4px 14px rgba(21,21,21,.05);

  --side-w:          264px;
  --side-w-collapsed: 72px;
  --header-h:         64px;
  --dur: .22s;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; color: inherit; }
a { color: var(--c-primary); }
::selection { background: var(--c-secondary); color: var(--c-ink); }

/* ── App shell ───────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: var(--side-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  height: 100vh;
  transition: grid-template-columns var(--dur) ease;
}
.app.collapsed { grid-template-columns: var(--side-w-collapsed) 1fr; }

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  grid-row: 1 / span 2;
  grid-column: 1;
  background: var(--c-surface);
  border-right: 1px solid var(--c-line);
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative; z-index: 2;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  height: var(--header-h);
  padding: 0 18px;
  border-bottom: 1px solid var(--c-line);
  flex: 0 0 auto;
}
.sidebar-brand img { height: 32px; width: auto; display: block; flex: 0 0 auto; }
.sidebar-brand .wm {
  font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  display: flex; flex-direction: column; line-height: 1.1;
  white-space: nowrap; overflow: hidden;
  opacity: 1; transition: opacity var(--dur) ease;
}
.sidebar-brand .wm small {
  font-weight: 400; font-size: 11px; color: var(--c-ink-3);
  letter-spacing: .02em; margin-top: 2px;
}
.collapsed .sidebar-brand { padding: 0 20px; justify-content: center; }
.collapsed .sidebar-brand .wm { opacity: 0; width: 0; }

.nav-section {
  padding: 18px 12px 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-ink-4);
  white-space: nowrap; overflow: hidden;
  transition: opacity var(--dur) ease;
}
.collapsed .nav-section { opacity: 0; height: 18px; padding: 18px 0 0; }

.nav {
  list-style: none; margin: 0; padding: 6px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.nav.nav-main { flex: 0 0 auto; padding-bottom: 0; }
.nav.nav-apps { flex: 1 1 auto; overflow-y: auto; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 3px; }

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
  cursor: pointer;
  background: transparent; border: 0; width: 100%; text-align: left;
  font: inherit; font-size: 14px; font-weight: 500;
  position: relative;
  transition: background var(--dur) ease, color var(--dur) ease;
  text-decoration: none;
}
.nav-item:hover { background: var(--c-line-2); color: var(--c-ink); }
.nav-item .ico {
  width: 22px; height: 22px; flex: 0 0 22px;
  display: grid; place-items: center; color: var(--c-ink-3);
  transition: color var(--dur) ease;
}
.nav-item .lbl {
  flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--dur) ease;
}
.nav-item .badge {
  font-size: 10.5px; font-weight: 600;
  background: var(--c-secondary-50); color: #576b00;
  padding: 2px 7px; border-radius: 999px;
  transition: opacity var(--dur) ease;
}
.nav-item.active { background: var(--c-primary-50); color: var(--c-primary-600); }
.nav-item.active .ico { color: var(--c-primary); }
.nav-item.active::before {
  content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px;
  background: var(--c-primary); border-radius: 0 3px 3px 0;
}
.collapsed .nav { padding: 6px 12px; }
.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.collapsed .nav-item .lbl,
.collapsed .nav-item .badge { opacity: 0; width: 0; overflow: hidden; }
.collapsed .nav-item.active::before { left: -12px; }

/* Sidebar variants */
.sidebar.dark {
  background: #101110; border-right-color: #1f211f; color: #dcdfd9;
}
.sidebar.dark .sidebar-brand { border-color: #1f211f; }
.sidebar.dark .sidebar-brand .wm { color: #dcdfd9; }
.sidebar.dark .sidebar-brand .wm small { color: #9aa098; }
.sidebar.dark .nav-section { color: #7a7e78; }
.sidebar.dark .nav-item { color: #c5c9c1; }
.sidebar.dark .nav-item:hover { background: #1a1c1a; color: #fff; }
.sidebar.dark .nav-item .ico { color: #8e938b; }
.sidebar.dark .nav-item.active { background: rgba(0,132,50,.16); color: #cfe9b5; }
.sidebar.dark .nav-item.active .ico { color: var(--c-secondary); }
.sidebar.dark .nav-item.active::before { background: var(--c-secondary); }
.sidebar.dark .side-foot { border-color: #1f211f; color: #9aa098; }
.sidebar.dark .collapse-btn { background: #1a1c1a; border-color: #1f211f; color: #c5c9c1; }
.sidebar.dark .collapse-btn:hover { background: #22251f; color: #fff; }

.sidebar.green {
  background: linear-gradient(180deg, #006d28 0%, #008432 100%);
  border-right-color: transparent; color: #eaf6e0;
}
.sidebar.green .sidebar-brand { border-color: rgba(255,255,255,.12); }
.sidebar.green .sidebar-brand .wm { color: #fff; }
.sidebar.green .sidebar-brand .wm small { color: #cfe9b5; }
.sidebar.green .nav-section { color: rgba(255,255,255,.55); }
.sidebar.green .nav-item { color: #eaf6e0; }
.sidebar.green .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.sidebar.green .nav-item .ico { color: rgba(255,255,255,.7); }
.sidebar.green .nav-item.active { background: rgba(255,255,255,.14); color: #fff; }
.sidebar.green .nav-item.active .ico { color: var(--c-secondary); }
.sidebar.green .nav-item.active::before { background: var(--c-secondary); }
.sidebar.green .side-foot { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.65); }
.sidebar.green .collapse-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }
.sidebar.green .collapse-btn:hover { background: rgba(255,255,255,.16); }

.side-foot {
  border-top: 1px solid var(--c-line);
  padding: 12px;
  display: flex; align-items: center; gap: 10px;
  color: var(--c-ink-3); font-size: 12px;
  margin-top: auto;
}
.side-foot .v { flex: 1 1 auto; white-space: nowrap; overflow: hidden; transition: opacity var(--dur) ease; }
.collapsed .side-foot .v { opacity: 0; width: 0; }
.collapse-btn {
  appearance: none; border: 1px solid var(--c-line); background: var(--c-surface-2);
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  color: var(--c-ink-2); cursor: pointer; flex: 0 0 auto;
  transition: background var(--dur) ease;
}
.collapse-btn:hover { background: var(--c-line-2); }
.collapsed .collapse-btn svg { transform: rotate(180deg); }

/* ── Header ──────────────────────────────────────────────────── */
.header {
  grid-row: 1; grid-column: 2;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  display: flex; align-items: center;
  padding: 0 22px; gap: 18px;
  position: relative; z-index: 10;
}
.crumbs {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--c-ink-3); flex: 0 0 auto;
}
.crumbs .home {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--c-primary-50);
  display: grid; place-items: center; color: var(--c-primary);
}
.crumbs .sep { color: var(--c-ink-4); font-weight: 300; }
.crumbs .now { color: var(--c-ink); font-weight: 600; font-size: 15px; letter-spacing: -.005em; }
.crumbs .now .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: var(--c-primary); margin-right: 8px; vertical-align: middle;
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icon-btn {
  appearance: none; border: 0; background: transparent;
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: var(--c-ink-2); cursor: pointer;
  transition: background var(--dur);
}
.icon-btn:hover { background: var(--c-line-2); }
.avatar {
  margin-left: 6px;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
  position: relative;
}
.avatar:hover { background: #fff; border-color: #dde1d8; }
.avatar .ini {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-secondary) 120%);
  color: #fff; display: grid; place-items: center;
  font-weight: 600; font-size: 12.5px;
}
.avatar .meta { display: flex; flex-direction: column; line-height: 1.1; }
.avatar .meta b { font-size: 12.5px; font-weight: 600; }
.avatar .meta small { font-size: 10.5px; color: var(--c-ink-3); font-weight: 400; margin-top: 1px; }

/* Avatar dropdown */
.avatar-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  min-width: 180px; padding: 6px;
  z-index: 100;
}
.avatar-menu.open { display: block; }
.avatar-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--c-ink-2); text-decoration: none;
  transition: background var(--dur);
}
.avatar-menu a:hover { background: var(--c-line-2); color: var(--c-ink); }
.avatar-menu .sep-line { border: none; border-top: 1px solid var(--c-line); margin: 4px 0; }
.avatar-menu .danger { color: var(--c-danger); }
.avatar-menu .danger:hover { background: var(--c-danger-50); }

/* ── Main content area ───────────────────────────────────────── */
.main {
  grid-row: 2; grid-column: 2;
  overflow: auto;
  background:
    radial-gradient(1100px 480px at 12% -8%, rgba(0,132,50,.045), transparent 60%),
    radial-gradient(900px 380px at 100% 110%, rgba(169,200,10,.06), transparent 60%),
    var(--c-bg);
}
.page-content {
  padding: 28px 32px;
  max-width: 1200px;
}
.page-content.wide { max-width: 100%; }

/* ── Welcome screen ──────────────────────────────────────────── */
.welcome {
  min-height: 100%;
  display: grid; place-items: center;
  padding: 48px 32px;
}
.welcome-inner {
  max-width: 760px; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 28px;
}
.welcome-mark {
  position: relative; width: 200px; height: 200px;
  display: grid; place-items: center;
}
.welcome-mark .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(169,200,10,.18), transparent 70%),
    radial-gradient(closest-side, rgba(0,132,50,.10), transparent 75%);
  animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.06); opacity: 1; }
}
.welcome-mark img {
  position: relative; width: 160px; height: 160px; object-fit: contain;
  filter: drop-shadow(0 14px 30px rgba(0,132,50,.18));
}
.welcome h1 {
  margin: 0; font-size: 36px; font-weight: 600; letter-spacing: -.02em;
  color: var(--c-ink); text-wrap: balance;
}
.welcome h1 em { font-style: normal; color: var(--c-primary); }
.welcome p {
  margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-ink-3);
  max-width: 520px;
}
.quick { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.quick a, .quick button {
  appearance: none; border: 1px solid var(--c-line); background: var(--c-surface);
  padding: 9px 14px 9px 12px; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; color: var(--c-ink-2);
  text-decoration: none;
  transition: border-color var(--dur), background var(--dur), transform var(--dur);
}
.quick a:hover, .quick button:hover {
  border-color: var(--c-primary); background: #fff; transform: translateY(-1px);
}
.quick .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c-primary); }
.meta-row {
  display: flex; gap: 28px; color: var(--c-ink-4); font-size: 12px;
  border-top: 1px dashed var(--c-line); padding-top: 18px; width: 100%;
  justify-content: center; margin-top: 8px;
}
.meta-row span b { color: var(--c-ink-2); font-weight: 500; }

/* ── Login ───────────────────────────────────────────────────── */
.login {
  min-height: 100vh; display: grid; place-items: center;
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(0,132,50,.07), transparent 60%),
    radial-gradient(700px 400px at 90% 100%, rgba(169,200,10,.10), transparent 65%),
    var(--c-bg);
  padding: 32px;
}
.login-card {
  width: 100%; max-width: 420px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 36px 36px 32px;
  display: flex; flex-direction: column; gap: 22px;
}
.login-mark {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-bottom: 6px;
}
.login-mark img { width: 64px; height: 64px; object-fit: contain; }
.login-mark h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.login-mark small { font-size: 13px; color: var(--c-ink-3); }
.login-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: var(--c-ink-3);
}
.login-foot { text-align: center; font-size: 12px; color: var(--c-ink-4); }
.login-foot b { color: var(--c-ink-3); font-weight: 500; }

/* ── Forms ───────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 500; color: var(--c-ink-2); }
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  appearance: none; height: 44px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-surface-2);
  padding: 0 14px; font: 500 14px 'Outfit', sans-serif; color: var(--c-ink);
  transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
  outline: none; width: 100%;
}
.field textarea { height: auto; padding: 12px 14px; resize: vertical; }
.field select { 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='%236b6f6c' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--c-primary); background: #fff;
  box-shadow: 0 0 0 4px rgba(0,132,50,.10);
}
.field .input-wrap { position: relative; }
.field .input-wrap input { padding-right: 44px; }
.field .eye-btn {
  position: absolute; right: 0; top: 0; bottom: 0; width: 44px;
  background: none; border: none; cursor: pointer; display: grid; place-items: center;
  color: var(--c-ink-3);
}
.field-hint { font-size: 11.5px; color: var(--c-ink-4); margin-top: 2px; }
.field-error { font-size: 11.5px; color: var(--c-danger); margin-top: 2px; }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--c-ink-2); }
.check input { accent-color: var(--c-primary); width: 15px; height: 15px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .span-2 { grid-column: span 2; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: span 1; } }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  appearance: none; border: 0; cursor: pointer;
  height: 46px; border-radius: var(--r-sm);
  background: var(--c-primary); color: #fff;
  font: 600 14.5px 'Outfit', sans-serif; letter-spacing: .005em;
  box-shadow: 0 6px 18px -6px rgba(0,132,50,.45);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 22px;
  transition: background var(--dur), transform var(--dur), box-shadow var(--dur);
  text-decoration: none;
}
.btn-primary:hover { background: var(--c-primary-600); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  appearance: none; cursor: pointer;
  height: 46px; border-radius: var(--r-sm);
  background: var(--c-surface); border: 1px solid var(--c-line);
  color: var(--c-ink-2);
  font: 500 14px 'Outfit', sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px;
  transition: background var(--dur), border-color var(--dur);
  text-decoration: none;
}
.btn-secondary:hover { background: var(--c-line-2); border-color: #dde1d8; color: var(--c-ink); }

.btn-danger {
  appearance: none; border: 0; cursor: pointer;
  height: 38px; border-radius: var(--r-sm);
  background: var(--c-danger); color: #fff;
  font: 500 13.5px 'Outfit', sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 16px;
  transition: opacity var(--dur);
  text-decoration: none;
}
.btn-danger:hover { opacity: .88; }

.btn-sm {
  height: 34px; padding: 0 14px; font-size: 13px;
  border-radius: var(--r-sm);
}

.btn-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Flash messages ──────────────────────────────────────────── */
.flash {
  padding: 13px 16px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 500;
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 20px;
}
.flash.success { background: var(--c-success-50); color: #006d28; border: 1px solid #c3e6cb; }
.flash.error   { background: var(--c-danger-50);  color: #c0392b; border: 1px solid #f5c6cb; }
.flash.warning { background: var(--c-warning-50); color: #a04000; border: 1px solid #fad7a0; }
.flash.info    { background: var(--c-primary-50); color: var(--c-primary-600); border: 1px solid #b2dfdb; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 24px;
  box-shadow: var(--shadow-sm);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.card-title { font-size: 15px; font-weight: 600; margin: 0; color: var(--c-ink); }

/* Stats cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 20px;
  box-shadow: var(--shadow-sm);
}
.stat-card .stat-label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-4); margin-bottom: 8px; }
.stat-card .stat-value { font-size: 32px; font-weight: 700; color: var(--c-ink); line-height: 1; }
.stat-card .stat-sub   { font-size: 12px; color: var(--c-ink-3); margin-top: 6px; }

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table {
  width: 100%; border-collapse: collapse;
  font-size: 13.5px; color: var(--c-ink-2);
}
thead th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-ink-4); border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
tbody td {
  padding: 13px 14px; border-bottom: 1px solid var(--c-line-2);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--c-surface-2); }

/* ── Badges / role pills ─────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.pill-admin  { background: #ede9fe; color: #5b21b6; }
.pill-worker { background: var(--c-primary-50); color: var(--c-primary-600); }
.pill-client { background: var(--c-secondary-50); color: #576b00; }
.pill-active   { background: var(--c-success-50); color: var(--c-success); }
.pill-inactive { background: #f1f1f1; color: var(--c-ink-4); }

/* ── Toggle switch ───────────────────────────────────────────── */
.toggle {
  position: relative; display: inline-block;
  width: 40px; height: 22px; flex: 0 0 40px;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer;
  inset: 0; border-radius: 999px;
  background: #dde1d8;
  transition: background var(--dur);
}
.toggle-slider::before {
  content: ""; position: absolute;
  width: 16px; height: 16px; border-radius: 50%;
  left: 3px; bottom: 3px;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform var(--dur);
}
.toggle input:checked + .toggle-slider { background: var(--c-primary); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle input:disabled + .toggle-slider { opacity: .5; cursor: default; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; gap: 12px;
}
.toggle-row + .toggle-row { border-top: 1px solid var(--c-line); }
.toggle-row-label { font-size: 14px; color: var(--c-ink); line-height: 1.3; }
.toggle-row-label small { display: block; font-size: 12px; color: var(--c-ink-4); margin-top: 2px; }

/* ── Page header ─────────────────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-header h2 {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--c-ink);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--c-line); margin-bottom: 20px; }
.tab-btn {
  appearance: none; border: none; background: none; cursor: pointer;
  padding: 10px 16px; font: 500 13.5px 'Outfit', sans-serif; color: var(--c-ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur), border-color var(--dur);
}
.tab-btn:hover { color: var(--c-ink); }
.tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }

/* ── Permissions matrix ──────────────────────────────────────── */
.perms-table th, .perms-table td { text-align: center; }
.perms-table td:first-child, .perms-table th:first-child { text-align: left; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination { display: flex; gap: 6px; align-items: center; margin-top: 20px; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 500; text-decoration: none; color: var(--c-ink-2);
  border: 1px solid var(--c-line); background: var(--c-surface);
  transition: background var(--dur), border-color var(--dur);
}
.pagination a:hover { background: var(--c-line-2); border-color: #dde1d8; color: var(--c-ink); }
.pagination .current { background: var(--c-primary-50); border-color: var(--c-primary); color: var(--c-primary); font-weight: 600; }
.pagination .disabled { opacity: .4; pointer-events: none; }

/* ── Error pages (403, etc.) ─────────────────────────────────── */
.error-page {
  min-height: 100%; display: grid; place-items: center; padding: 48px 32px;
}
.error-page-inner { text-align: center; max-width: 400px; }
.error-page h1 { font-size: 64px; font-weight: 700; color: var(--c-line); margin: 0 0 8px; }
.error-page h2 { font-size: 22px; font-weight: 600; margin: 0 0 12px; }
.error-page p  { color: var(--c-ink-3); margin: 0 0 24px; }

/* ── Density variants ────────────────────────────────────────── */
.density-compact .nav-item { padding: 8px 12px; font-size: 13.5px; }
.density-compact .header   { padding: 0 18px; gap: 14px; --header-h: 56px; }
.density-compact .welcome h1 { font-size: 32px; }
.density-comfy .nav-item  { padding: 12px 12px; font-size: 14.5px; }
.density-comfy .welcome h1 { font-size: 40px; }

/* ── Utility ─────────────────────────────────────────────────── */
.text-muted  { color: var(--c-ink-3); }
.text-small  { font-size: 12px; }
.text-danger { color: var(--c-danger); }
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.flex  { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }

/* ── Modal system ─────────────────────────────────────────────────── */
#modal-root .modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}
#modal-root .modal-backdrop{position:absolute;inset:0;background:rgba(20,24,22,.55);backdrop-filter:blur(2px)}
#modal-root .modal-body{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:16px;max-width:460px;width:calc(100vw - 32px);max-height:calc(100vh - 64px);overflow:auto;box-shadow:0 30px 60px rgba(0,0,0,.2);font-family:inherit}
#modal-root .modal header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 10px;border-bottom:1px solid #eee}
#modal-root .modal header h2{font-size:16px;margin:0;font-weight:600}
#modal-root .modal header [data-close]{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:#888}
#modal-root .modal section{padding:16px 20px;font-size:14px;line-height:1.6}
#modal-root .modal footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px 18px;border-top:1px solid #eee}
#modal-root .modal .btn{font:500 13px/1 inherit;padding:8px 16px;border-radius:8px;cursor:pointer;border:1px solid transparent}
#modal-root .modal .btn.primary{background:#008432;color:#fff}
#modal-root .modal .btn.danger{background:#dc2626;color:#fff}
#modal-root .modal .btn:not(.primary):not(.danger){background:#fff;border-color:#dde1db;color:#222}
#modal-root .modal .btn:disabled{opacity:.4;cursor:not-allowed}
#modal-root .modal #admin-confirm-input{display:block;width:100%;margin-top:10px;padding:8px 12px;border:1px solid #dde1db;border-radius:8px;font:inherit;font-size:14px}
#modal-root .modal #admin-confirm-input:focus{outline:2px solid #008432;outline-offset:1px}