/* ===== PAYLOWPRO ADMIN PORTAL STYLES ===== */
/* Matches design7.html reference */

/* === Base Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Poppins', sans-serif; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* === Theme Variables === */
:root {
    --brand-50: #EBF5FB; --brand-100: #D6EAF8; --brand-500: #3498DB;
    --brand-600: #2E86C1; --brand-700: #2874A6;
    --clinical-50: #F0FDFA; --clinical-500: #14B8A6; --clinical-600: #0D9488;
    --bg-primary: #f8f9fa; --bg-card: #ffffff; --bg-input: #f8f9fa;
    --border: #e2e8f0; --border-light: #f1f5f9;
    --text-primary: #212121; --text-secondary: #4E545C; --text-muted: #94a3b8;
    --sidebar-bg: #ffffff; --header-bg: #ffffff;
}
.dark {
    --bg-primary: rgba(15,23,42,0.6); --bg-card: #1e293b; --bg-input: #0f172a;
    --border: #334155; --border-light: #1e293b;
    --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b;
    --sidebar-bg: #1e293b; --header-bg: #1e293b;
    color-scheme: dark;
}

/* === Layout === */
.app-shell { display: flex; height: 100vh; overflow: hidden; background: var(--bg-primary); color: var(--text-primary); }
.sidebar { width: 288px; background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; height: 100%; flex-shrink: 0; transition: width 0.25s ease; overflow: hidden; }
.sidebar-logo { height: 80px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--border-light); }
.dark .sidebar-logo { border-bottom-color: var(--border); }

/* === App Logo Component === */
.app-logo {
    display: inline-flex;
    align-items: center;
    gap: 0;
    user-select: none;
    flex-shrink: 0;
}

.app-logo-text {
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Credit card icon */
.app-logo-card {
    display: inline-flex;
    flex-direction: column;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.app-logo-card-stripe {
    width: 100%;
    display: block;
}

.app-logo-card-line1,
.app-logo-card-line2 {
    display: block;
    border-radius: 1px;
}

/* --- Size: small (sidebar) --- */
.app-logo-small .app-logo-text {
    font-size: 18px;
}
.app-logo-small .app-logo-card {
    width: 28px;
    height: 20px;
    border-radius: 3px;
    margin: 0 3px;
}
.app-logo-small .app-logo-card-stripe {
    height: 5px;
    margin-top: 5px;
}
.app-logo-small .app-logo-card-line1 {
    width: 12px;
    height: 2.5px;
    margin: 3px 0 0 3px;
}
.app-logo-small .app-logo-card-line2 {
    width: 7px;
    height: 2px;
    margin: 2px 0 0 3px;
}

/* --- Size: medium (login, selector) --- */
.app-logo-medium .app-logo-text {
    font-size: 28px;
}
.app-logo-medium .app-logo-card {
    width: 44px;
    height: 30px;
    border-radius: 4px;
    margin: 0 4px;
}
.app-logo-medium .app-logo-card-stripe {
    height: 8px;
    margin-top: 8px;
}
.app-logo-medium .app-logo-card-line1 {
    width: 18px;
    height: 3.5px;
    margin: 4px 0 0 5px;
}
.app-logo-medium .app-logo-card-line2 {
    width: 11px;
    height: 2.5px;
    margin: 2px 0 0 5px;
}

/* --- Size: large --- */
.app-logo-large .app-logo-text {
    font-size: 40px;
}
.app-logo-large .app-logo-card {
    width: 62px;
    height: 42px;
    border-radius: 6px;
    margin: 0 5px;
}
.app-logo-large .app-logo-card-stripe {
    height: 11px;
    margin-top: 11px;
}
.app-logo-large .app-logo-card-line1 {
    width: 26px;
    height: 4.5px;
    margin: 5px 0 0 7px;
}
.app-logo-large .app-logo-card-line2 {
    width: 15px;
    height: 3px;
    margin: 3px 0 0 7px;
}

/* --- Theme: color (blue on light bg) --- */
.app-logo-color .app-logo-text { color: #22a7e0; }
.app-logo-color .app-logo-card { background: #22a7e0; }
.app-logo-color .app-logo-card-stripe { background: rgba(0,0,0,0.15); }
.app-logo-color .app-logo-card-line1 { background: rgba(255,255,255,0.55); }
.app-logo-color .app-logo-card-line2 { background: rgba(255,255,255,0.35); }

/* --- Theme: light (white on dark bg) --- */
.app-logo-light .app-logo-text { color: #ffffff; }
.app-logo-light .app-logo-card { background: rgba(255,255,255,0.85); }
/* Stripe and lines are dark navy: white-on-white made the card a blank block (BUG-029) */
.app-logo-light .app-logo-card-stripe { background: rgba(26,43,60,0.35); }
.app-logo-light .app-logo-card-line1 { background: rgba(26,43,60,0.25); }
.app-logo-light .app-logo-card-line2 { background: rgba(26,43,60,0.15); }

/* Dark mode sidebar override - switch color to light */
.dark .app-logo-color .app-logo-text { color: #ffffff; }
.dark .app-logo-color .app-logo-card { background: rgba(255,255,255,0.85); }
.dark .app-logo-color .app-logo-card-stripe { background: rgba(26,43,60,0.35); }
.dark .app-logo-color .app-logo-card-line1 { background: rgba(26,43,60,0.25); }
.dark .app-logo-color .app-logo-card-line2 { background: rgba(26,43,60,0.15); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 20px 0; }
.sidebar-section-label { padding: 0 24px; font-size: 9px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.22em; margin-bottom: 6px; }
.sidebar-section-label.mt { margin-top: 24px; }

.sidebar-link { transition: all 0.2s; border-radius: 12px; margin: 3px 14px; cursor: pointer; color: var(--text-secondary); padding: 10px 16px; font-size: 13.5px; display: flex; align-items: center; gap: 12px; text-decoration: none; border: none; background: none; width: calc(100% - 28px); text-align: left; }
.sidebar-link:hover { background: rgba(52,152,219,0.07); color: #3498DB; }
.sidebar-link.active { background: rgba(52,152,219,0.1); color: #3498DB !important; font-weight: 600; border-left: 3px solid #3498DB; border-radius: 0 12px 12px 0; margin-left: 11px; padding-left: 13px; }
.sidebar-link i { width: 16px; text-align: center; }

.sidebar-footer { padding: 20px; border-top: 1px solid var(--border-light); }
.dark .sidebar-footer { border-top-color: var(--border); }
.theme-btn { width: 100%; padding: 10px 0; border-radius: 12px; background: #f1f5f9; border: none; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-secondary); cursor: pointer; }
.dark .theme-btn { background: #334155; color: #cbd5e1; }
/* Logout in the sidebar: red on light, a lighter red on the dark button so it stays readable (BUG-183) */
.theme-btn.theme-btn-logout { color: #ef4444; }
.dark .theme-btn.theme-btn-logout { color: #fca5a5; }
/* Text colours that were inline and could not follow the theme (BUG-183) */
.amount-payable-text { color: #15803d; }
.dark .amount-payable-text { color: #4ade80; }
.plan-contact-link { color: #2563eb; text-decoration: none; }
.dark .plan-contact-link { color: #60a5fa; }

/* === Main Content === */
.main-content { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; min-width: 0; }
.top-header { height: 80px; background: var(--header-bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; flex-shrink: 0; }
.page-title { font-size: 20px; font-weight: 700; color: var(--text-primary); }
.header-right { display: flex; align-items: center; gap: 20px; }
.notif-btn { position: relative; padding: 8px; background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; transition: color 0.2s; }
.notif-btn:hover { color: var(--text-secondary); }
.notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; background: #ef4444; color: white; font-size: 9px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; transition: transform 0.2s; }

/* ── Persistent highlight when unread notifications exist ── */
.notif-has-unread .fa-bell {
    color: #2E86C1;
}
.notif-has-unread .notif-badge {
    box-shadow: 0 0 6px 2px rgba(239, 68, 68, 0.35);
}

/* ── New notification alert animation (flashes for 6s on arrival) ── */
.notif-alert .fa-bell {
    animation: bell-ring 0.8s ease-in-out infinite;
    color: #f59e0b;
}
.notif-alert .notif-badge {
    animation: badge-pulse 1.2s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
@keyframes bell-ring {
    0%   { transform: rotate(0deg); }
    10%  { transform: rotate(14deg); }
    20%  { transform: rotate(-14deg); }
    30%  { transform: rotate(10deg); }
    40%  { transform: rotate(-10deg); }
    50%  { transform: rotate(6deg); }
    60%  { transform: rotate(-4deg); }
    70%  { transform: rotate(2deg); }
    80%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
@keyframes badge-pulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    50%  { transform: scale(1.25); box-shadow: 0 0 8px 4px rgba(239, 68, 68, 0.3); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.terminal-status { text-align: right; }
.terminal-label { font-size: 9px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.terminal-connected { font-size: 11px; font-weight: 700; color: #22c55e; display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.terminal-dot { width: 6px; height: 6px; background: #22c55e; border-radius: 50%; display: inline-block; animation: pulse 2s infinite; }
.avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer; }
.dark .avatar { border-color: #475569; }

/* User menu dropdown */
.user-menu-wrap { position: relative; }
.avatar-btn { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 8px; transition: background 0.15s; }
.avatar-btn:hover { background: var(--bg-input); }
.avatar-chevron { font-size: 9px; color: var(--text-muted); transition: transform 0.15s; }

.user-dropdown-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; }
.user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 280px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.18); z-index: 1000; padding: 0; overflow: hidden; animation: dropdownFadeIn 0.15s ease; }
.dark .user-dropdown { box-shadow: 0 12px 40px rgba(0,0,0,0.4); }

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-header { padding: 16px; }
.user-dropdown-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.user-dropdown-business { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.user-dropdown-divider { height: 1px; background: var(--border-light); margin: 0; }

.user-dropdown-section { padding: 10px 16px; }
.user-dropdown-label { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.user-dropdown-label i { font-size: 10px; color: var(--brand-600); }
/* Custom option-select — replaces raw <select> in profile dropdown & location selector */
.ud-sel { position: relative; }
.ud-sel-trigger { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; text-align: left; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; }
.ud-sel-trigger:hover { border-color: var(--brand-600); }
.ud-sel-trigger.open { border-color: var(--brand-600); border-radius: 8px 8px 0 0; box-shadow: 0 0 0 3px rgba(46,134,193,0.10); }
.ud-sel-trigger .ud-icon { color: var(--brand-600); width: 14px; text-align: center; flex-shrink: 0; font-size: 11px; }
.ud-sel-trigger .ud-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ud-sel-trigger .ud-chevron { color: var(--text-muted); font-size: 10px; transition: transform 0.2s; flex-shrink: 0; }
.ud-sel-trigger.open .ud-chevron { transform: rotate(180deg); }
.ud-sel-options { border: 1px solid var(--brand-600); border-top: none; border-radius: 0 0 8px 8px; background: var(--bg-card); max-height: 200px; overflow-y: auto; box-shadow: 0 4px 12px rgba(46,134,193,0.10); position: relative; z-index: 11; }
.ud-sel-option { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background 0.15s; border-bottom: 1px solid var(--border-light); }
.ud-sel-option:last-child { border-bottom: none; }
.ud-sel-option:hover { background: rgba(46,134,193,0.06); color: var(--text-primary); }
.ud-sel-option.sel-active { background: rgba(46,134,193,0.10); color: var(--brand-600); font-weight: 700; }
.ud-sel-option .sel-check { margin-left: auto; color: var(--brand-600); font-size: 11px; flex-shrink: 0; }
.ud-sel-option .ud-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; }

.user-dropdown-apply { width: calc(100% - 32px); margin: 6px 16px 10px; padding: 8px; border-radius: 8px; border: none; background: var(--brand-600); color: white; font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: opacity 0.15s; }
.user-dropdown-apply:hover { opacity: 0.9; }

.user-dropdown-item { width: 100%; padding: 12px 16px; border: none; background: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.15s; text-align: left; }
.user-dropdown-item:hover { background: var(--bg-input); }
.user-dropdown-logout { color: #ef4444; }
.user-dropdown-logout:hover { background: rgba(239,68,68,0.06); }

/* --page-bottom-space: room under every page so the last row can scroll clear of the fixed Assistant button
   (48px tall, 28px from the bottom edge) — its corner is where table Actions columns end. */
.content-area { --page-bottom-space: 100px; flex: 1; overflow-y: auto; padding: 28px 28px var(--page-bottom-space); background: var(--bg-primary); }
.content-container { max-width: 1200px; margin: 0 auto; }
.content-container.content-full { max-width: 100%; }

/* === Cards === */
.card { background: var(--bg-card); border-radius: 16px; padding: 24px; border: 1px solid var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.card-xl { border-radius: 20px; }
.card-sm { padding: 16px; border-radius: 12px; }

/* === Stat Cards === */
.stat-label { font-size: 9px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: 24px; font-weight: 900; margin-top: 4px; color: var(--text-primary); }
.stat-sub { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.stat-value.green { color: #22c55e; }
.stat-value.yellow { color: #eab308; }
.stat-value.red { color: #ef4444; }
.stat-value.brand { color: #2E86C1; }
.stat-value.teal { color: #14B8A6; }
.stat-value.xl { font-size: 20px; }

/* === Grid === */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.col-span-2 { grid-column: span 2; }

/* === Forms === */
.inp { width: 100%; padding: 11px 14px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; font-size: 13px; outline: none; transition: box-shadow 0.2s; color: var(--text-primary); font-family: inherit; }
.inp:focus { box-shadow: 0 0 0 2.5px rgba(52,152,219,0.25); border-color: #3498DB; }
.inp-lg { padding: 12px 16px; font-size: 18px; }
.input-field { transition: all 0.2s; }
.input-field:focus { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(52,152,219,0.15); }
.form-label { display: block; font-size: 10px; font-weight: 900; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }

/* === Buttons === */
.btn { padding: 12px 20px; border-radius: 12px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:active { transform: scale(0.98); }
.btn-primary { background: #2E86C1; color: white; box-shadow: 0 4px 12px rgba(46,134,193,0.3); }
.btn-primary:hover { background: #2874A6; }
.btn-dark { background: #0f172a; color: white; }
.btn-dark:hover { background: #1e293b; }
.btn-blue { background: #2E86C1; color: white; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.btn-blue:hover:not(:disabled) { background: #2874A6; }
.btn-blue:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-green { background: #16a34a; color: white; }
.btn-green:hover { background: #15803d; }
.btn-amber { background: #d97706; color: white; }
.btn-amber:hover { background: #b45309; }
.btn-red { background: #DC2626; color: white; }
.btn-red:hover { background: #991b1b; }
.btn-danger-outline { background: transparent; border: 1px solid #DC2626; color: #DC2626; }
.btn-danger-outline:hover { background: #FEF2F2; }
.btn-purple { background: linear-gradient(135deg, #9333ea, #ec4899); color: white; }
.btn-purple:hover { background: linear-gradient(135deg, #7e22ce, #db2777); }
.btn-sm { padding: 8px 20px; font-size: 11px; border-radius: 10px; }
.btn-xs { padding: 4px 8px; font-size: 12px; border-radius: 6px; font-weight: 700; }
.btn-link-download { background: none; border: none; padding: 0; color: #2E86C1; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; text-decoration: none; }
.btn-link-download:hover { color: #1a5a8a; text-decoration: underline; }
.btn-full { width: 100%; }
.btn-icon { padding: 7px 18px; border-radius: 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); }
.btn-icon.active { background: #2E86C1 !important; color: white !important; border-color: #2E86C1 !important; box-shadow: 0 3px 10px rgba(46,134,193,0.3); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }
.btn-outline:hover { border-color: var(--brand-500); color: var(--brand-500); }

/* === Tables === */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { padding: 11px 18px; text-align: left; font-size: 10.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; border-bottom: 1px solid var(--border); background: #fafbfc; white-space: nowrap; }
.dark .tbl th { background: #1e293b; }
.tbl td { padding: 13px 18px; font-size: 13px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.tbl tbody tr:hover td { background: #EBF5FB; }
.dark .tbl tbody tr:hover td { background: #253149; }
.tbl .font-mono { font-family: ui-monospace, monospace; }
.tbl-compact th { padding: 10px 14px; font-size: 11px; }
.tbl-compact td { padding: 11px 14px; font-size: 13px; }
.tbl .font-bold { font-weight: 700; }

/* === Status Badges === */
.status-badge { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.badge-green { background: #ECFDF5; color: #16A34A; }
.badge-yellow { background: #FEF3C7; color: #D97706; }
.badge-red { background: #FEF2F2; color: #DC2626; }
.badge-gray { background: #F3F4F6; color: #6B7280; }
.badge-blue { background: #EBF5FB; color: #2E86C1; }
.status-approved { background: #ECFDF5; color: #16A34A; border: 1px solid #BBF7D0; }
.status-pending { background: #FEF3C7; color: #B45309; border: 1px solid #FDE68A; }
.status-void { background: #F3F4F6; color: #6B7280; border: 1px solid #E5E7EB; }
.status-cancelled { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

/* === Plan Detail View === */
.plan-detail-view { animation: fadeIn 0.2s ease; }
.plan-back-btn {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-secondary); cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: all 0.15s;
    text-decoration: none; flex-shrink: 0;   /* also used on <a> links (Document Templates), which browsers underline */
}
.plan-back-btn:hover { background: #EBF5FB; color: #2E86C1; border-color: #2E86C1; text-decoration: none; }
.dark .plan-back-btn:hover { background: rgba(52,152,219,0.12); }

.plan-summary-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px;
}
.plan-summary-item dt {
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px;
}
.plan-summary-item dd {
    font-size: 13px; color: var(--text-primary); margin: 0;
}

/* Schedule table row states */
.schedule-pending { background: rgba(255, 243, 205, 0.15); }
.schedule-complete td { color: var(--text-muted) !important; }
.dark .schedule-pending { background: rgba(255, 243, 205, 0.05); }

/* Schedule edit inputs */
.schedule-edit-input {
    font-size: 11px !important; padding: 4px 8px !important;
    height: auto !important; border-radius: 6px !important;
    min-width: 0 !important; width: 110px;
}

/* Responsive: stack summary on small screens */
@media (max-width: 768px) {
    .plan-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === Autocomplete / Client Search === */
.ac-wrap { position: relative; }
.ac-dd { position: absolute; top: calc(100% + 5px); left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 36px rgba(0,0,0,0.11); z-index: 100; max-height: 300px; overflow-y: auto; }
.dark .ac-dd { box-shadow: 0 12px 36px rgba(0,0,0,0.3); }
.ac-item { padding: 12px 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: background 0.12s; border-bottom: 1px solid var(--border-light); }
.ac-item:hover { background: #EBF5FB; }
.dark .ac-item:hover { background: rgba(52,152,219,0.12); }
.ac-item:last-child { border-bottom: none; }
.ac-add-new { border-top: 2px dashed var(--border); margin-top: 4px; background: #f8fafc; }
.dark .ac-add-new { background: #0f172a; }
.ac-add-new:hover { background: #EBF5FB; }

/* === Payment Method Tabs === */
/* === Payment Page Layout === */
.payment-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.payment-method-tabs { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 24px; }
.payment-search-row { display: flex; gap: 8px; }

/* Recent clients quick-pick (Payment page, above the client search) */
/* Lives in the right column under Client Overview, as its own card; chips stack vertically. */
.recent-clients-row { display: flex; flex-direction: column; gap: 8px; }
.recent-clients-empty { font-size: 12px; color: var(--text-muted); font-style: italic; text-align: center; padding: 12px 0 4px; }
.recent-client-chip { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); cursor: pointer; font-family: inherit; transition: border-color 0.15s, background 0.15s, transform 0.15s; min-width: 0; }
.recent-client-chip:hover:not(:disabled) { border-color: var(--brand-500); background: #EBF5FB; transform: translateY(-1px); }
.dark .recent-client-chip:hover:not(:disabled) { background: rgba(52,152,219,0.12); }
.recent-client-chip:disabled { cursor: progress; opacity: 0.7; }
.recent-client-chip-active { border-color: var(--brand-600); background: rgba(46,134,193,0.08); }
.recent-client-skeleton { cursor: default; }
.recent-client-avatar { width: 28px; height: 28px; border-radius: 50%; background: #2E86C1; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex-shrink: 0; }
.recent-client-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.recent-client-sub { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 1px 0 0; }

.payment-tab { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border-radius: 12px; border: 1px solid var(--border); font-size: 11.5px; font-weight: 500; color: var(--text-secondary); cursor: pointer; background: transparent; text-align: center; }
.payment-tab.active { background: linear-gradient(135deg, #3498DB 0%, #2E86C1 100%); color: white; box-shadow: 0 4px 6px -1px rgba(52,152,219,0.3); border-color: transparent; }
.payment-tab:not(.active):hover { background: #f1f5f9; transform: translateY(-1px); }
.dark .payment-tab:not(.active):hover { background: #334155; }
.payment-tab i { font-size: 16px; }

/* === Saved Card === */
.card-shine { background: linear-gradient(135deg, #21618C, #3498DB); position: relative; overflow: hidden; border-radius: 12px; padding: 20px; color: white; cursor: pointer; transition: transform 0.2s; }
.card-shine:hover { transform: scale(1.02); }
.card-shine::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%); transform: rotate(30deg); transition: all 0.6s; }
.card-shine:hover::before { left: 100%; }
.card-shine.selected { box-shadow: 0 0 0 4px rgba(96,165,250,0.5); }

/* === Custom Dropdown === */
.dropdown-option { padding: 12px 16px; cursor: pointer; border-bottom: 1px solid var(--border-light); transition: background 0.2s; display: flex; align-items: center; gap: 12px; }
.dropdown-option:hover { background: rgba(52, 152, 219, 0.08); }
.dropdown-option:last-child { border-bottom: none; }
.dark .dropdown-option:hover { background: rgba(52, 152, 219, 0.15); }
.bg-selected { background: rgba(52, 152, 219, 0.1) !important; }
.dark .bg-selected { background: rgba(52, 152, 219, 0.2) !important; }

/* === Plan Cards === */
.plan-card { border-radius: 16px; padding: 20px; color: white; position: relative; overflow: hidden; transition: transform 0.2s; }
.plan-card:hover { transform: translateY(-2px); }
.plan-card::before { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: rgba(255,255,255,0.1); border-radius: 50%; transform: translate(30%, -30%); }

/* === Toggle Switch === */
.plan-toggle { position: relative; display: inline-block; width: 44px; height: 24px; }
.plan-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.plan-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: 0.4s; border-radius: 24px; }
.dark .plan-slider { background-color: #475569; }
.plan-slider::before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; }
.plan-toggle input:checked + .plan-slider { background-color: #2E86C1; }
.plan-toggle input:checked + .plan-slider::before { transform: translateX(20px); }
.plan-toggle input:disabled + .plan-slider { opacity: 0.55; cursor: not-allowed; }

/* === Transaction Fee === */
.surcharge-active { background: rgba(249,115,22,0.1) !important; border-color: rgba(249,115,22,0.3) !important; }
.dark .surcharge-active { background: rgba(249,115,22,0.2) !important; border-color: rgba(249,115,22,0.4) !important; }

/* === Fee Type Compact Toggle === */
.fee-type-compact {
    color: var(--text-muted);
}
.fee-type-compact:hover {
    background: rgba(249,115,22,0.08) !important;
    color: #ea580c;
}
.fee-type-compact.active {
    background: rgba(249,115,22,0.15) !important;
    color: #ea580c;
    font-weight: 700;
}

/* === Toast === */
.toast-el { position: fixed; bottom: 26px; right: 26px; background: #0f172a; color: #fff; padding: 13px 20px; border-radius: 13px; box-shadow: 0 8px 36px rgba(0,0,0,0.22); display: flex; align-items: center; gap: 11px; transform: translateX(140%); transition: transform 0.36s cubic-bezier(.34,1.56,.64,1); z-index: 10001; font-size: 13px; font-weight: 600; min-width: 260px; }
.toast-el.show { transform: translateX(0); }

/* === Modal === */
.modal-bg { position: fixed; inset: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(5px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.24s; }
.dark .modal-bg { background: rgba(15,23,42,0.85); }
.modal-bg.show { opacity: 1; pointer-events: all; }
.modal-card { background: var(--bg-card); border-radius: 22px; padding: 34px; width: 480px; max-width: 93vw; max-height: 84vh; overflow-y: auto; box-shadow: 0 28px 56px rgba(0,0,0,0.16); transform: translateY(10px); transition: transform 0.26s cubic-bezier(.34,1.56,.64,1); }
.modal-bg.show .modal-card { transform: translateY(0); }
.modal-lg { width: 600px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.modal-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; }
.modal-close-btn { background: none; border: none; font-size: 26px; color: var(--text-muted); cursor: pointer; padding: 0 4px; line-height: 1; transition: color 0.15s; }
.modal-close-btn:hover { color: var(--text-primary); }
.modal-body { display: grid; gap: 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 4px; }
.modal-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; gap: 16px; }
.modal-loading-text { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 0; }

/* Modal — Icon badge */
.mc-icon-badge { width: 44px; height: 44px; border-radius: 12px; background: rgba(75,106,239,0.10); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mc-icon-badge i { font-size: 18px; color: #4B6AEF; }

/* Modal — Dropzone */
.mc-dropzone { border: 2px dashed var(--border); border-radius: 14px; padding: 36px 24px; text-align: center; transition: border-color 0.2s, background 0.2s; cursor: pointer; }
.mc-dropzone:hover { border-color: #4B6AEF; background: rgba(75,106,239,0.03); }
.mc-dropzone.has-file { border-color: #22c55e; background: rgba(34,197,94,0.04); }
.mc-dropzone-icon { margin-bottom: 12px; }
.mc-dropzone-icon i { font-size: 36px; color: var(--text-muted); }
.mc-dropzone.has-file .mc-dropzone-icon i { color: #22c55e; }
.mc-dropzone-file-info { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-secondary); border-radius: 8px; padding: 8px 14px; font-size: 13px; color: var(--text-secondary); max-width: 100%; }
.mc-dropzone-file-info i { color: #4B6AEF; flex-shrink: 0; }

/* Modal — Spinner */
.spinner-border { display: inline-block; width: 36px; height: 36px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: modalSpin 0.7s linear infinite; }
@keyframes modalSpin { to { transform: rotate(360deg); } }

/* === Report Cards === */
.report-card { background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border); transition: all 0.2s; }
.report-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px rgba(0,0,0,0.06); }

/* === Expected Payout === */
.payout-card { background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border); overflow: hidden; }
.payout-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--bg-input); }
.payout-body { padding: 20px; }
.payout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.payout-section { padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-primary); }
.payout-section-highlight { background: linear-gradient(135deg, rgba(20,184,166,0.06), rgba(20,184,166,0.02)); border-color: rgba(20,184,166,0.3); }
.payout-section-title { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; display: flex; align-items: center; }
.payout-tbl { width: 100%; border-collapse: collapse; }
.payout-tbl td { padding: 6px 0; font-size: 13px; color: var(--text-secondary); }
.payout-tbl td.payout-amt { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.payout-total-row td { border-top: 1px solid var(--border); font-weight: 700; padding-top: 8px; color: var(--text-primary); }
.payout-deposit-row td { font-size: 15px; color: var(--text-primary); }
.payout-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }

@media (max-width: 1024px) {
    .payout-grid { grid-template-columns: 1fr; }
}

/* === Progress Bars === */
.prog-track { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.prog-fill { height: 100%; border-radius: 999px; }

/* === Scrollbar === */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }

/* === Horizontal Scroll Container === */
.horizontal-scroll { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
.horizontal-scroll::-webkit-scrollbar { height: 6px; }
.horizontal-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); border-radius: 3px; }
.horizontal-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
.horizontal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.3); }
.dark .horizontal-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.dark .horizontal-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }
.dark .horizontal-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* === Animations === */
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.fade-in { animation: fadeIn 0.28s ease-out; }
.pulse { animation: pulse 2s infinite; }

/* === Loading Skeleton === */
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton-container { padding: 20px; }
.skeleton-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-light); }
.skeleton-row:last-child { border-bottom: none; }
.skeleton-circle {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 400px 100%; animation: shimmer 1.5s infinite;
}
.skeleton-line {
    height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 400px 100%; animation: shimmer 1.5s infinite;
}
.skeleton-line.w-20 { width: 20%; } .skeleton-line.w-25 { width: 25%; }
.skeleton-line.w-30 { width: 30%; } .skeleton-line.w-40 { width: 40%; }
.skeleton-line.w-50 { width: 50%; } .skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-80 { width: 80%; }
.skeleton-line.h-8 { height: 8px; }
.skeleton-line.h-16 { height: 16px; }
.skeleton-stat {
    height: 36px; width: 60%; border-radius: 8px;
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 400px 100%; animation: shimmer 1.5s infinite;
}
.dark .skeleton-circle, .dark .skeleton-line, .dark .skeleton-stat {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 400px 100%;
}

/* === Select Styling === */
select.inp { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%2394a3b8' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }

/* === Utility === */
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-5 { margin-bottom: 20px; } .mb-6 { margin-bottom: 24px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
/* Bootstrap-compatible margin-end / margin-start utilities (me-* / ms-*) */
.me-1 { margin-right: 4px; } .me-2 { margin-right: 8px; } .me-3 { margin-right: 12px; } .me-4 { margin-right: 16px; }
.ms-1 { margin-left: 4px; }  .ms-2 { margin-left: 8px; }  .ms-3 { margin-left: 12px; } .ms-4 { margin-left: 16px; } .ms-auto { margin-left: auto; }
/* Other missing utilities used across pages */
.min-w-0 { min-width: 0; }
.space-y-1 > *+* { margin-top: 4px; }
.flex-wrap { flex-wrap: wrap; }
/* bg-secondary alias — used in workflow CSS */
:root { --bg-secondary: #f1f5f9; }
.dark { --bg-secondary: #0f172a; }
.p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-5 { padding: 20px; } .p-6 { padding: 24px; }
.pt-4 { padding-top: 16px; } .pt-6 { padding-top: 24px; }
.px-2 { padding-left: 8px; padding-right: 8px; } .px-3 { padding-left: 12px; padding-right: 12px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } .py-3 { padding-top: 12px; padding-bottom: 12px; }
.text-xs { font-size: 12px; } .text-sm { font-size: 14px; } .text-lg { font-size: 18px; } .text-xl { font-size: 20px; } .text-2xl { font-size: 24px; }
.font-bold { font-weight: 700; } .font-black { font-weight: 900; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; }
.font-mono { font-family: ui-monospace, monospace; }
.text-center { text-align: center; } .text-right { text-align: right; }
.text-muted { color: var(--text-muted); } .text-secondary { color: var(--text-secondary); }
.text-white { color: white; }
.text-red { color: #ef4444; } .text-green { color: #22c55e; } .text-blue { color: #3498DB; } .text-purple { color: #8b5cf6; } .text-teal { color: #14B8A6; }
.text-brand { color: #2E86C1; }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; }
.flex-1 { flex: 1; } .flex-shrink-0 { flex-shrink: 0; }
.w-full { width: 100%; }
.relative { position: relative; } .absolute { position: absolute; }
.sticky { position: sticky; top: 0; }
.hidden { display: none; } .block { display: block; } .inline-flex { display: inline-flex; } .inline-block { display: inline-block; }
.rounded-full { border-radius: 9999px; } .rounded-xl { border-radius: 12px; } .rounded-lg { border-radius: 8px; }
.overflow-hidden { overflow: hidden; }
.border-t { border-top: 1px solid var(--border); }
.border-b { border-bottom: 1px solid var(--border-light); }
.space-y-2 > *+* { margin-top: 8px; } .space-y-3 > *+* { margin-top: 12px; } .space-y-4 > *+* { margin-top: 16px; }
.capitalize { text-transform: capitalize; }
.uppercase { text-transform: uppercase; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-widest { letter-spacing: 0.1em; }
.italic { font-style: italic; }
.opacity-50 { opacity: 0.5; }
.cursor-pointer { cursor: pointer; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-fit { height: fit-content; }

/* === Pagination === */
/* 3-col grid keeps the "Showing X of Y" label on the left while the controls sit
   dead-center — away from the fixed bottom-right AI assistant button that used to
   overlap them when scrolled to the bottom of a long directory. */
.directory-pagination { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px 18px; border-top: 1px solid var(--border-light); background: #fafbfc; }
.dark .directory-pagination { background: #1e293b; }
.pagination-info { grid-column: 1; font-size: 12px; color: var(--text-muted); font-weight: 500; }
.pagination-controls { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 4px; }
.page-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.page-btn:hover:not(:disabled):not(.active) { background: #EBF5FB; border-color: #AED6F1; color: #2E86C1; }
.dark .page-btn:hover:not(:disabled):not(.active) { background: #253149; border-color: #475569; }
.page-btn.active { background: #2E86C1; color: white; border-color: #2E86C1; box-shadow: 0 2px 8px rgba(75, 106, 239, 0.3); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.page-ellipsis { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; font-weight: 600; }

/* === Login Page === */
.login-wrapper {
    min-height: 100vh;
    background: #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    display: flex;
    width: 820px;
    max-width: 95vw;
    min-height: 480px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

/* Left panel - wave graphics */
.login-left {
    width: 44%;
    background: linear-gradient(160deg, #EBF5FB 0%, #D6EAF8 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.login-waves {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* Right panel - form */
.login-right {
    flex: 1;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
}

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.login-label {
    font-size: 11px;
    font-weight: 700;
    color: #4E545C;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.login-input {
    width: 100%;
    padding: 13px 16px;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    color: #212121;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Poppins', sans-serif;
}

.login-input::placeholder {
    color: #94a3b8;
}

.login-input:focus {
    border-color: #3498DB;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.login-remember {
    display: flex;
    align-items: center;
}

.login-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4E545C;
    cursor: pointer;
}

.login-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #3498DB;
    cursor: pointer;
}

.login-error {
    background: #FEF2F2;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #DC2626;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.28s ease-out;
}

/* Two-step verification method chips */
.login-method-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    background: #fff;
    border: 1.5px solid rgba(148, 163, 184, 0.4);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.login-method-chip:hover {
    border-color: #2E86C1;
    color: #2E86C1;
}
.login-method-chip.active {
    background: #2E86C1;
    border-color: #2E86C1;
    color: #fff;
}
.dark .login-method-chip {
    background: transparent;
    border-color: rgba(148, 163, 184, 0.35);
}

/* Security challenge (math captcha) */
.login-challenge {
    background: rgba(245, 158, 11, 0.06);
    border: 1.5px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    padding: 14px 16px;
    animation: fadeIn 0.28s ease-out;
}
.login-challenge-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b45309;
    margin-bottom: 10px;
}
.login-challenge-question {
    font-size: 18px;
    font-weight: 700;
    color: #2d3748;
    text-align: center;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}
.login-challenge input {
    width: 100%;
    padding: 10px 14px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #2d3748;
    font-family: 'Poppins', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.login-challenge input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.login-challenge input::placeholder { color: #94a3b8; font-weight: 400; }

.login-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #3498DB 0%, #2E86C1 60%, #2874A6 100%);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(46, 134, 193, 0.4);
    font-family: 'Poppins', sans-serif;
    margin-top: 4px;
}

.login-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #2E86C1 0%, #2874A6 60%, #21618C 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(46, 134, 193, 0.5);
}

.login-btn:active:not(:disabled) {
    transform: translateY(0);
}

.login-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.login-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(46, 134, 193, 0.3);
    border-top-color: #2E86C1;
    border-radius: 50%;
    animation: loginSpin 0.7s linear infinite;
    display: inline-block;
}
/* Keep spinner white when inside a button with white text */
.login-btn .login-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}

@keyframes loginSpin {
    to { transform: rotate(360deg); }
}

.login-footer {
    margin-top: 32px;
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

.login-footer a {
    color: #4E545C;
    text-decoration: none;
    transition: color 0.2s;
}

.login-footer a:hover {
    color: #2E86C1;
}

/* === Location & Terminal Selector === */
.selector-card {
    width: 480px;
    max-width: 95vw;
    background: #ffffff;
    border-radius: 20px;
    padding: 44px 40px 36px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid #e2e8f0;
}

.selector-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 28px;
}

.selector-title {
    font-size: 26px;
    font-weight: 300;
    color: #212121;
    margin-bottom: 36px;
    letter-spacing: -0.01em;
}

.selector-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.selector-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selector-label {
    font-size: 13px;
    font-weight: 600;
    color: #4E545C;
}

.selector-select {
    width: 100%;
    padding: 13px 40px 13px 16px;
    background: #f8f9fa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    color: #212121;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Poppins', sans-serif;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    cursor: pointer;
}

.selector-select:focus {
    border-color: #3498DB;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}

.selector-select option {
    background: #ffffff;
    color: #212121;
    padding: 8px;
}

.selector-remember {
    display: flex;
    align-items: center;
}

.selector-btn {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, #3498DB 0%, #2E86C1 60%, #2874A6 100%);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(46, 134, 193, 0.4);
    font-family: 'Poppins', sans-serif;
    margin-top: 4px;
}

.selector-btn:hover {
    background: linear-gradient(135deg, #2E86C1 0%, #2874A6 60%, #21618C 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(46, 134, 193, 0.5);
}

.selector-btn:active {
    transform: translateY(0);
}

/* Login responsive */
@media (max-width: 700px) {
    .login-card {
        flex-direction: column;
        min-height: auto;
    }
    .login-left {
        width: 100%;
        height: 160px;
    }
    .login-right {
        padding: 32px 28px;
    }
}

/* === Login/Selector Theme Toggle === */
.login-theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #4E545C;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    z-index: 10;
}
.login-theme-toggle:hover { background: #f1f5f9; transform: scale(1.05); }
.dark .login-theme-toggle {
    background: #334155;
    border-color: #475569;
    color: #fbbf24;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.dark .login-theme-toggle:hover { background: #475569; }

/* === Dark Mode: Login Page === */
.dark .login-wrapper { background: #0f172a; }
.dark .login-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
.dark .login-left { background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%); }
.dark .login-right { background: #1e293b; }
.dark .login-label { color: #94a3b8; }
.dark .login-input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}
.dark .login-input::placeholder { color: #475569; }
.dark .login-input:focus {
    border-color: #3498DB;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
.dark .login-checkbox-label { color: #94a3b8; }
.dark .login-error {
    background: rgba(239, 68, 68, 0.12);
    color: #fca5a5;
}
.dark .login-challenge {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}
.dark .login-challenge-label { color: #fbbf24; }
.dark .login-challenge-question { color: #f1f5f9; }
.dark .login-challenge input {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}
.dark .login-challenge input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}
.dark .login-challenge input::placeholder { color: #475569; }
.dark .login-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: white;
}
.dark .login-footer { color: #475569; }
.dark .login-footer a { color: #64748b; }
.dark .login-footer a:hover { color: #94a3b8; }

/* === Dark Mode: Selector Page === */
.dark .selector-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}
.dark .selector-title { color: #e2e8f0; }
.dark .selector-label { color: #94a3b8; }
.dark .selector-select {
    background-color: #0f172a;
    border-color: #334155;
    color: #cbd5e1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
.dark .selector-select:focus {
    border-color: #3498DB;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.25);
}
.dark .selector-select option { background: #0f172a; color: #cbd5e1; }
.dark .selector-btn {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.dark .selector-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* === Blazor error boundary === */
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }
.transaction-card-clickable:hover { transform: translateX(4px); background: var(--bg-card) \!important; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* === Hamburger Button === */
.hamburger-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.15s;
}
.hamburger-btn:hover { background: var(--bg-input); }

/* === Desktop Sidebar Collapsed (icon rail) === */
.sidebar-collapsed { width: 64px; }
.sidebar-collapsed .sidebar-logo { justify-content: center; padding: 0; }
.sidebar-collapsed .app-logo-text { display: none; }
.sidebar-collapsed .sidebar-section-label { opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
.sidebar-collapsed .link-text { display: none; }
.sidebar-collapsed .sidebar-link {
    justify-content: center;
    padding: 12px;
    margin: 3px 8px;
    width: calc(100% - 16px);
    border-left: none !important;
    border-radius: 12px !important;
    margin-left: 8px !important;
    padding-left: 12px !important;
}
.sidebar-collapsed .sidebar-link i { width: auto; font-size: 17px; }
.sidebar-collapsed .sidebar-footer { padding: 12px 8px; }
.sidebar-collapsed .theme-btn { padding: 10px; gap: 0; }
.sidebar-collapsed .theme-btn i { margin: 0; }

/* === Sidebar Overlay (mobile) === */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(2px);
    z-index: 999;
    animation: fadeIn 0.2s ease-out;
}
.dark .sidebar-overlay { background: rgba(15,23,42,0.8); }

/* === Tablet Responsive (≤1024px) === */
@media (max-width: 1024px) {
    .sidebar:not(.sidebar-collapsed) { width: 240px; }
    .content-area { padding: 20px 20px var(--page-bottom-space); }
    .top-header { padding: 0 20px; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-5 { grid-template-columns: repeat(2, 1fr); }
    .payment-grid { gap: 16px; }
    .payment-method-tabs { grid-template-columns: repeat(3, 1fr); }
}

/* === Mobile Responsive (≤768px) === */
@media (max-width: 768px) {
    /* Sidebar: off-screen left, slides in (override desktop collapsed width) */
    .sidebar, .sidebar.sidebar-collapsed {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 280px;
        z-index: 1000;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: none;
    }
    .sidebar.sidebar-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.15);
    }
    /* On mobile, always show full sidebar content (not icon rail) */
    .sidebar.sidebar-open .link-text { display: inline; }
    .sidebar.sidebar-open .sidebar-section-label { opacity: 1; height: auto; margin-bottom: 6px; padding: 0 24px; }
    .sidebar.sidebar-open .app-logo-text { display: inline; }
    .sidebar.sidebar-open .sidebar-link {
        justify-content: flex-start;
        padding: 10px 16px;
        margin: 3px 14px;
        width: calc(100% - 28px);
    }
    .sidebar.sidebar-open .sidebar-logo { justify-content: flex-start; padding: 0 20px; }
    .sidebar.sidebar-open .theme-btn { gap: 8px; }

    /* Show overlay when sidebar open */
    .sidebar-overlay { display: block; }

    /* Header */
    .top-header { height: 60px; padding: 0 16px; }
    .page-title { font-size: 16px; }

    /* Content */
    .content-area { padding: 16px 16px var(--page-bottom-space); }
    .content-container { max-width: 100%; }

    /* Grids collapse to single column */
    .grid-2, .grid-3, .grid-4, .grid-5 {
        grid-template-columns: 1fr;
    }
    .col-span-2 { grid-column: span 1; }

    /* Cards */
    .card { padding: 16px; border-radius: 12px; }
    .card-xl { border-radius: 14px; }

    /* Modal */
    .modal-card { width: 95vw; padding: 24px; border-radius: 16px; }

    /* Header right items */
    .header-right { gap: 12px; }
    .terminal-status { display: none; }

    /* Stat cards */
    .stat-value { font-size: 20px; }
    .stat-value.xl { font-size: 18px; }

    /* Tables: horizontal scroll */
    .tbl { min-width: 600px; }
    .card:has(.tbl) { overflow-x: auto; }

    /* Selector card responsive */
    .selector-card { padding: 32px 24px 28px; }

    /* === Payment Page Mobile === */
    /* Stack main grid to single column — client overview moves below */
    .payment-grid {
        grid-template-columns: 1fr;
    }

    /* Payment method tabs: 3 columns instead of 6 */
    .payment-method-tabs {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .payment-tab {
        padding: 10px 6px;
        font-size: 11px;
        gap: 5px;
    }
    .payment-tab i { font-size: 15px; }

    /* Search row: stack input and button on very small screens */
    .payment-search-row {
        flex-wrap: wrap;
    }
    .payment-search-row > .relative { flex: 1 1 100%; min-width: 0; }
    .payment-search-row > .btn { flex: 1 1 100%; justify-content: center; }

    /* Client overview panel: no sticky on mobile, order after main content */
    .payment-grid > .card.sticky,
    .payment-grid > .payment-side.sticky {
        position: static;
    }

    /* Card preview shrink */
    .card-shine { padding: 16px; }
    .card-shine .font-mono.text-xl { font-size: 16px; letter-spacing: 0.1em; }

    /* Integration fields: single column */
    .payment-grid .grid-2 { grid-template-columns: 1fr; }

    /* Transaction Fee / Convenience fee row */
    .payment-grid .flex.justify-between.items-center.p-3 {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* ==========================================================================
   Notification Panel
   ========================================================================== */

.notif-btn-wrap { position: relative; }

/* Overlay for closing panel on click-outside */
.notif-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(5px);
    z-index: 999;
}
.dark .notif-overlay { background: rgba(15,23,42,0.85); }

/* Panel container */
.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: -40px;
    width: 400px;
    max-height: 500px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.notif-panel-header {
    display: flex;
    align-items: center;
    padding: 16px 18px 14px;
    border-bottom: 1px solid var(--border-color);
    gap: 10px;
}
.notif-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
}
.notif-panel-count {
    font-size: 11px;
    font-weight: 600;
    color: #ef4444;
    background: #fef2f2;
    padding: 2px 8px;
    border-radius: 10px;
}
.dark .notif-panel-count {
    background: rgba(239, 68, 68, 0.15);
}
.notif-panel-refresh {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
    font-size: 13px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.notif-panel-refresh:hover {
    color: var(--text-secondary);
    background: var(--hover-bg);
}

/* Scrollable list */
.notif-panel-list {
    overflow-y: auto;
    flex: 1;
    max-height: 440px;
}

/* Empty state */
.notif-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: var(--text-muted);
    gap: 10px;
}
.notif-empty i { font-size: 32px; opacity: 0.3; }
.notif-empty p { font-size: 13px; margin: 0; }

/* --- Notification item --- */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--hover-bg); }

/* Unread / read states */
.notif-item.unread { background: rgba(46, 134, 193, 0.05); }
.notif-item.read .notif-item-amount { color: var(--text-muted); font-weight: 600; }
.notif-item.read .notif-item-contact { color: var(--text-muted); }
.notif-item.read .notif-item-type { color: var(--text-muted); }
.notif-item.unread .notif-item-amount { color: var(--text-primary); }
.notif-item.unread .notif-item-type { color: var(--text-secondary); }

/* Left dot indicator */
.notif-item-left {
    padding-top: 5px;
    flex-shrink: 0;
}
.notif-item-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.dot-payment { background: #2E86C1; }
.dot-refund { background: #ef4444; }
.notif-item.read .notif-item-dot { background: #cbd5e1; }
.dark .notif-item.read .notif-item-dot { background: #475569; }

/* Body */
.notif-item-body {
    flex: 1;
    min-width: 0;
}

/* Top row: type + badge + time */
.notif-item-top {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.notif-item-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.notif-item-time {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
}

/* Main row: amount + contact */
.notif-item-main {
    display: flex;
    align-items: baseline;
    gap: 0;
}
.notif-item-amount {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.notif-amount-negative {
    color: #ef4444 !important;
}
.notif-item-sep {
    margin: 0 6px;
    color: var(--text-muted);
    font-size: 12px;
}
.notif-item-contact {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Reference line */
.notif-item-ref {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    letter-spacing: 0.01em;
    opacity: 0.7;
}

/* Status badges */
.notif-status-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.badge-approved { background: #d1fae5; color: #065f46; }
.badge-declined { background: #fee2e2; color: #991b1b; }
.badge-pending  { background: #fef3c7; color: #92400e; }
.badge-default  { background: #e2e8f0; color: #475569; }

.dark .badge-approved { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }
.dark .badge-declined { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.dark .badge-pending  { background: rgba(245, 158, 11, 0.2); color: #fcd34d; }
.dark .badge-default  { background: rgba(148, 163, 184, 0.2); color: #94a3b8; }

/* Mark as read button */
.notif-item-mark {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px 7px;
    font-size: 10px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: all 0.15s;
    align-self: center;
    opacity: 0;
}
.notif-item:hover .notif-item-mark { opacity: 1; }
.notif-item-mark:hover {
    color: #10b981;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

/* Panel footer with View All link */
.notif-panel-footer {
    border-top: 1px solid var(--border-color);
    padding: 10px 18px;
    text-align: center;
}
.notif-panel-viewall {
    font-size: 13px;
    font-weight: 600;
    color: #2E86C1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
.notif-panel-viewall:hover { color: #1a6da3; }
.notif-panel-viewall i { font-size: 11px; }

/* Mobile responsive — dropdown panel */
@media (max-width: 480px) {
    .notif-panel {
        position: fixed;
        top: 56px;
        right: 12px;
        left: 12px;
        width: auto;
    }
    .notif-item-mark { opacity: 1; }
}

/* ==========================================================================
   Notifications Detail Page
   ========================================================================== */

/* Toolbar */
.notif-page-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.notif-page-filters {
    display: flex;
    gap: 12px;
    flex: 1;
    flex-wrap: wrap;
    align-items: flex-end;
}
.notif-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.notif-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.notif-filter-select {
    padding: 8px 32px 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 140px;
}
.notif-filter-select:focus {
    outline: none;
    border-color: #2E86C1;
    box-shadow: 0 0 0 2px rgba(46, 134, 193, 0.15);
}
.dark .notif-filter-select {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Search input */
.notif-search-group { flex: 1; min-width: 200px; }
.notif-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.notif-search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-muted);
    font-size: 12px;
    pointer-events: none;
}
.notif-search-input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}
.notif-search-input:focus {
    outline: none;
    border-color: #2E86C1;
    box-shadow: 0 0 0 2px rgba(46, 134, 193, 0.15);
}
.notif-search-input::placeholder {
    color: var(--text-muted);
}
.dark .notif-search-input {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Refresh button */
.notif-refresh-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: #2E86C1;
    color: white;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: background 0.15s;
}
.notif-refresh-btn:hover { background: #1a6da3; }
.notif-refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Loading & empty states */
.notif-page-loading, .notif-page-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.notif-page-empty i { font-size: 36px; opacity: 0.3; margin-bottom: 12px; }
.notif-page-empty p { font-size: 14px; }

/* Table row states */
.notif-row-incomplete td { font-weight: 500; }
.notif-row-complete td { color: var(--text-muted); }
.notif-row-complete td:first-child { font-weight: 400; }

/* Time column */
.notif-td-time {
    font-size: 12px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

/* Reference column */
.notif-td-ref {
    font-size: 12px;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    letter-spacing: -0.01em;
}

/* Payment type badges (matching desktop app colors) */
.notif-type-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    display: inline-block;
}
.type-savedcard  { background: #f3e8fd; color: #7B1FA2; }
.type-cardentry  { background: #fef7e0; color: #E37400; }
.type-ach        { background: #e4f7fb; color: #00838F; }
.type-achvoid    { background: #f1f3f4; color: #5F6368; }
.type-void       { background: #f1f3f4; color: #5F6368; }
.type-refund     { background: #fce8e6; color: #D93025; }
.type-text2pay   { background: #e8f0fe; color: #1967D2; }
.type-terminal   { background: #e6f4ea; color: #1E8E3E; }
.type-default    { background: #f8f9fa; color: #5F6368; }

.dark .type-savedcard  { background: rgba(123, 31, 162, 0.2); color: #ce93d8; }
.dark .type-cardentry  { background: rgba(227, 116, 0, 0.2); color: #ffb74d; }
.dark .type-ach        { background: rgba(0, 131, 143, 0.2); color: #4dd0e1; }
.dark .type-achvoid    { background: rgba(95, 99, 104, 0.2); color: #9aa0a6; }
.dark .type-void       { background: rgba(95, 99, 104, 0.2); color: #9aa0a6; }
.dark .type-refund     { background: rgba(217, 48, 37, 0.2); color: #ef9a9a; }
.dark .type-text2pay   { background: rgba(25, 103, 210, 0.2); color: #90caf9; }
.dark .type-terminal   { background: rgba(30, 142, 62, 0.2); color: #81c784; }
.dark .type-default    { background: rgba(95, 99, 104, 0.2); color: #9aa0a6; }

/* Mark Complete button */
.notif-mark-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 16px;
    background: #2E86C1;
    color: white;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.notif-mark-btn:hover { background: #1a6da3; }

/* Completed badge */
.notif-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #1E8E3E;
    background: #e6f4ea;
    padding: 4px 10px;
    border-radius: 12px;
}
.dark .notif-completed-badge {
    background: rgba(30, 142, 62, 0.2);
    color: #81c784;
}

/* Summary bar */
.notif-page-summary {
    padding: 12px 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Mobile responsive — detail page */
@media (max-width: 768px) {
    .notif-page-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .notif-page-filters {
        flex-direction: column;
    }
    .notif-filter-select { width: 100%; }
    .notif-search-group { min-width: 0; }
}

/* ==========================================================================
   Contact Details Page (/contact/{id})
   ========================================================================== */

/* Header section */
.cd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    gap: 16px;
}
.cd-header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}
.cd-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2E86C1 0%, #7C3AED 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}
.cd-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.02em;
}
.cd-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.status-pill-active {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}
.status-pill-inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}
.cd-crm-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cd-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Info + side cards row */
.cd-info-row {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

/* Contact info card */
.cd-info-card {
    padding: 0;
    overflow: hidden;
}
.cd-section-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
}
.cd-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cd-section-title i {
    color: #2E86C1;
    font-size: 12px;
}
.cd-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
}
.cd-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cd-info-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 5px;
}
.cd-info-label i {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.7;
    width: 12px;
    text-align: center;
}
.cd-info-value {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Side cards stack */
.cd-side-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Quick Stats */
.cd-stats-card { padding: 0; overflow: hidden; }
.cd-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.cd-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
}
.cd-stat-item:nth-child(2n) { border-right: none; }
.cd-stat-item:nth-child(n+3) { border-bottom: none; }
.cd-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.cd-stat-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

/* Payment Methods card */
.cd-payment-methods-card { padding: 0; overflow: hidden; }
.cd-payment-list { padding: 0; }
.cd-empty-methods {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 16px;
}
.cd-method-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.15s;
}
.cd-method-item:last-child { border-bottom: none; }
.cd-method-item:hover { background: var(--bg-secondary); }
.cd-method-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(46, 134, 193, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #2E86C1;
    font-size: 14px;
}
.cd-method-ach {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}
.cd-method-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.cd-method-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Tabs */
.cd-tabs-header {
    display: flex;
    border-bottom: 1px solid var(--border-light);
    padding: 0 16px;
    background: var(--bg-card);
}
.cd-tab-btn {
    background: none;
    border: none;
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cd-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}
.cd-tab-btn.active {
    color: #2E86C1;
    border-bottom-color: #2E86C1;
}
.cd-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--bg-secondary);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}
.cd-tab-btn.active .cd-tab-count {
    background: rgba(46, 134, 193, 0.12);
    color: #2E86C1;
}
.cd-tabs-content {
    min-height: 200px;
}
.cd-empty-tab {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
}
.cd-empty-tab i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
    display: block;
}
.cd-empty-tab p {
    margin: 0;
    font-size: 14px;
}

/* Edit modal form rows */
.cd-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.cd-form-row-3 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}
.cd-modal-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2E86C1 0%, #7C3AED 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

/* Add Card modal send options */
.cd-send-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.18s;
    background: var(--bg-primary);
    user-select: none;
}
.cd-send-option:not(.disabled):hover {
    border-color: #2E86C1;
    background: rgba(75, 106, 239, 0.04);
}
.cd-send-option.active {
    border-color: #2E86C1;
    background: rgba(75, 106, 239, 0.08);
}
.cd-send-option.disabled {
    opacity: 0.42;
    cursor: not-allowed;
}
.cd-send-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    color: var(--text-muted);
    transition: all 0.18s;
}
.cd-send-option.active .cd-send-icon {
    background: rgba(75, 106, 239, 0.15);
    color: #2E86C1;
}

/* Responsive — Contact Details */
@media (max-width: 992px) {
    .cd-info-row {
        grid-template-columns: 1fr;
    }
    .cd-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .cd-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
}
@media (max-width: 640px) {
    .cd-info-grid {
        grid-template-columns: 1fr;
    }
    .cd-form-row, .cd-form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* ===== Overview Charts ===== */

/* --- Bar Chart (Daily Revenue) --- */
.ov-chart-card { padding:0; overflow:hidden; }
.ov-chart-hdr { padding:16px 20px 0; display:flex; align-items:center; justify-content:space-between; }
.ov-chart-title { font-size:13px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.ov-chart-title i { color:#2E86C1; font-size:12px; }
.ov-chart-sub { font-size:10px; color:var(--text-muted); font-weight:500; }
.ov-bar-wrap { display:flex; align-items:flex-end; gap:6px; padding:16px 20px 8px; height:180px; }
.ov-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; justify-content:flex-end; }
.ov-bar { width:100%; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg,#2E86C1 0%,#3498DB 100%); min-height:4px; transition:height 0.8s cubic-bezier(0.34,1.56,0.64,1); position:relative; }
.ov-bar:hover { filter:brightness(1.15); }
.ov-bar-label { font-size:9px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; white-space:nowrap; }
.ov-bar-val { font-size:8px; font-weight:700; color:var(--text-primary); white-space:nowrap; }
.ov-bar-axis { display:flex; justify-content:space-between; padding:0 20px 12px; border-top:1px solid var(--border-light); margin-top:4px; }
.dark .ov-bar { background:linear-gradient(180deg,#3498DB 0%,#2E86C1 100%); }

/* --- Donut Chart (Transaction Types) --- */
.ov-donut-wrap { display:flex; align-items:center; gap:24px; padding:20px; }
.ov-donut-ring { width:120px; height:120px; border-radius:50%; position:relative; flex-shrink:0; }
.ov-donut-ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ov-donut-ring circle { fill:none; stroke-width:24; stroke-linecap:round; transition:stroke-dasharray 1s ease-out, stroke-dashoffset 1s ease-out; }
.ov-donut-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.ov-donut-center-val { font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.1; }
.ov-donut-center-lbl { font-size:9px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
.ov-donut-legend { flex:1; display:flex; flex-direction:column; gap:10px; }
.ov-legend-item { display:flex; align-items:center; gap:8px; }
.ov-legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.ov-legend-text { font-size:12px; font-weight:500; color:var(--text-primary); flex:1; }
.ov-legend-val { font-size:12px; font-weight:700; color:var(--text-primary); }
.ov-legend-pct { font-size:10px; font-weight:600; color:var(--text-muted); margin-left:4px; }

/* --- Horizontal Bar Chart (Top Contacts / Card Types) --- */
.ov-hbar-list { padding:16px 20px; display:flex; flex-direction:column; gap:12px; }
.ov-hbar-row { display:flex; align-items:center; gap:10px; }
.ov-hbar-rank { width:18px; height:18px; border-radius:50%; background:rgba(46,134,193,0.1); color:#2E86C1; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ov-hbar-name { font-size:12px; font-weight:600; color:var(--text-primary); width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0; }
.ov-hbar-track { flex:1; height:22px; background:var(--bg-input); border-radius:6px; overflow:hidden; position:relative; }
.ov-hbar-fill { height:100%; border-radius:6px; transition:width 0.8s cubic-bezier(0.34,1.56,0.64,1); display:flex; align-items:center; justify-content:flex-end; padding-right:6px; min-width:30px; }
.ov-hbar-fill span { font-size:9px; font-weight:700; color:#fff; white-space:nowrap; }
.ov-hbar-amount { font-size:11px; font-weight:600; color:var(--text-primary); width:70px; text-align:right; flex-shrink:0; }

/* --- Hourly Activity Mini Bars --- */
.ov-hour-wrap { display:flex; align-items:flex-end; gap:2px; padding:16px 20px 8px; height:100px; }
.ov-hour-bar { flex:1; border-radius:3px 3px 1px 1px; min-height:2px; transition:height 0.6s ease-out; cursor:default; position:relative; }
.ov-hour-bar:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 4px); left:50%; transform:translateX(-50%); background:var(--text-primary); color:var(--bg-card); font-size:9px; font-weight:600; padding:3px 6px; border-radius:4px; white-space:nowrap; z-index:2; pointer-events:none; }
.ov-hour-labels { display:flex; justify-content:space-between; padding:2px 20px 12px; }
.ov-hour-labels span { font-size:8px; color:var(--text-muted); font-weight:600; }

/* --- Status Progress Bar --- */
.ov-status-bar { display:flex; height:28px; border-radius:8px; overflow:hidden; margin:0 20px 12px; }
.ov-status-seg { transition:width 0.8s ease-out; display:flex; align-items:center; justify-content:center; min-width:20px; }
.ov-status-seg span { font-size:9px; font-weight:700; color:#fff; white-space:nowrap; }
.ov-status-legend { display:flex; gap:16px; padding:0 20px 16px; flex-wrap:wrap; }
.ov-status-legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); font-weight:500; }
.ov-status-legend-dot { width:8px; height:8px; border-radius:2px; }

/* --- Chart grid layout --- */
.ov-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ov-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media (max-width:992px) { .ov-grid-2, .ov-grid-3 { grid-template-columns:1fr; } }

/* --- Animate-in --- */
@keyframes ovSlideUp { 0% { opacity:0; transform:translateY(12px); } 100% { opacity:1; transform:translateY(0); } }
.ov-anim { animation:ovSlideUp 0.5s ease-out both; }
.ov-anim-d1 { animation-delay:0.05s; }
.ov-anim-d2 { animation-delay:0.1s; }
.ov-anim-d3 { animation-delay:0.15s; }
.ov-anim-d4 { animation-delay:0.2s; }
.ov-anim-d5 { animation-delay:0.25s; }

/* ============================================================
   INVOICE DISPLAY PAGE  (InvoiceDisplay.razor + InvoiceLayout)
   ============================================================ */

/* --- Button spinner (inline loading indicator) --- */
.btn-spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:modalSpin 0.7s linear infinite; vertical-align:middle; }

/* --- Loading / error wrapper --- */
.inv-loading-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.inv-loading-box { background:var(--bg-card); border-radius:20px; padding:48px 40px; box-shadow:0 8px 32px rgba(0,0,0,0.10); text-align:center; }

/* --- Page shell --- */
.inv-page { display:flex; flex-direction:column; min-height:100vh; }

/* --- Top bar --- */
.inv-topbar { position:sticky; top:0; z-index:100; background:var(--bg-card); border-bottom:1px solid var(--border); box-shadow:0 1px 8px rgba(0,0,0,0.06); }
.inv-topbar-inner { max-width:900px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.inv-logo { height:40px; object-fit:contain; border-radius:8px; }
.inv-biz-avatar { width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg,#2E86C1,#1a5f8a); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; flex-shrink:0; }
.inv-biz-name { font-size:15px; font-weight:700; color:var(--text-primary); }
.inv-biz-sub { font-size:12px; color:var(--text-secondary); margin-top:1px; }
.inv-amount-pill { display:inline-flex; align-items:center; padding:6px 16px; border-radius:999px; background:var(--bg-input); border:1px solid var(--border); font-size:15px; font-weight:800; color:var(--text-primary); white-space:nowrap; }

/* --- Status chips --- */
.inv-status-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:0.05em; }
.inv-chip-paid    { background:#dcfce7; color:#16a34a; }
.inv-chip-void    { background:#fef9c3; color:#a16207; }
.inv-chip-deleted { background:#fee2e2; color:#DC2626; }
.inv-chip-pending { background:#e0f2fe; color:#0369a1; }
.dark .inv-chip-paid    { background:rgba(22,163,74,0.18); color:#4ade80; }
.dark .inv-chip-void    { background:rgba(161,98,7,0.18); color:#facc15; }
.dark .inv-chip-deleted { background:rgba(220,38,38,0.18); color:#f87171; }
.dark .inv-chip-pending { background:rgba(3,105,161,0.18); color:#38bdf8; }

/* --- Invoice content area --- */
.inv-content-area { flex:1; overflow-y:auto; padding:24px; background:var(--bg-secondary); padding-bottom:100px; }
.inv-html-card { max-width:900px; margin:0 auto; background:#fff; border-radius:12px; box-shadow:0 4px 20px rgba(0,0,0,0.08); overflow:hidden; }
.dark .inv-html-card { background:var(--bg-card); box-shadow:0 4px 20px rgba(0,0,0,0.3); }

/* --- Sticky footer action bar --- */
.inv-footer-bar { position:fixed; bottom:0; left:0; right:0; z-index:200; background:var(--bg-card); border-top:1px solid var(--border); box-shadow:0 -4px 20px rgba(0,0,0,0.08); }
.inv-footer-inner { max-width:900px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* --- Footer buttons --- */
.inv-footer-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 20px; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); transition:all 0.2s; }
.inv-footer-btn:hover { background:var(--bg-input); border-color:var(--primary); color:var(--primary); }
.inv-footer-btn:disabled { opacity:0.5; cursor:not-allowed; }
.inv-btn-pay { display:inline-flex; align-items:center; gap:8px; padding:11px 28px; border-radius:10px; font-size:14px; font-weight:700; cursor:pointer; border:1px solid #2E86C1; background:#2E86C1; color:#fff; box-shadow:0 4px 16px rgba(46,134,193,0.35); transition:all 0.2s; margin-left:auto; }
.inv-btn-pay:hover { background:#2474A4; border-color:#2474A4; box-shadow:0 6px 20px rgba(46,134,193,0.45); }
.inv-btn-pay:disabled { opacity:0.55; cursor:not-allowed; }

/* --- Paid / voided / deleted status in footer --- */
.inv-paid-badge { display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:10px; background:#dcfce7; color:#16a34a; font-size:13px; font-weight:700; }
.dark .inv-paid-badge { background:rgba(22,163,74,0.18); color:#4ade80; }
.inv-status-notice { display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600; }
.inv-notice-void    { background:#fef9c3; color:#a16207; }
.inv-notice-deleted { background:#fee2e2; color:#DC2626; }
.dark .inv-notice-void    { background:rgba(161,98,7,0.18); color:#facc15; }
.dark .inv-notice-deleted { background:rgba(220,38,38,0.18); color:#f87171; }
.inv-notice-info    { background:#e0f2fe; color:#0369a1; }
.dark .inv-notice-info    { background:rgba(3,105,161,0.18); color:#7dd3fc; }

/* --- Payment modal colored header --- */
.inv-modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 20px; }
.inv-modal-title  { margin:0; color:#fff; font-size:15px; font-weight:700; }
.inv-modal-nav-btn { background:none; border:none; color:rgba(255,255,255,0.9); font-size:17px; cursor:pointer; padding:4px; line-height:1; transition:color 0.15s; }
.inv-modal-nav-btn:hover { color:#fff; }

/* --- Invoice summary pill inside payment modal --- */
.inv-pay-summary { display:flex; align-items:center; gap:14px; background:var(--bg-input); border-radius:12px; padding:14px 18px; margin-bottom:16px; }
.inv-pay-icon { width:40px; height:40px; border-radius:10px; background:#e0f2fe; color:#0369a1; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.dark .inv-pay-icon { background:rgba(3,105,161,0.2); color:#38bdf8; }
.inv-pay-label  { font-size:12px; color:var(--text-secondary); font-weight:600; }
.inv-pay-amount { font-size:20px; font-weight:800; color:var(--text-primary); line-height:1.2; }

/* --- Payment option cards --- */
.pay-option-card { border:2px solid var(--border); border-radius:12px; margin-bottom:10px; cursor:pointer; transition:all 0.2s; overflow:hidden; }
.pay-option-card:hover { border-color:#2E86C1; box-shadow:0 2px 12px rgba(46,134,193,0.12); }
.pay-option-card.selected { border-color:#2E86C1; box-shadow:0 4px 16px rgba(46,134,193,0.15); }
.pay-option-header { display:flex; align-items:center; gap:14px; padding:16px; }
.pay-option-icon { font-size:22px; flex-shrink:0; }
.pay-option-info { flex:1; }
.pay-option-title { display:block; font-size:14px; font-weight:700; color:var(--text-primary); }
.pay-option-sub   { display:block; font-size:12px; color:var(--text-secondary); margin-top:2px; }
.pay-option-radio { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); flex-shrink:0; transition:all 0.2s; }
.pay-option-radio.checked { border-color:#2E86C1; background:#2E86C1; box-shadow:inset 0 0 0 4px var(--bg-card); }
.pay-option-body { border-top:1px solid var(--border); padding:14px 16px; background:var(--bg-input); }

/* --- Fee breakdown rows --- */
.pay-fee-row { display:flex; flex-direction:column; gap:6px; padding:10px 0; }
.pay-fee-item { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-secondary); }
.pay-fee-total { font-weight:700; color:var(--text-primary); font-size:14px; }

/* --- Inline error inside modals --- */
.inv-inline-error { display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:8px; background:rgba(220,38,38,0.08); color:#DC2626; font-size:13px; font-weight:500; margin-top:8px; border:1px solid rgba(220,38,38,0.15); }
.dark .inv-inline-error { background:rgba(220,38,38,0.15); color:#f87171; border-color:rgba(248,113,113,0.2); }

/* --- Polling waiting box --- */
.inv-polling-box { text-align:center; padding:20px 12px; background:var(--bg-secondary); border-radius:10px; margin-top:10px; }

/* --- Auto-pay section --- */
.inv-autopay-section { border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-top:10px; background:var(--bg-input); }
.inv-autopay-toggle { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13px; font-weight:600; color:var(--text-primary); }
.inv-autopay-toggle input[type=checkbox] { margin-top:2px; flex-shrink:0; accent-color:#2E86C1; }
.inv-autopay-options { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.inv-autopay-radio { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); cursor:pointer; }
.inv-autopay-radio input[type=radio] { accent-color:#2E86C1; }
.inv-autopay-num { width:58px; padding:4px 6px; border:1px solid var(--border); border-radius:6px; font-size:13px; background:var(--bg-card); color:var(--text-primary); text-align:center; }

/* --- ACH modal total display --- */
.inv-ach-total { display:flex; justify-content:space-between; align-items:center; background:var(--bg-input); border-radius:10px; padding:14px 18px; margin-bottom:20px; }
.inv-ach-amount { font-size:22px; font-weight:800; color:#16a34a; }

/* --- Print styles: hide the sticky footer when printing --- */
@media print {
    .inv-topbar, .inv-footer-bar { display:none !important; }
    .inv-content-area { padding:0 !important; padding-bottom:0 !important; overflow:visible !important; }
    .inv-html-card { box-shadow:none !important; border-radius:0 !important; }
}
.ov-anim-d6 { animation-delay:0.3s; }

/* === PDF Export Helpers === */
.report-card,
.card.ov-chart-card,
.ov-grid-2 {
    page-break-inside: avoid;
}

/* ═══════════════════════════════════════════════════════
   AI Features — AiHelp & AiAssistant pages
   ═══════════════════════════════════════════════════════ */

/* ─── AI Query header button & panel ───────────────────────────────────────── */
.aiq-header-btn { transition:background 0.15s, color 0.15s; }
.aiq-header-btn.active,
.aiq-header-btn:hover { color:var(--brand-600); background:rgba(46,134,193,0.10); }

/* Wider panel for query results (table may be wide) */
.aiq-panel { width:560px; }
@media (max-width:620px) { .aiq-panel { width:100vw; } }

/* Panel inner layout */
.aiqp-inner { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.aiqp-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--border);
    background:var(--bg-card); flex-shrink:0;
}
.aiqp-header-icon {
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(135deg, var(--brand-600), var(--brand-500));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:15px;
}
.aiqp-close-btn {
    width:30px; height:30px; border-radius:8px; border:none;
    background:transparent; color:var(--text-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s; font-size:14px;
}
.aiqp-close-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }

.aiqp-body { flex:1; min-height:0; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
/* Cards must keep their full height so the body scrolls instead of clipping them */
.aiqp-body > * { flex-shrink:0; }

/* Left-edge drag handle for resizing the panel */
.aiq-panel { max-width:calc(100vw - 40px); }
.aiqp-resize-handle {
    position:absolute; left:0; top:0; bottom:0; width:6px; z-index:2;
    cursor:ew-resize; background:transparent; transition:background 0.15s;
}
.aiqp-resize-handle:hover,
.aiq-panel.aiq-resizing .aiqp-resize-handle { background:rgba(46,134,193,0.35); }
.aiq-panel.aiq-resizing { user-select:none; }
.dark .aiqp-resize-handle:hover,
.dark .aiq-panel.aiq-resizing .aiqp-resize-handle { background:rgba(52,152,219,0.45); }

/* Result table: scrolls both ways inside the card, header stays visible */
.aih-table-wrap.aiqp-table-wrap { overflow:auto; max-height:60vh; padding:0; }
.aiqp-table-wrap .tbl { width:max-content; min-width:100%; }
.aiqp-table-wrap .tbl td { white-space:nowrap; }
.aiqp-table-wrap .tbl thead th { position:sticky; top:0; z-index:1; }

/* Input card inside panel */
.aiqp-input-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:14px; overflow:hidden; border-top:3px solid var(--brand-600);
}
.aiqp-input-label {
    display:flex; align-items:center; gap:7px; padding:11px 14px 8px;
    font-size:11px; font-weight:700; color:var(--brand-600);
    text-transform:uppercase; letter-spacing:0.06em;
    border-bottom:1px solid var(--border-light);
}
.aiqp-kbd {
    margin-left:auto; background:var(--bg-secondary); border:1px solid var(--border);
    border-radius:5px; padding:1px 6px; font-size:10px; color:var(--text-muted);
    font-weight:500; letter-spacing:normal;
}
.aiqp-textarea {
    width:100%; display:block; background:transparent; border:none; outline:none;
    resize:none; font-family:'Poppins', sans-serif; font-size:13px; line-height:1.7;
    color:var(--text-primary); padding:12px 14px; min-height:72px; max-height:160px;
}
.aiqp-textarea::placeholder { color:var(--text-muted); }
.aiqp-textarea:disabled { opacity:0.55; }
.aiqp-input-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 10px 10px; border-top:1px solid var(--border-light);
}
.aiqp-chips-wrap { }

/* ─── AI Help Page (aih-*) ─────────────────────────────────────────────────── */

/* Page header */
.aih-page-header {
    display:flex; align-items:center; justify-content:space-between;
}
.aih-page-header-left { display:flex; align-items:center; gap:14px; }
.aih-header-icon {
    width:44px; height:44px; border-radius:14px; flex-shrink:0;
    background:linear-gradient(135deg, var(--brand-600), var(--brand-500));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:18px;
    box-shadow:0 4px 14px rgba(46,134,193,0.30);
}

/* Hero input card */
.aih-hero-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:18px;
    overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.05);
    /* accent top bar */
    border-top:3px solid var(--brand-600);
}
.aih-hero-top {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px 10px; border-bottom:1px solid var(--border-light);
}
.aih-hero-label {
    display:flex; align-items:center; gap:7px;
    font-size:12px; font-weight:700; color:var(--brand-600);
    text-transform:uppercase; letter-spacing:0.06em;
}
.aih-textarea {
    width:100%; display:block;
    background:transparent; border:none; outline:none; resize:none;
    font-family:'Poppins', sans-serif; font-size:14px; line-height:1.7;
    color:var(--text-primary); padding:16px 18px;
    min-height:80px; max-height:220px;
}
.aih-textarea::placeholder { color:var(--text-muted); }
.aih-textarea:disabled { opacity:0.55; }

.aih-hero-footer {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px 14px; gap:10px;
}
.aih-history-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px; border-radius:10px; border:1px solid var(--border);
    background:transparent; color:var(--text-secondary); font-size:12px;
    font-weight:600; cursor:pointer; transition:all 0.15s;
    font-family:'Poppins', sans-serif;
}
.aih-history-btn:hover { background:var(--bg-secondary); color:var(--text-primary); }
.aih-history-count {
    background:var(--brand-600); color:#fff; font-size:10px; font-weight:700;
    border-radius:20px; padding:1px 6px; line-height:1.5;
}

/* History drawer */
.aih-history-drawer {
    border-top:1px solid var(--border-light); background:var(--bg-secondary);
    padding:14px 16px;
}
.aih-history-drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    font-size:12px; font-weight:600; color:var(--text-secondary);
    margin-bottom:10px;
}
.aih-history-list { display:flex; flex-direction:column; gap:4px; max-height:220px; overflow-y:auto; }
.aih-history-item {
    display:flex; align-items:center; gap:10px; width:100%;
    padding:9px 12px; border-radius:10px; background:none; border:none;
    color:var(--text-secondary); font-size:13px; cursor:pointer;
    text-align:left; transition:background 0.15s; font-family:'Poppins', sans-serif;
}
.aih-history-item:hover { background:var(--bg-card); color:var(--text-primary); }
.aih-history-use { margin-left:auto; opacity:0; font-size:11px; transition:opacity 0.15s; }
.aih-history-item:hover .aih-history-use { opacity:0.5; }

/* Suggestion chips */
.aih-chips-section {}
.aih-chips { display:flex; flex-wrap:wrap; gap:8px; }
.aih-chip {
    display:inline-flex; align-items:center; gap:7px;
    padding:8px 15px; border-radius:20px;
    border:1px solid var(--border); background:var(--bg-card);
    color:var(--text-secondary); font-size:12px; font-weight:600;
    cursor:pointer; transition:all 0.18s; font-family:'Poppins', sans-serif;
    white-space:nowrap;
}
.aih-chip:hover {
    border-color:var(--brand-600); color:var(--brand-600);
    background:rgba(46,134,193,0.06); transform:translateY(-1px);
    box-shadow:0 3px 10px rgba(46,134,193,0.12);
}
.aih-chip i { font-size:11px; }

/* AI Avatar badge */
.aih-avatar {
    width:36px; height:36px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(135deg, var(--brand-600), var(--brand-500));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:15px;
}

/* Thinking / loading card */
.aih-thinking-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
    padding:20px; margin-bottom:16px;
}
.aih-thinking-header {
    display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.aih-thinking-dots {
    display:flex; gap:5px;
}
.aih-thinking-dots span {
    width:7px; height:7px; border-radius:50%; background:var(--brand-600);
    animation:aihDot 1.2s ease-in-out infinite;
    opacity:0.3;
}
.aih-thinking-dots span:nth-child(2) { animation-delay:0.2s; }
.aih-thinking-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes aihDot { 0%,80%,100% { opacity:0.3; transform:scale(0.85); } 40% { opacity:1; transform:scale(1); } }

/* Result card */
.aih-result-card {
    background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
    overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.aih-result-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--border-light);
    background:var(--bg-secondary);
}
.aih-summary-box {
    padding:18px 20px; border-bottom:1px solid var(--border-light);
    font-size:14px; line-height:1.8; color:var(--text-primary);
    position:relative;
}
.aih-summary-box::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:3px; background:var(--brand-600); border-radius:0 2px 2px 0;
}
.aih-table-wrap { overflow-x:auto; padding:4px 0 0; }

/* Error card */
.aih-error-card {
    display:flex; align-items:flex-start; gap:14px;
    background:var(--bg-card); border:1px solid rgba(220,38,38,0.25);
    border-left:3px solid #dc2626; border-radius:14px; padding:16px 18px;
}
.aih-error-icon {
    width:32px; height:32px; border-radius:8px; flex-shrink:0;
    background:rgba(220,38,38,0.10); display:flex; align-items:center;
    justify-content:center; color:#dc2626; font-size:14px;
}

/* Cursor blink */
.ai-cursor { display:inline-block; width:2px; background:var(--text-primary); margin-left:1px; animation:blink 1s step-end infinite; }
.ai-cursor.hidden { display:none; }
@keyframes blink { from, to { opacity:0; } 50% { opacity:1; } }

/* Legacy classes kept for AI assistant panel compatibility */
.ai-help-textarea { resize:vertical; min-height:52px; max-height:200px; font-size:14px; }
.ai-history-panel { border:1px solid var(--border); border-radius:12px; padding:12px; background:var(--bg-secondary); max-height:260px; overflow-y:auto; }
.ai-summary-box { background:var(--bg-secondary); border-left:3px solid var(--brand-600); border-radius:0 10px 10px 0; padding:14px 16px; font-size:14px; line-height:1.7; color:var(--text-primary); }

/* ─── AI Assistant (Panel Chat UI) ──────────────────── */
.ai-assistant-wrap { display:flex; flex-direction:column; height:calc(100vh - 100px); }
.ai-chat-area {
    flex:1; overflow-y:auto; padding:8px 0; display:flex;
    flex-direction:column; gap:14px; min-height:120px;
}

/* --- Message rows --- */
.ai-msg-row { display:flex; align-items:flex-start; gap:8px; max-width:100%; }
.ai-msg-row.user { flex-direction:row-reverse; }

.ai-avatar-sm {
    width:26px; height:26px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:11px;
    background:linear-gradient(135deg,var(--brand-600),var(--brand-500)); color:#fff;
    margin-top:2px;
}

.ai-msg-bubble {
    max-width:82%; padding:10px 14px; border-radius:16px; position:relative;
    line-height:1.5;
}
.ai-msg-bubble.assistant {
    background:var(--bg-secondary); border:1px solid var(--border-light);
    border-top-left-radius:4px; color:var(--text-primary);
}
.ai-msg-bubble.user {
    background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
    color:#fff; border-top-right-radius:4px;
}
.ai-msg-bubble.user .ai-msg-time { color:rgba(255,255,255,0.6); }
.ai-msg-time { display:block; font-size:10px; color:var(--text-muted); margin-top:5px; }

/* --- Typing dots animation --- */
.ai-typing-dots { display:flex; gap:4px; align-items:center; padding:4px 0; }
.ai-typing-dots span {
    width:6px; height:6px; border-radius:50%;
    background:var(--brand-600); opacity:0.4;
    animation:aiTyping 1.4s infinite ease-in-out both;
}
.ai-typing-dots span:nth-child(2) { animation-delay:0.16s; }
.ai-typing-dots span:nth-child(3) { animation-delay:0.32s; }
@keyframes aiTyping { 0%,80%,100% { opacity:0.3; transform:scale(0.8); } 40% { opacity:1; transform:scale(1.1); } }

/* --- Action cards --- */
.ai-action-card {
    border:1px solid var(--border); border-radius:16px; padding:16px;
    background:var(--bg-card); margin:0 2px;
}
.ai-action-label {
    display:flex; align-items:center; gap:8px; margin-bottom:14px;
    font-size:13px; font-weight:600; color:var(--text-primary);
}
.ai-action-label i { color:var(--brand-600); font-size:14px; }

/* --- Contact/Transaction search bar --- */
.ai-search-bar {
    display:flex; align-items:center; gap:0; margin-bottom:12px;
    border:1px solid var(--border); border-radius:12px;
    background:var(--bg-secondary); overflow:hidden; transition:border-color 0.15s;
}
.ai-search-bar:focus-within { border-color:var(--brand-600); }
.ai-search-icon { padding:0 0 0 12px; color:var(--text-muted); font-size:12px; }
.ai-search-input {
    flex:1; border:none !important; background:transparent !important;
    box-shadow:none !important; font-size:13px; padding:10px 10px;
    outline:none; min-height:auto;
}
.ai-search-btn {
    padding:8px 14px; border:none; border-left:1px solid var(--border);
    background:transparent; color:var(--brand-600); font-size:12px;
    font-weight:600; cursor:pointer; white-space:nowrap; transition:background 0.15s;
}
.ai-search-btn:hover { background:rgba(46,134,193,0.06); }
.ai-search-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* --- Cancel link (lightweight) --- */
.ai-cancel-link {
    display:inline-flex; align-items:center; gap:4px; margin-top:12px;
    background:none; border:none; color:var(--text-muted); font-size:12px;
    cursor:pointer; padding:0; transition:color 0.15s;
}
.ai-cancel-link:hover { color:var(--text-secondary); }

/* --- Empty states --- */
.ai-empty-state {
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:20px 0; color:var(--text-muted); font-size:12px;
}
.ai-empty-state i { font-size:20px; opacity:0.5; }

/* --- Error banner --- */
.ai-error-banner {
    display:flex; align-items:center; gap:6px; padding:8px 12px;
    border-radius:10px; background:rgba(220,38,38,0.08);
    color:#dc2626; font-size:12px;
}

/* --- Form helpers (compact forms inside action cards) --- */
.ai-form-label { display:block; font-size:11px; font-weight:600; color:var(--text-secondary); margin-bottom:3px; }
.ai-form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ai-form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.ai-checkbox-label {
    display:flex; align-items:center; gap:4px; font-size:12px;
    color:var(--text-secondary); cursor:pointer;
}

/* --- Inline text input + button --- */
.ai-inline-input { display:flex; gap:8px; }
.ai-inline-input .inp { flex:1; font-size:13px; }

/* --- Option list --- */
.ai-option-list { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; }
.ai-option-item {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border:1px solid var(--border-light); border-radius:12px; background:var(--bg-secondary);
    cursor:pointer; text-align:left; width:100%; transition:all 0.15s;
}
.ai-option-item:hover { background:rgba(46,134,193,0.06); border-color:var(--brand-600); }
.ai-option-icon {
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(46,134,193,0.08); color:var(--brand-600); font-size:14px;
}

/* --- Payment method picker --- */
.ai-payment-methods { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:600px) { .ai-payment-methods { grid-template-columns:repeat(2,1fr); } }
.ai-payment-method-btn {
    display:flex; flex-direction:column; align-items:center; padding:16px 8px;
    border:1px solid var(--border); border-radius:14px; background:var(--bg-secondary);
    cursor:pointer; text-align:center; gap:6px; transition:all 0.2s;
    color:var(--text-secondary); font-size:22px;
}
.ai-payment-method-btn:hover {
    border-color:var(--brand-600); background:rgba(46,134,193,0.06);
    color:var(--brand-600); transform:translateY(-2px);
    box-shadow:0 4px 12px rgba(46,134,193,0.12);
}
.ai-pm-label { font-size:12px; font-weight:600; color:var(--text-primary); }
.ai-payment-method-btn:hover .ai-pm-label { color:var(--brand-600); }

/* --- Confirmation card --- */
.ai-confirm-card { padding:0; overflow:hidden; }
.ai-confirm-header {
    display:flex; align-items:center; gap:8px;
    padding:12px 16px; font-size:13px; font-weight:700;
}
.ai-confirm-header.success { background:rgba(22,163,74,0.08); color:#16a34a; }
.ai-confirm-header.danger { background:rgba(220,38,38,0.08); color:#dc2626; }
.ai-confirm-header i { font-size:14px; }
.ai-confirm-details { padding:12px 16px; }
.ai-confirm-row {
    display:flex; justify-content:space-between; align-items:center;
    padding:7px 0; border-bottom:1px solid var(--border-light);
}
.ai-confirm-row:last-child { border-bottom:none; }
.ai-confirm-label { font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:5px; }
.ai-confirm-label i { font-size:11px; }
.ai-confirm-value { font-size:13px; font-weight:500; color:var(--text-primary); }
.ai-confirm-value.highlight { font-weight:700; color:var(--brand-600); }

/* --- Fee summary box --- */
.ai-fee-summary {
    margin:0 16px 4px; padding:10px 12px; border-radius:10px;
    background:var(--bg-secondary); border:1px solid var(--border-light);
}
.ai-fee-row { display:flex; justify-content:space-between; font-size:12px; color:var(--text-secondary); padding:3px 0; }
.ai-fee-row.total {
    border-top:1px solid var(--border); padding-top:8px; margin-top:4px;
    font-size:14px; font-weight:700; color:var(--brand-600);
}
.ai-fee-row.total span:first-child { color:var(--text-primary); }

/* --- Warnings inside confirm --- */
.ai-warnings { padding:0 16px 4px; }
.ai-warning-item {
    display:flex; align-items:center; gap:6px; padding:4px 0;
    font-size:12px; color:#dc2626;
}
.ai-warning-item i { font-size:11px; }

/* --- Confirm card actions need padding --- */
.ai-confirm-card > .flex { padding:0 16px 16px; }

/* --- Result card (DONE state) --- */
.ai-result-card {
    border-radius:16px; padding:16px; margin:0 2px;
    background:var(--bg-card); border:1px solid var(--border);
    border-left:3px solid var(--border);
}
.ai-result-card.success { border-left-color:#16a34a; }
.ai-result-card.error { border-left-color:#dc2626; }

.ai-result-status { display:flex; align-items:center; gap:10px; }
.ai-result-icon {
    width:36px; height:36px; border-radius:50%; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; color:#fff;
}
.ai-result-icon.success { background:linear-gradient(135deg,#16a34a,#22c55e); }
.ai-result-icon.error { background:linear-gradient(135deg,#dc2626,#ef4444); }

.ai-result-meta {
    margin-top:12px; padding:10px 12px; border-radius:10px;
    background:var(--bg-secondary); border:1px solid var(--border-light);
    display:flex; flex-direction:column; gap:6px;
}
.ai-result-meta-item { display:flex; justify-content:space-between; align-items:center; }
.ai-result-meta-label { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.03em; }

.ai-result-actions { margin-top:14px; padding-top:12px; border-top:1px solid var(--border-light); }
.ai-new-cmd-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 16px; border-radius:10px; border:1px solid var(--border);
    background:transparent; color:var(--text-secondary); font-size:12px; font-weight:600;
    cursor:pointer; transition:all 0.15s;
}
.ai-new-cmd-btn:hover { border-color:var(--brand-600); color:var(--brand-600); background:rgba(46,134,193,0.04); }

/* --- QR Code --- */
.ai-qr-section { margin-top:14px; text-align:center; }
.ai-qr-img {
    width:140px; height:140px; margin:0 auto; display:block;
    border-radius:12px; border:1px solid var(--border-light);
    padding:6px; background:#fff;
}

/* --- Polling indicator --- */
.ai-polling-bar {
    display:flex; align-items:center; gap:8px; margin-top:10px;
    padding:8px 12px; border-radius:10px;
    background:rgba(46,134,193,0.06); font-size:12px; color:var(--brand-600);
}
.ai-polling-dot {
    width:8px; height:8px; border-radius:50%; background:var(--brand-600);
    animation:aiPollingPulse 1.5s infinite;
}
@keyframes aiPollingPulse { 0%,100% { opacity:0.3; } 50% { opacity:1; } }

/* --- Example cards (welcome state) --- */
.ai-welcome-section { flex:1; overflow-y:auto; border-bottom:1px solid var(--border-light); min-height:0; }
.ai-welcome-hero {
    text-align:center; padding:28px 16px 16px;
}
.ai-welcome-icon-wrap {
    display:inline-flex; align-items:center; justify-content:center;
    width:48px; height:48px; border-radius:16px;
    background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
    color:#fff; font-size:22px;
    box-shadow:0 4px 16px rgba(46,134,193,0.25);
}
.ai-panel-examples {
    display:flex; flex-direction:column; gap:4px;
    padding:8px 16px 16px;
}
.ai-example-card {
    display:flex; align-items:center; gap:10px; padding:10px 12px;
    border:1px solid transparent; border-radius:12px;
    background:transparent; cursor:pointer; text-align:left;
    transition:all 0.15s; width:100%;
}
.ai-example-card:hover {
    background:var(--bg-secondary); border-color:var(--border-light);
}
.ai-example-icon-wrap {
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(46,134,193,0.08); color:var(--brand-600); font-size:12px;
}

/* ─── AI Floating Button & Slide-in Panel ───────────────────────────────── */

.ai-float-wrap {
    position:fixed; bottom:28px; right:28px; z-index:1100;
    transition:opacity 0.2s, visibility 0.2s;
}
.ai-float-wrap.open { opacity:0; visibility:hidden; pointer-events:none; }

/* Idle: a round icon so it covers as little of the page as possible; hovering (or keyboard focus)
   widens it to the "Assistant" pill. It grows to the left because the wrapper is pinned to the right. */
.ai-float-btn {
    position:relative; height:48px; min-width:48px; padding:0 15px;
    border-radius:50px; border:none; cursor:pointer; overflow:hidden;
    display:flex; align-items:center; justify-content:center; gap:0;
    background:linear-gradient(135deg, var(--brand-600) 0%, #1a6fad 50%, var(--brand-500) 100%);
    background-size:200% 200%; background-position:0% 50%;
    color:#fff;
    font-family:'Poppins', sans-serif; font-size:13px; font-weight:700;
    letter-spacing:0.02em; white-space:nowrap;
    box-shadow:0 6px 28px rgba(46,134,193,0.45), 0 2px 8px rgba(0,0,0,0.14),
               inset 0 1px 0 rgba(255,255,255,0.18);
    transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.ai-float-btn:not(.open):hover,
.ai-float-btn:not(.open):focus-visible { padding:0 20px 0 16px; gap:9px; }
.ai-float-btn:hover {
    transform:translateY(-3px);
    background-position:100% 50%;
    box-shadow:0 12px 36px rgba(46,134,193,0.55), 0 4px 12px rgba(0,0,0,0.16),
               inset 0 1px 0 rgba(255,255,255,0.22);
}
.ai-float-btn:active { transform:translateY(-1px); }

/* Collapsed to circle when panel is open */
.ai-float-btn.open {
    padding:0; width:48px; border-radius:50%;
    background:linear-gradient(135deg, #475569, #334155);
    box-shadow:0 4px 18px rgba(71,85,105,0.45), 0 2px 6px rgba(0,0,0,0.18);
    justify-content:center;
}
.ai-float-btn.open:hover { transform:translateY(-2px) rotate(90deg); }

/* Magic wand icon */
.ai-float-icon-main {
    display:flex; align-items:center; justify-content:center;
    font-size:17px; flex-shrink:0;
    transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
}
.ai-float-btn.open .ai-float-icon-main {
    opacity:0; transform:scale(0) rotate(90deg); position:absolute;
}

/* Label */
.ai-float-label {
    transition:opacity 0.2s ease, max-width 0.35s cubic-bezier(0.4,0,0.2,1);
    max-width:0; opacity:0; overflow:hidden;
}
.ai-float-btn:not(.open):hover .ai-float-label,
.ai-float-btn:not(.open):focus-visible .ai-float-label { max-width:120px; opacity:1; }
.ai-float-btn.open .ai-float-label { opacity:0; max-width:0; }

/* Close icon */
.ai-float-icon-close {
    position:absolute; display:flex; align-items:center; justify-content:center;
    font-size:16px;
    opacity:0; transform:rotate(-90deg) scale(0.3);
    transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.ai-float-btn.open .ai-float-icon-close {
    opacity:1; transform:rotate(0deg) scale(1);
}

/* Pulse ring — idle only */
.ai-float-pulse {
    position:absolute; inset:-6px; border-radius:50%;
    border:2px solid rgba(52,152,219,0.5); opacity:0;
    animation:aiPulseRing 3.5s infinite ease-out;
    pointer-events:none;
}
.ai-float-btn.open .ai-float-pulse { animation:none; opacity:0; }
@keyframes aiPulseRing {
    0%   { opacity:0.6; transform:scale(0.88); }
    70%  { opacity:0;   transform:scale(1.4);  }
    100% { opacity:0;   transform:scale(1.4);  }
}

.ai-slide-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.18);
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    z-index:1050; opacity:0; pointer-events:none;
    transition:opacity 0.3s ease;
}
.ai-slide-overlay.show { opacity:1; pointer-events:all; }

.ai-slide-panel {
    position:fixed; top:0; right:0; width:440px; max-width:100vw;
    height:100vh; height:100dvh;
    background:var(--bg-card); border-left:1px solid var(--border);
    z-index:1060; display:flex; flex-direction:column;
    transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1);
    box-shadow:-8px 0 40px rgba(0,0,0,0.08);
    overflow:hidden;
}
.ai-slide-panel.open { transform:translateX(0); }

.ai-panel-inner { display:flex; flex-direction:column; height:100%; overflow:hidden; }

.ai-panel-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--border);
    flex-shrink:0; background:var(--bg-card);
}
.ai-panel-icon-badge {
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    background:linear-gradient(135deg,var(--brand-600),var(--brand-500));
    color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px;
}
.ai-header-action {
    width:32px; height:32px; border-radius:10px; border:none;
    background:transparent; color:var(--text-muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; transition:all 0.15s;
}
.ai-header-action:hover { background:var(--bg-secondary); color:var(--text-primary); }

.ai-panel-chat {
    flex:1; overflow-y:auto; padding:16px 20px;
    display:flex; flex-direction:column; gap:12px;
}

/* --- Input bar (bottom) --- */
.ai-input-bar {
    padding:12px 20px 16px; border-top:1px solid var(--border);
    flex-shrink:0; background:var(--bg-card);
}
.ai-input-wrap {
    display:flex; align-items:flex-end; gap:8px;
    border:1px solid var(--border); border-radius:14px;
    padding:6px 6px 6px 14px; background:var(--bg-secondary);
    transition:border-color 0.15s;
}
.ai-input-wrap:focus-within { border-color:var(--brand-600); }
.ai-cmd-input {
    flex:1; resize:none; min-height:36px; max-height:100px; font-size:13px;
    border:none !important; background:transparent !important;
    box-shadow:none !important; outline:none; padding:6px 0;
}
.ai-send-btn {
    width:34px; height:34px; border-radius:10px; border:none;
    background:var(--brand-600); color:#fff; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; flex-shrink:0; transition:all 0.15s;
}
.ai-send-btn:hover { background:var(--brand-700); }
.ai-send-btn:disabled { opacity:0.35; cursor:not-allowed; }
.ai-input-hint {
    font-size:10px; color:var(--text-muted); margin-top:6px;
    text-align:center; user-select:none;
}

@media (max-width:520px) {
    .ai-slide-panel { width:100vw; }
    .ai-float-wrap { bottom:18px; right:14px; }
    .ai-float-btn { height:44px; min-width:44px; padding:0 13px; font-size:12px; }
    .ai-float-btn.open { width:44px; padding:0; }
    .ai-panel-header { padding:12px 14px; }
    .ai-panel-chat { padding:10px 14px; }
    .ai-input-bar { padding:10px 14px; }
    .ai-welcome-hero { padding:20px 14px 12px; }
    .ai-panel-examples { padding:6px 14px 14px; }
    .ai-msg-bubble { max-width:88%; }
}
/* Ensure input bar is always accessible — prevent panel content overflow */
.ai-panel-inner { min-height:0; }
.ai-panel-chat { min-height:0; overflow-y:auto; }
.ai-input-bar { flex-shrink:0; }

/* ─── AI Assistant Panel — Dark Mode ────────────────────────────────────── */

/* Deeper shadow in dark (light shadow is invisible against dark bg) */
.dark .ai-slide-panel {
    box-shadow: -8px 0 48px rgba(0,0,0,0.5);
}

/* Chat area: slightly darker than header/footer to create depth */
.dark .ai-panel-chat {
    background: var(--bg-secondary);
}

/* Explicit text color on the chat textarea (prevents light text being unstyled) */
.ai-cmd-input {
    color: var(--text-primary);
    caret-color: var(--brand-500);
}

/* Scrollbar — dark-styled inside panel chat area */
.dark .ai-panel-chat::-webkit-scrollbar { width: 5px; }
.dark .ai-panel-chat::-webkit-scrollbar-track { background: transparent; }
.dark .ai-panel-chat::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
.dark .ai-panel-chat::-webkit-scrollbar-thumb:hover { background: #475569; }

/* Welcome section: match new chat bg in dark */
.dark .ai-welcome-section {
    background: var(--bg-secondary);
    border-bottom-color: var(--border);
}

/* Example cards: clear visible hover in dark */
.dark .ai-example-card:hover {
    background: rgba(46,134,193,0.08);
    border-color: var(--brand-600);
}

/* Option items: stronger border in dark for visibility */
.dark .ai-option-item {
    border-color: var(--border);
    background: var(--bg-card);
}
.dark .ai-option-item:hover {
    background: rgba(46,134,193,0.10);
    border-color: var(--brand-600);
}

/* Payment method buttons: match card bg in dark */
.dark .ai-payment-method-btn {
    background: var(--bg-card);
    border-color: var(--border);
}

/* Confirm card details rows */
.dark .ai-confirm-details {
    background: var(--bg-card);
}

/* Input wrap: stronger border focus ring in dark */
.dark .ai-input-wrap {
    background: var(--bg-secondary);
    border-color: var(--border);
}
.dark .ai-input-wrap:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(52,152,219,0.15);
}

/* Search bar in dark */
.dark .ai-search-bar {
    background: var(--bg-card);
    border-color: var(--border);
}
.dark .ai-search-btn {
    border-left-color: var(--border);
}

/* QR image: keep white bg (QR needs it) but add visible border in dark */
.dark .ai-qr-img {
    border-color: var(--border);
    box-shadow: 0 0 0 1px var(--border);
}

/* Polling bar */
.dark .ai-polling-bar {
    background: rgba(46,134,193,0.12);
}

/* ─── AR Page: AI Search Bar ────────────────────────────────────────────────── */
.ar-ai-bar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}
.ar-ai-bar-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
}
.ar-ai-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--brand-600);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
}
.ar-ai-textarea {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--text-primary);
    resize: none;
    line-height: 1.5;
    padding: 2px 0;
}
.ar-ai-textarea::placeholder { color: var(--text-muted); }
.ar-ai-textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.ar-ai-reset-btn { white-space: nowrap; }
.ar-ai-mode-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(90deg, rgba(46,134,193,0.1), rgba(99,102,241,0.05));
    border-top: 1px solid rgba(46,134,193,0.2);
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}
.ar-ai-mode-banner i { color: var(--brand-600); }
.ar-ai-mode-banner strong { color: var(--text-primary); }
.dark .ar-ai-bar { border-color: var(--border); }
.dark .ar-ai-mode-banner { border-top-color: rgba(52,152,219,0.2); }

/* Field validation error message */
.field-error-msg { margin: 4px 0 0 0; font-size: 11px; color: #ef4444; font-weight: 500; }
/* === Admin Panel === */

/* Location modal: gateway/ValPay account frozen because the location has activity */
.gateway-locked-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(234,179,8,0.08);
    border: 1px solid rgba(234,179,8,0.30);
    border-left: 3px solid #ca8a04;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.gateway-locked-note i {
    color: #ca8a04;
    font-size: 12px;
    margin-top: 2px;
    flex-shrink: 0;
}
.dark .gateway-locked-note {
    background: rgba(234,179,8,0.10);
    border-color: rgba(234,179,8,0.35);
    border-left-color: #eab308;
}
.dark .gateway-locked-note i { color: #eab308; }

.admin-status-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.admin-status-pill.active {
    background: rgba(34,197,94,0.1);
    color: #16a34a;
}
.admin-status-pill.inactive {
    background: rgba(239,68,68,0.08);
    color: #dc2626;
}
.dark .admin-status-pill.active {
    background: rgba(34,197,94,0.18);
    color: #4ade80;
}
.dark .admin-status-pill.inactive {
    background: rgba(239,68,68,0.15);
    color: #f87171;
}

.admin-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--brand-50);
    color: var(--brand-600);
}
.dark .admin-type-badge {
    background: rgba(52,152,219,0.15);
    color: #60a5fa;
}

.admin-row-action {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.15s;
}
.admin-row-action:hover {
    background: var(--brand-50);
    color: var(--brand-600);
}
.dark .admin-row-action:hover {
    background: rgba(52,152,219,0.15);
    color: #60a5fa;
}

.admin-back-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 14px;
    transition: all 0.15s;
}
.admin-back-btn:hover {
    border-color: var(--brand-500);
    color: var(--brand-500);
}

.admin-tab-bar {
    display: flex;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 4px;
}
.admin-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.admin-tab:hover {
    background: var(--bg-primary);
    color: var(--text-primary);
}
.admin-tab.active {
    background: var(--brand-500);
    color: white;
    box-shadow: 0 2px 8px rgba(46,134,193,0.25);
}
.dark .admin-tab.active {
    box-shadow: 0 2px 8px rgba(46,134,193,0.4);
}

/* === Admin Image Upload === */
.admin-upload-area {
    display: flex;
    align-items: center;
    gap: 16px;
}
.admin-upload-preview {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    border: 2px dashed var(--border);
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color 0.15s;
}
.admin-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.admin-upload-preview.has-image {
    border-style: solid;
    border-color: var(--brand-200);
}
.dark .admin-upload-preview {
    background: var(--bg-surface);
}
.dark .admin-upload-preview.has-image {
    border-color: rgba(52,152,219,0.35);
}
.admin-upload-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.admin-upload-actions .btn {
    font-size: 12px;
    padding: 5px 12px;
}
.admin-upload-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}
.admin-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.admin-upload-label input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ─── Guided Tour ───────────────────────────────────────────────────────── */

/* Tour header button (next to AI Help) */
.tour-header-btn { transition:background 0.15s, color 0.15s; }
.tour-header-btn:hover { color:var(--brand-600); background:rgba(46,134,193,0.10); }

/* Overlay — covers entire viewport */
.tour-overlay {
    position:fixed; inset:0; z-index:9990;
    background:rgba(0,0,0,0.55);
    animation:tourFadeIn 0.3s ease;
}

/* Spotlight — positioned over the target element */
.tour-spotlight {
    position:fixed; z-index:9991;
    border-radius:12px;
    box-shadow:0 0 0 4px rgba(46,134,193,0.45), 0 0 0 9999px rgba(0,0,0,0.55);
    pointer-events:none;
    animation:tourSpotlightIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
    transition:top 0.35s ease, left 0.35s ease, width 0.35s ease, height 0.35s ease;
}

/* Tooltip card */
.tour-tooltip {
    position:fixed; z-index:9992;
    width:360px; max-width:calc(100vw - 32px);
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:20px;
    box-shadow:0 20px 60px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1);
    animation:tourTooltipIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

/* Arrow */
.tour-tooltip-arrow {
    position:absolute;
    width:16px; height:16px;
    background:var(--bg-card);
    border:1px solid var(--border);
    transform:rotate(45deg);
}
.tour-tooltip.bottom .tour-tooltip-arrow {
    top:-9px; left:50%; margin-left:-8px;
    border-right:none; border-bottom:none;
}
.tour-tooltip.top .tour-tooltip-arrow {
    bottom:-9px; left:50%; margin-left:-8px;
    border-left:none; border-top:none;
}
.tour-tooltip.right .tour-tooltip-arrow {
    left:-9px; top:50%; margin-top:-8px;
    border-right:none; border-top:none;
}
.tour-tooltip.center .tour-tooltip-arrow { display:none; }

/* Tooltip header */
.tour-tooltip-header {
    display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.tour-tooltip-icon {
    width:40px; height:40px; border-radius:12px; flex-shrink:0;
    background:linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:16px;
    box-shadow:0 4px 12px rgba(46,134,193,0.3);
}
.tour-tooltip-title {
    font-size:15px; font-weight:700; color:var(--text-primary);
    margin:0; line-height:1.3;
}
.tour-tooltip-step {
    font-size:11px; font-weight:600; color:var(--brand-600);
    margin:2px 0 0; text-transform:uppercase; letter-spacing:0.04em;
}

/* Description */
.tour-tooltip-desc {
    font-size:13px; line-height:1.6; color:var(--text-secondary);
    margin:0 0 16px;
}

/* Progress dots */
.tour-tooltip-progress {
    display:flex; align-items:center; gap:6px; margin-bottom:16px;
}
.tour-dot {
    width:8px; height:8px; border-radius:50%;
    background:var(--border); transition:all 0.3s ease;
}
.tour-dot.active {
    width:24px; border-radius:4px;
    background:var(--brand-600);
}
.tour-dot.done { background:var(--brand-500); opacity:0.5; }

/* Action buttons */
.tour-tooltip-actions {
    display:flex; justify-content:space-between; align-items:center;
}
.tour-btn-group { display:flex; gap:8px; }

.tour-btn-skip {
    background:none; border:none; cursor:pointer;
    font-size:12px; font-weight:600; color:var(--text-muted);
    padding:8px 12px; border-radius:8px; transition:all 0.15s;
}
.tour-btn-skip:hover { background:var(--bg-secondary); color:var(--text-secondary); }

.tour-btn-prev {
    background:var(--bg-secondary); border:1px solid var(--border);
    color:var(--text-secondary); cursor:pointer;
    font-size:12px; font-weight:600;
    padding:8px 16px; border-radius:10px; transition:all 0.15s;
    display:flex; align-items:center; gap:6px;
}
.tour-btn-prev:hover { border-color:var(--brand-600); color:var(--brand-600); }

.tour-btn-next {
    background:var(--brand-600); border:none; color:#fff; cursor:pointer;
    font-size:12px; font-weight:700;
    padding:8px 20px; border-radius:10px; transition:all 0.15s;
    display:flex; align-items:center; gap:6px;
    box-shadow:0 4px 12px rgba(46,134,193,0.3);
}
.tour-btn-next:hover { background:var(--brand-700); transform:translateY(-1px); }

.tour-btn-finish {
    background:linear-gradient(135deg, #16a34a, #22c55e); border:none; color:#fff; cursor:pointer;
    font-size:12px; font-weight:700;
    padding:8px 20px; border-radius:10px; transition:all 0.15s;
    display:flex; align-items:center; gap:6px;
    box-shadow:0 4px 12px rgba(22,163,74,0.3);
}
.tour-btn-finish:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(22,163,74,0.4); }

/* Animations */
@keyframes tourFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes tourSpotlightIn { from { opacity:0; transform:scale(0.9); } to { opacity:1; transform:scale(1); } }
@keyframes tourTooltipIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Dark mode tweaks */
.dark .tour-overlay { background:rgba(0,0,0,0.7); }
.dark .tour-spotlight { box-shadow:0 0 0 4px rgba(52,152,219,0.5), 0 0 0 9999px rgba(0,0,0,0.7); }
.dark .tour-tooltip { box-shadow:0 20px 60px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.25); }

/* Responsive */
@media (max-width:480px) {
    .tour-tooltip { width:calc(100vw - 32px); padding:16px; }
    .tour-tooltip-title { font-size:14px; }
    .tour-tooltip-desc { font-size:12px; }
}

/* ── Drag-to-Group Bar ───────────────────────────────────── */
.group-bar {
    display:flex;align-items:center;gap:8px;min-height:42px;
    padding:8px 16px;border:2px dashed var(--border);border-radius:10px;
    margin-bottom:12px;background:var(--bg-card);transition:all 0.2s ease;flex-wrap:wrap;
}
.group-bar-active {
    border-color:#2E86C1;background:rgba(75,106,239,0.04);
    box-shadow:0 0 0 3px rgba(75,106,239,0.1);
}
.group-bar-placeholder {
    display:flex;align-items:center;gap:8px;color:var(--text-muted);
    font-size:12px;font-weight:500;user-select:none;
}
.group-bar-placeholder i { font-size:14px;opacity:0.5; }
.group-bar-clear {
    margin-left:auto;background:none;border:1px solid var(--border);border-radius:6px;
    padding:3px 10px;font-size:11px;color:var(--text-muted);cursor:pointer;transition:all 0.15s;
}
.group-bar-clear:hover { color:#ef4444;border-color:#ef4444;background:rgba(239,68,68,0.06); }

/* ── Group Tags (pills in the bar) ───────────────────────── */
.group-tag {
    display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
    background:rgba(75,106,239,0.1);border:1px solid rgba(75,106,239,0.25);
    border-radius:6px;font-size:12px;font-weight:600;color:#2E86C1;
    cursor:grab;user-select:none;transition:all 0.15s;
}
.group-tag:hover { background:rgba(75,106,239,0.18);border-color:rgba(75,106,239,0.4); }
.group-tag:active { cursor:grabbing; }
.group-tag-icon { font-size:10px;opacity:0.7; }
.group-tag-remove {
    display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
    border:none;background:rgba(75,106,239,0.15);border-radius:50%;color:#2E86C1;
    font-size:8px;cursor:pointer;transition:all 0.15s;padding:0;line-height:1;
}
.group-tag-remove:hover { background:#ef4444;color:white; }
.group-tag-separator { font-size:8px;color:var(--text-muted);opacity:0.5; }

/* ── Draggable Column Headers ────────────────────────────── */
th[draggable="true"] { cursor:grab; }
th[draggable="true"]:active { cursor:grabbing;opacity:0.6; }

/* ── Group Header Rows in Table ──────────────────────────── */
.group-header-row td {
    background:#f0f5ff !important;border-bottom:1px solid rgba(75,106,239,0.15);
    padding:8px 14px !important;font-weight:700;font-size:12px;
}
.group-header-toggle {
    background:none;border:none;cursor:pointer;color:#2E86C1;font-size:11px;
    padding:2px 6px;border-radius:4px;transition:all 0.15s;margin-right:6px;
    width:22px;display:inline-flex;align-items:center;justify-content:center;
}
.group-header-toggle:hover { background:rgba(75,106,239,0.1); }
.group-header-value { color:var(--text-primary); }
.group-header-count { font-size:11px;font-weight:500;color:var(--text-muted);margin-left:8px; }
.group-header-subtotal { font-size:11px;font-weight:600;color:var(--text-secondary);float:right; }
.group-header-subtotal span { margin-left:12px; }

/* Indent nested group headers */
.group-depth-0 .group-header-toggle { margin-left:0; }
.group-depth-1 .group-header-toggle { margin-left:20px; }
.group-depth-2 .group-header-toggle { margin-left:40px; }
.group-depth-3 .group-header-toggle { margin-left:60px; }

/* Indent data rows under groups */
.grouped-data-row-1 td:first-child { padding-left:34px !important; }
.grouped-data-row-2 td:first-child { padding-left:54px !important; }
.grouped-data-row-3 td:first-child { padding-left:74px !important; }

/* ── Group info bar (replaces pagination when grouped) ──── */
.group-info-bar {
    display:flex;align-items:center;justify-content:space-between;padding:10px 16px;
    font-size:12px;color:var(--text-muted);border-top:1px solid var(--border);
}

/* ── Dark mode overrides ─────────────────────────────────── */
.dark .group-bar { border-color:var(--border); }
.dark .group-bar-active { border-color:#2E86C1;background:rgba(75,106,239,0.08); }
.dark .group-header-row td { background:#1a2744 !important; }
.dark .group-tag { background:rgba(75,106,239,0.15);border-color:rgba(75,106,239,0.3); }

/* ── TinyMCE Receipt Editor ──────────────────────────────── */
.receipt-wysiwyg-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.receipt-wysiwyg-container .tox.tox-tinymce {
    flex: 1;
    border: none;
    border-radius: 0;
}
.receipt-wysiwyg-container #receiptWysiwyg {
    flex: 1;
    width: 100%;
    height: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   WORKFLOW BUILDER
   ═══════════════════════════════════════════════════════════════ */

/* ── Full-height page wrapper (offsets .content-area padding, bottom space included, so the page does not scroll) ── */
.wf-page-wrapper {
    display: flex;
    flex-direction: column;
    margin: -28px -28px calc(-1 * var(--page-bottom-space, 28px));
    height: calc(100vh - 64px);
    overflow: hidden;
    background: var(--bg-secondary);
}

/* ── Top Bar ──────────────────────────────────────────────────── */
.wf-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 10;
}

.wf-name-input {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 6px 10px;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
}
.wf-name-input:hover {
    border-color: var(--border);
    background: var(--bg-secondary);
}
.wf-name-input:focus {
    outline: none;
    border-color: var(--brand-600);
    background: var(--bg-secondary);
}

/* ── Body (3-panel layout) ────────────────────────────────────── */
.wf-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Left Sidebar ─────────────────────────────────────────────── */
.wf-sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px 12px;
    gap: 8px;
}

.wf-sidebar-section {
    margin-bottom: 4px;
}
.wf-sidebar-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 4px 6px;
}

.wf-ai-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: rgba(46,134,193,0.08);
    border: 1px dashed rgba(46,134,193,0.4);
    color: var(--brand-600);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-align: left;
}
.wf-ai-btn:hover {
    background: rgba(46,134,193,0.15);
    border-color: rgba(46,134,193,0.7);
}

/* Step items in sidebar list */
.wf-step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.wf-step-item:hover { background: var(--bg-secondary); }
.wf-step-item.selected {
    background: rgba(46,134,193,0.08);
    border-color: rgba(46,134,193,0.3);
    color: var(--text-primary);
}
.wf-step-item-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.wf-step-item-dot.trigger   { background: #2563eb; }
.wf-step-item-dot.action    { background: #16a34a; }
.wf-step-item-dot.condition { background: #d97706; }

.wf-add-step-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1.5px dashed var(--border);
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    margin-top: 4px;
}
.wf-add-step-btn:hover {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: rgba(46,134,193,0.05);
}

/* Preset item rows in sidebar */
.wf-preset-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.12s;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    width: 100%;
    text-align: left;
    font-family: inherit;
}
.wf-preset-item:hover {
    border-color: var(--brand-600);
    color: var(--text-primary);
    background: rgba(46,134,193,0.05);
}

/* ── Canvas ───────────────────────────────────────────────────── */
.wf-canvas {
    flex: 1;
    overflow-y: auto;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Empty state */
.wf-canvas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
    gap: 12px;
}
.wf-canvas-empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: rgba(46,134,193,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--brand-600);
    margin-bottom: 8px;
}

/* ── Node Cards ───────────────────────────────────────────────── */
.wf-node {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wf-node:hover {
    border-color: var(--brand-600);
    box-shadow: 0 4px 16px rgba(46,134,193,0.12);
}
.wf-node.selected {
    border-color: var(--brand-600);
    box-shadow: 0 0 0 3px rgba(46,134,193,0.15);
}
.wf-node.trigger   { border-top: 3px solid #2563eb; }
.wf-node.action    { border-top: 3px solid #16a34a; }
.wf-node.condition { border-top: 3px solid #d97706; }

.wf-node-delete {
    /* Inline in header row — no absolute so it can't overlap the type icon */
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    /* Hidden with visibility (not display) so its space stays reserved and the move arrows beside it do not jump when the card is hovered */
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}
.wf-node:hover .wf-node-delete { visibility: visible; }
.wf-node-delete:hover { background: rgba(220,38,38,0.1); color: #dc2626; }

/* Move up / down — always visible (unlike delete) so reordering can be found; muted until hovered */
.wf-node-move {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.12s, color 0.12s;
}
.wf-node-move:hover:not(:disabled) { background: rgba(46,134,193,0.1); color: var(--brand-600); }
.wf-node-move:disabled { opacity: 0.3; cursor: default; }

.wf-node-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 8px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.wf-node-type-badge.trigger   { background: rgba(37,99,235,0.1);  color: #2563eb; }
.wf-node-type-badge.action    { background: rgba(22,163,74,0.1);   color: #16a34a; }
.wf-node-type-badge.condition { background: rgba(217,119,6,0.1);   color: #d97706; }

.wf-node-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* ── Connectors between nodes ─────────────────────────────────── */
.wf-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 480px;
}
.wf-connector-line {
    width: 2px;
    height: 24px;
    background: var(--border);
}
.wf-connector-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px dashed var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.15s;
}
.wf-connector-btn:hover {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: rgba(46,134,193,0.05);
}

/* ── End Node marker ──────────────────────────────────────────── */
.wf-end-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 20px;
    border: 2px dashed var(--border);
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

/* ── Right Config Panel ───────────────────────────────────────── */
.wf-config-panel {
    width: 300px;
    flex-shrink: 0;
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.wf-config-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 2;
}
.wf-config-header-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.wf-config-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}
.wf-config-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Template variable chips */
.wf-var-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    font-size: 10px;
    font-family: 'Courier New', monospace;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
    margin: 2px;
}
.wf-var-chip:hover {
    border-color: var(--brand-600);
    color: var(--brand-600);
    background: rgba(46,134,193,0.05);
}

/* ── Add Step Modal Tabs ──────────────────────────────────────── */
.wf-tab-group {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border);
}
.wf-tab {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.wf-tab:hover { color: var(--text-primary); }
.wf-tab.active {
    background: var(--bg-card);
    color: var(--brand-600);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Step type rows in Add Step modal */
.wf-type-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    cursor: pointer;
    transition: background 0.12s;
    text-align: left;
    font-family: inherit;
    border-bottom: 1px solid var(--border-light);
}
.wf-type-item:last-child { border-bottom: none; }
.wf-type-item:hover { background: var(--bg-secondary); }

.wf-type-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

/* ── Dark Mode overrides ──────────────────────────────────────── */
.dark .wf-topbar       { background: #1e293b; border-color: #334155; }
.dark .wf-sidebar      { background: #1e293b; border-color: #334155; }
.dark .wf-config-panel { background: #1e293b; border-color: #334155; }
.dark .wf-config-header { background: #1e293b; border-color: #334155; }
.dark .wf-name-input:hover,
.dark .wf-name-input:focus { background: #0f172a; }
.dark .wf-node         { background: #1e293b; border-color: #334155; }
.dark .wf-node:hover   { border-color: var(--brand-600); }
.dark .wf-end-node     { background: #0f172a; border-color: #334155; }
.dark .wf-connector-btn { background: #1e293b; border-color: #334155; }
.dark .wf-tab-group    { background: #0f172a; border-color: #334155; }
.dark .wf-tab.active   { background: #1e293b; }
.dark .wf-type-item:hover  { background: #0f172a; }
.dark .wf-preset-item  { background: #0f172a; border-color: #334155; }
.dark .wf-var-chip     { background: #0f172a; border-color: #334155; }
.dark .wf-step-item.selected { background: rgba(46,134,193,0.12); }
.dark .wf-canvas-empty-icon  { background: rgba(46,134,193,0.15); color: var(--brand-500); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .wf-sidebar      { width: 200px; }
    .wf-config-panel { width: 260px; }
}
@media (max-width: 700px) {
    .wf-sidebar      { display: none; }
    .wf-config-panel { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   INTAKE FORM DESIGNER  (IntakeFormUploadModal.razor)
   Colours come from the theme vars, so light/dark need no overrides.
   ══════════════════════════════════════════════════════════════════ */

/* ── Source chooser: upload a file vs. design from scratch ── */
/* Padding, not margin: the grid sits flush inside .modal-body, which is overflow-y:auto and so
   clips at its own edge. Without room here the card's :hover lift takes the top border out of
   the clip box (and eats the drop shadow). */
.fd-source-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 4px 14px; }
.fd-source-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 20px 18px; text-align: left; cursor: pointer; font-family: inherit;
    background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 14px;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.fd-source-card:hover {
    border-color: var(--brand-600);
    box-shadow: 0 8px 20px rgba(46,134,193,0.12);
    transform: translateY(-2px);
}
.fd-source-icon {
    width: 42px; height: 42px; border-radius: 12px; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}
.fd-source-title { font-size: 14px; font-weight: 800; color: var(--text-primary); }
.fd-source-desc  { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }
.fd-source-hint  { font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Build / Preview tabs ── */
.fd-tabs {
    display: flex; gap: 4px; padding: 4px; margin-bottom: 18px;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px;
}
.fd-tab {
    flex: 1; padding: 7px 12px; border: none; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--text-secondary);
    font-family: inherit; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background 0.15s, color 0.15s;
}
.fd-tab:hover   { color: var(--text-primary); }
.fd-tab.active  { background: var(--bg-card); color: var(--brand-600); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.fd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fd-label {
    display: block; font-size: 10px; font-weight: 800; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
}
.fd-hint { font-size: 10.5px; color: var(--text-muted); margin: 6px 0 0; font-style: italic; }

/* ── Field type palette ── */
.fd-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.fd-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 20px; cursor: pointer; font-family: inherit;
    font-size: 11.5px; font-weight: 600; white-space: nowrap;
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fd-chip:hover { background: rgba(46,134,193,0.08); border-color: var(--brand-600); color: var(--brand-600); }
.fd-chip i     { font-size: 10.5px; }

/* ── Field cards ── */
.fd-field {
    border: 1px solid var(--border); border-radius: 10px; padding: 12px;
    margin-bottom: 10px; background: var(--bg-card);
}
.fd-field:hover     { border-color: var(--border); }
.fd-field-head      { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fd-field-num {
    width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-input); color: var(--text-muted);
    font-size: 10px; font-weight: 800;
}
.fd-field-label { flex: 1; min-width: 150px; }
.fd-field-type  { width: 150px; flex-shrink: 0; }
.fd-field-req {
    display: flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer;
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
}
.fd-field-actions { display: flex; gap: 3px; margin-left: auto; }
.fd-icon-btn {
    width: 26px; height: 26px; flex-shrink: 0; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
    background: transparent; border: 1px solid var(--border); color: var(--text-muted);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fd-icon-btn:hover:not(:disabled)         { background: var(--bg-input); color: var(--text-primary); }
.fd-icon-btn.danger:hover:not(:disabled)  { background: rgba(239,68,68,0.10); color: #ef4444; border-color: rgba(239,68,68,0.35); }
.fd-icon-btn:disabled                     { opacity: 0.35; cursor: not-allowed; }

/* ── Per-field options editor ── */
.fd-options { margin: 10px 0 0 30px; padding-left: 12px; border-left: 2px solid var(--border-light); }
.fd-option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fd-option-row > i     { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.fd-option-row .inp    { padding: 7px 10px; font-size: 12px; border-radius: 8px; }
.fd-add-option {
    background: none; border: none; cursor: pointer; padding: 2px 0; font-family: inherit;
    font-size: 11.5px; font-weight: 700; color: var(--brand-600);
    display: inline-flex; align-items: center; gap: 5px;
}
.fd-add-option:hover { text-decoration: underline; }
.fd-add-option i     { font-size: 9px; }

/* ── Empty state ── */
.fd-empty {
    margin-top: 16px; padding: 34px 20px; text-align: center;
    border: 1.5px dashed var(--border); border-radius: 12px; background: var(--bg-input);
}
.fd-empty i          { font-size: 26px; color: var(--text-muted); opacity: 0.5; }
.fd-empty-title      { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin: 10px 0 2px; }
.fd-empty-sub        { font-size: 11.5px; color: var(--text-muted); margin: 0; }

/* ── Preview tab ── */
.fd-preview {
    border: 1px solid var(--border); border-radius: 12px; padding: 18px;
    background: var(--bg-input);
}
.fd-preview-name  { font-size: 15px; font-weight: 800; color: var(--text-primary); margin: 0; }
.fd-preview-desc  { font-size: 11.5px; color: var(--text-muted); margin: 3px 0 0; }
.fd-preview-field { margin-top: 14px; }
.fd-preview-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; }
.fd-preview-input { height: 26px; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--border); }
.fd-preview-opt   { font-size: 11.5px; color: var(--text-secondary); margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.fd-preview-opt i { color: var(--text-muted); font-size: 11px; }
.fd-preview-sig {
    height: 54px; border-radius: 6px; background: var(--bg-card);
    border: 1.5px dashed var(--border); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px;
}

@media (max-width: 640px) {
    .fd-source-grid  { grid-template-columns: 1fr; }
    .fd-grid-2       { grid-template-columns: 1fr; }
    .fd-field-type   { width: 100%; }
    .fd-field-actions { margin-left: 0; }
}

/* === Paid features: locked screen + sidebar padlocks ====================== */
/* Colours come from the CSS variables redefined under .dark, so dark mode needs
   no separate rules except where a literal is unavoidable (noted inline).      */

.upg-wrap { display: flex; align-items: flex-start; justify-content: center; padding: 48px 20px; }
.upg-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
    padding: 40px 36px; max-width: 560px; width: 100%; text-align: center;
}
.upg-icon {
    width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-600); font-size: 22px;
}
.upg-title { margin: 0 0 10px; font-size: 24px; font-weight: 600; color: var(--text-primary); }
.upg-sub {
    margin: 0 auto 26px; font-size: 14px; line-height: 1.6;
    color: var(--text-secondary); max-width: 44ch;
}

/* Placeholder frame, for a feature whose walkthrough is not built yet. */
.upg-preview {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: var(--bg-input); border: 1px dashed var(--border); border-radius: 12px;
    padding: 34px 20px; margin-bottom: 26px;
    color: var(--text-muted); font-size: 12.5px;
}
.upg-preview i { font-size: 28px; opacity: 0.55; }

/* ─── Locked-feature showcase ────────────────────────────────────────────────
   What a paid module shows when this location has not bought it: a guided run
   through that module's OWN screens, filled with example data, with the price
   and Unlock button pinned above them.

   The slides deliberately reuse the app's real classes — card, tbl, status-badge,
   plan-toggle, stat-value, wf-step-item — so they look like the product and follow
   it when it changes. Only the frame and a few trimmed pieces below are new.

   Moving between slides lives in js/feature-showcase.js. On Blazor Server a C#
   timer would push a render over the wire every few seconds for every staff member
   sitting on a locked page.                                                     */
/* The roomy padding above suits the small centred placeholder. The tour is the
   page, so it sits up near the top with a tighter frame. */
.upg-wrap-wide { padding-top: 8px; padding-bottom: 24px; }
.upg-card-wide { max-width: 1000px; text-align: left; padding: 20px 24px; }

.fsc { margin-bottom: 4px; }

/* Banner: what this is, what it costs, and the way out of it. Solid brand blue,
   so the offer is the loudest thing on the screen and never reads as part of the
   pale example stage underneath. */
.fsc-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    background: var(--brand-600); border-radius: 12px; padding: 14px 18px;
    box-shadow: 0 8px 20px -10px rgba(46,134,193,.6);
}
.dark .fsc-banner { background: var(--brand-700); box-shadow: none; }
.fsc-banner-l { display: flex; gap: 12px; align-items: center; min-width: 0; flex: 1 1 340px; }
/* The module's own sidebar icon on a white tile — it says what you would get,
   where a padlock only said you were shut out. Scoped to .fsc-banner so the
   subtext rule above (.fsc-banner-l span) cannot restyle this span too. */
.fsc-banner .fsc-mod-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; margin: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--brand-600); font-size: 16px; line-height: 1;
    box-shadow: 0 2px 6px rgba(15,23,42,.12);
}
.dark .fsc-banner .fsc-mod-icon { color: var(--brand-700); }
.fsc-banner-l strong { display: block; font-size: 15px; font-weight: 600; color: #fff; }
.fsc-banner-l span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: #E8F2FA; }
.fsc-banner-r { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.fsc-price { font-size: 22px; font-weight: 700; color: #fff; white-space: nowrap; }
.fsc-price small { font-size: 11.5px; font-weight: 500; color: #E8F2FA; }
/* A blue button would disappear on the blue banner, so Unlock is white here. */
.fsc-unlock { background: #fff; color: var(--brand-700); box-shadow: 0 4px 12px rgba(15,23,42,.18); }
.fsc-unlock:hover { background: var(--brand-50); }
.fsc-unlock:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Slides. The active one stays in flow so the frame takes its height; the others
   sit on top of it, invisible — no jump between slides and nothing clipped. */
/* The stage: a tinted, dotted backdrop under the slides and their controls. It
   keeps the tour visibly apart from the page's own cards. */
.fsc-stage {
    margin-top: 14px; padding: 16px 18px 12px; border-radius: 14px;
    border: 1px solid var(--brand-100);
    background:
        radial-gradient(circle, rgba(46,134,193,.16) 1px, transparent 1.5px) 0 0 / 18px 18px,
        var(--brand-50);
}
.dark .fsc-stage { border-color: var(--border); background-color: #0f172a; }

.fsc-track { position: relative; min-height: 430px; }
.fsc-slide { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.fsc-slide.is-active { position: relative; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fsc-slide { transition: none; } }

.fsc-cap { display: flex; align-items: baseline; gap: 9px; margin: 0 0 10px; }
.fsc-cap-n {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-600);
    color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.fsc-cap-t { font-size: 14.5px; font-weight: 600; color: var(--text-primary); }
.fsc-cap-s { font-size: 12.5px; color: var(--text-muted); }

/* The framed screen: real markup, inert, drawn as an app window lifted off the
   stage — a title bar with window dots and the "Example data" tag — so it reads
   as a picture of the product, not as part of this page. */
.fsc-screen {
    position: relative; border: 1px solid var(--border); border-radius: 12px;
    background: var(--bg-card); padding: 46px 16px 16px; pointer-events: none; user-select: none;
    box-shadow: 0 14px 32px -14px rgba(15,23,42,.28), 0 2px 6px rgba(15,23,42,.06);
}
.fsc-screen::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 30px;
    border-bottom: 1px solid var(--border); border-radius: 11px 11px 0 0;
    background:
        radial-gradient(circle, #F87171 3.5px, transparent 4px) 9px 50% / 16px 16px no-repeat,
        radial-gradient(circle, #FBBF24 3.5px, transparent 4px) 25px 50% / 16px 16px no-repeat,
        radial-gradient(circle, #34D399 3.5px, transparent 4px) 41px 50% / 16px 16px no-repeat,
        #F1F5F9;
}
.fsc-screen::after {
    content: "Example data"; position: absolute; top: 6px; right: 10px; padding: 2px 8px;
    border-radius: 999px; background: #FEF3C7; color: #92400E; line-height: 1.5;
    font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
}
.dark .fsc-screen { box-shadow: 0 14px 32px -14px rgba(0,0,0,.65); }
.dark .fsc-screen::before { background-color: #273449; }
.dark .fsc-screen::after { background: rgba(245,158,11,.18); color: #fcd34d; }
.fsc-screen .card { box-shadow: none; }
.fsc-screen h1 { font-size: 19px; }

/* Controls: a video-style playback bar — play/pause, skip back and forward, and one
   progress segment per screen. The active segment's fill is the tour's clock: the
   script moves on when its animation ends, and pausing simply freezes it. */
.fsc-bar { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.fsc-play {
    width: 36px; height: 36px; padding: 0; flex-shrink: 0; margin-right: 2px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%; background: var(--brand-600); color: #fff;
    font-size: 13px; cursor: pointer; transition: background .15s, transform .15s;
    box-shadow: 0 4px 10px -4px rgba(46,134,193,.6);
}
.fsc-play:hover { background: var(--brand-700); transform: scale(1.05); }
.fsc-play .fa-play { margin-left: 2px; } /* a triangle only looks centred nudged right */
.fsc-skip {
    width: 30px; height: 30px; padding: 0; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 8px; background: transparent;
    color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: color .15s, background .15s;
}
.fsc-skip:hover { color: var(--brand-600); background: var(--bg-card); }
.fsc-play:focus-visible, .fsc-skip:focus-visible, .fsc-seg:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.fsc-timeline { flex: 1; min-width: 0; margin-left: 8px; }
.fsc-timeline-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fsc-chapter {
    min-width: 0; font-size: 12px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fsc-count { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fsc-segs { display: flex; gap: 4px; margin-top: 2px; }
.fsc-seg { position: relative; flex: 1 1 0; height: 14px; padding: 0; border: none; background: none; cursor: pointer; }
.fsc-seg::before, .fsc-seg-fill { position: absolute; left: 0; right: 0; top: 5px; height: 4px; border-radius: 999px; }
.fsc-seg::before { content: ""; background: var(--border); transition: background .15s; }
.fsc-seg:hover::before { background: var(--text-muted); }
.fsc-seg-fill { background: var(--brand-600); transform-origin: left center; transform: scaleX(0); }
.fsc-seg.is-done .fsc-seg-fill { transform: scaleX(1); }
.fsc-seg.is-active .fsc-seg-fill { animation: fsc-fill var(--fsc-slide-ms, 7s) linear forwards; }
.fsc.is-paused .fsc-seg.is-active .fsc-seg-fill,
.fsc.is-away .fsc-seg.is-active .fsc-seg-fill { animation-play-state: paused; }
@keyframes fsc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── trimmed pieces used inside the slides ──────────────────────────────────
   The builder canvas, the AI dialog and the chip lists are drawn small enough to
   read inside the frame, rather than dropped in at full page size.             */
.fsc-flow { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 2px 0 6px; }
.fsc-node { flex-shrink: 0; min-width: 116px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.fsc-node.is-trigger { border-left: 3px solid var(--brand-600); }
.fsc-node.is-wait { border-style: dashed; }
.fsc-node b { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-primary); }
.fsc-node span { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.fsc-arrow { flex-shrink: 0; color: var(--text-muted); font-size: 11px; }

.fsc-split { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; }
/* A screen's title row: the buttons drop under the title when there is no room. */
.fsc-toolbar { flex-wrap: wrap; gap: 10px; }
.fsc-side { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 11px; }

.fsc-modal { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.fsc-modal-head { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border-light); }
.fsc-modal-badge {
    width: 30px; height: 30px; border-radius: 9px; color: #fff; font-size: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fsc-modal-head h4 { font-size: 14.5px; font-weight: 600; color: var(--text-primary); margin: 0; }
.fsc-modal-head p { font-size: 11.5px; color: var(--text-muted); margin: 1px 0 0; }
.fsc-modal-body { padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; }
.fsc-prompt {
    border: 1px solid var(--brand-600); border-radius: 9px; background: var(--bg-input);
    padding: 10px 12px; font-size: 12.5px; line-height: 1.5; color: var(--text-primary);
}
.fsc-caret { display: inline-block; width: 1.5px; height: 13px; background: var(--brand-600); vertical-align: -2px; margin-left: 2px; }
.fsc-ai-out { display: flex; flex-direction: column; gap: 6px; }
.fsc-ai-step { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-secondary);
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; }
.fsc-ai-step i { color: var(--brand-600); font-size: 10px; width: 12px; text-align: center; }
.fsc-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 15px; border-top: 1px solid var(--border-light); }

.fsc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.fsc-col h6 { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); margin: 0 0 8px; }
.fsc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fsc-chip { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: var(--bg-input);
    border: 1px solid var(--border); color: var(--text-secondary); white-space: nowrap; }
.fsc-chip i { margin-right: 5px; font-size: 9.5px; color: var(--brand-600); }

.fsc-recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fsc-recipe { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; }
.fsc-recipe > i { color: var(--brand-600); font-size: 13px; margin-top: 2px; flex-shrink: 0; }
.fsc-recipe b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.fsc-recipe span { display: block; font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }
.fsc-recipe em { display: block; font-size: 10.5px; color: var(--text-muted); font-style: normal; margin-top: 4px; }

/* ── pieces the Campaigns and Appointments tours need ───────────────────────
   Same rule as above: use a real class wherever one exists, and only add
   something here when the real page's markup is too heavy to drop in whole.
   Everything is built from the theme variables, so dark mode needs no extra
   rules — except where the real page itself uses fixed pastel hexes (the
   template tiles, the status badges), which are copied as they are so the
   example looks like the product.                                          */

/* The step rail: the campaign builder's five steps, the booking widget's four. */
.fsc-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fsc-stepn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.fsc-stepn b {
    width: 19px; height: 19px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); background: var(--bg-card);
    font-size: 9.5px; font-weight: 700;
}
.fsc-stepn.is-done b { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.fsc-stepn.is-on { color: var(--brand-600); font-weight: 600; }
.fsc-stepn.is-on b { border-color: var(--brand-600); color: var(--brand-600); }
.fsc-steps hr { flex: 1 1 14px; min-width: 8px; height: 1px; border: 0; background: var(--border); margin: 0; }

/* A wall of choices — the ten campaign templates. */
.fsc-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.fsc-tile { text-align: center; background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 10px 7px; }
.fsc-tile.is-on { border-color: var(--brand-600); }
.fsc-tile i {
    width: 28px; height: 28px; border-radius: 8px; font-size: 12px; margin-bottom: 6px;
    display: inline-flex; align-items: center; justify-content: center;
}
.fsc-tile b { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-primary); }
.fsc-tile span { display: block; font-size: 10px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }

/* The three answers the content check can give. */
.fsc-verdicts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fsc-verdict { background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.fsc-verdict b { display: block; font-size: 11.5px; font-weight: 600; }
.fsc-verdict span { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.fsc-verdict.is-ok   { border-left: 3px solid #16a34a; } .fsc-verdict.is-ok b   { color: #16a34a; }
.fsc-verdict.is-warn { border-left: 3px solid #d97706; } .fsc-verdict.is-warn b { color: #d97706; }
.fsc-verdict.is-bad  { border-left: 3px solid #dc2626; } .fsc-verdict.is-bad b  { color: #dc2626; }

/* The one number a screen is really about — here, how many people match. */
.fsc-big {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: 1px solid var(--brand-600); border-radius: 10px; background: var(--bg-input); padding: 11px 14px;
}
.fsc-big b { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-primary); }
.fsc-big small { display: block; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.fsc-big em { font-size: 26px; font-weight: 800; font-style: normal; line-height: 1; color: var(--brand-600); }

/* Rows with a picture: services and providers. */
.fsc-rows { display: flex; flex-direction: column; gap: 8px; }
.fsc-row { display: flex; align-items: center; gap: 10px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
.fsc-thumb {
    width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; font-size: 14px; color: var(--brand-600);
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(46,134,193,.16), rgba(20,184,166,.16));
}
.fsc-thumb.is-round { border-radius: 50%; font-weight: 700; font-size: 13px; }
.fsc-row-main { flex: 1; min-width: 0; }
.fsc-row-main > b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.fsc-row-main > span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.fsc-row-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.fsc-magic { font-size: 10px; font-weight: 700; color: #8b5cf6; white-space: nowrap; }
.fsc-magic i { margin-right: 3px; }

/* Brand colours, opening hours, and the short label/value pairs of the rules. */
.fsc-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.fsc-swatch { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-secondary);
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 5px 9px; }
.fsc-swatch i { width: 15px; height: 15px; border-radius: 4px; border: 1px solid rgba(0,0,0,.14); }
.fsc-hours { display: flex; flex-direction: column; gap: 4px; }
.fsc-hour { display: flex; align-items: center; gap: 10px; font-size: 11.5px; background: var(--bg-input);
    border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; }
.fsc-hour b { width: 76px; font-weight: 600; color: var(--text-secondary); }
.fsc-hour span { color: var(--text-primary); }
.fsc-hour.is-off span { color: var(--text-muted); font-style: italic; }
.fsc-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fsc-kv > div { background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.fsc-kv b { display: block; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.fsc-kv span { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-top: 3px; }
.fsc-code { display: block; font-family: monospace; font-size: 10.5px; color: var(--text-secondary); white-space: nowrap;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; overflow-x: auto; }

/* The patient's own booking page. It is not the staff app, so it keeps its own
   header rather than borrowing the app's chrome. */
.fsc-widget { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.fsc-widget-top { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: #fff;
    background: linear-gradient(135deg, #1A2B3C, #2E86C1); }
.fsc-widget-top i { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; font-size: 12px;
    background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; }
.fsc-widget-top b { display: block; font-size: 13px; font-weight: 600; }
.fsc-widget-top small { display: block; font-size: 11px; opacity: .82; }
.fsc-widget-body { padding: 13px 14px; }
.fsc-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.fsc-slot { font-size: 11px; font-weight: 600; padding: 5px 11px; border-radius: 8px;
    background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); }
.fsc-slot.is-on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.fsc-slot.is-off { opacity: .42; text-decoration: line-through; }

@media (max-width: 860px) {
    .fsc-split { grid-template-columns: 1fr; }
    .fsc-cols, .fsc-recipes, .fsc-verdicts, .fsc-kv { grid-template-columns: 1fr; }
    .fsc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fsc-banner-r { margin-left: 0; }
    .fsc-track { min-height: 560px; }
}

.upg-price { margin-bottom: 22px; }
.upg-amount { font-size: 30px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.upg-per { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }

.upg-actions { display: flex; justify-content: center; }
.upg-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 24px; border: none; border-radius: 10px; cursor: pointer;
    background: var(--brand-600); color: #fff; font-size: 14px; font-weight: 600;
    font-family: inherit; transition: background 0.15s;
}
.upg-btn-primary:hover { background: var(--brand-700); }
.upg-btn-primary:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }

.upg-status {
    margin: 18px 0 0; font-size: 12.5px; color: var(--text-muted);
    padding-top: 14px; border-top: 1px solid var(--border);
}

/* Sidebar: a locked module stays visible with a padlock. Hiding it would mean
   nobody ever discovers the feature, let alone buys it. No price here — the
   price lives on the locked page's banner.                                      */
.sidebar-link.locked { opacity: 0.62; }
.sidebar-link.locked:hover { opacity: 0.85; }
.nav-lock { margin-left: auto; font-size: 10px; opacity: 0.75; }

/* Plan badge beside the logo: Basic (no plan), Basic + 1 add-on (one feature), Plus (any two),
   Pro (all three). The name comes from the API with the plan; links to Billing. */
.plan-badge {
    margin-left: 8px; display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 9px; border-radius: 999px; border: 1px solid transparent;
    font-size: 10.5px; font-weight: 600; line-height: 1.6; white-space: nowrap;
    text-decoration: none; transition: filter .15s;
}
.plan-badge i { font-size: 9px; }
.plan-badge:hover { filter: brightness(.94); }
.plan-badge:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.plan-badge.is-basic { border-color: #cbd5e1; color: #475569; }
.plan-badge.is-plus  { background: var(--brand-50); color: var(--brand-700); }
.plan-badge.is-pro   { background: var(--clinical-600); color: #fff; }
.plan-badge.is-warn  { background: #FEF3C7; color: #92400E; border-color: transparent; }
.dark .plan-badge.is-basic { border-color: #475569; color: #94a3b8; }
.dark .plan-badge.is-plus  { background: rgba(46,134,193,.18); color: #85B7EB; }
.dark .plan-badge.is-warn  { background: rgba(245,158,11,.18); color: #fcd34d; }
/* The icon rail has no room beside the logo mark. */
.sidebar-collapsed .plan-badge { display: none; }

@media (max-width: 640px) {
    .upg-card { padding: 28px 20px; }
    .upg-card-wide { padding: 16px 14px; }
    .fsc-stage { padding: 12px 10px 10px; }
    .fsc-screen { padding: 42px 10px 10px; }
    /* Screens ignore touches, so anything that would need a sideways scroll is
       unreachable — stack the builder's columns and wrap its step boxes instead. */
    .fsc-split { grid-template-columns: minmax(0, 1fr); }
    .fsc-flow { flex-wrap: wrap; overflow-x: visible; }
    .upg-amount { font-size: 26px; }
}

/* === Plans & Billing (/billing) =========================================== */
/* Colours come from the variables .dark redefines; the only literals are the
   success/failure icon tints, which carry their own .dark overrides below.   */

.bill-notice {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px;
    padding: 12px 16px; margin-bottom: 20px; font-size: 13px; line-height: 1.5; color: var(--text-secondary);
}
.bill-notice i { color: var(--brand-600); margin-top: 2px; }
.bill-loading { display: flex; align-items: center; gap: 10px; padding: 40px 0; color: var(--text-muted); font-size: 13px; }

.bill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .bill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .bill-grid { grid-template-columns: 1fr; } }

.bill-card { display: flex; flex-direction: column; gap: 10px; transition: box-shadow 0.2s, border-color 0.2s; }
.bill-card-focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px rgba(46, 134, 193, 0.18); }
.bill-card-head { display: flex; align-items: center; justify-content: space-between; }
.bill-icon {
    width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-600); font-size: 16px;
}
.bill-name { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.bill-blurb { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); min-height: 3.1em; }
.bill-price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.bill-amount { font-size: 24px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
.bill-per { font-size: 12px; color: var(--text-muted); }
.bill-state { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); min-height: 1.5em; }
.bill-actions { margin-top: auto; padding-top: 6px; display: flex; gap: 8px; }
.bill-btn { width: 100%; }
.bill-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.bill-section-title { font-size: 15px; font-weight: 700; color: var(--text-primary); margin: 8px 0 12px; }
.bill-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 28px 20px; }
.bill-ref { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 11.5px; color: var(--text-muted); }

/* Purchase and cancel dialogs */
.bill-modal { max-width: 440px; width: calc(100% - 32px); padding: 28px 28px 22px; }
.bill-modal-body { display: flex; flex-direction: column; gap: 10px; }
.bill-center { align-items: center; text-align: center; }
.bill-modal-icon {
    width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--brand-50); color: var(--brand-600); font-size: 20px; margin: 0 auto 4px;
}
.bill-modal-icon.ok  { background: #ECFDF5; color: #16A34A; }
.bill-modal-icon.bad { background: #FEF2F2; color: #DC2626; }
.dark .bill-modal-icon.ok  { background: rgba(22, 163, 74, 0.16); color: #4ADE80; }
.dark .bill-modal-icon.bad { background: rgba(220, 38, 38, 0.16); color: #F87171; }
.bill-modal-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-primary); text-align: center; }
.bill-modal-sub { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); text-align: center; }
.bill-modal-note {
    margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-secondary);
    background: var(--bg-input); border-radius: 10px; padding: 8px 12px;
}
.bill-pay-link { margin-top: 6px; text-decoration: none; width: 100%; }
.bill-modal-fine { margin: 0; font-size: 11.5px; color: var(--text-muted); text-align: center; }
.bill-waiting {
    display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted);
    border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px;
}
.bill-waiting .bill-ref { margin-left: auto; }
.bill-spinner-sm { width: 11px; height: 11px; border-width: 2px; }
.bill-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; width: 100%; }
.bill-center .bill-modal-actions { justify-content: center; }

/* Plans: "Your plan" card, then the plans on sale grouped as one feature / Plus / Pro. */
.plan-badge.is-addon { border-color: var(--brand-600); color: var(--brand-700); }
.dark .plan-badge.is-addon { border-color: #5DADE2; color: #85B7EB; }

.bill-section-sub { margin-left: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
/* Sits on the page background, not a card, which is much lighter than a card in dark mode. */
.dark .bill-section-sub { color: #cbd5e1; }

.bill-current { display: flex; flex-direction: column; gap: 12px; }
.bill-current-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.bill-current-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bill-current-badge { margin-left: 0; font-size: 12px; padding: 3px 12px; }
.bill-current-name { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary); }
.bill-current .bill-price { margin-top: 0; }
.bill-current .bill-state { min-height: 0; }
.bill-current-actions { display: flex; justify-content: flex-end; gap: 8px; }

.bill-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bill-chips-center { justify-content: center; }
.bill-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    background: var(--bg-input); border: 1px dashed var(--border);
}
.bill-chip i { font-size: 11px; }
.bill-chip.is-on { color: var(--clinical-600); background: var(--clinical-50); border: 1px solid transparent; }
.dark .bill-chip.is-on { color: #5EEAD4; background: rgba(20, 184, 166, 0.14); }

.bill-alert {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--brand-50); color: var(--text-secondary);
    border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.5;
}
.bill-alert > i { color: var(--brand-600); }
.bill-alert > span { flex: 1 1 260px; }
.bill-alert.is-bad { background: #FEF2F2; }
.bill-alert.is-bad > i { color: #DC2626; }
.dark .bill-alert { background: rgba(46, 134, 193, 0.14); }
.dark .bill-alert > i { color: #85B7EB; }
.dark .bill-alert.is-bad { background: rgba(220, 38, 38, 0.14); }
.dark .bill-alert.is-bad > i { color: #F87171; }

.bill-card-current { border-color: var(--clinical-500); }
.bill-card-body { display: flex; flex-direction: column; gap: 8px; }
.bill-card-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.bill-card-foot .bill-actions { margin-top: 0; padding-top: 0; }
.bill-icons { display: flex; gap: 6px; }
.bill-icons .bill-icon { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.dark .bill-icons .bill-icon { background: rgba(46, 134, 193, 0.16); color: #85B7EB; }
.bill-save {
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    color: var(--clinical-600); background: var(--clinical-50);
}
.dark .bill-save { color: #5EEAD4; background: rgba(20, 184, 166, 0.14); }
.bill-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-height: 3.1em; }
.bill-feats li { font-size: 13px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.bill-feats i { font-size: 11px; color: var(--clinical-600); }
.dark .bill-feats i { color: #5EEAD4; }

/* Pro is one plan, so it spans the row and lays out sideways. */
.bill-grid-wide { grid-template-columns: minmax(0, 1fr); }
.bill-card-wide { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
.bill-card-wide .bill-card-head { flex-direction: column; align-items: flex-start; gap: 10px; }
.bill-card-wide .bill-feats { flex-direction: row; flex-wrap: wrap; gap: 6px 18px; min-height: 0; }
.bill-card-wide .bill-card-foot { margin-top: 0; min-width: 200px; }
@media (max-width: 900px) {
    .bill-card-wide { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
}

/* Confirm dialog: what it costs today, and from when. */
.bill-summary { border: 1px solid var(--border); border-radius: 10px; padding: 4px 14px; margin-top: 4px; }
.bill-summary-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 8px 0; font-size: 13px; color: var(--text-secondary);
}
.bill-summary-row + .bill-summary-row { border-top: 1px solid var(--border); }
.bill-summary-row strong { color: var(--text-primary); font-size: 14px; white-space: nowrap; }

/* ── Document e-signature (admin /admin/agreements, public /sign) ── */
.ag-doc { font-family: Georgia, 'Times New Roman', serif; color: #1e293b; line-height: 1.6; font-size: 15px; background: #fff; }
.ag-doc h1 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 700; color: #1B4F72; margin: 0 0 14px; }
.ag-doc h2 { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; color: #1B4F72; margin: 22px 0 8px; }
.ag-doc h3 { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; margin: 16px 0 6px; }
.ag-doc p { margin: 0 0 10px; }
.ag-doc ul, .ag-doc ol { margin: 0 0 10px 22px; }
.ag-doc hr { border: none; border-top: 1px solid #e2e8f0; margin: 18px 0; }
.ag-doc a { color: #2E86C1; }
.ag-doc code { font-family: Consolas, monospace; font-size: 13px; background: #f1f5f9; padding: 1px 4px; border-radius: 3px; }
.ag-doc .ag-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 13px; font-family: 'Poppins', sans-serif; }
.ag-doc .ag-table th, .ag-doc .ag-table td { border: 1px solid #e2e8f0; padding: 6px 8px; text-align: left; vertical-align: top; }
.ag-doc .ag-table th { background: #EBF5FB; color: #1B4F72; font-weight: 600; }
.ag-doc .ag-field { background: #FEF3C7; color: #92400E; border-radius: 4px; padding: 0 4px; font-family: Consolas, monospace; font-size: 12px; }
.ag-doc .ag-signature-placeholder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin: 14px 0; font-family: 'Poppins', sans-serif; font-size: 13px; }
.ag-doc .ag-signature-placeholder > div { border: 1px dashed #94a3b8; border-radius: 8px; padding: 12px; color: #475569; min-height: 64px; }
.ag-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.ag-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-family: Consolas, monospace; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-input); color: var(--text-secondary); cursor: pointer; }
.ag-chip:hover { border-color: var(--brand-600); color: var(--brand-600); }
.ag-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.ag-tabs button { background: none; border: none; padding: 10px 16px; font-weight: 600; font-size: 14px; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; }
.ag-tabs button.active { color: var(--brand-600); border-bottom-color: var(--brand-600); }
.ag-editor { width: 100%; min-height: 520px; font-family: Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.5; resize: vertical; }
.ag-preview { border: 1px solid var(--border); border-radius: 10px; padding: 28px 32px; max-height: 620px; overflow: auto; }
.ag-timeline { list-style: none; margin: 0; padding: 0; }
.ag-timeline li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.ag-timeline li:last-child { border-bottom: none; }
.ag-modal-back { position: fixed; inset: 0; background: rgba(15,23,42,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.ag-modal { background: var(--bg-card); border-radius: 14px; padding: 22px; width: 100%; max-width: 460px; border: 1px solid var(--border); }

/* public signing page — always light (no .dark variants on purpose: the signer is not in the staff app's theme).
   PayLoPro-branded, or for a business's client documents (.client) white-labeled with the location's logo/name. */
.sign-page { min-height: 100vh; background: #f4f6f9; color: #1e293b; font-family: 'Poppins', sans-serif; }
.sign-topbar { background: #1B4F72; border-bottom: 4px solid #2E86C1; padding: 14px 20px; }
.sign-topbar.client { background: #1A2B3C; border-bottom-color: #18A999; }
.sign-topbar-inner { max-width: 860px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Clinic logos are drawn for white backgrounds, so they sit on a white badge rather than straight on the dark bar. */
.sign-brand-logo { box-sizing: border-box; height: 52px; max-width: 240px; padding: 6px 12px; object-fit: contain; display: block;
                   background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.sign-brand-name { color: #fff; font-size: 17px; font-weight: 700; }

.sign-topbar .sign-secure { color: #D6EAF8; font-size: 12px; }
.sign-wrap { max-width: 860px; margin: 0 auto; padding: 24px 16px 60px; }
.sign-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 24px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(15,23,42,0.04); }
.sign-doc { padding: 36px 40px; }
.sign-card label { font-size: 13px; font-weight: 600; color: #334155; display: block; margin-bottom: 4px; }
.sign-card input[type=text], .sign-card textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 9px 11px; font-size: 14px; font-family: inherit; background: #fff; color: #0f172a; }
.sign-card input[type=text]:focus, .sign-card textarea:focus { outline: none; border-color: #2E86C1; box-shadow: 0 0 0 3px rgba(46,134,193,0.15); }
.sign-btn { display: inline-flex; align-items: center; gap: 8px; background: #2E86C1; color: #fff; border: none; border-radius: 8px; padding: 11px 20px; font-weight: 600; font-size: 14px; cursor: pointer; }
.sign-btn:hover { background: #1B4F72; }
.sign-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.sign-btn-ghost { background: transparent; color: #475569; border: 1px solid #cbd5e1; }
.sign-btn-ghost:hover { background: #f1f5f9; }
.sign-pad { width: 100%; height: 170px; border: 1px dashed #94a3b8; border-radius: 10px; background: #fff; display: block; cursor: crosshair; }
.sign-typed { font-family: 'Brush Script MT', 'Segoe Script', 'Lucida Handwriting', cursive; font-size: 34px; color: #0f172a; padding: 12px 16px; border-bottom: 1px solid #94a3b8; min-height: 64px; }
.sign-seg { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden; }
.sign-seg button { background: #fff; border: none; padding: 7px 14px; font-size: 13px; cursor: pointer; color: #475569; }
.sign-seg button.active { background: #2E86C1; color: #fff; }
.sign-note { font-size: 12px; color: #64748b; }
.sign-banner { border-radius: 10px; padding: 14px 16px; font-size: 14px; margin-bottom: 16px; }
.sign-banner.info { background: #EBF5FB; color: #1B4F72; border: 1px solid #D6EAF8; }
.sign-banner.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.sign-banner.warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.sign-banner.err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
@media (max-width: 640px) { .sign-doc { padding: 20px 16px; } .sign-card { padding: 16px; } }
@media (max-width: 900px) { .ag-detail-grid { grid-template-columns: 1fr !important; } }
a.btn, a.btn:hover { text-decoration: none; }

/* ═══════════════════════════════════════════════════════
   Day-close reconciliation (Reports → Reconciliation)
   Tints are declared once here and flipped under .dark so the
   semantic meaning (green ties, amber out of place, red at risk)
   survives the theme switch.
   ═══════════════════════════════════════════════════════ */
.recon-root {
    --recon-accent: #1F6FB2;
    --recon-accent-ink: #174F80;
    --recon-accent-tint: #E8F1FA;
    --recon-ok-ink: #12805C;
    --recon-ok-tint: #E6F4EE;
    --recon-warn-ink: #8A4B00;
    --recon-warn-tint: #FFF4E0;
    --recon-warn-line: #F2C7A5;
    --recon-bad-ink: #B42318;
    --recon-bad-tint: #FDECEA;
}
.dark .recon-root {
    --recon-accent: #4A9BD8;
    --recon-accent-ink: #9CCBEC;
    --recon-accent-tint: rgba(74,155,216,0.14);
    --recon-ok-ink: #4ADE9A;
    --recon-ok-tint: rgba(74,222,154,0.12);
    --recon-warn-ink: #F0B457;
    --recon-warn-tint: rgba(240,180,87,0.14);
    --recon-warn-line: rgba(240,180,87,0.45);
    --recon-bad-ink: #F98C82;
    --recon-bad-tint: rgba(249,140,130,0.14);
}

/*  badge-green/yellow/red/gray/blue have no dark-mode variants (unlike
    badge-approved/declined/pending/default a few hundred lines up), so in dark mode they
    keep their pale light-mode fills. Scoped to this panel rather than fixed globally: the
    same classes are used across pages that have not been looked at in dark mode. */
.dark .recon-root .badge-green  { background:rgba(74,222,154,0.18);  color:#86EFC0; }
.dark .recon-root .badge-yellow { background:rgba(240,180,87,0.18);  color:#F6C87C; }
.dark .recon-root .badge-red    { background:rgba(249,140,130,0.18); color:#FCA9A1; }
.dark .recon-root .badge-gray   { background:rgba(148,163,184,0.18); color:#B6C1D0; }
.dark .recon-root .badge-blue   { background:rgba(74,155,216,0.18);  color:#A8D4F0; }

/* --- Day selector ------------------------------------------------------------ */
.recon-day-picker { display:flex; align-items:stretch; gap:8px; margin-bottom:18px; }
.recon-day-nav {
    flex:0 0 auto; width:32px; border:1px solid var(--border); border-radius:12px;
    background:var(--bg-card); color:var(--text-secondary); cursor:pointer;
}
.recon-day-nav:hover:not(:disabled) { border-color:var(--recon-accent); color:var(--recon-accent-ink); }
.recon-day-nav:disabled { opacity:0.4; cursor:default; }
.recon-day-jump {
    flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:0 10px;
    border:1px solid var(--border); border-radius:12px; background:var(--bg-card);
    color:var(--text-secondary); cursor:pointer;
}
.recon-day-jump:hover { border-color:var(--recon-accent); }
.recon-day-jump input {
    border:0; background:transparent; color:var(--text-primary);
    font-size:13px; font-family:inherit; cursor:pointer; width:132px;
}
.recon-day-jump input:focus { outline:none; }
.dark .recon-day-jump input { color-scheme:dark; }

/* Scrolls rather than wraps: a wrapped strip reflows the whole header every time the
   window changes, and a longer range would push the waterfall off the screen. */
.recon-day-strip {
    display:flex; flex-wrap:nowrap; gap:8px; flex:1 1 auto; min-width:0;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity;
    padding-bottom:6px; scrollbar-width:thin;
}
.recon-day-strip::-webkit-scrollbar { height:8px; }
.recon-day-strip::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
.recon-day-strip::-webkit-scrollbar-thumb:hover { background:var(--text-muted); }
.recon-day {
    display:flex; flex-direction:column; align-items:flex-start; gap:6px;
    flex:0 0 150px; min-height:44px; padding:10px 14px; scroll-snap-align:start;
    background:var(--bg-card); color:var(--text-primary);
    border:1px solid var(--border); border-radius:12px; cursor:pointer;
    transition:border-color 0.15s, box-shadow 0.15s;
}
.recon-day:hover:not(:disabled) { border-color:var(--recon-accent); }
.recon-day.selected { border:2px solid var(--recon-accent); padding:9px 13px; }
.recon-day:disabled { opacity:0.6; cursor:default; }
.recon-day-label { font-size:13px; font-weight:600; }

/* --- Header ----------------------------------------------------------------- */
.recon-header {
    display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start;
    justify-content:space-between; margin-bottom:14px;
}
.recon-header-text { min-width:0; }
.recon-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.recon-title { margin:0; font-size:18px; font-weight:700; color:var(--text-primary); }
.recon-subtitle { margin:4px 0 0; font-size:13px; color:var(--text-secondary); }
.recon-header-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }

.recon-note {
    display:flex; gap:8px; align-items:flex-start;
    background:var(--recon-warn-tint); color:var(--recon-warn-ink);
    border:1px solid var(--recon-warn-line); border-radius:12px;
    padding:10px 14px; font-size:13px; margin-bottom:16px;
}

/* --- AI day analysis --------------------------------------------------------- */
.recon-analysis {
    background:var(--recon-accent-tint); border:1px solid var(--recon-accent);
    border-radius:14px; padding:14px 18px 12px; margin-bottom:16px;
}
.recon-analysis-head {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:0.05em;
    color:var(--recon-accent-ink);
}
.recon-analysis-actions { display:flex; align-items:center; gap:10px; }
.recon-analysis-when { font-weight:600; text-transform:none; letter-spacing:0; color:var(--text-muted); }
.recon-analysis-close {
    border:0; background:transparent; color:var(--text-muted);
    font-size:18px; line-height:1; cursor:pointer; padding:0 2px;
}
.recon-analysis-close:hover { color:var(--text-primary); }
.recon-analysis-body { margin-top:8px; font-size:13px; line-height:1.6; color:var(--text-primary); }
.recon-analysis-body h4 {
    margin:14px 0 4px; font-size:12px; font-weight:700;
    color:var(--recon-accent-ink); text-transform:none; letter-spacing:0;
}
.recon-analysis-body h4:first-child { margin-top:2px; }
.recon-analysis-body p { margin:0 0 6px; }
.recon-analysis-body ul { margin:0 0 8px; padding-left:18px; }
.recon-analysis-body li { margin-bottom:3px; }
.recon-analysis-foot { margin:10px 0 0; font-size:11px; color:var(--text-muted); }
.recon-analysis-error { margin:8px 0 0; font-size:13px; color:var(--recon-bad-ink); }

/* --- Waterfall -------------------------------------------------------------- */
/* One cell per step, each derived from the one on its left, so the step where the
   money stops making sense is the one you point at. */
.recon-waterfall {
    display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
    border:1px solid var(--border); border-radius:16px; overflow:hidden;
    background:var(--bg-card); margin-bottom:12px;
}
.recon-cell { padding:14px 16px; border-right:1px solid var(--border-light); min-width:0; }
.recon-cell:last-child { border-right:0; }
.recon-cell-label {
    margin:0; font-size:9px; font-weight:900; text-transform:uppercase;
    letter-spacing:0.05em; color:var(--text-muted);
}
.recon-cell-value { margin:6px 0 0; font-size:20px; font-weight:700; color:var(--text-primary); }
.recon-cell-note { margin:4px 0 0; font-size:11px; color:var(--text-secondary); }
.recon-cell.ok { background:var(--recon-ok-tint); }
.recon-cell.ok .recon-cell-value { color:var(--recon-ok-ink); }
.recon-cell.warn { background:var(--recon-warn-tint); }
.recon-cell.warn .recon-cell-value { color:var(--recon-warn-ink); }
.recon-cell.muted .recon-cell-value { color:var(--text-muted); }

/* --- Fee margin aside ------------------------------------------------------- */
.recon-margin {
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    font-size:12px; color:var(--text-secondary); margin-bottom:22px; padding:0 2px;
}
.recon-margin-sep { color:var(--text-muted); }
.recon-margin .pos { color:var(--recon-ok-ink); }
.recon-margin .neg { color:var(--recon-bad-ink); }

/* --- Sub-tabs --------------------------------------------------------------- */
.recon-subtabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.recon-subtab {
    border:0; border-bottom:3px solid transparent; background:transparent;
    color:var(--text-secondary); padding:10px 14px; min-height:44px;
    font-size:15px; font-weight:500; cursor:pointer;
}
.recon-subtab:hover { color:var(--recon-accent-ink); }
.recon-subtab.selected { border-bottom-color:var(--recon-accent); color:var(--recon-accent-ink); font-weight:600; }
.recon-subtab-count {
    margin-left:6px; font-size:12px; font-weight:600; padding:2px 8px;
    border-radius:999px; background:var(--border-light); color:var(--text-secondary);
}
.recon-subtab-count.alert { background:var(--recon-bad-tint); color:var(--recon-bad-ink); }

/* --- Deposit cards ---------------------------------------------------------- */
.recon-deposit {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:14px; padding:16px 18px; margin-bottom:12px;
}
.recon-deposit.flagged { border-color:var(--recon-warn-line); }
.recon-deposit-head {
    display:flex; flex-wrap:wrap; gap:12px;
    align-items:flex-start; justify-content:space-between;
}
.recon-deposit-figs { display:flex; flex-wrap:wrap; gap:26px; min-width:0; }
.recon-deposit-actions { display:flex; gap:10px; align-items:center; flex-shrink:0; }
.recon-fig-label {
    margin:0; font-size:9px; font-weight:900; text-transform:uppercase;
    letter-spacing:0.05em; color:var(--text-muted);
}
.recon-fig { margin:4px 0 0; font-size:15px; font-weight:600; color:var(--text-primary); }
.recon-fig.strong { font-size:17px; font-weight:700; }
.recon-fig.neg { color:var(--recon-bad-ink); }
.recon-cell-value.neg { color:var(--recon-bad-ink); }
.recon-bank-entries { display:flex; flex-wrap:wrap; gap:4px 16px; align-items:baseline; padding:8px 16px 0; font-size:12px; color:var(--text-secondary); }
.recon-bank-entries-label { font-weight:600; }
.recon-bank-entry { white-space:nowrap; font-variant-numeric:tabular-nums; }
.recon-bank-entry.neg { color:var(--recon-bad-ink); }
.recon-bank-entry-ref { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; margin-right:4px; }
.recon-fig-ref {
    margin:4px 0 0; font-size:15px; font-weight:700; color:var(--text-primary);
    font-variant-numeric:tabular-nums;
}
.recon-deposit-foot {
    display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between;
    margin-top:10px; font-size:11px; color:var(--text-muted);
}
.recon-batch { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- Tables ----------------------------------------------------------------- */
.recon-table-wrap { overflow-x:auto; margin-top:12px; }
.recon-table { width:100%; border-collapse:collapse; font-size:13px; }
.recon-table th {
    text-align:left; padding:8px 12px; font-size:9px; font-weight:900;
    text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted);
    border-bottom:1px solid var(--border); white-space:nowrap;
}
.recon-table td { padding:9px 12px; border-bottom:1px solid var(--border-light); color:var(--text-primary); }
.recon-table tr:last-child td { border-bottom:0; }
.recon-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.recon-table .nowrap { white-space:nowrap; }
.recon-table-note { color:var(--text-secondary); font-size:12px; }
.recon-voided { text-decoration:line-through; color:var(--text-secondary); }
.recon-alert-text { color:#DC2626; font-weight:600; }
.recon-table tr.flagged { background:var(--recon-warn-tint); }

/* --- Transaction filters ---------------------------------------------------- */
.recon-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px; }
.recon-chip {
    border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary);
    border-radius:999px; padding:8px 14px; min-height:40px;
    font-size:13px; font-weight:500; cursor:pointer;
}
.recon-chip:hover { border-color:var(--recon-accent); }
.recon-chip.selected {
    border-color:var(--recon-accent); background:var(--recon-accent-tint); color:var(--recon-accent-ink);
}
.recon-chip-count { margin-left:4px; color:var(--text-muted); font-weight:600; }
.recon-chip.selected .recon-chip-count { color:var(--recon-accent-ink); }

/* --- Exception cards -------------------------------------------------------- */
.recon-exception {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:14px; padding:18px 20px; margin-bottom:12px;
}
.recon-exception.warn { border-color:var(--recon-warn-line); }
.recon-exception.severe { border-color:var(--recon-bad-ink); }
.recon-exception.resolved { opacity:0.75; }
.recon-ex-head { display:flex; gap:12px; align-items:center; justify-content:space-between; }
.recon-ex-amount { font-size:17px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.recon-ex-title { margin:12px 0 0; font-size:15px; font-weight:600; color:var(--text-primary); }
.recon-ex-body { margin:6px 0 0; font-size:13px; line-height:1.55; color:var(--text-secondary); }
.recon-ex-detail { margin:8px 0 0; font-size:12px; color:var(--text-muted); }
.recon-ex-foot { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:14px; }
.recon-ex-by { font-size:12px; color:var(--text-muted); }

/* --- Empty / loading states ------------------------------------------------- */
.recon-empty { text-align:center; padding:44px 20px; color:var(--text-secondary); }
.recon-empty i { font-size:28px; color:var(--text-muted); margin-bottom:12px; display:block; }
.recon-empty.ok i { color:var(--recon-ok-ink); }
.recon-empty p { margin:0; font-size:14px; }
.recon-empty-note { margin-top:6px !important; font-size:12px !important; color:var(--text-muted); }
/* Deposits funded alongside the day but belonging to other trading days */
.recon-extra-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:18px 0 8px; font-size:12px; color:var(--text-secondary); }
.recon-extra-head i { color:#2E86C1; }
.recon-extra-title { font-weight:700; color:var(--text-primary); }
.recon-extra-sub { color:var(--text-muted); }
.recon-deposit.extra { border-style:dashed; }
.recon-extra-line { margin:0; padding:0 16px 12px; font-size:12px; color:var(--text-secondary); }
.recon-pending { color:#2E86C1; }
.recon-pending i { margin-right:4px; }
.recon-byday { padding:8px 16px 12px; border-top:1px dashed var(--border); font-size:12px; }
.recon-byday-title { font-weight:700; color:var(--text-primary); margin-bottom:4px; }
.recon-byday-row { display:flex; align-items:center; gap:14px; padding:3px 0; color:var(--text-secondary); }
.recon-byday-date { min-width:120px; font-weight:600; color:var(--text-primary); }
.recon-byday-row .num { min-width:90px; text-align:right; font-weight:600; color:var(--text-primary); }
.recon-byday-table { margin-top:6px; }

/* --- Narrow screens --------------------------------------------------------- */
@media (max-width: 1500px) {
    .recon-waterfall { grid-template-columns:repeat(4, minmax(0, 1fr)); }
    .recon-cell:nth-child(4n) { border-right:0; }
    .recon-cell:nth-child(-n+4) { border-bottom:1px solid var(--border-light); }
}
@media (max-width: 1100px) {
    .recon-waterfall { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .recon-cell { border-right:1px solid var(--border-light); }
    .recon-cell:nth-child(3n) { border-right:0; }
    .recon-cell:nth-child(-n+3) { border-bottom:1px solid var(--border-light); }
}
@media (max-width: 680px) {
    .recon-waterfall { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .recon-cell { border-right:1px solid var(--border-light); border-bottom:1px solid var(--border-light); }
    .recon-cell:nth-child(2n) { border-right:0; }
    .recon-cell:nth-last-child(-n+2) { border-bottom:0; }
    .recon-deposit-figs { gap:16px; }
    .recon-header-actions { width:100%; }
}

/* ---- Transaction report: terminal batch picker (multi-select) ---- */
.batch-pick { position:relative; display:inline-block; }
.batch-pick-btn { display:inline-flex; align-items:center; width:auto; max-width:380px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; text-align:left; }
.batch-pick-btn.has-value { border-color:var(--brand); color:var(--brand); font-weight:600; }
.batch-pick-backdrop { position:fixed; inset:0; z-index:40; }
.batch-pick-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:41; min-width:360px; max-width:460px; max-height:360px; overflow-y:auto; background:var(--bg-card, #fff); border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.15); padding:6px; }
.batch-pick-menu.flip { left:auto; right:0; }
.batch-pick-head { display:flex; justify-content:space-between; align-items:center; padding:6px 10px 8px; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); border-bottom:1px solid var(--border); margin-bottom:4px; }
.batch-pick-head a { font-size:11px; text-transform:none; letter-spacing:0; color:var(--brand); text-decoration:none; }
.batch-pick-clock { font-size:10px; text-transform:none; letter-spacing:0; color:var(--text-secondary); margin-left:auto; margin-right:10px; }
.batch-pick-item { display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; cursor:pointer; font-size:12px; color:var(--text-primary); }
.batch-pick-item:hover { background:var(--bg-input); }
.batch-pick-item.on { background:var(--brand-light, rgba(59,130,246,.08)); }
.batch-pick-item input { margin:0; accent-color:var(--brand); }
.batch-pick-main { display:flex; flex-direction:column; flex:1; min-width:0; }
.batch-pick-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.batch-pick-sub { font-size:11px; color:var(--text-secondary); }
.batch-pick-amt { display:flex; flex-direction:column; align-items:flex-end; font-weight:600; white-space:nowrap; }
.batch-pick-amt small { font-weight:400; font-size:10px; color:var(--text-muted); }
.batch-pick-empty { padding:12px; font-size:12px; color:var(--text-muted); text-align:center; }

/* ---- Transaction report: selected batch vs report check ---- */
.batch-check-list { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.batch-check { border:1px solid var(--border); border-radius:10px; background:var(--bg-card, #fff); font-size:12px; }
.batch-check.ok { border-color:rgba(22,163,74,.35); }
.batch-check.off { border-color:rgba(217,119,6,.45); }
.batch-check-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; padding:8px 14px; cursor:pointer; }
.batch-check-icon { font-size:14px; }
.batch-check.ok .batch-check-icon { color:#16A34A; }
.batch-check.off .batch-check-icon { color:#D97706; }
.batch-check-title { font-weight:700; color:var(--text-primary); }
.batch-check-stat { display:flex; flex-direction:column; line-height:1.15; color:var(--text-primary); font-weight:600; }
.batch-check-stat small { font-size:10px; font-weight:400; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.batch-check-verdict { margin-left:auto; font-weight:700; padding:3px 10px; border-radius:999px; }
.batch-check-verdict.ok { background:#ECFDF5; color:#16A34A; }
.batch-check-verdict.off { background:#FEF3C7; color:#D97706; }
.batch-check-chev { font-size:10px; color:var(--text-muted); }
.batch-check-body { border-top:1px dashed var(--border); padding:8px 14px 10px; display:flex; flex-direction:column; gap:10px; }
.batch-check-group-title { font-weight:600; color:var(--text-primary); margin-bottom:4px; }
.batch-check-row { display:grid; grid-template-columns:150px 90px 90px 130px 1fr auto; gap:12px; padding:3px 0; color:var(--text-secondary); }
.batch-check-row .amt { font-weight:600; color:var(--text-primary); text-align:right; }
.batch-check-row .muted { color:var(--text-muted); }
.batch-check-hint { margin-top:4px; font-size:11px; color:var(--text-muted); }
/* PMS report match strip: same card as the batch check, six narrower columns for slip lines */
.pms-check .batch-check-row { grid-template-columns:118px 120px 70px 80px 1fr auto; }
.pms-check .batch-check-row.matched { color:var(--text-muted); }
.pms-check .batch-check-head .btn-icon { margin-left:4px; }
.pms-upload { position:relative; overflow:hidden; cursor:pointer; }
.pms-upload input[type=file] { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.pms-upload.busy { cursor:progress; color:#2E86C1; border-color:#2E86C1; background:rgba(46,134,193,.06); animation:pms-pulse 1.4s ease-in-out infinite; }
.pms-upload.busy input[type=file] { cursor:progress; }
@keyframes pms-pulse {
  0%, 100% { box-shadow:0 0 0 0 rgba(46,134,193,.45); }
  60%      { box-shadow:0 0 0 7px rgba(46,134,193,0); }
}
@media (max-width: 900px) { .batch-check-row { grid-template-columns:1fr 1fr; } }

/* ── Text2Pay message templates (Text2PayMessageFields + /text2pay-templates) ── */
.t2p-fields { display: grid; gap: 12px; }
.t2p-block { padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.t2p-block-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.t2p-select { width: auto; max-width: 60%; padding: 6px 8px; font-size: 12px; }
.t2p-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; line-height: 1.6; }
.t2p-hint code { font-size: 11px; padding: 1px 5px; border-radius: 4px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-secondary); }
.t2p-manage-link { color: var(--brand-600); font-weight: 600; white-space: nowrap; }
.t2p-manage-link:hover { text-decoration: underline; }
.t2p-default-pill { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; background: rgba(24,169,153,0.12); color: #0D9488; vertical-align: middle; }
.dark .t2p-default-pill { background: rgba(24,169,153,0.2); color: #5eead4; }
.t2p-preview { white-space: pre-wrap; font-size: 13px; line-height: 1.5; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); max-width: 420px; }
.t2p-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }
.t2p-empty { padding: 40px; text-align: center; color: var(--text-muted); }
.t2p-refresh-btn { margin-left: 4px; padding: 1px 6px; font-size: 10px; line-height: 1.6; border: 1px solid var(--border); border-radius: 5px; background: var(--bg-input); color: var(--text-secondary); cursor: pointer; vertical-align: middle; }
.t2p-refresh-btn:hover:not(:disabled) { color: var(--brand-600); border-color: var(--brand-600); }
.t2p-refresh-btn:disabled { opacity: 0.6; cursor: default; }