/* ─────────────────────────────────────────────────────────────────────────────
 * AlephERP Licensing — design tokens & components
 *
 * Mirrors the Material Design 3 palette + visual language used by erp-frontend
 * (https://erp-ale.alephtechjsc.com). Built without Tailwind so it sits cleanly
 * on top of Bootstrap 5 (still used for modal behaviour + grid). Where Bootstrap
 * default styles disagree with the design system we override them here.
 * ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* === Material 3 token palette (synced with erp-frontend/globals.css) === */
  --color-primary: #005db5;
  --color-primary-dim: #0052a0;
  --color-primary-fixed: #d6e3ff;
  --color-primary-fixed-dim: #bfd5ff;
  --color-primary-container: #d6e3ff;
  --color-on-primary: #f6f7ff;
  --color-on-primary-container: #00519e;
  --color-on-primary-fixed: #003f7d;

  --color-secondary: #526074;
  --color-secondary-dim: #465468;
  --color-secondary-fixed: #d5e3fc;
  --color-secondary-container: #d5e3fc;
  --color-on-secondary: #f8f8ff;
  --color-on-secondary-fixed: #324053;
  --color-on-secondary-fixed-variant: #4e5c71;

  --color-tertiary: #5d5c78;
  --color-tertiary-dim: #51516c;
  --color-tertiary-container: #d9d7f8;

  --color-background: #f6fafe;
  --color-surface: #f6fafe;
  --color-surface-bright: #f6fafe;
  --color-surface-dim: #cadde9;
  --color-surface-variant: #d5e5ef;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eef4fa;
  --color-surface-container: #e5eff7;
  --color-surface-container-high: #ddeaf3;
  --color-surface-container-highest: #d5e5ef;

  --color-on-background: #26343d;
  --color-on-surface: #26343d;
  --color-on-surface-variant: #52616a;
  --color-outline: #6e7d86;
  --color-outline-variant: #a4b4be;

  --color-success: #1a7a4c;
  --color-success-container: #a8f0c6;
  --color-error: #9f403d;
  --color-error-container: #fe8983;
  --color-warning: #b25e09;
  --color-warning-container: #ffd9b5;

  --font-headline: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --shadow-architectural: 0 20px 40px -10px rgba(38, 52, 61, 0.06);
  --shadow-card: 0 1px 3px rgba(38, 52, 61, 0.04), 0 1px 2px rgba(38, 52, 61, 0.04);
  --shadow-elevated: 0 8px 24px -8px rgba(38, 52, 61, 0.12);
  --shadow-primary-glow: 0 8px 20px -4px rgba(0, 93, 181, 0.25);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
}

/* === Base typography ====================================================== */
html, body {
  background: var(--color-background);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-headline); font-weight: 700; color: var(--color-on-surface); }
.alp-headline { font-family: var(--font-headline); font-weight: 700; }
.alp-text-muted { color: var(--color-on-surface-variant); }
.alp-text-secondary { color: var(--color-secondary); }
.alp-text-primary { color: var(--color-primary); }
::selection { background: var(--color-primary-fixed); color: var(--color-on-primary-fixed); }

a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dim); text-decoration: underline; }

/* Material Symbols sizing helpers */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  font-size: 20px;
}
.material-symbols-outlined.sm { font-size: 16px; }
.material-symbols-outlined.lg { font-size: 24px; }
.material-symbols-outlined.xl { font-size: 32px; }

/* === Shell: topbar + sidebar + main ======================================= */
.alp-shell { display: flex; min-height: 100vh; }
.alp-shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Sidebar */
.alp-sidebar {
  width: 256px;
  flex-shrink: 0;
  background: var(--color-surface-container);
  border-right: 1px solid var(--color-outline-variant);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: width .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.alp-sidebar.collapsed { width: 72px; }

.alp-sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px 16px;
  gap: 8px;
}
.alp-sidebar.collapsed .alp-sidebar-head { padding: 16px 8px 12px 8px; flex-direction: column; }

.alp-sidebar-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none;
  color: var(--color-primary);
  flex: 1; min-width: 0;
}
.alp-sidebar-brand:hover { color: var(--color-primary); text-decoration: none; }
.alp-sidebar-brand img { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.alp-sidebar-brand .text { display: flex; flex-direction: column; min-width: 0; }
.alp-sidebar-brand .name { font-family: var(--font-headline); font-weight: 800; font-size: 18px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alp-sidebar-brand .sub { display: block; font-size: 10px; font-weight: 600; color: var(--color-secondary); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; }
.alp-sidebar.collapsed .alp-sidebar-brand .text { display: none; }
.alp-sidebar.collapsed .alp-sidebar-brand { justify-content: center; }

.alp-sidebar-toggle {
  border: none;
  background: transparent;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--color-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s ease, color .15s ease;
}
.alp-sidebar-toggle:hover { background: var(--color-surface-variant); color: var(--color-primary); }

/* Hide text labels when collapsed; nav items become icon-only and centered */
.alp-sidebar.collapsed .alp-nav-item span:not(.material-symbols-outlined) { display: none; }
.alp-sidebar.collapsed .alp-nav-item { justify-content: center; padding: 10px 0; }
.alp-sidebar.collapsed .alp-nav-section-label { display: none; }
.alp-sidebar.collapsed .alp-sidebar-nav { padding: 4px 8px; }
.alp-sidebar.collapsed .alp-sidebar-footer { padding: 12px 8px; }

.alp-sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 12px; display: flex; flex-direction: column; gap: 2px; }
.alp-sidebar-nav::-webkit-scrollbar { width: 4px; }
.alp-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.alp-sidebar-nav::-webkit-scrollbar-thumb { background: var(--color-outline-variant); border-radius: 4px; }

.alp-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-secondary);
  font-weight: 500;
  font-size: 13px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.alp-nav-item:hover { background: rgba(213, 229, 239, .6); color: var(--color-on-surface); text-decoration: none; }
.alp-nav-item.active {
  background: var(--color-surface-container-lowest);
  color: var(--color-primary);
  font-weight: 700;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-lg);
}
.alp-nav-item .material-symbols-outlined { font-size: 20px; }

.alp-nav-section-label {
  padding: 16px 12px 6px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-secondary);
}

.alp-sidebar-footer { padding: 16px; border-top: 1px solid var(--color-outline-variant); }
.alp-sidebar-footer .signout-form { margin: 0; }

/* Topbar */
.alp-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-outline-variant);
  box-shadow: 0 1px 0 rgba(38, 52, 61, .03);
}
.alp-topbar-page-title { flex: 1; font-family: var(--font-headline); font-weight: 700; font-size: 17px; color: var(--color-on-surface); }
.alp-topbar-actions { display: flex; align-items: center; gap: 8px; }

.alp-icon-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--color-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.alp-icon-btn:hover { background: var(--color-surface-container-low); color: var(--color-primary); }

.alp-user-wrap { position: relative; }
.alp-user-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface);
  transition: background-color .15s ease;
}
.alp-user-pill:hover { background: var(--color-surface-container-low); }
.alp-user-pill .avatar {
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--color-primary-container);
  color: var(--color-primary);
  font-weight: 700; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  text-transform: uppercase;
}
.alp-user-pill .who { line-height: 1.1; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.alp-user-pill .who .name { font-size: 13px; font-weight: 700; }
.alp-user-pill .who .role { font-size: 10px; color: var(--color-secondary); text-transform: uppercase; letter-spacing: .06em; }
.alp-user-pill .chev { color: var(--color-secondary); font-size: 18px; }

/* Avatar dropdown menu */
.alp-user-menu {
  position: absolute;
  right: 0; top: calc(100% + 8px);
  min-width: 280px;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-architectural);
  overflow: hidden;
  z-index: 60;
  display: none;
}
.alp-user-wrap.open .alp-user-menu { display: block; animation: alpFadeDown .15s ease-out; }
@keyframes alpFadeDown {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alp-user-menu-header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dim));
  color: #fff;
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
}
.alp-user-menu-header .avatar-lg {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; text-transform: uppercase;
}
.alp-user-menu-header .name { font-weight: 700; font-size: 14px; line-height: 1.2; }
.alp-user-menu-header .meta { font-size: 11px; opacity: .8; }
.alp-user-menu ul { list-style: none; margin: 0; padding: 6px 0; }
.alp-user-menu a, .alp-user-menu button {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--color-on-surface);
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.alp-user-menu a:hover, .alp-user-menu button:hover { background: var(--color-surface-container-low); color: var(--color-primary); text-decoration: none; }
.alp-user-menu .alp-user-menu-divider { height: 1px; background: var(--color-outline-variant); margin: 4px 0; opacity: .4; }
.alp-user-menu .danger { color: var(--color-error); }
.alp-user-menu .danger:hover { background: var(--color-error-container); color: #5a1815; }

/* Main content area */
.alp-main { padding: 24px 28px 40px 28px; flex: 1; }
.alp-page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.alp-page-title-row h1 { font-size: 22px; margin: 0; }
.alp-breadcrumbs { font-size: 12px; color: var(--color-secondary); }
.alp-breadcrumbs a { color: var(--color-secondary); }
.alp-breadcrumbs a:hover { color: var(--color-primary); }

/* === Cards ================================================================= */
.alp-card {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-architectural);
  padding: 24px;
}
.alp-card + .alp-card { margin-top: 16px; }
.alp-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.alp-card-header h2, .alp-card-header h3 { margin: 0; font-size: 16px; color: var(--color-on-surface); }

/* === Buttons (override Bootstrap .btn) ==================================== */
.btn, .alp-btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--radius-md);
  padding: 8px 16px;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
  text-decoration: none;
}
.btn:focus, .alp-btn:focus { box-shadow: 0 0 0 3px rgba(0, 93, 181, .2); outline: none; }
.btn:active, .alp-btn:active { transform: translateY(1px); }

/* Primary — solid blue with gradient + glow */
.btn-aleph, .btn-primary, .alp-btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dim) 100%);
  color: var(--color-on-primary);
  border-color: transparent;
  box-shadow: var(--shadow-primary-glow);
}
.btn-aleph:hover, .btn-primary:hover, .alp-btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-dim) 0%, var(--color-primary) 100%);
  color: var(--color-on-primary);
  box-shadow: 0 10px 24px -6px rgba(0, 93, 181, .35);
}

/* Outline */
.btn-outline-primary, .alp-btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-outline-variant);
}
.btn-outline-primary:hover, .alp-btn-outline:hover {
  background: var(--color-primary-container);
  border-color: var(--color-primary-fixed);
  color: var(--color-on-primary-container);
}

/* Subtle */
.btn-outline-secondary, .alp-btn-subtle {
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
  border-color: transparent;
}
.btn-outline-secondary:hover, .alp-btn-subtle:hover {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}

/* Danger */
.btn-danger, .alp-btn-danger {
  background: var(--color-error);
  color: #fff;
  border-color: transparent;
}
.btn-danger:hover, .alp-btn-danger:hover { background: #87302d; color: #fff; }
.btn-outline-danger {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-error-container);
}
.btn-outline-danger:hover { background: var(--color-error); color: #fff; border-color: var(--color-error); }

.btn-link { color: var(--color-primary); padding: 8px 12px; }
.btn-link:hover { color: var(--color-primary-dim); }

/* === Forms (override Bootstrap .form-control / .form-select) ============= */
.form-control, .form-select, .alp-input {
  font-family: var(--font-body);
  font-size: 13px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus, .alp-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 93, 181, .15);
  outline: none;
}
.form-label { font-weight: 600; font-size: 12px; color: var(--color-on-surface); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .03em; }
.form-text { font-size: 11px; color: var(--color-secondary); }
.form-check-input { border: 1px solid var(--color-outline-variant); }
.form-check-input:checked { background-color: var(--color-primary); border-color: var(--color-primary); }
.form-check-label { font-size: 13px; }

/* === Tables (override Bootstrap .table) =================================== */
.table, .alp-table {
  font-size: 13px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.table thead th, .alp-table thead th {
  background: var(--color-surface-container-low);
  color: var(--color-secondary);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--color-outline-variant);
  padding: 12px 14px;
  text-align: left;
}
.table tbody td, .alp-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(164, 180, 190, .25);
  color: var(--color-on-surface);
  vertical-align: middle;
}
.table tbody tr:hover, .alp-table tbody tr:hover { background: var(--color-surface-container-low); }
.table tbody tr:last-child td, .alp-table tbody tr:last-child td { border-bottom: none; }
.alp-table-empty { text-align: center; color: var(--color-secondary); padding: 32px 16px; }

/* === Badges / pills (status chips) ======================================== */
.alp-pill, .badge, .alp-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--color-surface-container-high);
  color: var(--color-on-surface);
}
.alp-pill-active   { background: var(--color-success-container); color: #0d4e2f; }
.alp-pill-warn     { background: var(--color-warning-container); color: #6a3a05; }
.alp-pill-danger   { background: var(--color-error-container); color: #5a1815; }
.alp-pill-info     { background: var(--color-primary-fixed); color: var(--color-on-primary-container); }
.alp-pill-muted    { background: var(--color-surface-container-high); color: var(--color-secondary); }

/* === KPI / stat cards ===================================================== */
.alp-stat {
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  box-shadow: var(--shadow-architectural);
  display: flex; align-items: center; gap: 16px;
}
.alp-stat .icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--color-primary-fixed);
  color: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.alp-stat .icon .material-symbols-outlined { font-size: 26px; }
.alp-stat .label { font-size: 11px; color: var(--color-secondary); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.alp-stat .value { font-family: var(--font-headline); font-size: 26px; font-weight: 800; color: var(--color-on-surface); line-height: 1.1; }

/* === Alerts =============================================================== */
.alert {
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 13px;
  padding: 10px 14px;
}
.alert-success { background: var(--color-success-container); color: #0d4e2f; border-color: rgba(13, 78, 47, .15); }
.alert-danger  { background: var(--color-error-container); color: #5a1815; border-color: rgba(90, 24, 21, .2); }
.alert-warning { background: var(--color-warning-container); color: #6a3a05; border-color: rgba(106, 58, 5, .2); }
.alert-info    { background: var(--color-primary-fixed); color: var(--color-on-primary-container); border-color: rgba(0, 81, 158, .15); }

/* === Login screen ========================================================= */
.alp-login-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 93, 181, .12) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(93, 92, 120, .08) 0%, transparent 60%),
    var(--color-background);
  padding: 24px;
}
.alp-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface-container-lowest);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-architectural);
  padding: 36px 36px 32px 36px;
}
.alp-login-brand { text-align: center; margin-bottom: 24px; }
.alp-login-logo { width: 96px; height: 96px; object-fit: contain; }
.alp-login-brand h4 { font-family: var(--font-headline); font-weight: 800; font-size: 20px; color: var(--color-on-surface); margin-top: 12px; margin-bottom: 4px; }
.alp-login-brand .sub { font-size: 12px; color: var(--color-secondary); }
.alp-login-input-group { position: relative; }
.alp-login-input-group > .material-symbols-outlined { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--color-outline); pointer-events: none; }
.alp-login-input-group .form-control { padding-left: 42px; }
.alp-login-input-group .form-control[type="password"],
.alp-login-input-group.has-eye .form-control { padding-right: 42px; }

/* Password visibility toggle (used on login + change-password) */
.alp-password-wrap { position: relative; }
.alp-password-wrap .form-control { padding-right: 42px; }
.alp-password-eye {
  position: absolute;
  right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-outline);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.alp-password-eye:hover { background: var(--color-surface-container-low); color: var(--color-primary); }
.alp-password-eye:focus { outline: none; box-shadow: 0 0 0 2px rgba(0, 93, 181, .25); }

/* === Modal polish (Bootstrap modal stays for behaviour) =================== */
.modal-content {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-architectural);
}
.modal-header { border-bottom: 1px solid var(--color-outline-variant); padding: 16px 20px; }
.modal-title { font-family: var(--font-headline); font-weight: 700; font-size: 16px; }
.modal-body { padding: 20px; }
.modal-footer { border-top: 1px solid var(--color-outline-variant); padding: 12px 20px; gap: 8px; }

/* === Definition lists used on detail pages ================================ */
dl.alp-dl, .alp-card dl.row {
  font-size: 13px;
  margin-bottom: 0;
}
dl.alp-dl dt, .alp-card dl.row dt {
  font-weight: 600;
  color: var(--color-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 0;
}
dl.alp-dl dd, .alp-card dl.row dd {
  color: var(--color-on-surface);
  padding: 8px 0;
  margin-bottom: 0;
}
dl.alp-dl dd + dt, .alp-card dl.row dd + dt { border-top: 1px solid rgba(164, 180, 190, .25); }
dl.alp-dl dt + dd, .alp-card dl.row dt + dd { border-top: 1px solid rgba(164, 180, 190, .25); }

/* === Monospace key display ================================================ */
.alp-key-mono {
  font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  letter-spacing: .03em;
  font-size: 13px;
}

/* === Utility helpers ====================================================== */
.alp-flex { display: flex; align-items: center; gap: 8px; }
.alp-flex-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.alp-gap-2 { gap: 8px; }
.alp-gap-3 { gap: 12px; }
.alp-mt-3 { margin-top: 12px; }
.alp-divider { height: 1px; background: var(--color-outline-variant); margin: 16px 0; opacity: .5; }