/* ===== Vazirmatn font (local) ===== */
@import url('/public/assets/fonts/vazirmatn.css');

:root{
    --brand:#4f46e5;
    --brand-2:#6366f1;
    --brand-3:#7c3aed;
    --bg:#f3f5fa;
    --surface:#ffffff;
    --surface-2:#f8fafc;
    --surface-3:#f1f5f9;
    --border:#e5e7eb;
    --border-2:#eef0f4;
    --text:#0f172a;
    --muted:#64748b;
    --muted-2:#94a3b8;
    --success:#10b981;
    --danger:#ef4444;
    --warning:#f59e0b;
    --info:#0ea5e9;
    --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 12px rgba(15,23,42,.05);
    --shadow-md:0 4px 16px rgba(15,23,42,.08);
    --shadow-lg:0 12px 32px rgba(15,23,42,.10);
    --radius:14px;
    --radius-sm:10px;
    --radius-xs:8px;
    --sidebar-w:264px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:'Vazirmatn',Tahoma,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:14.5px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-2);text-decoration:underline}
h1,h2,h3,h4,h5,h6{font-family:inherit;font-weight:700;color:var(--text);letter-spacing:-.01em}
h5,h6{margin-bottom:.5rem}
hr{border-color:var(--border-2)}
code{background:var(--surface-3);padding:1px 6px;border-radius:6px;font-size:.85em;color:#7c3aed}

.app-body{min-height:100vh}
.app-shell{display:flex;min-height:100vh;align-items:stretch;overflow-x:hidden}
.app-main{margin-right:var(--sidebar-w);min-height:100vh;background:var(--bg);display:flex;flex-direction:column;flex:1;transition:margin .25s ease;min-width:0;overflow-x:hidden}
.app-main-inner{flex:1;display:flex;flex-direction:column;min-height:0}
.app-content-wrap{flex:1;min-height:0;display:flex;flex-direction:column}

.app-sidebar{position:fixed;top:0;right:0;bottom:0;width:var(--sidebar-w);background:#fff;border-left:1px solid var(--border);display:flex;flex-direction:column;padding:18px 14px 14px;z-index:1030;transition:transform .25s ease}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:6px 8px 18px;border-bottom:1px solid var(--border-2);margin-bottom:10px}
.sidebar-logo{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;font-weight:700;font-size:13px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px rgba(79,70,229,.30)}
.sidebar-logo-img{width:42px;height:42px;border-radius:12px;object-fit:contain;display:block;flex-shrink:0}
.sidebar-title{font-weight:700;font-size:15px;line-height:1.2}
.sidebar-sub{color:var(--muted-2);font-size:12px;margin-top:2px}
.sidebar-nav{flex:1;overflow-y:auto;padding:4px 0}
.sidebar-nav .nav-section{color:var(--muted-2);font-size:10.5px;font-weight:700;padding:16px 10px 5px;letter-spacing:.6px;text-transform:uppercase;display:flex;align-items:center;gap:6px}
.sidebar-nav .nav-section::after{content:"";flex:1;height:1px;background:var(--border-2)}
.sidebar-nav .nav-dashboard{font-weight:700;font-size:14.5px}
.sidebar-nav .nav-link{position:relative;display:flex;align-items:center;gap:10px;color:#334155;padding:10px 12px;border-radius:10px;margin:2px 0;font-size:14px;font-weight:500;transition:background .15s ease,color .15s ease}
.sidebar-nav .nav-link:hover{background:var(--surface-2);text-decoration:none;color:var(--text)}
.sidebar-nav .nav-link.active{background:linear-gradient(135deg,rgba(79,70,229,.10),rgba(124,58,237,.06));color:var(--brand);font-weight:700}
.sidebar-nav .nav-link.active::before{content:"";position:absolute;right:-14px;top:8px;bottom:8px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--brand),var(--brand-3))}
.sidebar-nav .ic{display:inline-flex;width:24px;height:24px;align-items:center;justify-content:center;border-radius:7px;background:var(--surface-3);font-size:12px;color:var(--muted)}
.sidebar-nav .nav-link.active .ic{background:rgba(79,70,229,.12);color:var(--brand)}
.sidebar-foot{padding-top:12px;border-top:1px solid var(--border-2)}
.sidebar-foot .btn{border-radius:10px}

.app-topbar{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:14px 22px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;backdrop-filter:saturate(140%) blur(6px)}
.topbar-title{font-size:18px;margin:0;font-weight:700}
.topbar-user{display:flex;align-items:center;gap:10px}
.topbar-name{font-size:14px;color:var(--text)}
.topbar-role{font-size:11px;padding:.35em .7em}
.menu-toggle{display:none;background:transparent;border:1px solid var(--border);border-radius:10px;padding:6px 10px;font-size:18px;color:var(--text);line-height:1}

.card{border:1px solid var(--border-2);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);transition:box-shadow .15s ease, transform .15s ease}
.card:hover{box-shadow:var(--shadow-md)}
.card.no-hover:hover{box-shadow:var(--shadow)}
.card-header{background:#fff;border-bottom:1px solid var(--border-2);padding:14px 18px;border-radius:var(--radius) var(--radius) 0 0 !important;font-weight:700}
.card-body{padding:18px}
.card-footer{background:#fff;border-top:1px solid var(--border-2);border-radius:0 0 var(--radius) var(--radius) !important}

.stat-card{border:1px solid var(--border-2);border-radius:var(--radius);background:#fff;padding:18px 18px 16px;box-shadow:var(--shadow);height:100%;position:relative;overflow:hidden;transition:transform .15s ease, box-shadow .15s ease}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-card .label{color:var(--muted);font-size:13px;margin-bottom:8px;font-weight:600}
.stat-card .value{font-size:30px;font-weight:800;color:var(--text);line-height:1.2}
.stat-card .badge{margin-top:10px}
.stat-card::after{content:"";position:absolute;left:-30px;bottom:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.06),transparent 65%)}

.btn{border-radius:10px;font-weight:600;padding:.5rem 1rem;border-width:1px;transition:all .15s ease}
.btn:focus,.btn:focus-visible{box-shadow:0 0 0 3px rgba(79,70,229,.18)}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.25)}
.btn-primary:hover,.btn-primary:focus{background:linear-gradient(135deg,#4338ca,#4f46e5);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.32)}
.btn-outline-primary{color:var(--brand);border-color:var(--brand)}
.btn-outline-primary:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-light{background:#fff;border-color:var(--border);color:var(--text)}
.btn-light:hover{background:var(--surface-2);border-color:var(--border)}
.btn-outline-secondary{color:var(--muted);border-color:var(--border)}
.btn-outline-secondary:hover{background:var(--surface-2);border-color:var(--border);color:var(--text)}
.btn-outline-danger{color:var(--danger);border-color:#fecaca}
.btn-outline-danger:hover{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-success{background:var(--success);border-color:var(--success)}
.btn-sm{padding:.32rem .7rem;border-radius:8px;font-size:.85rem}

.form-control,.form-select{border-radius:10px;border:1px solid var(--border);padding:.55rem .85rem;font-size:14px;background:#fff;transition:border-color .15s ease, box-shadow .15s ease}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(79,70,229,.15)}
.form-label{font-weight:600;font-size:13px;color:var(--text);margin-bottom:6px}
.form-text{color:var(--muted)}
textarea.form-control{min-height:96px}
.form-check-input{margin-top:.32rem}
.form-check-input:checked{background-color:var(--brand);border-color:var(--brand)}
.form-check-label{font-size:13.5px}
.input-group-text{background:var(--surface-2);border-color:var(--border);font-size:13px;color:var(--muted)}

.table{margin-bottom:0;color:var(--text)}
.table thead th{background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.3px;border-bottom:1px solid var(--border);text-transform:uppercase;padding:.7rem 1rem}
.table td,.table th{vertical-align:middle;padding:.78rem 1rem;border-color:var(--border-2)}
.table-hover tbody tr:hover{background:var(--surface-2)}
.table-striped tbody tr:nth-of-type(odd){background:var(--surface-2)}
.table-card{border:1px solid var(--border-2);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)}

.nav-tabs{border-bottom:1px solid var(--border-2)}
.nav-tabs .nav-link{color:var(--muted);border:none;border-bottom:2px solid transparent;padding:.6rem 1rem;font-weight:600;background:transparent}
.nav-tabs .nav-link:hover{color:var(--text)}
.nav-tabs .nav-link.active{color:var(--brand);background:transparent;border-bottom-color:var(--brand)}
.nav-pills .nav-link{color:var(--muted);background:var(--surface-2);border-radius:999px;font-weight:600;font-size:13px;padding:.45rem .95rem;margin-left:6px;border:1px solid transparent}
.nav-pills .nav-link.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;box-shadow:0 4px 12px rgba(79,70,229,.25)}

.alert{border-radius:var(--radius-sm);border:1px solid transparent;padding:.75rem 1rem;font-size:14px}
.alert-success{background:#ecfdf5;color:#065f46;border-color:#a7f3d0}
.alert-danger {background:#fef2f2;color:#991b1b;border-color:#fecaca}
.alert-info   {background:#eff6ff;color:#1e40af;border-color:#bfdbfe}
.alert-warning{background:#fffbeb;color:#92400e;border-color:#fde68a}

.badge{font-weight:600;border-radius:999px;padding:.4em .75em;font-size:11.5px}
.badge.bg-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)) !important}
.badge.bg-success{background:#d1fae5 !important;color:#065f46 !important}
.badge.bg-secondary{background:var(--surface-3) !important;color:var(--muted) !important}
.badge.bg-warning{background:#fef3c7 !important;color:#92400e !important}
.badge.bg-info{background:#dbeafe !important;color:#1e40af !important}

.auth-body{min-height:100vh;background:radial-gradient(circle at 20% 0%, rgba(124,58,237,.18), transparent 55%),radial-gradient(circle at 80% 100%, rgba(79,70,229,.18), transparent 55%),url('/public/assets/images/auth-bg.svg') center/cover no-repeat,linear-gradient(135deg,#eef2ff 0%,#f5f7fb 100%);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:100%;max-width:980px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lg)}
.auth-card{padding:40px}
.auth-brand{text-align:center;margin-bottom:24px}
.auth-brand h1{font-size:22px;margin:8px 0 4px}
.auth-brand p{color:var(--muted);margin:0;font-size:13px}
.auth-logo{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(79,70,229,.30)}
.auth-side{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-3) 100%);color:#fff;padding:40px;display:flex;align-items:center;position:relative;overflow:hidden}
.auth-side::before{content:"";position:absolute;inset:-40% -40% auto auto;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.15),transparent 60%)}
.auth-side h2{color:#fff;font-size:22px;margin-bottom:12px}
.auth-side p{color:#e0e7ff;margin:0;line-height:1.9}
.auth-side .auth-illustration{width:100%;max-width:340px;margin:18px auto 0;display:block;filter:drop-shadow(0 14px 30px rgba(0,0,0,.25))}
.auth-side ul.auth-features{list-style:none;padding:0;margin:18px 0 0;color:#e0e7ff;font-size:13.5px}
.auth-side ul.auth-features li{display:flex;align-items:center;gap:10px;padding:6px 0}
.auth-side ul.auth-features li i{color:#fff;background:rgba(255,255,255,.18);width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.auth-title{font-size:20px;font-weight:700;margin-bottom:4px}
.auth-sub{color:var(--muted);font-size:13.5px;margin-bottom:18px}
.auth-form .form-control-lg{font-size:14.5px;padding:.7rem .95rem}
.auth-foot{margin-top:16px;text-align:center;color:var(--muted);font-size:13.5px}
.auth-demo{margin-top:18px;padding:12px 14px;background:var(--surface-2);border:1px dashed var(--border);border-radius:12px}

.landing-body{min-height:100vh;background:var(--bg);background-image:radial-gradient(circle at 8% 0%, rgba(124,58,237,.10), transparent 35%),radial-gradient(circle at 100% 30%, rgba(79,70,229,.10), transparent 35%)}
.landing-nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;background:rgba(255,255,255,.85);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border-2);position:sticky;top:0;z-index:30}
.landing-nav .brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:16px}
.landing-nav .brand .logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;box-shadow:0 6px 14px rgba(79,70,229,.30)}
.landing-nav .actions{display:flex;gap:8px}
.landing-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;max-width:1180px;margin:0 auto;padding:60px 32px 48px;align-items:center}
.landing-hero .badge-pill{display:inline-block;background:rgba(79,70,229,.10);color:var(--brand);font-weight:700;font-size:12.5px;padding:6px 14px;border-radius:999px;margin-bottom:14px}
.landing-hero h1{font-size:40px;line-height:1.45;margin:0 0 16px;font-weight:800;letter-spacing:-.01em}
.landing-hero p{color:var(--muted);font-size:16px;line-height:1.95;margin-bottom:24px;max-width:560px}
.landing-hero .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.landing-hero .hero-meta{display:flex;gap:28px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}
.landing-hero .hero-meta strong{color:var(--text);font-weight:800}
.landing-hero .hero-card{background:#fff;border-radius:20px;padding:22px;box-shadow:var(--shadow-lg);border:1px solid var(--border-2);position:relative}
.landing-hero .hero-card::before{content:"";position:absolute;inset:-12px -12px auto auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.18),transparent 65%);z-index:-1}
.landing-hero .hero-card-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px dashed var(--border-2);margin-bottom:16px;font-weight:700;font-size:14px}
.landing-hero .hero-card-head .dot{width:10px;height:10px;border-radius:50%;background:var(--success)}
.landing-hero .hero-row{margin-bottom:14px}
.landing-hero .hero-row label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.landing-hero .hero-row .bar{height:36px;background:var(--surface-2);border:1px solid var(--border-2);border-radius:10px}
.landing-hero .hero-row .bar-wide{height:64px}
.landing-features{max-width:1180px;margin:30px auto 60px;padding:0 32px}
.landing-features .feat{background:#fff;border:1px solid var(--border-2);border-radius:18px;padding:24px;height:100%;box-shadow:var(--shadow);transition:transform .15s ease, box-shadow .15s ease}
.landing-features .feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.landing-features .feat-ic{width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(124,58,237,.12));color:var(--brand);font-size:22px;margin-bottom:12px}
.landing-features .feat h3{font-size:16px;margin-bottom:8px;font-weight:700}
.landing-features .feat p{color:var(--muted);font-size:13.5px;line-height:1.85;margin:0}
.landing-foot{text-align:center;color:var(--muted);font-size:13px;padding:22px;border-top:1px solid var(--border-2);background:#fff}

.topbar-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(79,70,229,.25)}
.topbar-avatar-img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.topbar-user .dropdown-menu{border-radius:12px;border-color:var(--border-2);box-shadow:var(--shadow-md);min-width:200px}
.topbar-user .dropdown-item{padding:.55rem .9rem;font-size:13.5px;border-radius:8px;margin:2px 4px}
.topbar-user .dropdown-item:hover{background:var(--surface-2)}

.kpi-card{background:#fff;border:1px solid var(--border-2);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);height:100%;position:relative;overflow:hidden}
.kpi-card::after{content:"";position:absolute;inset:-30px -30px auto auto;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.08),transparent 65%)}
.kpi-card .kpi-label{color:var(--muted);font-size:13px;font-weight:600;margin-bottom:6px}
.kpi-card .kpi-value{font-size:30px;font-weight:800;line-height:1.2;margin-bottom:8px}
.kpi-card .kpi-link{font-size:13px;color:var(--brand);text-decoration:none;font-weight:600}

.form-card{background:#fff;border:1px solid var(--border-2);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);height:100%;transition:transform .15s ease, box-shadow .15s ease}
.form-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.form-card .form-card-icon{width:48px;height:48px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(124,58,237,.12));color:var(--brand);font-size:22px;margin-bottom:14px}
.form-card h5{font-size:16px;margin-bottom:8px;font-weight:700}

.wizard-nav{flex-wrap:wrap;gap:6px}
.wizard-nav .nav-link{display:flex;align-items:center;gap:8px}
.wizard-nav .step-num{background:rgba(255,255,255,.25);color:inherit;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.wizard-nav .nav-link:not(.active) .step-num{background:#fff;color:var(--muted);border:1px solid var(--border-2)}

.upload-zone{border:2px dashed var(--border);border-radius:14px;background:var(--surface-2);padding:22px;text-align:center;cursor:pointer;transition:border-color .15s ease, background .15s ease}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--brand);background:#eef2ff}
.upload-zone .upload-ic{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,var(--brand),var(--brand-3));color:#fff;font-size:22px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:10px;box-shadow:0 6px 14px rgba(79,70,229,.30)}
.upload-zone .upload-text{font-size:13.5px;color:var(--text);font-weight:600}
.upload-zone .upload-hint{font-size:12px;color:var(--muted);margin-top:4px}
.upload-zone input[type=file]{display:none}
.upload-status{margin-top:12px}
.upload-status .progress{height:10px;border-radius:6px;background:var(--surface-3)}
.upload-status .progress-bar{background:linear-gradient(90deg,var(--brand),var(--brand-3));font-size:0}
.upload-status .upload-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.upload-status .upload-done{display:flex;align-items:center;gap:8px;color:#065f46;font-weight:600;font-size:13.5px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;padding:8px 12px}
.upload-status .upload-fail{display:flex;align-items:center;gap:8px;color:#991b1b;font-weight:600;font-size:13.5px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:8px 12px}

.hero{padding:40px 0}
.hero h1{font-size:36px;line-height:1.4;margin-bottom:16px;font-weight:800}
.hero p.lead{color:var(--muted);font-size:16px}
.hero .badge-soft{display:inline-block;background:rgba(79,70,229,.10);color:var(--brand);font-weight:700;padding:6px 12px;border-radius:999px;font-size:12px;margin-bottom:14px}
.feature-row{display:flex;gap:24px;flex-wrap:wrap;color:var(--muted);font-size:13px}

.wiz-actions{display:flex;justify-content:space-between;gap:8px;margin-top:18px}
.field-row{background:var(--surface-2);border-radius:10px;padding:10px;border:1px solid var(--border-2)}
.field-row .form-control,.field-row .form-select{background:#fff}

.page-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.page-header h2{font-size:20px;margin:0;font-weight:700}
.page-header .muted{color:var(--muted);font-size:13px}

.kbd{background:var(--surface-3);padding:2px 6px;border-radius:6px;font-size:.8em;color:var(--text);border:1px solid var(--border-2)}
.divider-soft{height:1px;background:var(--border-2);margin:14px 0}

.ann-bar{border-radius:0 !important}
.ann-bar-img{}
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.4)}28%{transform:scale(1)}42%{transform:scale(1.35)}70%{transform:scale(1)}}
.heart-beat{display:inline-block;animation:heartbeat 1.4s ease infinite;color:#e11d48}
.notif-dropdown .notif-bell{position:relative;width:36px;height:36px;border-radius:12px;border:1px solid rgba(79,70,229,.18);background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(124,58,237,.10));color:var(--brand);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(79,70,229,.08);transition:all .15s ease}
.notif-dropdown .notif-bell i{font-size:1.08rem;background:linear-gradient(135deg,var(--brand),var(--brand-3));-webkit-background-clip:text;background-clip:text;color:transparent}
.notif-dropdown .notif-bell:hover{transform:translateY(-1px);border-color:rgba(79,70,229,.28);box-shadow:0 8px 18px rgba(79,70,229,.14)}
.notif-badge{position:absolute;top:-6px;left:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;line-height:20px;text-align:center;box-shadow:0 4px 10px rgba(239,68,68,.28);border:2px solid #fff}
.notif-menu{border:1px solid var(--border-2);box-shadow:0 18px 40px rgba(15,23,42,.14);border-radius:16px;overflow:hidden}
.notif-menu-title{display:inline-flex;align-items:center;gap:6px;color:var(--text)}
.notif-menu-title i{font-size:1rem;color:var(--brand)}
.notif-item{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--border-2);color:var(--text);text-decoration:none;transition:background .15s ease,transform .15s ease}
.notif-item:hover{background:var(--surface-2);text-decoration:none;transform:translateX(-1px)}
.notif-item.unread{background:linear-gradient(90deg,rgba(79,70,229,.08),transparent)}
.notif-item:last-child{border-bottom:0}
.notif-icon{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;box-shadow:0 8px 16px rgba(15,23,42,.08)}
.notif-icon.info-circle,.notif-icon.info{background:linear-gradient(135deg,#0ea5e9,#2563eb)}
.notif-icon.payment,.notif-icon.credit-card{background:linear-gradient(135deg,#10b981,#059669)}
.notif-icon.ticket,.notif-icon.chat-left-text{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.notif-icon i{font-size:1rem}
.notif-icon.success{background:linear-gradient(135deg,#22c55e,#16a34a)}
.notif-icon.warning{background:linear-gradient(135deg,#f59e0b,#d97706)}
.notif-icon.danger{background:linear-gradient(135deg,#ef4444,#dc2626)}
.notif-body{min-width:0;flex:1}
.notif-title{font-size:13px;font-weight:800;color:var(--text);line-height:1.45;margin-bottom:3px}
.notif-msg{font-size:12.5px;color:var(--muted);line-height:1.8;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.notif-time{font-size:11px;color:var(--muted-2);margin-top:6px;display:flex;align-items:center;gap:4px}
.app-footer-credit{font-size:11px;color:var(--muted);opacity:.75;letter-spacing:.01em}
.app-footer{margin-top:auto;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);border-top:1px solid var(--border-2);padding:16px 24px;position:sticky;bottom:0;z-index:12;box-shadow:0 -8px 24px rgba(15,23,42,.04)}
.app-footer-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:13px;font-weight:600;flex-wrap:wrap}
.app-footer-badge{width:28px;height:28px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(124,58,237,.12));color:var(--brand)}
.theme-toggle-btn{width:36px;height:36px;border-radius:12px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);display:inline-flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(15,23,42,.06);transition:all .15s ease}
.theme-toggle-btn:hover{transform:translateY(-1px);background:var(--surface-2)}

/* ===== DARK MODE ===== */
html[data-theme="dark"]{
    --bg:#0d1117;
    --surface:#161b22;
    --surface-2:#1c2230;
    --surface-3:#21293b;
    --border:#2d3748;
    --border-2:#2a3347;
    --text:#e2e8f0;
    --muted:#8b95a8;
    --muted-2:#5a6478;
    --shadow:0 1px 2px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.25);
    --shadow-md:0 4px 16px rgba(0,0,0,.35);
    --shadow-lg:0 12px 32px rgba(0,0,0,.4);
}

html[data-theme="dark"] body{background:var(--bg);color:var(--text)}

/* Sidebar */
html[data-theme="dark"] .app-sidebar{background:var(--surface);border-color:var(--border)}
html[data-theme="dark"] .sidebar-brand{border-color:var(--border-2)}
html[data-theme="dark"] .sidebar-nav .nav-link{color:#94a3b8}
html[data-theme="dark"] .sidebar-nav .nav-link:hover{background:var(--surface-2);color:var(--text)}
html[data-theme="dark"] .sidebar-nav .nav-link.active{background:linear-gradient(135deg,rgba(99,102,241,.18),rgba(124,58,237,.12));color:#818cf8}
html[data-theme="dark"] .sidebar-nav .ic{background:var(--surface-3);color:var(--muted)}
html[data-theme="dark"] .sidebar-nav .nav-link.active .ic{background:rgba(99,102,241,.18);color:#818cf8}
html[data-theme="dark"] .sidebar-foot{border-color:var(--border-2)}
html[data-theme="dark"] .sidebar-sub{color:var(--muted-2)}
html[data-theme="dark"] .sidebar-nav .nav-section{color:var(--muted-2)}
html[data-theme="dark"] .sidebar-title{color:var(--text)}

/* Topbar */
html[data-theme="dark"] .app-topbar{background:var(--surface);border-color:var(--border)}
html[data-theme="dark"] .topbar-title{color:var(--text)}
html[data-theme="dark"] .topbar-name{color:var(--text)}
html[data-theme="dark"] .menu-toggle{border-color:var(--border);color:var(--text)}

/* Main content background */
html[data-theme="dark"] .app-main{background:var(--bg)}

/* Cards */
html[data-theme="dark"] .card{background:var(--surface);border-color:var(--border-2)}
html[data-theme="dark"] .card-header{background:var(--surface);border-color:var(--border-2);color:var(--text)}
html[data-theme="dark"] .card-body{color:var(--text)}
html[data-theme="dark"] .card-footer{background:var(--surface);border-color:var(--border-2)}

/* Stat / KPI / form cards */
html[data-theme="dark"] .stat-card{background:var(--surface);border-color:var(--border-2)}
html[data-theme="dark"] .stat-card .label{color:var(--muted)}
html[data-theme="dark"] .stat-card .value{color:var(--text)}
html[data-theme="dark"] .kpi-card{background:var(--surface);border-color:var(--border-2)}
html[data-theme="dark"] .kpi-card .kpi-label{color:var(--muted)}
html[data-theme="dark"] .form-card{background:var(--surface);border-color:var(--border-2)}

/* Inputs / selects / textareas */
html[data-theme="dark"] .form-control,html[data-theme="dark"] .form-select{background:var(--surface-2);border-color:var(--border);color:var(--text)}
html[data-theme="dark"] .form-control:focus,html[data-theme="dark"] .form-select:focus{background:var(--surface-2);border-color:var(--brand-2);color:var(--text);box-shadow:0 0 0 3px rgba(99,102,241,.2)}
html[data-theme="dark"] .form-control::placeholder{color:var(--muted-2)}
html[data-theme="dark"] .form-label{color:var(--text)}
html[data-theme="dark"] .form-text{color:var(--muted)}
html[data-theme="dark"] .input-group-text{background:var(--surface-3);border-color:var(--border);color:var(--muted)}
html[data-theme="dark"] .form-check-label{color:var(--text)}
html[data-theme="dark"] .field-row{background:var(--surface-2);border-color:var(--border-2)}
html[data-theme="dark"] .field-row .form-control,html[data-theme="dark"] .field-row .form-select{background:var(--surface-3)}

/* Tables */
html[data-theme="dark"] .table{color:var(--text);border-color:var(--border-2);background:var(--surface)}
html[data-theme="dark"] .table thead th{background:var(--surface-2);color:var(--muted);border-color:var(--border)}
html[data-theme="dark"] .table td,html[data-theme="dark"] .table th{border-color:var(--border-2)}
html[data-theme="dark"] .table-hover tbody tr:hover td{background:var(--surface-2)}
html[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>*{background:var(--surface-2);color:var(--text)}
html[data-theme="dark"] .table > :not(caption) > * > *{background:var(--surface);color:var(--text)}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{background:var(--surface-2);color:var(--text)}
html[data-theme="dark"] .table-card{background:var(--surface);border-color:var(--border-2)}

/* Dropdowns */
html[data-theme="dark"] .dropdown-menu{background:var(--surface);border-color:var(--border-2);box-shadow:var(--shadow-md)}
html[data-theme="dark"] .dropdown-item{color:var(--text)}
html[data-theme="dark"] .dropdown-item:hover,.dropdown-item:focus{background:var(--surface-2);color:var(--text)}
html[data-theme="dark"] .dropdown-divider{border-color:var(--border-2)}

/* Notifications */
html[data-theme="dark"] .notif-menu{background:var(--surface);border-color:var(--border-2)}
html[data-theme="dark"] .notif-item{border-color:var(--border-2);color:var(--text)}
html[data-theme="dark"] .notif-item:hover{background:var(--surface-2)}
html[data-theme="dark"] .notif-item.unread{background:linear-gradient(90deg,rgba(99,102,241,.12),transparent)}
html[data-theme="dark"] .notif-title{color:var(--text)}
html[data-theme="dark"] .notif-msg{color:var(--muted)}
html[data-theme="dark"] .notif-time{color:var(--muted-2)}
html[data-theme="dark"] .notif-badge{border-color:var(--surface)}

/* Buttons */
html[data-theme="dark"] .btn-light{background:var(--surface-2);border-color:var(--border);color:var(--text)}
html[data-theme="dark"] .btn-light:hover{background:var(--surface-3);border-color:var(--border)}
html[data-theme="dark"] .btn-outline-secondary{color:var(--muted);border-color:var(--border)}
html[data-theme="dark"] .btn-outline-secondary:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)}
html[data-theme="dark"] .btn-outline-primary{color:#818cf8;border-color:#4f46e5}
html[data-theme="dark"] .btn-outline-primary:hover{background:var(--brand);color:#fff}
html[data-theme="dark"] .btn-outline-warning{color:#fbbf24;border-color:#d97706}
html[data-theme="dark"] .btn-outline-warning:hover{background:#d97706;color:#fff}
html[data-theme="dark"] .btn-outline-danger{color:#f87171;border-color:#b91c1c}
html[data-theme="dark"] .btn-outline-danger:hover{background:var(--danger);color:#fff}

/* Badges */
html[data-theme="dark"] .badge.bg-success{background:rgba(16,185,129,.18) !important;color:#34d399 !important}
html[data-theme="dark"] .badge.bg-secondary{background:var(--surface-3) !important;color:var(--muted) !important}
html[data-theme="dark"] .badge.bg-warning{background:rgba(245,158,11,.18) !important;color:#fbbf24 !important}
html[data-theme="dark"] .badge.bg-info{background:rgba(14,165,233,.18) !important;color:#38bdf8 !important}
html[data-theme="dark"] .badge.bg-danger{background:rgba(239,68,68,.18) !important;color:#f87171 !important}
html[data-theme="dark"] .bg-primary-subtle{background:rgba(99,102,241,.18) !important}
html[data-theme="dark"] .text-primary-emphasis{color:#818cf8 !important}
html[data-theme="dark"] .bg-success-subtle{background:rgba(16,185,129,.15) !important}
html[data-theme="dark"] .text-success-emphasis{color:#34d399 !important}
html[data-theme="dark"] .text-success{color:#34d399 !important}
html[data-theme="dark"] .text-danger{color:#f87171 !important}
html[data-theme="dark"] .text-warning{color:#fbbf24 !important}
html[data-theme="dark"] .text-muted{color:var(--muted) !important}
html[data-theme="dark"] .text-primary{color:#818cf8 !important}

/* Alerts */
html[data-theme="dark"] .alert-success{background:rgba(16,185,129,.12);color:#34d399;border-color:rgba(16,185,129,.2)}
html[data-theme="dark"] .alert-danger{background:rgba(239,68,68,.12);color:#f87171;border-color:rgba(239,68,68,.2)}
html[data-theme="dark"] .alert-info{background:rgba(14,165,233,.12);color:#38bdf8;border-color:rgba(14,165,233,.2)}
html[data-theme="dark"] .alert-warning{background:rgba(245,158,11,.12);color:#fbbf24;border-color:rgba(245,158,11,.2)}

/* Nav tabs / pills */
html[data-theme="dark"] .nav-tabs{border-color:var(--border-2)}
html[data-theme="dark"] .nav-tabs .nav-link{color:var(--muted)}
html[data-theme="dark"] .nav-tabs .nav-link:hover{color:var(--text)}
html[data-theme="dark"] .nav-tabs .nav-link.active{color:#818cf8;border-bottom-color:#818cf8}
html[data-theme="dark"] .nav-pills .nav-link{color:var(--muted);background:var(--surface-2)}
html[data-theme="dark"] .nav-pills .nav-link.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff}

/* Footer */
html[data-theme="dark"] .app-footer{background:var(--surface);border-color:var(--border);box-shadow:0 -4px 16px rgba(0,0,0,.25)}
html[data-theme="dark"] .app-footer-credit{color:var(--muted);opacity:1}

/* Theme toggle button */
html[data-theme="dark"] .theme-toggle-btn{background:var(--surface-2);border-color:var(--border);color:#fbbf24}
html[data-theme="dark"] .theme-toggle-btn:hover{background:var(--surface-3)}

/* Upload zone */
html[data-theme="dark"] .upload-zone{background:var(--surface-2);border-color:var(--border)}
html[data-theme="dark"] .upload-zone:hover{background:var(--surface-3);border-color:var(--brand-2)}

/* Page header */
html[data-theme="dark"] .page-header h2{color:var(--text)}

/* Code */
html[data-theme="dark"] code{background:var(--surface-3);color:#a78bfa}
html[data-theme="dark"] hr{border-color:var(--border-2)}
html[data-theme="dark"] .sandbox-box{background:var(--surface-2) !important;border-color:var(--border) !important}

/* Bootstrap overrides for dark */
html[data-theme="dark"] .border,html[data-theme="dark"] .border-bottom,html[data-theme="dark"] .border-top{border-color:var(--border-2) !important}
html[data-theme="dark"] .bg-white{background:var(--surface) !important}
html[data-theme="dark"] .bg-light{background:var(--surface-2) !important}
html[data-theme="dark"] .text-dark{color:var(--text) !important}
html[data-theme="dark"] .text-body{color:var(--text) !important}
html[data-theme="dark"] .bg-transparent{background:transparent !important}
html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] h3,html[data-theme="dark"] h4,html[data-theme="dark"] h5,html[data-theme="dark"] h6{color:var(--text)}
html[data-theme="dark"] a{color:#818cf8}
html[data-theme="dark"] a:hover{color:#a5b4fc}

/* topbar avatar */
html[data-theme="dark"] .topbar-user .dropdown-menu{background:var(--surface);border-color:var(--border-2)}
html[data-theme="dark"] .topbar-user .dropdown-item:hover{background:var(--surface-2)}

/* Remove focus outline/border on topbar user button */
.topbar-user .btn,.topbar-user .btn:focus,.topbar-user .btn:focus-visible,.topbar-user .btn:active,.topbar-user button{box-shadow:none !important;outline:none !important;border:none !important}

/* Dark mode: make btn-close visible on light-background ann-bars */
html[data-theme="dark"] .ann-bar .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}

/* bg-white card-headers → theme-aware */
.card-header.bg-white{background:var(--surface) !important;color:var(--text)}
html[data-theme="dark"] .card-header.bg-white{background:var(--surface-2) !important}
html[data-theme="dark"] .card-footer.bg-white{background:var(--surface-2) !important}

/* Submission detail table label cells */
.submission-label-cell{background:var(--surface-2);color:var(--text);font-weight:600}
html[data-theme="dark"] .submission-label-cell{background:var(--surface-3) !important;color:var(--text) !important}
html[data-theme="dark"] .submission-detail-table td,html[data-theme="dark"] .submission-detail-table th{border-color:var(--border-2)}

/* Ann-bar close transition */
.ann-bar,.ann-bar-img{transition:opacity .2s ease,max-height .3s ease,padding .3s ease}

/* List group dark mode */
html[data-theme="dark"] .list-group-item{background:var(--surface);border-color:var(--border-2);color:var(--text)}
html[data-theme="dark"] .list-group-item-action:hover,html[data-theme="dark"] .list-group-item-action:focus{background:var(--surface-2);color:var(--text);text-decoration:none}
html[data-theme="dark"] .list-group-item-action.active{background:var(--surface-3)}
html[data-theme="dark"] .table-light{--bs-table-bg:var(--surface-2);--bs-table-color:var(--text)}

/* Modal dark mode */
html[data-theme="dark"] .modal-content{background:var(--surface);border-color:var(--border-2);color:var(--text)}
html[data-theme="dark"] .modal-header{border-color:var(--border-2)}
html[data-theme="dark"] .modal-footer{border-color:var(--border-2)}

/* Checkout card header */
.checkout-card-hdr{background:var(--surface-2)}
html[data-theme="dark"] .checkout-card-hdr{background:var(--surface-3) !important}

/* Gateway cards dark mode */
html[data-theme="dark"] .gateway-card{background:var(--surface-2) !important;color:var(--text)}
html[data-theme="dark"] .gateway-card:hover,html[data-theme="dark"] .gateway-card.selected{background:rgba(99,102,241,.15) !important;border-color:#6366f1 !important}

/* Wallet gateway cards */
.wallet-gw-card{background:var(--surface)}
.wallet-gw-card.selected{background:#f5f3ff}
html[data-theme="dark"] .wallet-gw-card{background:var(--surface-2)}
html[data-theme="dark"] .wallet-gw-card.selected{background:rgba(99,102,241,.15) !important;border-color:#6366f1 !important}

/* Form card sort handle */
.form-sort-handle{opacity:.4;transition:opacity .15s;line-height:1;display:inline-flex;align-items:center;border-radius:6px;padding:2px 4px !important}
.form-sort-handle:hover{opacity:.9;background:var(--surface-3)}
.admin-form-card{display:flex;flex-direction:column}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px){
    /* Sidebar: slide in from right on mobile */
    .app-sidebar{transform:translateX(100%);box-shadow:var(--shadow-lg)}
    .app-sidebar.open{transform:translateX(0)}
    .app-main{margin-right:0}
    .menu-toggle{display:inline-flex;align-items:center}
    .sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:1020;display:none}
    .sidebar-backdrop.show{display:block}

    /* Auth layout: collapse to single column */
    .auth-shell{grid-template-columns:1fr}
    .auth-side{display:none}

    /* Landing hero: collapse to single column */
    .landing-hero{grid-template-columns:1fr;gap:32px;padding:32px 20px}
    .landing-hero h1{font-size:28px}
    .landing-features{padding:0 20px;margin-bottom:40px}

    /* Topbar: tighten up on tablet/mobile */
    .app-topbar{padding:10px 14px}
    .topbar-title{font-size:16px}
    .topbar-role{display:none}

    /* Content: reduce padding on smaller screens */
    .container-fluid.p-4{padding:1rem !important}

    /* Footer: compact */
    .app-footer{padding:12px 14px}
    .app-footer-inner{font-size:12px;gap:8px}
    .app-footer-credit{display:none}

    /* Page header */
    .page-header h2{font-size:17px}

    /* Stat & KPI cards: slightly smaller values */
    .stat-card .value{font-size:26px}
    .kpi-card .kpi-value{font-size:26px}

    /* Table: allow horizontal scroll on mobile */
    .table-card{overflow-x:auto}
    .table-responsive-auto{overflow-x:auto;-webkit-overflow-scrolling:touch}

    /* Notification dropdown: prevent overflow */
    .notif-dropdown .dropdown-menu{max-width:calc(100vw - 20px) !important;min-width:260px !important}

    /* Wizard nav: smaller pills */
    .wizard-nav .nav-link{padding:.4rem .65rem;font-size:13px}

    /* Landing nav */
    .landing-nav{padding:14px 20px}
}

@media (max-width: 767.98px){
    /* Auth card: less padding on phones */
    .auth-card{padding:28px 22px}
    .auth-body{padding:16px}

    /* Landing hero further shrink */
    .landing-hero h1{font-size:24px}
    .landing-hero p{font-size:14px}
    .landing-hero .hero-cta{flex-direction:column;align-items:flex-start}

    /* Topbar: compress further */
    .app-topbar{padding:8px 12px;gap:8px}
    .topbar-user .dropdown-menu{min-width:180px}

    /* Page header: stack on very small screens */
    .page-header{flex-direction:column;align-items:flex-start}
    .page-header .d-flex.gap-2{flex-wrap:wrap}

    /* Stat card: shrink number */
    .stat-card .value{font-size:22px}
    .kpi-card .kpi-value{font-size:22px}

    /* Tables: force horizontal scroll */
    .card .table-responsive,.table-card{overflow-x:auto;-webkit-overflow-scrolling:touch}

    /* Footer: hide credit on phones */
    .app-footer-inner{flex-direction:column;align-items:flex-start;gap:4px}
    .app-footer-credit{display:none}

    /* Upload zone: compact */
    .upload-zone{padding:16px}

    /* Landing nav actions: smaller buttons */
    .landing-nav .actions .btn{padding:.38rem .7rem;font-size:13px}

    /* Form wizard nav: wrap more compactly */
    .wizard-nav{gap:4px}
    .wizard-nav .nav-link{padding:.35rem .55rem;font-size:12.5px}
    .wizard-nav .step-num{width:18px;height:18px;font-size:10px}

    /* Notif menu */
    .notif-dropdown .dropdown-menu{max-width:calc(100vw - 16px) !important;min-width:240px !important}
}

@media (max-width: 575.98px){
    /* Auth: further reduce */
    .auth-card{padding:22px 16px}
    .auth-logo{width:44px;height:44px}
    .auth-title{font-size:17px}

    /* Content: minimal padding */
    .container-fluid.p-4{padding:.75rem !important}

    /* Topbar: minimum padding */
    .app-topbar{padding:8px 10px}
    .topbar-title{font-size:14px}

    /* Hero title on landing page */
    .hero h1{font-size:20px}

    /* Stat cards: 2-per-row handled by Bootstrap col-6, just reduce value size */
    .stat-card .value,.kpi-card .kpi-value{font-size:20px}
    .stat-card{padding:14px 14px 12px}

    /* Footer: minimal */
    .app-footer{padding:10px 12px}

    /* Page header: stack everything */
    .page-header{gap:8px}
    .page-header h2{font-size:15px}

    /* Field rows in form builder: stack on tiny screens */
    .field-row>.d-flex{flex-wrap:wrap}

    /* Wiz actions: stack */
    .wiz-actions{flex-direction:column}
    .wiz-actions .btn{width:100%}

    /* Table: aggressively scroll */
    .table{font-size:13px}
    .table td,.table th{padding:.55rem .65rem}
    .table thead th{font-size:11px}

    /* Notification bell area: compact */
    .app-topbar .d-flex.gap-3{gap:8px !important}
}

/* ===== MOBILE TABLE ENHANCEMENTS ===== */
/* Ensure table-responsive works inside cards */
.card > .table-responsive,
.card > .card-body > .table-responsive {
    border-radius: inherit;
}

/* Make action buttons compact and prevent wrapping */
.table td:last-child .btn,
.table td .btn-sm {
    white-space: nowrap;
}

/* API token input: always limit width */
.table .input-group {
    min-width: 0;
}

/* Topbar: prevent notif button overflow */
.app-topbar .notif-btn {
    flex-shrink: 0;
}

/* Page header: always flex-wrap */
.page-header {
    flex-wrap: wrap;
    gap: 8px;
}

/* Sidebar on small screens: full z-index coverage */
@media (max-width: 991.98px) {
    .app-sidebar {
        z-index: 1030;
    }
    /* Topbar: keep above content but below sidebar */
    .app-topbar {
        z-index: 1025;
    }
}

/* Fix action buttons in tables on mobile: icon-only on xs */
@media (max-width: 575.98px) {
    /* Compact table action cell */
    .table td.text-end .btn + .btn,
    .table td.text-end form + form,
    .table td.text-end form + .btn,
    .table td.text-end .btn + form {
        margin-right: 2px !important;
    }
    /* API token field: full-width */
    .table .input-group {
        max-width: 100% !important;
    }
    /* Discounts header row: wrap */
    .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ===== FIX: API TOKEN PAGE + TOPBAR MOBILE OVERFLOW ===== */

/* Prevent RTL sidebar from causing horizontal scroll */
html { overflow-x: hidden; }

/* Topbar: on small screens compress right-side actions */
@media (max-width: 575.98px) {
    /* Hide theme toggle on very small screens */
    .theme-toggle-btn { display: none !important; }

    /* Topbar gaps: smaller */
    .app-topbar > .d-flex:last-child { gap: 8px !important; }
    .app-topbar > .d-flex:first-child { gap: 6px !important; gap: 6px !important; }

    /* Help pill: hide text, show icon only */
    .page-help-pill { padding: 4px 8px; }
    .page-help-pill::after { display: none; }

    /* Topbar title: clamp width so help pill doesn't overflow */
    .topbar-title { font-size: 14px; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Card body padding: reduce on tiny screens */
    .card-body.p-4 { padding: 1rem !important; }

    /* API token input: shrink text to prevent overflow */
    .card-body .font-monospace { font-size: 11px !important; letter-spacing: 0 !important; }

    /* API token page: col-lg-8 constraints */
    .row.justify-content-center > [class*="col-"] { min-width: 0; }

    /* pre code block: always scroll, don't overflow */
    pre { font-size: 11px !important; white-space: pre; overflow-x: auto; max-width: 100%; }
}

@media (max-width: 767.98px) {
    /* Card body: slightly less padding */
    .card-body.p-4 { padding: 1.25rem !important; }

    /* pre code: scrollable */
    pre { overflow-x: auto; max-width: 100%; }

    /* Help pill text: shorter on mobile */
    .page-help-pill { font-size: 11.5px; padding: 3px 10px 3px 8px; }

    /* Topbar: more compact right side */
    .app-topbar > .d-flex:last-child { gap: 10px !important; }
}