/* path: webmy-services/public/assets/css/custom.css */
/* WebMy Services — tema korporat (sama dengan frontend Astro): ungu diraja, aubergine, amber, grid lines.
   Font: Space Grotesk (tajuk), Plus Jakarta Sans (teks), JetBrains Mono (label & nombor). */

:root, [data-bs-theme="light"] {
  /* ---- token (ikut frontend/src/styles/global.css) ---- */
  --ws-bg:#faf7fc; --ws-surface:#ffffff; --ws-surface-raised:#f7f4fb; --ws-surface-hover:#f1eef6;
  --ws-border:#e6e2ee; --ws-border-strong:#c9c5d6;
  --ws-ink:#1c1a33; --ws-heading:#120f1d; --ws-ink-muted:#6b6680; --ws-ink-subtle:#736e87;
  --ws-brand:#5b1f86; --ws-brand-hover:#4c1973; --ws-brand-pressed:#3d1460; --ws-on-brand:#ffffff;
  --ws-brand-50:#f7f1fb; --ws-brand-100:#ede2f5; --ws-brand-200:#dcc6ec; --ws-brand-300:#bc9bd2; --ws-brand-500:#7a3aa8;
  --ws-brand-soft:#f3eafa;
  --ws-amber-400:#faba24; --ws-amber-500:#f6a924; --ws-amber-text:#9c5a00; --ws-amber-ink:#3b2600; --ws-amber-soft:#fdf1d6;
  --ws-rose:#ae4a50;
  --ws-dark:#1c1a33; --ws-dark-2:#2f1b4c; --ws-dark-ink:#c9c5d6;
  --ws-success:#0e7a4f; --ws-success-soft:#e8f5ee;
  --ws-warning:#9c5a00; --ws-warning-soft:#fdf1d6;
  --ws-danger:#b42318;  --ws-danger-soft:#fdecec; --ws-danger-solid:#b42318;
  --ws-info:#1d5fae;    --ws-info-soft:#e8f0fb;
  --ws-shadow-card:0 1px 2px rgba(28,26,51,.04), 0 8px 24px -12px rgba(28,26,51,.12);
  --ws-shadow-float:0 30px 80px -30px rgba(47,27,76,.45);
  --ws-shadow-primary:0 8px 20px -8px rgba(91,31,134,.6);
  --ws-font-display:"Space Grotesk",system-ui,sans-serif;
  --ws-font-sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ws-font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* ---- Bootstrap 5.3 ---- */
  --bs-body-bg:var(--ws-bg); --bs-body-bg-rgb:250,247,252;
  --bs-body-color:var(--ws-ink); --bs-body-color-rgb:28,26,51;
  --bs-body-font-family:var(--ws-font-sans); --bs-body-font-size:.9375rem; --bs-body-line-height:1.6;
  --bs-emphasis-color:var(--ws-heading); --bs-emphasis-color-rgb:18,15,29;
  --bs-secondary-color:var(--ws-ink-muted); --bs-secondary-color-rgb:107,102,128;
  --bs-tertiary-color:var(--ws-ink-subtle);
  --bs-secondary-bg:var(--ws-surface-raised); --bs-secondary-bg-rgb:247,244,251;
  --bs-tertiary-bg:var(--ws-surface-raised); --bs-tertiary-bg-rgb:247,244,251;
  --bs-border-color:var(--ws-border); --bs-border-color-translucent:var(--ws-border);
  --bs-heading-color:var(--ws-heading);
  --bs-link-color:var(--ws-brand); --bs-link-color-rgb:91,31,134;
  --bs-link-hover-color:var(--ws-brand-hover); --bs-link-hover-color-rgb:76,25,115;
  --bs-primary:#5b1f86; --bs-primary-rgb:91,31,134;
  --bs-secondary:#6b6680; --bs-secondary-rgb:107,102,128;
  --bs-success:#0e7a4f; --bs-success-rgb:14,122,79;
  --bs-warning:#9c5a00; --bs-warning-rgb:156,90,0;
  --bs-danger:#b42318; --bs-danger-rgb:180,35,24;
  --bs-info:#1d5fae; --bs-info-rgb:29,95,174;
  --bs-light:#f7f4fb; --bs-light-rgb:247,244,251;
  --bs-dark:#1c1a33; --bs-dark-rgb:28,26,51;
  --bs-border-radius:12px; --bs-border-radius-sm:8px; --bs-border-radius-lg:20px;
  --bs-focus-ring-color:rgba(91,31,134,.18);
  --bs-code-color:var(--ws-brand);
  --bs-form-invalid-color:var(--ws-danger); --bs-form-invalid-border-color:var(--ws-danger);
  color-scheme:light;
}

body { background:var(--ws-bg); color:var(--ws-ink); -webkit-font-smoothing:antialiased; }
a { text-decoration:none; }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family:var(--ws-font-display); font-weight:600; letter-spacing:-.02em; color:var(--ws-heading); }
h4 > i, h5 > i { color:var(--ws-brand); }
.fw-bold { font-weight:600 !important; }
hr { border-color:var(--ws-border); opacity:1; }
code { font-family:var(--ws-font-mono); }
::selection { background:var(--ws-brand-200); color:var(--ws-heading); }
:focus-visible { outline:2px solid var(--ws-brand-500); outline-offset:2px; }
.text-muted { color:var(--ws-ink-muted) !important; }
.text-dark { color:var(--ws-heading) !important; }
.text-primary { color:var(--ws-brand) !important; }
.bg-light { background-color:var(--ws-surface-raised) !important; }
dl dt { font-weight:500; color:var(--ws-ink-muted); font-size:.8125rem; }
dl dd { color:var(--ws-ink); font-size:.875rem; word-break:break-word; }

/* ---------- Shell: sidebar aubergine (macam mockup hero frontend) ---------- */
.sidebar {
  width:260px; min-height:100vh; position:fixed; top:0; left:0; z-index:10;
  color:#fff; display:flex; flex-direction:column; overflow:hidden;
  background:
    radial-gradient(70% 40% at 0% 0%, rgba(122,58,168,.45), transparent 70%),
    radial-gradient(60% 35% at 100% 100%, rgba(174,74,80,.28), transparent 70%),
    var(--ws-dark);
}
.sidebar::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
}
.sidebar > * { position:relative; }
.sidebar a { color:var(--ws-dark-ink); text-decoration:none; }
.sidebar .brand {
  display:flex; align-items:center; gap:.75rem; height:72px; padding:0 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .brand .fw-bold { font-family:var(--ws-font-display); font-size:1.05rem; line-height:1.2; letter-spacing:-.02em; color:#fff; }
.sidebar .brand .fw-bold span { color:var(--ws-brand-300); }
.sidebar .brand small { display:block; margin-top:2px; font:500 10px/14px var(--ws-font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ws-dark-ink) !important; }
.sidebar .nav-label { padding:1.25rem 1.25rem .25rem; font:500 10px/14px var(--ws-font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ws-dark-ink); }
.sidebar nav { padding:.5rem .75rem; display:flex; flex-direction:column; gap:.25rem; margin-top:0 !important; }
.sidebar .nav-link {
  display:flex; align-items:center; gap:.75rem; height:42px; padding:0 .75rem; margin:0;
  border-radius:10px; font-weight:500; font-size:.875rem; color:var(--ws-dark-ink);
  transition:background-color .15s, color .15s;
}
.sidebar .nav-link i { font-size:1.05rem; }
.sidebar .nav-link:hover { background:rgba(255,255,255,.06); color:#fff; }
.sidebar .nav-link.active { background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sidebar .nav-link.active i { color:var(--ws-amber-400); }
.sidebar hr { margin:.5rem .75rem; border-color:rgba(255,255,255,.1); }
.sidebar > .mt-auto { border-top:1px solid rgba(255,255,255,.08); font:400 12px/20px var(--ws-font-mono); color:var(--ws-dark-ink) !important; }
.sidebar > .mt-auto i { color:var(--ws-amber-400); }

/* Logo: WS mark putih atas plat ungu */
.ws-logo { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--ws-brand); box-shadow:var(--ws-shadow-primary); }
.ws-logo img { width:26px; height:auto; display:block; }

.content-wrapper { margin-left:260px; min-height:100vh; display:flex; flex-direction:column; }
.topbar { background:rgba(255,255,255,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--ws-border); position:sticky; top:0; z-index:5; }
.topbar > .container-fluid { height:72px; padding:0 1.75rem !important; }
.topbar .title { font:600 1.5rem/1.75rem var(--ws-font-display); letter-spacing:-.03em; color:var(--ws-heading); }
.topbar .who { font-size:.8125rem; color:var(--ws-ink-muted); }
.topbar .who strong { color:var(--ws-ink); font-weight:600; }

.page-container {
  flex:1; padding:1.75rem; position:relative;
  background:
    linear-gradient(to bottom, transparent 0, var(--ws-bg) 420px),
    linear-gradient(to right, rgba(28,26,51,.045) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(to bottom, rgba(28,26,51,.045) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(115deg, #feeae0 0%, #fdf2f4 45%, #eee5ff 100%) 0 0/100% 420px no-repeat;
}
.content-wrapper > footer { border-top:1px solid var(--ws-border); background:var(--ws-surface); color:var(--ws-ink-muted) !important; }
.content-wrapper > footer a { color:var(--ws-brand); font-weight:600; }

.section-kicker {
  display:flex; align-items:center; gap:.5rem; margin-bottom:1rem;
  font:500 11px/16px var(--ws-font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ws-ink-muted);
}
.section-kicker .dot { width:6px; height:6px; border-radius:50%; background:var(--ws-success); display:inline-block; }

.form-section-title {
  display:flex; align-items:center; gap:.5rem; margin:1.5rem 0 .75rem; padding:0; border:0;
  font:500 11px/16px var(--ws-font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ws-ink-muted);
}
.form-section-title::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--ws-success); flex:none; }
.form-section-title::after { content:""; flex:1; height:1px; background:var(--ws-border); }

/* ---------- Kad ---------- */
.card {
  --bs-card-bg:var(--ws-surface); --bs-card-border-color:var(--ws-border); --bs-card-cap-bg:transparent;
  --bs-card-border-radius:20px; --bs-card-inner-border-radius:19px; --bs-card-spacer-x:1.5rem; --bs-card-spacer-y:1.5rem;
  color:var(--ws-ink); box-shadow:var(--ws-shadow-card);
}
.sb-card, .login-card { border:1px solid var(--ws-border) !important; border-radius:20px; box-shadow:var(--ws-shadow-card); }
.card.border-warning { border-color:var(--ws-border) !important; }
.card h5 { font-size:1.125rem; line-height:1.5rem; }
.card h5 > i { color:var(--ws-brand); margin-right:.35rem; }
.card h5.text-warning > i { color:var(--ws-amber-text); }
.card h5.text-warning { color:var(--ws-heading) !important; }

/* KPI */
.sb-card .card-body > .d-flex > div > .small { font:500 11px/16px var(--ws-font-mono) !important; letter-spacing:.16em; text-transform:uppercase; margin-bottom:.5rem; color:var(--ws-ink-muted) !important; }
.sb-card .fs-3 { font:600 2.25rem/2.5rem var(--ws-font-display) !important; letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--ws-brand) !important; }
.sb-card .display-6 {
  display:grid; place-items:center; width:42px; height:42px; font-size:1.15rem; line-height:1;
  border-radius:12px; background:var(--ws-brand-50); box-shadow:inset 0 0 0 1px var(--ws-brand-100); color:var(--ws-brand) !important;
}
.sb-card .display-6.text-warning { background:var(--ws-amber-soft); box-shadow:none; color:var(--ws-amber-text) !important; }
/* Kad keuntungan = kad gelap aubergine (macam pricing "most popular") */
.sb-card:has(.display-6.text-danger) {
  border-color:transparent !important; box-shadow:var(--ws-shadow-float);
  background:radial-gradient(80% 90% at 0% 0%, rgba(122,58,168,.45), transparent 60%), radial-gradient(70% 80% at 100% 100%, rgba(174,74,80,.3), transparent 60%), var(--ws-dark) !important;
}
.sb-card:has(.display-6.text-danger) .small { color:var(--ws-dark-ink) !important; }
.sb-card:has(.display-6.text-danger) .fs-3 { color:#fff !important; }
.sb-card .display-6.text-danger { background:linear-gradient(90deg, var(--ws-amber-500), var(--ws-amber-400)); box-shadow:none; color:var(--ws-amber-ink) !important; }

/* ---------- Butang ---------- */
.btn {
  --bs-btn-font-weight:600; --bs-btn-font-size:.875rem; --bs-btn-border-radius:12px; --bs-btn-padding-x:1.1rem; --bs-btn-padding-y:.6rem; --bs-btn-line-height:1.25rem;
  --bs-btn-focus-box-shadow:0 0 0 4px var(--ws-brand-100);
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  transition:background-color .15s, box-shadow .15s, border-color .15s, color .15s, filter .15s;
}
.btn > i.me-1 { margin-right:0 !important; }
.btn-sm { --bs-btn-padding-x:.8rem; --bs-btn-padding-y:.35rem; --bs-btn-font-size:.8125rem; --bs-btn-border-radius:9px; }
.btn-lg { --bs-btn-padding-x:1.5rem; --bs-btn-padding-y:.85rem; --bs-btn-border-radius:14px; }
.btn:disabled, .btn.disabled { opacity:.5; }

.btn-primary {
  --bs-btn-color:#fff; --bs-btn-bg:var(--ws-brand); --bs-btn-border-color:var(--ws-brand);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--ws-brand-hover); --bs-btn-hover-border-color:var(--ws-brand-hover);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--ws-brand-pressed); --bs-btn-active-border-color:var(--ws-brand-pressed);
  --bs-btn-disabled-color:#fff; --bs-btn-disabled-bg:var(--ws-brand); --bs-btn-disabled-border-color:var(--ws-brand);
  box-shadow:var(--ws-shadow-primary);
}
/* Butang amber = satu tindakan utama sahaja (contoh: Simpan / Cetak) */
.btn-success, .btn-warning {
  --bs-btn-color:var(--ws-amber-ink); --bs-btn-bg:var(--ws-amber-500); --bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--ws-amber-ink); --bs-btn-hover-bg:var(--ws-amber-400); --bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:var(--ws-amber-ink); --bs-btn-active-bg:var(--ws-amber-500); --bs-btn-active-border-color:transparent;
  --bs-btn-disabled-color:var(--ws-amber-ink); --bs-btn-disabled-bg:var(--ws-amber-500); --bs-btn-disabled-border-color:transparent;
  background-image:linear-gradient(90deg, var(--ws-amber-500), var(--ws-amber-400));
  box-shadow:0 10px 24px -12px rgba(246,169,36,.9);
}
.btn-dark {
  --bs-btn-color:#fff; --bs-btn-bg:#120f1d; --bs-btn-border-color:#120f1d;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--ws-dark-2); --bs-btn-hover-border-color:var(--ws-dark-2);
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--ws-dark-2); --bs-btn-active-border-color:var(--ws-dark-2);
}
.btn-secondary, .btn-outline-primary, .btn-outline-secondary, .btn-outline-dark, .btn-outline-success, .btn-light {
  --bs-btn-color:var(--ws-ink); --bs-btn-bg:#fff; --bs-btn-border-color:var(--ws-border);
  --bs-btn-hover-color:var(--ws-heading); --bs-btn-hover-bg:var(--ws-surface-hover); --bs-btn-hover-border-color:var(--ws-border-strong);
  --bs-btn-active-color:var(--ws-heading); --bs-btn-active-bg:var(--ws-surface-hover); --bs-btn-active-border-color:var(--ws-border-strong);
  --bs-btn-disabled-color:var(--ws-ink-muted); --bs-btn-disabled-bg:#fff; --bs-btn-disabled-border-color:var(--ws-border);
}
.btn-outline-primary { --bs-btn-color:var(--ws-brand); --bs-btn-hover-color:var(--ws-brand-hover); --bs-btn-hover-bg:var(--ws-brand-50); --bs-btn-hover-border-color:var(--ws-brand-200); }
.btn-outline-success { --bs-btn-color:var(--ws-success); --bs-btn-hover-color:var(--ws-success); --bs-btn-hover-bg:var(--ws-success-soft); }
.btn-outline-danger {
  --bs-btn-color:var(--ws-danger); --bs-btn-bg:transparent; --bs-btn-border-color:transparent;
  --bs-btn-hover-color:var(--ws-danger); --bs-btn-hover-bg:var(--ws-danger-soft); --bs-btn-hover-border-color:transparent;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:var(--ws-danger-solid); --bs-btn-active-border-color:var(--ws-danger-solid);
}
.btn-danger {
  --bs-btn-color:#fff; --bs-btn-bg:var(--ws-danger-solid); --bs-btn-border-color:var(--ws-danger-solid);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#912018; --bs-btn-hover-border-color:#912018;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#912018; --bs-btn-active-border-color:#912018;
}
.btn-link { --bs-btn-color:var(--ws-brand); --bs-btn-hover-color:var(--ws-brand-hover); box-shadow:none; }
.repeater-actions .btn { min-width:2.2rem; }

/* ---------- Badge ---------- */
.badge {
  --bs-badge-font-size:.75rem; --bs-badge-font-weight:600; --bs-badge-padding-x:.625rem; --bs-badge-padding-y:.3rem; --bs-badge-border-radius:999px;
  display:inline-flex; align-items:center; gap:.375rem; line-height:1rem;
  background:var(--ws-surface-hover) !important; color:var(--ws-ink) !important;
}
.badge.bg-danger  { background:var(--ws-danger-soft) !important;  color:var(--ws-danger) !important; }
.badge.bg-warning { background:var(--ws-warning-soft) !important; color:var(--ws-warning) !important; }
.badge.bg-success { background:var(--ws-success-soft) !important; color:var(--ws-success) !important; }
.badge.bg-info    { background:var(--ws-info-soft) !important;    color:var(--ws-info) !important; }
.badge.bg-primary { background:var(--ws-brand-50) !important;     color:var(--ws-brand) !important; font-family:var(--ws-font-mono); box-shadow:inset 0 0 0 1px var(--ws-brand-100); }
.badge.bg-secondary { background:var(--ws-surface-hover) !important; color:var(--ws-ink-muted) !important; }
.badge.bg-dark { background:var(--ws-dark) !important; color:#fff !important; }
.badge.bg-danger::before, .badge.bg-warning::before, .badge.bg-success::before, .badge.bg-info::before {
  content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;
}
.blink-badge { animation:none; }
.blink-badge::before { animation:ws-pulse 1.2s ease-in-out infinite; }
@keyframes ws-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.7)} }
@media (prefers-reduced-motion:reduce) { .blink-badge::before { animation:none; } }

/* ---------- Alert ---------- */
.alert {
  --bs-alert-bg:#fff; --bs-alert-color:var(--ws-ink); --bs-alert-border-color:var(--ws-border);
  --bs-alert-border-radius:14px; --bs-alert-padding-x:1rem; --bs-alert-padding-y:.8rem; --bs-alert-link-color:var(--ws-brand);
  font-size:.875rem; box-shadow:var(--ws-shadow-card);
}
.alert-success { --bs-alert-bg:var(--ws-success-soft); --bs-alert-border-color:#c6e7d6; } .alert-success > i, .alert-success .bi { color:var(--ws-success); }
.alert-danger  { --bs-alert-bg:var(--ws-danger-soft);  --bs-alert-border-color:#f6cfcb; } .alert-danger > i,  .alert-danger .bi  { color:var(--ws-danger); }
.alert-warning { --bs-alert-bg:var(--ws-warning-soft); --bs-alert-border-color:#f5dca6; } .alert-warning > i, .alert-warning .bi { color:var(--ws-warning); }
.alert-info    { --bs-alert-bg:var(--ws-info-soft);    --bs-alert-border-color:#cddcf2; } .alert-info > i,    .alert-info .bi    { color:var(--ws-info); }
.alert-dismissible .btn-close { padding:1rem; }

/* ---------- Borang ---------- */
.form-label { font-size:.8125rem; font-weight:600; margin-bottom:.4rem; color:var(--ws-ink); }
.form-text { color:var(--ws-ink-muted); font-size:.75rem; }
.form-control, .form-select {
  min-height:42px; padding:.55rem .85rem; font-size:.875rem; line-height:1.25rem;
  background-color:#fff; border:1px solid var(--ws-border); border-radius:12px; color:var(--ws-ink);
  transition:border-color .15s, box-shadow .15s;
}
.form-control-sm, .form-select-sm { min-height:34px; padding:.3rem .6rem; font-size:.8125rem; border-radius:9px; }
.form-control::placeholder { color:var(--ws-ink-subtle); opacity:.85; }
.form-control:hover, .form-select:hover { border-color:var(--ws-border-strong); }
.form-control:focus, .form-select:focus { background-color:#fff; color:var(--ws-ink); border-color:var(--ws-brand-300); box-shadow:0 0 0 4px var(--ws-brand-100); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color:var(--ws-surface-raised); color:var(--ws-ink-muted); border-color:var(--ws-border); }
.form-control.is-invalid, .form-select.is-invalid { border-color:var(--ws-danger); }
.invalid-feedback { color:var(--ws-danger); }
.form-check-input { background-color:#fff; border-color:var(--ws-border-strong); }
.form-check-input:checked { background-color:var(--ws-brand); border-color:var(--ws-brand); }
.form-check-input:focus { border-color:var(--ws-brand-300); box-shadow:0 0 0 4px var(--ws-brand-100); }
.input-group-text { background:var(--ws-surface-raised); border-color:var(--ws-border); color:var(--ws-ink-muted); font-family:var(--ws-font-mono); font-size:.8125rem; }

/* ---------- Jadual ---------- */
.table {
  --bs-table-bg:transparent; --bs-table-color:var(--ws-ink); --bs-table-border-color:var(--ws-border);
  --bs-table-striped-bg:var(--ws-surface-raised); --bs-table-striped-color:var(--ws-ink);
  --bs-table-hover-bg:var(--ws-brand-50); --bs-table-hover-color:var(--ws-ink);
  font-size:.875rem; margin-bottom:0;
}
.table > :not(caption) > * > * { vertical-align:middle; padding:.85rem .75rem; }
.table-sm > :not(caption) > * > * { padding:.5rem .75rem; }
.table thead th {
  font:500 11px/16px var(--ws-font-mono); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap;
  color:var(--ws-ink-muted); background:var(--ws-surface-raised); border-bottom:1px solid var(--ws-border);
}
.table thead th:first-child { border-top-left-radius:10px; } .table thead th:last-child { border-top-right-radius:10px; }
.table-light { --bs-table-bg:var(--ws-surface-raised); --bs-table-color:var(--ws-ink-muted); --bs-table-border-color:var(--ws-border); }
.table tbody tr:hover > * { background:var(--ws-brand-50); }
.table tbody tr:last-child > * { border-bottom-color:transparent; }
.table-bordered tbody tr:last-child > * { border-bottom-color:var(--ws-border); }
.table .fw-semibold { font-weight:600 !important; color:var(--ws-heading); }
.table small { font-size:.75rem; }

/* ---------- Pagination ---------- */
.pagination {
  --bs-pagination-bg:transparent; --bs-pagination-color:var(--ws-ink-muted); --bs-pagination-border-color:transparent; --bs-pagination-border-radius:8px;
  --bs-pagination-hover-bg:var(--ws-surface-hover); --bs-pagination-hover-color:var(--ws-heading); --bs-pagination-hover-border-color:transparent;
  --bs-pagination-focus-bg:var(--ws-surface-hover); --bs-pagination-focus-color:var(--ws-heading); --bs-pagination-focus-box-shadow:0 0 0 3px var(--ws-brand-100);
  --bs-pagination-active-bg:var(--ws-brand); --bs-pagination-active-color:#fff; --bs-pagination-active-border-color:var(--ws-brand);
  --bs-pagination-disabled-bg:transparent; --bs-pagination-disabled-color:var(--ws-border-strong); --bs-pagination-disabled-border-color:transparent;
  --bs-pagination-font-size:.8125rem; gap:.25rem;
}
.page-link { border-radius:8px !important; font-family:var(--ws-font-mono); font-weight:500; min-width:34px; text-align:center; }

/* ---------- Modal + list ---------- */
.modal { --bs-modal-bg:#fff; --bs-modal-color:var(--ws-ink); --bs-modal-border-color:transparent; --bs-modal-border-radius:24px; --bs-modal-inner-border-radius:23px;
  --bs-modal-header-border-color:transparent; --bs-modal-footer-border-color:var(--ws-border); --bs-modal-box-shadow:var(--ws-shadow-float); --bs-modal-padding:1.5rem; --bs-modal-header-padding:1.5rem 1.5rem .75rem; }
.modal-content { box-shadow:var(--ws-shadow-float); }
.modal-backdrop { --bs-backdrop-bg:#120f1d; --bs-backdrop-opacity:.55; }
.modal-header.bg-danger { background:transparent !important; color:var(--ws-heading) !important; }
.modal-header.bg-danger .modal-title { display:flex; align-items:center; gap:.75rem; font-size:1.125rem; }
.modal-header.bg-danger .modal-title > i { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:var(--ws-danger-soft); color:var(--ws-danger); font-size:1.1rem; }
.modal-header .btn-close { filter:none; }
.modal-body { color:var(--ws-ink-muted); font-size:.875rem; }
.modal-body strong, .modal-body .fw-semibold, .modal-body .fw-bold { color:var(--ws-heading); }
.list-group { --bs-list-group-bg:#fff; --bs-list-group-color:var(--ws-ink); --bs-list-group-border-color:var(--ws-border); --bs-list-group-border-radius:14px; }

/* ---------- Log masuk ---------- */
body.ws-login {
  min-height:100vh; display:flex; align-items:center;
  background:
    linear-gradient(to right, rgba(28,26,51,.05) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(to bottom, rgba(28,26,51,.05) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(115deg, #feeae0 0%, #fdf2f4 45%, #eee5ff 100%);
}
.ws-login .login-card { box-shadow:var(--ws-shadow-float); border-color:transparent !important; border-radius:28px; }
.ws-login .brand { display:flex; align-items:center; gap:.75rem; }
.ws-login .brand .fw-bold { font:600 1.35rem/1.5rem var(--ws-font-display); letter-spacing:-.02em; color:var(--ws-heading); }
.ws-login .brand .fw-bold span { color:var(--ws-brand); }
.ws-login .brand small { display:block; font:500 10px/14px var(--ws-font-mono); letter-spacing:.18em; text-transform:uppercase; }
.ws-login .ws-logo { width:48px; height:48px; border-radius:14px; }
.ws-login .ws-logo img { width:31px; }
.ws-login .login-title { margin:1.75rem 0 .25rem; font:600 2rem/1.1 var(--ws-font-display); letter-spacing:-.035em; }
.ws-login .login-title em { font-style:normal; background:linear-gradient(95deg,#5b1f86,#7a3aa8 45%,#ae4a50); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ws-login .btn-primary { --bs-btn-padding-y:.85rem; }
.ws-login .input-group .btn { border-top-left-radius:0; border-bottom-left-radius:0; }

/* ---------- Mudah alih ---------- */
@media (max-width: 991.98px) {
  .sidebar { position:static; width:100%; min-height:0; }
  .sidebar nav { flex-direction:row; flex-wrap:wrap; }
  .sidebar hr, .sidebar > .mt-auto, .sidebar .nav-label { display:none; }
  .content-wrapper { margin-left:0; }
  .topbar { position:static; }
  .topbar > .container-fluid { padding:0 1rem !important; }
  .page-container { padding:1rem; }
}