/* ==========================================================================
   AttendFlow — application theme

   1. Tokens (light + dark)
   2. Base
   3. App shell
   4. Components
   5. Public check-in
   6. Auth screens
   7. Landing
   8. Third-party overrides
   9. Responsive / print / motion

   Theming: every colour is a custom property declared once for light and
   re-declared under [data-theme="dark"]. Nothing hard-codes a hex outside
   section 1, so dark mode needs no per-component work and cannot drift.

   White-label: --brand and --brand-2 are overridden inline per organization,
   so a tenant's colours flow through every accent without a second stylesheet.
   ========================================================================== */

/* ─────────────────────────── 1. Tokens — light ────────────────────────── */

:root,
[data-theme="light"] {
  --brand:        #4f46e5;
  --brand-2:      #7c3aed;
  --brand-soft:   #eef2ff;

  --bg:           #f7f8fc;
  --surface:      #ffffff;
  --surface-2:    #f9fafb;
  --sidebar:      #0f1729;
  --sidebar-hover:#1c2740;
  --sidebar-text: #94a3b8;

  --ink:          #0f172a;
  --ink-2:        #334155;
  --muted:        #64748b;

  --line:         #e5e7eb;
  --line-2:       #d1d5db;

  --success:      #059669;
  --warning:      #d97706;
  --danger:       #dc2626;
  --info:         #0284c7;

  --shadow-xs:    0 1px 2px rgba(15,23,42,.06);
  --shadow-sm:    0 1px 3px rgba(15,23,42,.09), 0 1px 2px rgba(15,23,42,.06);
  --shadow:       0 4px 12px -2px rgba(15,23,42,.10), 0 2px 6px -2px rgba(15,23,42,.06);
  --shadow-lg:    0 20px 40px -12px rgba(15,23,42,.18);

  --radius:       14px;
  --radius-sm:    10px;
  --sidebar-w:    252px;
  --topbar-h:     62px;

  --bs-primary:     #4f46e5;
  --bs-primary-rgb: 79,70,229;
  --bs-body-color:  #0f172a;
  --bs-body-bg:     #f7f8fc;
  --bs-border-color:#e5e7eb;

  color-scheme: light;
}

/* ─────────────────────────── 1b. Tokens — dark ────────────────────────────
   Not an inversion: surfaces are desaturated navy so the brand still reads,
   and text sits near #e2e8f0 rather than pure white to cut halation. */

[data-theme="dark"] {
  --brand:        #6366f1;
  --brand-2:      #8b5cf6;
  --brand-soft:   #1e1b4b;

  --bg:           #0b1120;
  --surface:      #131c31;
  --surface-2:    #1a2540;
  --sidebar:      #080d19;
  --sidebar-hover:#161f36;
  --sidebar-text: #94a3b8;

  --ink:          #e2e8f0;
  --ink-2:        #cbd5e1;
  --muted:        #94a3b8;

  --line:         #243049;
  --line-2:       #2f3d5c;

  --success:      #34d399;
  --warning:      #fbbf24;
  --danger:       #f87171;
  --info:         #38bdf8;

  --shadow-xs:    0 1px 2px rgba(0,0,0,.30);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.36);
  --shadow:       0 4px 14px rgba(0,0,0,.42);
  --shadow-lg:    0 20px 44px rgba(0,0,0,.55);

  --bs-body-color:  #e2e8f0;
  --bs-body-bg:     #0b1120;
  --bs-border-color:#243049;

  color-scheme: dark;
}

/* ─────────────────────────────── 2. Base ──────────────────────────────── */

* { box-sizing: border-box; }

/* Fluid root.
   Every font-size in this file is expressed in rem, so this single rule sets
   the scale of the whole interface. Previously everything was fixed px, which
   is why the UI looked correct on a laptop and shrank into the corner of a
   large or high-resolution display — the pixels got smaller, the type did not.
   Floor 16px keeps phones exactly where they were; the ceiling stops a very
   wide monitor turning the app cartoonishly large. */
html {
  font-size: clamp(16px, 0.34vw + 14.4px, 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.9375rem;          /* 15px at the 16px floor, 18.75px at the cap */
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  /* Only colours transition — animating "all" makes the sidebar and every
     chart jank on theme switch. */
  transition: background-color .2s ease, color .2s ease;
}

a { text-decoration: none; color: var(--brand); }
a:hover { color: var(--brand-2); }

h1,h2,h3,h4,h5,h6 { font-weight: 700; letter-spacing: -.02em; color: var(--ink); }

::selection { background: var(--brand); color: #fff; }

.text-muted { color: var(--muted) !important; }

/* Scrollbars, so dark mode has no bright gutter. */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ──────────────────────────── 3. App shell ────────────────────────────── */

.af-topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1040;
  display: flex; align-items: center;
  padding: 0 18px;
}

.af-brand { display: flex; align-items: center; gap: 10px; }
.af-brand-mark {
  width: 2.125rem; height: 2.125rem; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-size: 1.0625rem; flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(79,70,229,.32);
}
.af-brand-name { font-weight: 800; font-size: 1.0313rem; color: var(--ink); letter-spacing: -.03em; }

.af-shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.af-sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--sidebar);
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 14px 0;
  z-index: 1030;
}
.af-nav-label {
  color: #64748b; font-size: 0.6563rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 14px 20px 6px;
}
.af-nav { list-style: none; margin: 0; padding: 0 10px; }
.af-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; margin-bottom: 2px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-text); font-size: 0.875rem;
  transition: background .15s, color .15s;
}
.af-nav a i { font-size: 1rem; width: 20px; text-align: center; }
.af-nav a:hover { background: var(--sidebar-hover); color: #fff; }
.af-nav a.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 600;
  box-shadow: 0 4px 12px rgba(79,70,229,.36);
}
.af-sidebar-foot { margin-top: auto; padding: 14px 20px 4px; border-top: 1px solid #1e293b; }

.af-main { flex: 1 1 auto; min-width: 0; padding: 22px 24px 44px; }

.af-page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.af-page-title { font-size: 1.4375rem; font-weight: 800; margin: 0 0 2px; }
.af-page-sub { color: var(--muted); font-size: 0.875rem; margin: 0; }

.af-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 1025; }
.af-backdrop.show { display: block; }

/* ───────────────────────────── 4. Components ──────────────────────────── */

.af-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
}
.af-card-head {
  padding: 15px 19px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.af-card-title { font-size: 0.9688rem; font-weight: 700; margin: 0; }
.af-card-body { padding: 19px; }
.af-card-body.tight { padding: 0; }

/* Stat tiles */
.af-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 17px 19px; height: 100%;
  display: flex; align-items: center; gap: 14px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  position: relative; overflow: hidden;
}
.af-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand); }
.af-stat-icon {
  width: 2.875rem; height: 2.875rem; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; color: #fff;
}
.af-stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.af-stat-label { font-size: 0.7188rem; color: var(--muted); font-weight: 700;
                 text-transform: uppercase; letter-spacing: .05em; }
.af-stat-sub { font-size: 0.75rem; color: var(--muted); }

.grad-indigo  { background: linear-gradient(135deg,#4f46e5,#7c3aed); }
.grad-emerald { background: linear-gradient(135deg,#059669,#10b981); }
.grad-amber   { background: linear-gradient(135deg,#d97706,#f59e0b); }
.grad-rose    { background: linear-gradient(135deg,#e11d48,#f43f5e); }
.grad-sky     { background: linear-gradient(135deg,#0284c7,#0ea5e9); }
.grad-violet  { background: linear-gradient(135deg,#7c3aed,#a855f7); }
.grad-slate   { background: linear-gradient(135deg,#334155,#64748b); }
.grad-teal    { background: linear-gradient(135deg,#0d9488,#14b8a6); }

/* Forms */
.form-label { font-weight: 600; font-size: 0.8125rem; color: var(--ink-2); margin-bottom: 5px; }
.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem; padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus {
  background: var(--surface); color: var(--ink);
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 15%, transparent);
}
.form-control::placeholder { color: var(--muted); opacity: .75; }
.input-group-text {
  background: var(--surface-2); border-color: var(--line-2);
  color: var(--muted); border-radius: var(--radius-sm);
}
.form-text { font-size: 0.7813rem; color: var(--muted); }
.required::after { content: ' *'; color: var(--danger); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }

.btn { border-radius: var(--radius-sm); font-weight: 600; font-size: 0.875rem; padding: .55rem 1.05rem; }
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover, .btn-primary:focus {
  background: color-mix(in srgb, var(--brand) 85%, #000);
  border-color: color-mix(in srgb, var(--brand) 85%, #000);
}
.btn-brand {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; border: none;
  box-shadow: 0 6px 16px rgba(79,70,229,.3);
}
.btn-brand:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.btn-lg { padding: .72rem 1.4rem; font-size: 0.9688rem; }
.btn-sm { padding: .34rem .72rem; font-size: 0.8rem; }

.badge { font-weight: 600; letter-spacing: .01em; padding: .38em .65em; }

/* Status pills — semantic, so a status is recognisable at a glance anywhere. */
.pill { display: inline-flex; align-items: center; gap: 5px;
        font-size: 0.7188rem; font-weight: 700; padding: 3px 9px; border-radius: 20px;
        text-transform: uppercase; letter-spacing: .03em; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-active,   .pill-completed { background: color-mix(in srgb, var(--success) 14%, transparent); color: var(--success); }
.pill-trial,    .pill-draft     { background: color-mix(in srgb, var(--warning) 16%, transparent); color: var(--warning); }
.pill-expired,  .pill-cancelled { background: color-mix(in srgb, var(--danger) 14%, transparent);  color: var(--danger); }
.pill-suspended                 { background: color-mix(in srgb, var(--danger) 14%, transparent);  color: var(--danger); }
.pill-neutral                   { background: color-mix(in srgb, var(--muted) 15%, transparent);   color: var(--muted); }

/* Avatars */
.af-avatar {
  border-radius: 50%; object-fit: cover;
  background: var(--brand-soft); color: var(--brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
}
.af-avatar-sm { width: 2.125rem; height: 2.125rem; font-size: 0.8125rem; }
.af-avatar-md { width: 3.25rem; height: 3.25rem; font-size: 1.1875rem; }
.af-avatar-lg { width: 5.5rem; height: 5.5rem; font-size: 2rem; }

/* Tables */
.table { --bs-table-color: var(--ink); --bs-table-bg: transparent; margin-bottom: 0; }
.table > thead th {
  background: var(--surface-2);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap;
  padding: 11px 14px;
}
.table > tbody td { padding: 12px 14px; vertical-align: middle; border-color: var(--line); }
.table > tbody tr:hover > * { background: var(--surface-2); }

/* Empty states */
.af-empty { text-align: center; padding: 52px 20px; color: var(--muted); }
.af-empty i { font-size: 2.75rem; opacity: .28; display: block; margin-bottom: 14px; }
.af-empty h3 { font-size: 1rem; color: var(--ink); margin-bottom: 6px; }
.af-empty p { font-size: 0.8438rem; max-width: 380px; margin: 0 auto 16px; }

/* Skeleton loader */
.af-skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size: 400% 100%;
  animation: af-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes af-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* QR panel */
.af-qr-frame {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px;
  display: inline-block; box-shadow: var(--shadow-xs);
}
.af-qr-frame img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }

.af-copy {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: 0.8rem; word-break: break-all;
}

.chart-box { position: relative; height: 280px; }
.chart-box.short { height: 210px; }

/* Live indicator */
.af-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7188rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--success);
}
.af-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  animation: af-pulse 1.8s ease-in-out infinite;
}
@keyframes af-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); }
  50%      { opacity: .7; box-shadow: 0 0 0 6px transparent; }
}

/* A row that just arrived via polling. */
.af-row-new { animation: af-flash 2s ease-out; }
@keyframes af-flash {
  0%   { background: color-mix(in srgb, var(--success) 22%, transparent); }
  100% { background: transparent; }
}

/* Timeline */
.af-timeline { position: relative; padding-left: 28px; }
.af-timeline::before { content:''; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background: var(--line); }
.af-timeline-item { position: relative; padding-bottom: 16px; }
.af-timeline-item::before {
  content:''; position:absolute; left:-24px; top:5px; width:11px; height:11px; border-radius:50%;
  background: var(--brand); border: 2px solid var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 26%, transparent);
}

/* Surfaces Bootstrap paints itself */
.modal-content, .dropdown-menu, .offcanvas, .accordion-item, .list-group-item, .card {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.modal-header, .modal-footer { border-color: var(--line); }
.dropdown-item { color: var(--ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--ink); }
.dropdown-divider { border-color: var(--line); }
.bg-light { background: var(--surface-2) !important; color: var(--ink); }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line) !important; }
hr { border-color: var(--line); opacity: 1; }
.progress { background: var(--line); border-radius: 5px; height: 8px; }
.progress-bar { background: var(--brand); border-radius: 5px; }
.nav-tabs { border-color: var(--line); }
.nav-tabs .nav-link { color: var(--muted); border: none; border-bottom: 2px solid transparent; font-weight: 600; }
.nav-tabs .nav-link:hover { color: var(--ink); border-bottom-color: var(--line-2); }
.nav-tabs .nav-link.active { color: var(--brand); background: transparent; border-bottom-color: var(--brand); }

/* ──────────────────────── 5. Public check-in ──────────────────────────── */

.af-public {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 22px 14px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 70%),
    var(--bg);
}
.af-checkin {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.af-checkin-banner {
  height: 132px; position: relative;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  background-size: cover; background-position: center;
}
.af-checkin-banner::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 20% 120%, rgba(255,255,255,.22), transparent 60%);
}
.af-checkin-logo {
  width: 68px; height: 68px; border-radius: 16px; background: #fff;
  border: 3px solid #fff; object-fit: contain; padding: 5px;
  margin: -40px auto 0; position: relative; z-index: 2; display: block;
  box-shadow: var(--shadow);
}
.af-checkin-body { padding: 16px 24px 26px; }
.af-checkin-meta { display: flex; align-items: center; gap: 9px; font-size: 0.8438rem;
                   color: var(--ink-2); padding: 7px 0; }
.af-checkin-meta i { color: var(--brand); width: 18px; text-align: center; flex-shrink: 0; }

.af-success-check {
  width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success); font-size: 2.625rem;
  animation: af-pop .45s cubic-bezier(.16,1,.3,1);
}
@keyframes af-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ────────────────────────── 6. Auth screens ───────────────────────────── */

/* Column, not a centring box: the navbar and masi trim sit at their natural
   height at the top and the card centres in whatever space is left. Centring
   every child would lay the navbar out beside the form. */
.af-auth {
  min-height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(150deg, #1e1b4b 0%, #312e81 45%, #4c1d95 100%);
  position: relative;
}
.af-auth > .lp-navbar, .af-auth > .af-masi { flex: 0 0 auto; }
/* Tapa runner down the left edge, matching the hero. */
.af-auth::before {
  content:''; position:absolute; top:0; bottom:0; left:0; width: min(300px, 32%);
  background-image: var(--tapa); background-size: 120px 120px; opacity: .42;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
          mask-image: linear-gradient(to right, #000 55%, transparent);
}
.af-auth-wrap {
  width: 100%; max-width: 430px; margin: auto;
  padding: 34px 16px; position: relative; z-index: 1;
}
.af-auth-md    { max-width: 33rem; }
.af-auth-split { max-width: 68rem; }
/* The signup form has enough fields to look like a ribbon in a single column
   on a large display, so it gets a pitch panel beside it instead. */
.af-auth-split .af-auth-pitch { color: #fff; }
.af-auth-split .af-auth-pitch h2 {
  color: #fff; font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.15;
}
.af-auth-split .af-auth-pitch p { color: rgba(255,255,255,.74); }
.af-auth-point { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.1rem; }
.af-auth-point i {
  flex: 0 0 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: 8px;
  display: grid; place-items: center; font-size: .9rem; color: #fff;
  background: rgba(255,255,255,.16);
}
.af-auth-point strong { color: #fff; display: block; font-size: .95rem; }
.af-auth-point span   { color: rgba(255,255,255,.68); font-size: .875rem; }
.af-auth-brand { text-align: center; margin-bottom: 22px; color: #fff; }
.af-auth-brand .af-brand-mark { width: 3.25rem; height: 3.25rem; font-size: 1.5625rem; margin: 0 auto 12px; }
.af-auth-brand h1 { color: #fff; font-size: 1.3125rem; margin: 0 0 4px; }
.af-auth-brand p { color: rgba(255,255,255,.66); font-size: 0.8438rem; margin: 0; }
.af-auth-card {
  background: var(--surface); border-radius: 18px; padding: 30px 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.af-auth-card h2 { font-size: 1.1875rem; margin: 0 0 4px; }
.af-auth-card .sub { color: var(--muted); font-size: 0.8438rem; margin: 0 0 20px; }
.af-auth-foot { text-align: center; margin-top: 18px; font-size: 0.8438rem; color: rgba(255,255,255,.72); }
.af-auth-foot a { color: #c7d2fe; font-weight: 600; }

.af-meter { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 7px; }
.af-meter span { display: block; height: 100%; width: 0; transition: width .25s, background .25s; }

/* ───────────────────────────── 7. Landing ─────────────────────────────── */

/* ── Pacific motif ──────────────────────────────────────────────────────────
   A masi (tapa cloth) geometry — concentric diamonds with corner triangles.
   Used at low opacity over the brand gradient so it reads as cloth texture
   rather than wallpaper. White strokes, so one tile works on any brand colour
   and survives a white-label palette change. */
:root {
  --tapa: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='60,4 116,60 60,116 4,60' fill='none' stroke='white' stroke-opacity='.20' stroke-width='2'/%3E%3Cpolygon points='60,22 98,60 60,98 22,60' fill='none' stroke='white' stroke-opacity='.13' stroke-width='1.4'/%3E%3Cpolygon points='60,40 80,60 60,80 40,60' fill='white' fill-opacity='.10'/%3E%3Cpolygon points='0,0 22,0 0,22' fill='white' fill-opacity='.16'/%3E%3Cpolygon points='120,0 98,0 120,22' fill='white' fill-opacity='.16'/%3E%3Cpolygon points='0,120 22,120 0,98' fill='white' fill-opacity='.16'/%3E%3Cpolygon points='120,120 98,120 120,98' fill='white' fill-opacity='.16'/%3E%3C/svg%3E");
}

/* Masi trim — a woven band that separates sections, in the brand palette. */
.af-masi {
  height: 22px; width: 100%;
  background-color: #eef0fb;
  background-image: url("data:image/svg+xml,%3Csvg width='76' height='26' viewBox='0 0 76 26' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='76' height='26' fill='%23eef0fb'/%3E%3Cpath d='M0 26 L19 5 L38 26 Z' fill='%23c7cbf0'/%3E%3Cpath d='M38 0 L57 21 L76 0 Z' fill='%23dcc9f5'/%3E%3Cpolygon points='19,12 22.5,15.5 19,19 15.5,15.5' fill='%23a5abe8'/%3E%3Cpolygon points='57,7 60.5,10.5 57,14 53.5,10.5' fill='%23c3a8ef'/%3E%3C/svg%3E");
  background-size: 76px 26px; background-repeat: repeat-x;
  border-top: 1px solid #e0e4f6; border-bottom: 1px solid #e0e4f6;
}
.af-masi.thin { height: 14px; background-size: 46px 16px; }
[data-theme="dark"] .af-masi {
  background-color: #1a1f3a;
  background-image: url("data:image/svg+xml,%3Csvg width='76' height='26' viewBox='0 0 76 26' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='76' height='26' fill='%231a1f3a'/%3E%3Cpath d='M0 26 L19 5 L38 26 Z' fill='%233b3f70'/%3E%3Cpath d='M38 0 L57 21 L76 0 Z' fill='%234a3a72'/%3E%3Cpolygon points='19,12 22.5,15.5 19,19 15.5,15.5' fill='%23575ca0'/%3E%3Cpolygon points='57,7 60.5,10.5 57,14 53.5,10.5' fill='%236b4fa3'/%3E%3C/svg%3E");
  border-color: #262c4e;
}

/* ── Navbar ─────────────────────────────────────────────────────────────────
   Transparent while it sits over the coloured hero, then settling onto the
   brand gradient once the page scrolls under it. Both states are light-on-dark,
   so the link colour never has to jump. */
.lp-navbar {
  /* Always on brand colour. `sticky-top` keeps the bar in normal flow, so a
     transparent bar at scroll-0 would put white text on the light page
     background and disappear — the colour is not decoration, it is what makes
     the links legible. Scrolling deepens it rather than introducing it. */
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  border-bottom: 1px solid transparent;
  padding: .62rem 0;
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.lp-navbar.scrolled,
.lp-navbar.solid {
  background: linear-gradient(135deg, #3d33b8 0%, #4c1d95 100%);
  box-shadow: 0 8px 26px -10px rgba(15,23,42,.62);
  padding: .42rem 0;
}
/* Masi motif woven through the bar. */
.lp-navbar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--tapa); background-size: 120px 120px;
  opacity: .26; transition: opacity .3s ease;
}
.lp-navbar.scrolled::after, .lp-navbar.solid::after { opacity: .34; }
.lp-navbar > .container { position: relative; z-index: 1; }

.lp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.lp-brand-mark {
  width: 2.125rem; height: 2.125rem; border-radius: 10px; flex: 0 0 2.125rem;
  display: grid; place-items: center; color: #fff; font-size: 1.0625rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 3px 10px -2px rgba(79,70,229,.55);
}
.lp-brand-name { font-weight: 800; letter-spacing: -.02em; color: #fff; font-size: 1.12rem; }
.lp-navbar .lp-brand-mark { background: rgba(255,255,255,.16); box-shadow: none; }
.lp-navbar.scrolled .lp-brand-mark,
.lp-navbar.solid   .lp-brand-mark { background: rgba(255,255,255,.2); }

.lp-nav-link {
  color: rgba(255,255,255,.84); font-weight: 500; font-size: .945rem;
  padding: .5rem .85rem; border-radius: 8px; transition: color .15s, background .15s;
}
.lp-nav-link:hover, .lp-nav-link:focus { color: #fff; background: rgba(255,255,255,.14); }
.lp-nav-link.active { color: #fff; font-weight: 600; background: rgba(255,255,255,.16); }

.lp-toggler {
  border: 1px solid rgba(255,255,255,.35); border-radius: 9px; padding: .3rem .6rem;
  font-size: 1.35rem; color: #fff; line-height: 1;
}
.lp-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.3); }

.lp-btn-ghost {
  border: 1px solid rgba(255,255,255,.5); color: #fff; font-weight: 600;
  padding: .44rem 1.05rem; border-radius: 9px; background: transparent;
}
.lp-btn-ghost:hover { border-color: #fff; color: var(--brand); background: #fff; }

/* Used both in the navbar (on colour) and in page content (on surface), so it
   carries its own gradient rather than depending on the backdrop. */
.lp-btn-solid {
  background: #fff; color: var(--brand); font-weight: 700;
  padding: .44rem 1.05rem; border-radius: 9px;
  border: 1px solid transparent; box-shadow: 0 3px 10px -3px rgba(15,23,42,.35);
}
.lp-btn-solid:hover { color: var(--brand-2); background: #fff; filter: brightness(1.02); }
/* Outside the bar it needs to be the brand colour, not white on white. */
.lp-footer .lp-btn-solid,
section .lp-btn-solid,
.af-card .lp-btn-solid {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; box-shadow: 0 3px 10px -3px rgba(79,70,229,.6);
}
.lp-footer .lp-btn-solid:hover,
section .lp-btn-solid:hover,
.af-card .lp-btn-solid:hover { color: #fff; filter: brightness(1.07); }

.lp-theme-btn {
  border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 9px;
  padding: .44rem .7rem; background: transparent;
}
.lp-theme-btn:hover { color: var(--brand); border-color: #fff; background: #fff; }

/* The collapsed menu is a panel, not a squashed row. It also forces the solid
   bar, because an open menu floating over page content is unreadable. */
@media (max-width: 991.98px) {
  #lpNavMenu { padding: .85rem .25rem .55rem; }
  .lp-nav-link { display: block; padding: .62rem .7rem; }
  .lp-btn-ghost, .lp-btn-solid, .lp-theme-btn { width: 100%; text-align: center; }
}

/* Hero */
.lp-hero {
  background: linear-gradient(155deg,#1e1b4b 0%,#312e81 45%,#4c1d95 100%);
  color: #fff; padding: 84px 0 92px; position: relative; overflow: hidden;
}
.lp-hero::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 82% 8%, rgba(124,58,237,.5), transparent 55%);
}
/* Tapa cloth across the hero — a wide band down the left, the way a masi
   runner is laid, rather than a flat tile over the whole panel. */
.lp-hero::before {
  content:''; position:absolute; top:0; bottom:0; left:0; width: min(330px, 34%);
  background-image: var(--tapa); background-size: 120px 120px;
  opacity: .5; z-index: 0;
  -webkit-mask-image: linear-gradient(to right, #000 55%, transparent);
          mask-image: linear-gradient(to right, #000 55%, transparent);
}

/* Any brand-gradient band (page headers, closing CTA) gets the same cloth. */
.af-band { position: relative; overflow: hidden; }
.af-band::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: var(--tapa); background-size: 120px 120px; opacity: .3;
}
.af-band > .container { position: relative; z-index: 1; }
.lp-hero > .container { position: relative; z-index: 1; }
.lp-hero h1 {
  color:#fff; font-size: clamp(2.05rem, 5vw, 3.35rem);
  letter-spacing:-.038em; line-height: 1.1; font-weight: 800;
}
.lp-hero .lead { color: rgba(255,255,255,.8); font-size: 1.08rem; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .01em;
  padding: .34rem .85rem; border-radius: 30px; margin-bottom: 1.1rem;
}
.lp-trust { color: rgba(255,255,255,.62); font-size: .85rem; }
.lp-stat-n { font-size: 1.75rem; font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; }
.lp-stat-l { color: rgba(255,255,255,.6); font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; }

/* Section furniture */
.lp-section-tag {
  color: var(--brand); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .1em;
}
.lp-h2 { font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.5rem, 3vw, 2.05rem); }

/* Footer */
.lp-footer { background: var(--surface-2); border-top: 1px solid var(--line); }
.lp-footer-head {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink); font-weight: 700; margin-bottom: .9rem;
}
.lp-footer a { color: var(--muted); text-decoration: none; }
.lp-footer a:hover { color: var(--brand); }
.lp-footer-base {
  border-top: 1px solid var(--line); padding: 1.1rem 0;
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between;
  font-size: .83rem; color: var(--muted);
}
.lp-feature {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 25px; height: 100%;
  box-shadow: var(--shadow-xs); transition: transform .2s, box-shadow .2s;
}
.lp-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lp-step {
  width: 3.125rem; height: 3.125rem; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; font-size: 1.3125rem; color:#fff; margin-bottom: 14px;
}
.lp-price {
  background: var(--surface); border: 2px solid var(--line);
  border-radius: 18px; padding: 28px; height: 100%; position: relative;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lp-price:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lp-price.featured { border-color: var(--brand); box-shadow: var(--shadow); }
.lp-price-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff;
  font-size: 0.6875rem; font-weight: 700; padding: 4px 14px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: .06em;
}
.lp-price-amount { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }

/* ────────────────────── 8. Third-party overrides ──────────────────────── */

/* DataTables 2.x uses dt-* class names, not the legacy dataTables_* ones. */
.dt-container { color: var(--ink-2); }
.dt-container .dt-search input,
.dt-container .dt-length select {
  border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 10px;
  background: var(--surface); color: var(--ink); font-size: 0.8125rem;
}
.dt-container .dt-search input:focus, .dt-container .dt-length select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}
.dt-container .dt-info, .dt-container .dt-length label, .dt-container .dt-search label {
  color: var(--muted); font-size: 0.7813rem;
}
.page-link { background: var(--surface); border-color: var(--line); color: var(--ink-2); }
.page-link:hover { background: var(--surface-2); color: var(--brand); border-color: var(--line); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); color:#fff; }
.page-item.disabled .page-link { background: var(--surface); color: var(--muted); border-color: var(--line); }

/* Tom Select */
.ts-control {
  background: var(--surface) !important; border-color: var(--line-2) !important;
  border-radius: var(--radius-sm) !important; color: var(--ink);
}
.ts-dropdown { background: var(--surface); border-color: var(--line); color: var(--ink); }
.ts-dropdown .active { background: var(--brand-soft); color: var(--brand); }

/* Flatpickr */
.flatpickr-calendar { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
.flatpickr-months .flatpickr-month, .flatpickr-weekdays, span.flatpickr-weekday {
  background: var(--surface); color: var(--ink); fill: var(--ink);
}
.flatpickr-day { color: var(--ink-2); }
.flatpickr-day:hover { background: var(--surface-2); border-color: var(--surface-2); }
.flatpickr-day.selected { background: var(--brand); border-color: var(--brand); color:#fff; }
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.flatpickr-disabled { color: var(--muted); }

/* SweetAlert2 */
.swal2-popup { background: var(--surface) !important; color: var(--ink) !important; border-radius: 16px !important; }
.swal2-title, .swal2-html-container { color: var(--ink) !important; }

/* ─────────────────── 9. Responsive / print / motion ───────────────────── */

@media (max-width: 991.98px) {
  .af-sidebar {
    position: fixed; left: 0; top: var(--topbar-h);
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .af-sidebar.open { transform: translateX(0); }
  .af-main { padding: 18px 15px 40px; }
  .af-page-title { font-size: 1.25rem; }
}

@media (max-width: 575.98px) {
  body { font-size: 0.875rem; }
  .af-card-body { padding: 15px; }
  .af-card-head { padding: 13px 15px; }
  .af-stat { padding: 14px 15px; gap: 12px; }
  .af-stat-icon { width: 2.5rem; height: 2.5rem; font-size: 1.0625rem; }
  .af-stat-value { font-size: 1.25rem; }
  .af-qr-frame img { width: 168px; height: 168px; }
  .af-auth-card { padding: 24px 20px; }
  .chart-box { height: 240px; }
}

@media print {
  .af-topbar, .af-sidebar, .af-backdrop, .no-print, .btn { display: none !important; }
  .af-main { padding: 0; }
  .af-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  body { background: #fff; color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}