/* DM Sans — Self-hosted (eliminates Google Fonts round-trips) */
/* Only latin subset (covers English + common chars). Latin-ext loaded on demand. */
/* Weights: 400 (normal), 500 (medium), 600 (semibold), 700 (bold) */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Latin-extended (only fetched if page uses those characters) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{--manzil-blue:#3043e3;--manzil-blue-hover:#2536c4;--manzil-blue-light:#4d5ee8;--manzil-paleturquoise:#b2faef;--manzil-blue-lavender:#e0e6fc;--manzil-ghostwhite:#f9fafc;--manzil-orange:#f97316;--manzil-orange-hover:#ea6c10;--manzil-black:#222;--manzil-white:#fff;--manzil-light-gray:#f1f1f1;--manzil-gray:#8c8f8e;--manzil-dark-gray:#333;--background:var(--manzil-ghostwhite);--foreground:var(--manzil-black);--card:var(--manzil-white);--card-foreground:var(--manzil-black);--primary:var(--manzil-blue);--primary-foreground:var(--manzil-white);--primary-light:var(--manzil-blue-light);--primary-dark:var(--manzil-blue-hover);--secondary:var(--manzil-paleturquoise);--secondary-foreground:var(--manzil-black);--accent:var(--manzil-blue-lavender);--accent-foreground:var(--manzil-black);--muted:var(--manzil-light-gray);--muted-foreground:var(--manzil-dark-gray);--destructive:#d33030;--border:var(--manzil-light-gray);--input:var(--manzil-light-gray);--ring:var(--manzil-blue);--sidebar-bg:var(--manzil-white);--sidebar-foreground:var(--manzil-black);--sidebar-primary:var(--manzil-blue);--sidebar-accent:var(--manzil-blue-lavender);--sidebar-border:var(--manzil-light-gray);--sidebar-ring:var(--manzil-blue);--success:#16a34a;--success-light:#dcfce7;--success-dark:#166534;--warning:#f59e0b;--warning-light:#fef3c7;--warning-dark:#92400e;--danger:#d33030;--danger-light:#fee2e2;--danger-dark:#991b1b;--info-light:#dbeafe;--info-dark:#1e40af;--gray-50:#fafbfc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--sidebar-width:260px;--max-content:1360px;--radius-sm:.5rem;--radius:.625rem;--radius-lg:.875rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--shadow-xs:0 1px 2px 0 #0000000d;--shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--shadow-xl:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--shadow-2xl:0 25px 50px -12px #00000040;--shadow-premium:0 10px 30px -5px #0000000d;--shadow-premium-hover:0 20px 40px -10px #0000001a;--font:'DM Sans',system-ui,-apple-system,sans-serif;--font-mono:'SF Mono','Fira Code','Consolas',monospace;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-smooth:cubic-bezier(0, 0, .2, 1);--transition:all .3s var(--ease-smooth);--transition-fast:all .15s var(--ease-smooth);--transition-section:transform .5s ease-out,opacity .5s ease-out}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font);background:var(--background);color:var(--foreground);line-height:1.6;min-height:100vh}h1{font-size:1.5rem;font-weight:700;color:var(--gray-900);margin-bottom:.75rem;letter-spacing:-.025em;line-height:1.2}h2{font-size:1.125rem;font-weight:600;color:var(--manzil-blue);margin-bottom:.5rem;line-height:1.3}h3{font-size:1rem;font-weight:600;color:var(--manzil-blue);margin-bottom:.375rem;line-height:1.2}h4{font-size:.9375rem;font-weight:600;color:var(--gray-700)}p{margin-bottom:.5rem;color:var(--manzil-dark-gray);font-size:.875rem;line-height:1.6;font-weight:400}a{color:var(--primary);text-decoration:none;transition:var(--transition-fast)}a:hover{color:var(--primary-dark)}code{font-family:var(--font-mono);font-size:.8125rem;background:var(--accent);color:var(--primary);padding:2px 8px;border-radius:6px}.container{max-width:var(--max-content);margin:0 auto;padding:0 2rem}.page{padding:1.5rem 2.5rem 3rem;margin-inline-start:var(--sidebar-width);animation:fadeIn .4s var(--ease-out)}.page-banner{background:linear-gradient(135deg,#1a1f4e 0%,#2a2f8a 35%,var(--primary) 65%,#4d5ee8 100%);margin:-1.5rem -2.5rem 2rem;padding:2.25rem 2.5rem 2rem;color:#fff;position:relative;overflow:hidden;border-radius:0 0 var(--radius-xl) var(--radius-xl);box-shadow:0 4px 24px -4px rgba(48,67,227,.18),0 2px 8px -2px rgba(0,0,0,.08)}.page-banner::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px;pointer-events:none;mask-image:linear-gradient(135deg,rgba(0,0,0,.6) 0%,transparent 60%);-webkit-mask-image:linear-gradient(135deg,rgba(0,0,0,.6) 0%,transparent 60%)}.page-banner::after{content:'';position:absolute;top:-60%;right:-8%;width:340px;height:340px;background:radial-gradient(circle,rgba(77,94,232,.35) 0%,rgba(100,113,237,.15) 40%,transparent 70%);border-radius:50%;pointer-events:none;filter:blur(10px)}.page-banner h1{color:#fff;margin:0;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;position:relative;z-index:2;text-shadow:0 1px 3px rgba(0,0,0,.12)}.page-banner .page-subtitle{color:rgba(255,255,255,.65);margin:.375rem 0 0;font-size:.8125rem;font-weight:400;position:relative;z-index:2;letter-spacing:.01em}.page-banner .page-banner-actions{position:relative;z-index:2;margin-top:.75rem}.page-banner .page-banner-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;position:relative;z-index:2}.page-banner .btn-banner{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.2);padding:.5rem 1.25rem;font-size:.8125rem;font-weight:600;border-radius:var(--radius-full);cursor:pointer;transition:all .2s var(--ease-smooth);font-family:var(--font);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);letter-spacing:.01em;box-shadow:0 2px 8px rgba(0,0,0,.1)}.page-banner .btn-banner:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.4);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.15)}.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}@media (max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.page{margin-inline-start:0;padding-top:0;padding-inline:1rem;padding-bottom:3rem}.page-banner{margin:0 -1rem 1.5rem;padding:4.5rem 1rem 1.5rem;border-radius:0 0 var(--radius-lg) var(--radius-lg)}}.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-width);z-index:100;background:var(--sidebar-bg);border-inline-end:1px solid var(--sidebar-border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.sidebar-header{padding:1.75rem 1.5rem 1.25rem;border-bottom:1px solid var(--sidebar-border)}.sidebar-logo{display:flex;align-items:center;gap:.625rem;text-decoration:none}.sidebar-logo-img{height:30px;width:auto;object-fit:contain}.sidebar-logo-badge{font-size:.5625rem;font-weight:700;text-transform:uppercase;background:var(--sidebar-accent);color:var(--sidebar-primary);padding:3px 8px;border-radius:var(--radius-full);letter-spacing:.06em}.sidebar-tagline{display:block;font-size:.75rem;font-weight:500;color:var(--manzil-gray);margin-top:.25rem;letter-spacing:.02em}.sidebar-nav{flex:1;padding:1rem .875rem;display:flex;flex-direction:column;gap:2px}.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.6875rem 1rem;border-radius:var(--radius);font-size:.8125rem;font-weight:500;color:var(--manzil-gray);transition:var(--transition-fast);text-decoration:none;position:relative}.sidebar-link:hover{background:var(--manzil-ghostwhite);color:var(--foreground);text-decoration:none}.sidebar-link.active{background:var(--sidebar-accent);color:var(--sidebar-primary);font-weight:600}.sidebar-link.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--sidebar-primary)}.sidebar-icon{width:22px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.5;transition:var(--transition-fast)}.sidebar-link.active .sidebar-icon,.sidebar-link:hover .sidebar-icon{opacity:1}.sidebar-label{white-space:nowrap}.sidebar-footer{padding:1rem;border-top:1px solid var(--sidebar-border);margin-top:auto}.sidebar-user{display:flex;align-items:center;gap:.75rem;padding:.625rem;border-radius:var(--radius);margin-bottom:.5rem}.sidebar-avatar{width:34px;height:34px;border-radius:var(--radius-full);background:var(--sidebar-accent);color:var(--sidebar-primary);display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0}.sidebar-user-info{display:flex;flex-direction:column;min-width:0}.sidebar-user-name{font-size:.8125rem;font-weight:600;color:var(--foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-role{font-size:.6875rem;color:var(--manzil-gray);text-transform:capitalize}.sidebar-actions{display:flex;gap:.375rem;padding:0 .625rem}.sidebar-action-btn{flex:1;padding:.4375rem .625rem;background:var(--manzil-ghostwhite);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.75rem;font-weight:500;cursor:pointer;transition:var(--transition-fast);font-family:var(--font);color:var(--muted-foreground);text-align:center}.sidebar-action-btn:hover{background:var(--danger-light);border-color:var(--destructive);color:var(--destructive)}@media (max-width:768px){.sidebar{display:none}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6875rem 1.375rem;border:none;border-radius:var(--radius);font-family:var(--font);font-size:.8125rem;font-weight:600;cursor:pointer;transition:var(--transition);line-height:1.2;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--manzil-orange);color:#fff;box-shadow:0 2px 8px rgba(249,115,22,.2)}.btn-primary:hover:not(:disabled){background:var(--manzil-orange-hover);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-blue{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(48,67,227,.15)}.btn-blue:hover:not(:disabled){background:var(--primary-dark);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-secondary{background:var(--muted);color:var(--muted-foreground)}.btn-secondary:hover:not(:disabled){background:var(--gray-200)}.btn-success{background:var(--success);color:#fff}.btn-success:hover:not(:disabled){background:#15803d;transform:translateY(-2px)}.btn-danger{background:var(--destructive);color:#fff}.btn-danger:hover:not(:disabled){background:#b91c1c;transform:translateY(-2px)}.btn-warning{background:#f59e0b;color:#fff}.btn-warning:hover:not(:disabled){background:#d97706;transform:translateY(-2px)}.btn-outline{background:0 0;border:1.5px solid var(--border);color:var(--muted-foreground)}.btn-outline:hover:not(:disabled){border-color:var(--primary);color:var(--primary);background:rgba(48,67,227,.04)}.btn-sm{padding:.4375rem .875rem;font-size:.75rem;border-radius:var(--radius-sm)}.btn-lg{padding:.875rem 2rem;font-size:.9375rem;border-radius:var(--radius-lg)}.btn-icon{background:0 0;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:.4375rem .75rem;font-size:.8125rem;font-weight:500;cursor:pointer;transition:var(--transition-fast);font-family:var(--font);color:var(--muted-foreground)}.btn-icon:hover{background:rgba(48,67,227,.04);border-color:var(--primary);color:var(--primary)}.card{background:#fff;backdrop-filter:none;border-radius:.625rem;box-shadow:none;border:1px solid var(--gray-200);padding:1.5rem;transition:all .15s ease}.card:hover{border-color:var(--gray-300);box-shadow:0 2px 8px rgba(0,0,0,.04)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.card-title{font-size:1rem;font-weight:600;color:var(--foreground)}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.8125rem;font-weight:600;color:var(--muted-foreground);margin-bottom:.5rem}.form-input,.form-select{width:100%;padding:.6875rem 1rem;border:1.5px solid var(--input);border-radius:var(--radius);font-size:.875rem;font-family:var(--font);background:var(--card);color:var(--foreground);transition:var(--transition-fast)}.form-input:focus,.form-select:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 3px rgba(48,67,227,.08)}.form-select,select.form-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.25rem}.form-select:hover,select.form-input:hover{border-color:var(--gray-400);background-color:rgba(48,67,227,.015)}.form-select:focus,select.form-input:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(48,67,227,.08);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233043e3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}.form-select option,select.form-input option{padding:.5rem .75rem;font-family:var(--font);font-size:.875rem;background:#fff;color:var(--foreground)}.form-select option:checked,select.form-input option:checked{background:rgba(48,67,227,.06);color:var(--primary)}.form-input::placeholder{color:var(--manzil-gray)}.field-error{display:block;color:var(--destructive);font-size:.75rem;margin-top:.375rem;font-weight:500}textarea.form-input{resize:vertical;min-height:80px}.kpi-card{background:#fff;border-radius:.625rem;box-shadow:none;padding:.875rem 1rem;transition:all .15s ease;border:1px solid var(--gray-200)}.kpi-card:hover{border-color:var(--gray-300);box-shadow:0 2px 8px rgba(0,0,0,.04)}.kpi-label{display:block;font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;color:var(--manzil-gray);margin-bottom:.375rem;font-weight:600}.kpi-value{display:block;font-size:1.125rem;font-weight:700;color:var(--foreground);letter-spacing:-.02em;line-height:1.2}.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:var(--radius-full);font-size:.6875rem;font-weight:600}.badge-success{background:var(--success-light);color:var(--success-dark)}.badge-warning{background:var(--warning-light);color:var(--warning-dark)}.badge-danger{background:var(--danger-light);color:var(--danger-dark)}.badge-info{background:var(--accent);color:var(--primary)}.badge-neutral{background:var(--muted);color:var(--muted-foreground)}.notification-container{position:fixed;top:1.5rem;right:1.5rem;z-index:10000;display:flex;flex-direction:column;gap:.5rem;max-width:380px}.notification{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:var(--radius-lg);font-size:.8125rem;box-shadow:var(--shadow-lg);animation:slideIn .4s var(--ease-out);backdrop-filter:blur(10px);font-weight:500}.notification-success{background:rgba(220,252,231,.95);color:var(--success-dark);border-left:4px solid var(--success)}.notification-error{background:rgba(254,226,226,.95);color:var(--danger-dark);border-left:4px solid var(--danger)}.notification-warning{background:rgba(254,243,199,.95);color:var(--warning-dark);border-left:4px solid var(--warning)}.notification-info{background:rgba(224,230,252,.95);color:var(--primary);border-left:4px solid var(--primary)}.notif-close{background:0 0;border:none;font-size:1.25rem;cursor:pointer;margin-inline-start:auto;opacity:.5;transition:var(--transition-fast)}.notif-close:hover{opacity:1}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}.toast{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);padding:.875rem 1.75rem;border-radius:var(--radius-lg);font-size:.875rem;z-index:10000;animation:fadeUp .4s var(--ease-out);font-weight:500;box-shadow:var(--shadow-lg)}.toast-success{background:var(--success);color:#fff}.toast-error{background:var(--danger);color:#fff}@keyframes fadeUp{from{opacity:0;transform:translateX(-50%) translateY(1rem)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.accrual-progress{margin:1rem 0}.progress-label{display:flex;justify-content:space-between;font-size:.8125rem;margin-bottom:.5rem;font-weight:500}.progress-bar{height:8px;background:var(--muted);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;border-radius:var(--radius-full);transition:width .6s var(--ease-out);background:linear-gradient(90deg,var(--primary),var(--secondary))}.progress-pct{font-size:.75rem;color:var(--manzil-gray);margin-top:.375rem;font-weight:500}.eligibility-card{background:#fffffff2;backdrop-filter:blur(8px);border-radius:var(--radius-xl);box-shadow:var(--shadow-premium);padding:1.75rem}.eligibility-card.tier-gold{border-left:4px solid var(--warning)}.eligibility-card.tier-silver{border-left:4px solid var(--gray-400)}.eligibility-card.tier-bronze{border-left:4px solid #b45309}.elig-row{display:flex;justify-content:space-between;padding:.6875rem 0;border-bottom:1px solid var(--border);font-size:.875rem}.elig-warning{margin-top:.75rem;padding:.875rem;background:var(--danger-light);border-radius:var(--radius);color:var(--danger-dark);font-size:.8125rem;font-weight:500}.fee-breakdown{background:var(--manzil-ghostwhite);border-radius:var(--radius-lg);padding:1.375rem;margin-top:.75rem}.fee-row{display:flex;justify-content:space-between;padding:.4375rem 0;font-size:.875rem}.fee-total{font-weight:700;font-size:1rem;color:var(--foreground)}.fee-breakdown hr{border:none;border-top:1px solid var(--border);margin:.625rem 0}.recon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.875rem;margin-bottom:1.75rem}.recon-card{text-align:center;padding:.875rem 1rem;border-radius:.625rem;background:#fff;border:1px solid var(--gray-200);transition:all .15s ease}.recon-card:hover{border-color:var(--gray-300);box-shadow:0 2px 8px rgba(0,0,0,.04)}.recon-card strong{display:block;font-size:1.125rem;margin-top:.25rem;letter-spacing:-.02em}.recon-ok{border-color:rgba(22,163,74,.25)}.recon-ok strong{color:var(--success)}.recon-warn{border-color:rgba(245,158,11,.25)}.recon-warn strong{color:var(--warning)}.recon-error{border-color:rgba(211,48,48,.25)}.recon-error strong{color:var(--destructive)}@media (max-width:768px){.recon-grid{grid-template-columns:repeat(2,1fr)}}.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.875rem;margin-bottom:1.75rem}.metric-card{text-align:center;padding:.875rem 1rem;border-radius:.625rem;background:#fff;border:1px solid var(--gray-200);transition:all .15s ease}.metric-card:hover{border-color:var(--gray-300);box-shadow:0 2px 8px rgba(0,0,0,.04)}.metric-card strong{display:block;font-size:1.125rem;margin-top:.25rem;letter-spacing:-.02em}.metric-warn{background:rgba(254,243,199,.35);border-color:rgba(245,158,11,.2)}.metric-warn strong{color:var(--warning-dark)}@media (max-width:768px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}.funding-card{background:#fff;border-radius:.625rem;border:1px solid var(--gray-200);padding:1rem 1.25rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.75rem}.login-wrapper{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(160deg,#0f1a5e 0,var(--primary) 40%,#4d5ee8 70%,#6b7cf0 100%);position:relative;overflow:hidden}.login-wrapper::before{content:'';position:absolute;top:-40%;right:-20%;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,rgba(178,250,239,.08) 0,transparent 70%);animation:floatSlow 20s ease-in-out infinite}.login-wrapper::after{content:'';position:absolute;bottom:-30%;left:-15%;width:50vw;height:50vw;border-radius:50%;background:radial-gradient(circle,rgba(224,230,252,.06) 0,transparent 70%);animation:floatMedium 15s ease-in-out infinite}.login-card{background:#fffffff2;backdrop-filter:blur(20px);border-radius:var(--radius-2xl);padding:3rem;width:100%;max-width:440px;box-shadow:var(--shadow-2xl);position:relative;z-index:1;animation:zoomIn .8s cubic-bezier(.16,1,.3,1) forwards}@keyframes floatSlow{0%{transform:translate(0)}50%{transform:translate(10px,-15px)}100%{transform:translate(0)}}@keyframes floatMedium{0%{transform:translate(0)}50%{transform:translate(-15px,10px)}100%{transform:translate(0)}}@keyframes floatFast{0%{transform:translate(0)}50%{transform:translate(15px,15px)}100%{transform:translate(0)}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale(.95)}100%{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}@keyframes gentleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}@keyframes shimmer{0%{opacity:.7}50%{opacity:.9}100%{opacity:.7}}@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeUp{from{opacity:0;transform:translateX(-50%) translateY(1rem)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.animate-fadeIn{animation:fadeIn 1s ease-out forwards}.animate-slideUp{animation:slideUp .6s ease-out forwards}.fade-in{opacity:0;transition:opacity .5s ease-out,transform .5s ease-out,filter .5s ease-out}.fade-in.visible{opacity:1}.slide-up{transform:translateY(10px)}.blur-in{filter:blur(4px)}.fade-in.visible.slide-up{transform:translateY(0)}.fade-in.visible.blur-in{filter:blur(0)}.section-transition{transition:var(--transition-section)}.section-transition:hover{transform:translateY(-5px)}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}.hidden{display:none!important}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.p-4{padding:1rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.px-2{padding-left:.5rem;padding-right:.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.rounded{border-radius:var(--radius)}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-xl{font-size:1.25rem}.text-center{text-align:center}.font-medium{font-weight:500}.font-bold{font-weight:700}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.bg-green-100{background:var(--success-light)}.text-green-800{color:var(--success-dark)}.text-green-500{color:var(--success)}.bg-yellow-100{background:var(--warning-light)}.text-yellow-800{color:var(--warning-dark)}.bg-blue-100{background:var(--manzil-blue-lavender)}.text-blue-800{color:var(--primary)}.bg-indigo-100{background:var(--manzil-blue-lavender)}.text-indigo-800{color:var(--primary-dark)}.bg-red-100{background:var(--danger-light)}.text-red-800{color:var(--danger-dark)}.bg-red-200{background:#fecaca}.text-red-900{color:#7f1d1d}.text-red-500{color:var(--danger)}.bg-gray-100{background:var(--gray-100)}.bg-gray-200{background:var(--gray-200)}.text-gray-800{color:var(--gray-800)}.text-gray-600{color:var(--gray-600)}.text-gray-400{color:var(--gray-400)}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}::selection{background:var(--accent);color:var(--primary)}.skeleton{background:linear-gradient(90deg,#f0f0f0,#e8e8e8 20%,#f0f0f0 40%,#f0f0f0 100%);background-size:1000px 100%;animation:skeleton-shimmer 2s linear infinite;border-radius:var(--radius-sm)}@keyframes skeleton-shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}.skeleton-card{background:#fff;border-radius:.625rem;padding:1.25rem 1.375rem;border:1px solid var(--gray-200)}.skeleton-value{height:1.25rem;width:60%;margin-bottom:.5rem}.skeleton-label{height:.625rem;width:80%}.skeleton-cell{height:.875rem;width:80%}.skeleton-row td{padding:.75rem}.skeleton-banner{height:3.5rem;border-radius:var(--radius-lg);margin-bottom:1.5rem}.role-picker{display:flex;flex-direction:column;gap:.5rem}.role-option{cursor:pointer}.role-option input[type=radio]{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.role-option-card{display:flex;align-items:center;gap:.875rem;padding:.875rem 1rem;border:1.5px solid var(--border);border-radius:var(--radius-lg);background:#fff;transition:all .2s ease;position:relative}.role-option-card:hover{border-color:var(--gray-400);background:var(--gray-50);box-shadow:0 2px 8px rgba(0,0,0,.04)}.role-option input[type=radio]:checked+.role-option-card{border-color:var(--primary);background:rgba(48,67,227,.03);box-shadow:0 0 0 3px rgba(48,67,227,.1)}.role-option-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.125rem;flex-shrink:0}.role-option-info{flex:1;min-width:0}.role-option-name{font-size:.8125rem;font-weight:600;color:var(--foreground);margin-bottom:1px}.role-option-desc{font-size:.6875rem;color:var(--manzil-gray);line-height:1.3}.role-option-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:transparent;transition:all .2s ease;background:#fff}.role-option input[type=radio]:checked+.role-option-card .role-option-check{border-color:var(--primary);background:var(--primary);color:#fff}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem;margin-bottom:1.75rem}#kpiCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.75rem;margin-bottom:1.75rem}.dashboard-section{margin-bottom:1.75rem}.dashboard-section .section-title{font-size:.6875rem;font-weight:700;color:var(--manzil-gray);margin-bottom:.75rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);letter-spacing:.08em;text-transform:uppercase}.quick-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-bottom:1.75rem}.quick-action-card{flex:1;min-width:180px;display:flex;align-items:center;gap:.75rem;padding:1rem 1.125rem;background:#fff;border-radius:.625rem;border:1px solid var(--gray-200);cursor:pointer;transition:all .15s ease;text-decoration:none}.quick-action-card:hover{border-color:var(--primary);box-shadow:0 2px 8px rgba(48,67,227,.06)}.quick-action-icon{font-size:1.25rem;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:var(--accent);border-radius:.625rem;flex-shrink:0}.quick-action-label{font-weight:600;font-size:.8125rem;color:var(--foreground)}.quick-action-desc{font-size:.6875rem;color:var(--manzil-gray);margin-top:.125rem}.balance-hero{text-align:center;padding:2rem 1.5rem;background:linear-gradient(135deg,var(--primary) 0,var(--primary-light) 50%,#6b7cf0 100%);color:#fff;border-radius:.75rem;margin-bottom:1.75rem;position:relative;overflow:hidden;box-shadow:0 4px 16px rgba(48,67,227,.15)}.balance-hero::before{content:'';position:absolute;top:-40%;right:-25%;width:60%;height:100%;border-radius:50%;background:rgba(255,255,255,.06);animation:floatSlow 20s ease-in-out infinite}.balance-hero::after{content:'';position:absolute;bottom:-30%;left:-15%;width:40%;height:80%;border-radius:50%;background:rgba(255,255,255,.04);animation:floatMedium 15s ease-in-out infinite}.balance-hero .balance-amount{font-size:2rem;font-weight:700;letter-spacing:-.03em;position:relative;z-index:1}.balance-hero .balance-label{font-size:.6875rem;opacity:.7;margin-top:.25rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;position:relative;z-index:1}.stat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;margin-bottom:1.75rem}.stat-item{text-align:center;padding:1rem .875rem;background:#fff;border-radius:.625rem;border:1px solid var(--gray-200);transition:all .15s ease}.stat-item:hover{border-color:var(--gray-300);box-shadow:0 2px 8px rgba(0,0,0,.04)}.stat-value{font-size:1.125rem;font-weight:700;color:var(--foreground);letter-spacing:-.02em;line-height:1.2}.stat-label{font-size:.625rem;color:var(--manzil-gray);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-top:.25rem}#fundingStatus{margin-bottom:1.75rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.section-header h2{margin:0;font-size:1rem;font-weight:600}.loading-spinner-wrap{display:flex;align-items:center;gap:.625rem;padding:.5rem 0 1rem;color:var(--manzil-gray);font-size:.8125rem;font-weight:500}.loading-spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.table-wrapper{overflow-x:auto;border-radius:var(--radius-xl);background:#fffffff2;backdrop-filter:blur(8px);box-shadow:var(--shadow-premium)}.data-table{width:100%;border-collapse:collapse;font-size:.8125rem}.data-table thead{background:var(--primary);border-bottom:1.5px solid var(--primary);overflow:visible}.data-table th{padding:.875rem 1rem;text-align:center;font-weight:700;color:#fff;font-size:.625rem;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.data-table thead tr.filter-row{background:var(--manzil-ghostwhite);border-bottom:1.5px solid var(--border)}.data-table thead tr.filter-row th{padding:.5rem .5rem;color:var(--muted-foreground);font-weight:400;text-align:center;overflow:visible}.column-filter{width:100%;padding:.4rem .625rem;border:1.5px solid var(--input);border-radius:var(--radius-sm);font-size:.75rem;font-family:var(--font);background:var(--card);color:var(--foreground);transition:var(--transition-fast);text-align:center}.column-filter:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 3px rgba(48,67,227,.08)}.column-filter::placeholder{color:var(--manzil-gray);font-size:.6875rem;text-align:center}.column-filter-select{width:100%;padding:.4rem .375rem;border:1.5px solid var(--input);border-radius:var(--radius-sm);font-size:.75rem;font-family:var(--font);background:var(--card);color:var(--foreground);cursor:pointer;transition:var(--transition-fast);text-align:center;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c8f8e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;padding-right:1.5rem}.column-filter-select:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 3px rgba(48,67,227,.08)}.ss-wrap{position:relative;width:100%}.ss-wrap .ss-input{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c8f8e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;padding-right:1.5rem}.ss-wrap .ss-input:focus{cursor:text}.ss-dropdown{position:fixed;min-width:150px;max-height:200px;overflow-y:auto;background:#fff;border:1.5px solid var(--input);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:9999;padding:.25rem 0}.ss-option{padding:.4375rem .75rem;font-size:.75rem;font-family:var(--font);color:var(--foreground);cursor:pointer;transition:background .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ss-option.active,.ss-option:hover{background:rgba(48,67,227,.06);color:var(--primary)}.ss-option.active{font-weight:600}.ss-option.active::before{content:'✓ ';font-size:.625rem}.ss-empty{color:var(--manzil-gray);cursor:default;text-align:center;font-style:italic}.filter-row input[type=date].column-filter{font-size:.6875rem;padding:.35rem .375rem;color:var(--muted-foreground)}.filter-row input[type=date].column-filter::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer}.data-table td{padding:.875rem 1rem;vertical-align:middle;text-align:center;color:var(--muted-foreground)}.data-table tbody tr{border-bottom:1px solid var(--border);transition:background .2s var(--ease-smooth)}.data-table tbody tr:hover{background:rgba(48,67,227,.02)}.data-table tbody tr:last-child{border-bottom:none}.data-table-compact td,.data-table-compact th{padding:.6875rem .875rem}.data-table-striped tbody tr:nth-child(2n){background:var(--gray-50)}.data-table th.sortable{cursor:pointer;user-select:none;transition:color .15s var(--ease-smooth)}.data-table th.sortable:hover{color:var(--manzil-paleturquoise)}.data-table th.sortable::after{content:' ↕';font-size:.5625rem;opacity:.5}.data-table th.sort-asc::after{content:' ↑';opacity:1;color:var(--manzil-paleturquoise)}.data-table th.sort-desc::after{content:' ↓';opacity:1;color:var(--manzil-paleturquoise)}.table-empty{padding:4rem 2rem;text-align:center;color:var(--gray-400);font-size:.875rem}.table-empty-icon{font-size:2rem;margin-bottom:.75rem;opacity:.4}.table-toolbar{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-bottom:1px solid var(--border);flex-wrap:wrap}.table-search{flex:1;min-width:200px;padding:.5rem .875rem;border:1.5px solid var(--input);border-radius:var(--radius);font-size:.8125rem;font-family:var(--font);background:var(--card);transition:var(--transition-fast)}.table-search:focus{outline:0;border-color:var(--ring);box-shadow:0 0 0 3px rgba(48,67,227,.06)}.table-search::placeholder{color:var(--manzil-gray)}.table-pagination{display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--manzil-gray)}.table-pagination-btns{display:flex;gap:.375rem}.page-btn{padding:.375rem .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--card);font-size:.75rem;cursor:pointer;font-family:var(--font);font-weight:500;color:var(--muted-foreground);transition:var(--transition-fast)}.page-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(48,67,227,.04)}.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.page-btn:disabled{opacity:.4;cursor:not-allowed}.action-cell{display:flex;gap:.375rem;align-items:center;justify-content:center}.action-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--card);cursor:pointer;transition:all .15s ease;color:var(--muted-foreground);flex-shrink:0}.action-icon:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.1)}.action-icon.action-view{color:var(--primary);border-color:rgba(48,67,227,.2)}.action-icon.action-view:hover{background:rgba(48,67,227,.06);border-color:var(--primary)}.action-icon.action-approve{color:var(--success);border-color:rgba(22,163,74,.2)}.action-icon.action-approve:hover{background:rgba(22,163,74,.08);border-color:var(--success)}.action-icon.action-reject{color:var(--destructive);border-color:rgba(220,38,38,.2)}.action-icon.action-reject:hover{background:rgba(220,38,38,.08);border-color:var(--destructive)}.action-icon.action-suspend{color:#f59e0b;border-color:rgba(245,158,11,.2)}.action-icon.action-suspend:hover{background:rgba(245,158,11,.08);border-color:#f59e0b}

/* ═══════ Column Menu (cm-*) ═══════ */
.cm-th{cursor:pointer;user-select:none;position:relative;transition:color .15s ease}.cm-th:hover{color:#b2faef}.cm-th::after{content:"";display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle;opacity:.35;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center;transition:opacity .15s}.cm-th:hover::after{opacity:.8}.cm-th-open{color:#b2faef!important}.cm-th-open::after{opacity:1;transform:rotate(180deg)}
.cm-sort-arrow{font-size:.5rem;margin-left:2px;color:#b2faef;font-weight:700;vertical-align:middle}
.cm-filter-dot{width:5px;height:5px;border-radius:50%;background:#f59e0b;display:inline-block;margin-left:3px;vertical-align:middle;animation:cmDotPulse 2s ease infinite}
.cm-has-filter{color:#b2faef!important}
@keyframes cmDotPulse{0%,100%{opacity:1}50%{opacity:.4}}

.cm-menu{position:fixed;z-index:10000;width:300px;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border,#e5e7eb);border-radius:12px;box-shadow:0 20px 60px -12px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.03);opacity:0;transform:scale(.97);pointer-events:none;transition:opacity .18s ease,transform .18s ease;font-family:var(--font,'DM Sans',system-ui,sans-serif)}
.cm-menu.cm-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

.cm-section{padding:.5rem .75rem;border-bottom:1px solid rgba(0,0,0,.05)}
.cm-sort-section{padding:.375rem .5rem}
.cm-section-title{font-size:.625rem;font-weight:700;color:var(--manzil-gray,#8c8f8e);text-transform:uppercase;letter-spacing:.5px;padding:.25rem .25rem .375rem;display:flex;align-items:center;gap:.375rem}

.cm-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.5rem .625rem;border:none;background:transparent;font-size:.8125rem;font-family:inherit;color:var(--foreground,#222);cursor:pointer;border-radius:8px;transition:all .12s ease;text-align:left}
.cm-item:hover{background:rgba(48,67,227,.05);color:var(--primary,#3043e3)}
.cm-item-active{background:rgba(48,67,227,.08)!important;color:var(--primary,#3043e3)!important;font-weight:600}
.cm-item svg{flex-shrink:0;opacity:.55}.cm-item:hover svg,.cm-item-active svg{opacity:1}

.cm-condition{display:flex;gap:.375rem;padding:.125rem 0 .25rem}
.cm-cond-select{flex:1;padding:.375rem .5rem;border:1.5px solid var(--border,#e5e7eb);border-radius:6px;font-size:.75rem;font-family:inherit;background:#fff;color:var(--foreground);cursor:pointer;transition:border-color .15s}
.cm-cond-select:focus{outline:none;border-color:var(--primary,#3043e3);box-shadow:0 0 0 2px rgba(48,67,227,.08)}
.cm-cond-input{width:100px;padding:.375rem .5rem;border:1.5px solid var(--border,#e5e7eb);border-radius:6px;font-size:.75rem;font-family:inherit;background:#fff;color:var(--foreground);transition:border-color .15s}
.cm-cond-input:focus{outline:none;border-color:var(--primary,#3043e3);box-shadow:0 0 0 2px rgba(48,67,227,.08)}

.cm-values-section{display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden;padding-bottom:.25rem}
.cm-val-controls{display:flex;align-items:center;gap:.5rem;padding:0 .25rem .375rem;font-size:.6875rem}
.cm-val-link{background:none;border:none;color:var(--primary,#3043e3);font-size:.6875rem;font-family:inherit;cursor:pointer;font-weight:600;padding:0}.cm-val-link:hover{text-decoration:underline}
.cm-val-sep{color:var(--manzil-gray,#8c8f8e);font-size:.5rem}
.cm-val-showing{margin-left:auto;color:var(--manzil-gray,#8c8f8e);font-size:.625rem;white-space:nowrap}

.cm-val-search{width:100%;padding:.375rem .5rem;border:1.5px solid var(--border,#e5e7eb);border-radius:6px;font-size:.75rem;font-family:inherit;background:#fff;color:var(--foreground);margin-bottom:.375rem;transition:border-color .15s}
.cm-val-search:focus{outline:none;border-color:var(--primary,#3043e3);box-shadow:0 0 0 2px rgba(48,67,227,.08)}
.cm-val-search::placeholder{color:var(--manzil-gray,#8c8f8e)}

.cm-val-list{flex:1;min-height:60px;max-height:180px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:1px;padding-right:2px}
.cm-menu{overscroll-behavior:contain}
.cm-val-list::-webkit-scrollbar{width:4px}.cm-val-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px}

.cm-val-item{display:flex;align-items:center;gap:.5rem;padding:.3125rem .375rem;border-radius:6px;cursor:pointer;font-size:.75rem;color:var(--foreground);transition:background .1s}
.cm-val-item:hover{background:rgba(48,67,227,.04)}
.cm-val-item input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.cm-val-check{width:15px;height:15px;border-radius:4px;border:1.5px solid #d1d5db;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .12s ease}
.cm-val-item input:checked+.cm-val-check{background:var(--primary,#3043e3);border-color:var(--primary,#3043e3)}
.cm-val-item input:checked+.cm-val-check::after{content:"";display:block;width:4px;height:7px;border:solid #fff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);margin-top:-1px}
.cm-val-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cm-actions{display:flex;justify-content:flex-end;gap:.5rem;padding:.5rem .75rem;border-top:1px solid rgba(0,0,0,.05);background:var(--manzil-ghostwhite,#f9fafc);flex-shrink:0;border-radius:0 0 12px 12px}
.cm-action-btn{padding:.375rem .875rem;border-radius:8px;font-size:.75rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s ease;border:none}
.cm-action-reset{background:transparent;color:var(--manzil-gray,#8c8f8e)}.cm-action-reset:hover{background:rgba(0,0,0,.04);color:var(--foreground)}
.cm-action-apply{background:var(--primary,#3043e3);color:#fff}.cm-action-apply:hover{filter:brightness(1.1);transform:translateY(-1px)}

/* Filter button above table */
.cm-filter-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.4375rem .75rem .4375rem .625rem;border:1.5px solid var(--border,#e5e7eb);border-radius:10px;background:#fff;font-size:.75rem;font-weight:600;font-family:inherit;color:var(--manzil-gray,#8c8f8e);cursor:default;transition:all .2s ease;margin-bottom:.625rem;user-select:none;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.cm-filter-btn svg{flex-shrink:0;opacity:.5;transition:all .2s ease}
.cm-filter-btn-text{transition:color .2s ease}
.cm-filter-btn-count{display:none;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 .3125rem;border-radius:var(--radius-full,999px);background:var(--primary,#3043e3);color:#fff;font-size:.5625rem;font-weight:800;letter-spacing:.02em;line-height:1}
.cm-filter-btn-active{border-color:var(--primary,#3043e3);background:rgba(48,67,227,.04);color:var(--primary,#3043e3);cursor:pointer;box-shadow:0 2px 8px rgba(48,67,227,.12)}
.cm-filter-btn-active svg{opacity:1;color:var(--primary,#3043e3)}
.cm-filter-btn-active:hover{background:rgba(48,67,227,.08);transform:translateY(-1px);box-shadow:0 4px 12px rgba(48,67,227,.18)}
.cm-filter-btn-active .cm-filter-btn-text{color:var(--primary,#3043e3)}
.cm-filter-btn-active .cm-filter-btn-count{display:inline-flex}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:500;animation:modalFadeIn .25s var(--ease-out)}.modal-box{background:#fffffff2;backdrop-filter:blur(20px);border-radius:var(--radius-2xl);box-shadow:var(--shadow-2xl);padding:2.25rem;width:100%;max-width:480px;max-height:80vh;overflow-y:auto;animation:modalScaleIn .3s var(--ease-out)}.modal-box p{font-size:.9375rem;margin-bottom:1.5rem;color:var(--muted-foreground);line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.modal-title{font-size:1.125rem;font-weight:700;color:var(--foreground);letter-spacing:-.02em}.modal-close{background:0 0;border:none;font-size:1.5rem;cursor:pointer;color:var(--manzil-gray);transition:var(--transition-fast);width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius)}.modal-close:hover{color:var(--foreground);background:var(--muted)}@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}@keyframes modalScaleIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}/* ═══════════════════════════════════════════════════════
   Custom Select Dropdown – Shared Styles
   Used site-wide to replace native <select> elements.
   ═══════════════════════════════════════════════════════ */

/* ── Wrapper ── */
.custom-select-wrap{position:relative;display:inline-block;width:100%}
.custom-select-wrap select.cs-original{position:absolute!important;opacity:0!important;height:0!important;width:0!important;pointer-events:none!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}

/* ── Trigger button ── */
.custom-select-trigger{width:100%;padding:.625rem .875rem;padding-right:2.25rem;border:1.5px solid var(--input,#f1f1f1);border-radius:var(--radius,.625rem);font-size:.875rem;font-family:var(--font,'DM Sans',system-ui,sans-serif);background:var(--card,#fff);color:var(--foreground,#222);cursor:pointer;transition:all .15s ease;display:flex;align-items:center;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.custom-select-trigger:hover{border-color:var(--primary,#3043e3)}
.custom-select-trigger.open{border-color:var(--ring,#3043e3);box-shadow:0 0 0 3px rgba(48,67,227,.08)}
.custom-select-trigger .cs-placeholder{color:var(--manzil-gray,#8c8f8e)}
.custom-select-trigger::after{content:'';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:10px;height:6px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238c8f8e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:contain;transition:transform .2s ease}
.custom-select-trigger.open::after{transform:translateY(-50%) rotate(180deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233043e3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ── Compact trigger for filter-bar selects ── */
.custom-select-trigger.cs-compact{padding:.4375rem .75rem;padding-right:2rem;font-size:.8125rem}

/* ── Dropdown panel ── */
.custom-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--border,#f1f1f1);border-radius:12px;box-shadow:0 20px 60px -12px rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.03);z-index:500;display:none;overflow:hidden;animation:csDropIn .18s ease}
.custom-select-dropdown.cs-open{display:block}
@keyframes csDropIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* ── Search box ── */
.cs-search-wrap{padding:.5rem .625rem;border-bottom:1px solid rgba(0,0,0,.05)}
.cs-search{width:100%;padding:.4rem .5rem;border:1.5px solid var(--border,#f1f1f1);border-radius:6px;font-size:.75rem;font-family:var(--font,'DM Sans',system-ui,sans-serif);background:#fff;color:var(--foreground,#222);transition:border-color .15s}
.cs-search:focus{outline:none;border-color:var(--primary,#3043e3);box-shadow:0 0 0 2px rgba(48,67,227,.08)}
.cs-search::placeholder{color:var(--manzil-gray,#8c8f8e)}

/* ── Options list ── */
.cs-options{max-height:220px;overflow-y:auto;padding:.25rem}
.cs-options::-webkit-scrollbar{width:4px}
.cs-options::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px}
.cs-option{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:8px;cursor:pointer;font-size:.8125rem;color:var(--foreground,#222);transition:all .12s ease}
.cs-option:hover{background:rgba(48,67,227,.05);color:var(--primary,#3043e3)}
.cs-option.cs-selected{background:rgba(48,67,227,.08);color:var(--primary,#3043e3);font-weight:600}
.cs-option.cs-hidden{display:none!important}

/* ── No results ── */
.cs-no-results{padding:.75rem;text-align:center;font-size:.75rem;color:var(--manzil-gray,#8c8f8e)}
.withdrawal-header{text-align:center;margin-bottom:2.5rem}.withdrawal-header h1{color:var(--foreground)}.withdrawal-header p{color:var(--manzil-gray);font-size:.875rem}.withdrawal-form-card{background:#fffffff2;backdrop-filter:blur(8px);border-radius:var(--radius-2xl);box-shadow:var(--shadow-premium);padding:2.5rem;margin-bottom:1.75rem;transition:var(--transition)}.withdrawal-form-card:hover{box-shadow:var(--shadow-premium-hover);transform:translateY(-5px)}.amount-input-wrapper{position:relative;margin-bottom:1.5rem}.amount-input-wrapper .form-input{font-size:1.625rem;font-weight:700;padding:1.375rem 1.5rem;padding-inline-end:4.5rem;text-align:center;border-radius:var(--radius-xl);border:2px solid var(--input);letter-spacing:-.02em;transition:var(--transition)}.amount-input-wrapper .form-input:focus{border-color:var(--ring);box-shadow:0 0 0 4px rgba(48,67,227,.08)}.amount-currency{position:absolute;top:50%;inset-inline-end:1.375rem;transform:translateY(-50%);font-size:.875rem;font-weight:700;color:var(--manzil-gray);letter-spacing:.03em}.quick-amounts{display:flex;gap:.625rem;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}.quick-amount-btn{padding:.625rem 1.375rem;border:1.5px solid var(--input);border-radius:var(--radius-full);background:0 0;font-size:.8125rem;font-weight:600;font-family:var(--font);cursor:pointer;transition:var(--transition);color:var(--muted-foreground)}.quick-amount-btn:hover{border-color:var(--primary);color:var(--primary);background:rgba(48,67,227,.04)}.quick-amount-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 8px rgba(48,67,227,.2)}.withdrawal-reason{margin-bottom:1.75rem}.withdrawal-submit{text-align:center;padding-top:1.25rem}.withdrawal-submit .btn{width:100%;padding:1rem;font-size:1rem;font-weight:700;border-radius:var(--radius-lg)}.withdrawal-success{text-align:center;padding:3.5rem 2rem}.withdrawal-success .success-icon{font-size:3.5rem;margin-bottom:1.25rem}.withdrawal-success h2{color:var(--success);margin-bottom:.625rem;font-size:1.25rem}.withdrawal-success p{color:var(--gray-400);font-size:.9375rem}/* ===================================================================
   Mnzil EWA - Mobile Responsive Overrides
   Breakpoints: 768px (tablet), 480px (phone)
   Updated: 2026-03-29 - Full mobile layout rewrite
   Fixes: overlapping layers, broken grids, stacking issues
   =================================================================== */

/* -- Mobile Hamburger Button -- */
.mobile-menu-btn {
    display: none;
    position: fixed;
    top: .875rem;
    left: .875rem;
    z-index: 201;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}
.mobile-menu-btn:active {
    transform: scale(.92);
}
.mobile-menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--primary, #3043e3);
    border-radius: 2px;
    transition: all .3s ease;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.mobile-menu-btn span:nth-child(1) { top: 12px; }
.mobile-menu-btn span:nth-child(2) { top: 19px; }
.mobile-menu-btn span:nth-child(3) { top: 26px; }
.mobile-menu-btn.open span:nth-child(1) {
    top: 19px;
    transform: translateX(-50%) rotate(45deg);
}
.mobile-menu-btn.open span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-btn.open span:nth-child(3) {
    top: 19px;
    transform: translateX(-50%) rotate(-45deg);
}

/* -- Mobile Overlay -- */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    transition: opacity .3s ease;
}
.mobile-overlay.active {
    opacity: 1;
}

/* ======= TABLET - max 768px ======= */
@media (max-width: 768px) {
    .mobile-menu-btn { display: flex; }

    /* Sidebar: slide-in from left */
    .sidebar {
        display: flex !important;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.16,1,.3,1);
        z-index: 200;
        box-shadow: none;
    }
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 8px 0 30px rgba(0,0,0,.12);
    }
    .mobile-overlay.active { display: block; opacity: 1; }

    /* PAGE LAYOUT - prevent overlap */
    body { overflow-x: hidden; }
    .page {
        margin-inline-start: 0 !important;
        padding: 0 1rem 3rem !important;
        overflow-x: hidden;
        box-sizing: border-box;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* PAGE BANNERS - room for hamburger */
    .page-banner {
        margin: 0 -1rem 1.25rem !important;
        padding: 3.75rem 1rem 1.25rem !important;
        border-radius: 0 0 1rem 1rem !important;
    }
    .page-banner h1 { font-size: 1.25rem !important; }
    .page-banner .page-subtitle { font-size: .75rem !important; }
    .page-banner .page-banner-row {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }
    .page-banner .page-banner-row > div:last-child {
        width: 100%;
        flex-wrap: wrap;
        gap: .5rem !important;
    }
    .page-banner .page-banner-row > div:last-child .form-input {
        flex: 1 1 auto;
        min-width: 0;
        max-width: none !important;
    }
    .page-banner .btn-banner {
        flex-shrink: 0;
        font-size: .75rem !important;
        padding: .4375rem .875rem !important;
        white-space: nowrap;
    }

    /* EMPLOYEE PORTAL - welcome hero */
    .welcome-hero {
        margin: 0 -1rem 1.25rem !important;
        padding: 3.75rem 1rem 1.25rem !important;
        border-radius: 0 0 1rem 1rem !important;
    }
    .welcome-hero .welcome-name { font-size: 1.125rem !important; }
    .welcome-hero .welcome-subtitle { font-size: .75rem !important; }
    .welcome-top { gap: .75rem !important; }
    .welcome-avatar { width: 42px !important; height: 42px !important; font-size: 1rem !important; }

    /* Earnings grid - 2 cols */
    .earnings-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem !important; }
    .earning-card { padding: .75rem 1rem !important; }
    .earning-card .ec-value { font-size: 1rem !important; }
    .earning-card .ec-icon { width: 32px !important; height: 32px !important; margin-bottom: .375rem !important; }

    /* Daily counter - stack */
    .daily-counter-card {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 1rem !important;
        gap: .75rem !important;
    }
    .daily-counter-right {
        text-align: left !important;
        padding-top: .75rem;
        border-top: 1px solid rgba(48,67,227,.08);
    }
    .daily-counter-value { font-size: 1.375rem !important; }

    /* Balance hero */
    .balance-hero { padding: 1.5rem 1rem !important; margin-bottom: 1.25rem !important; }
    .balance-hero .balance-amount { font-size: 1.5rem !important; }

    /* Stat row */
    .stat-row { grid-template-columns: repeat(2, 1fr) !important; gap: .625rem !important; }

    /* Quick actions */
    .quick-actions { flex-direction: column !important; }
    .quick-action-card { min-width: 0 !important; }

    /* EMPLOYER DASHBOARD */
    .banner-company-row { gap: .75rem !important; }
    .banner-icon { width: 32px !important; height: 32px !important; }
    .banner-info h1 { font-size: 1.125rem !important; }
    .banner-ar { font-size: .75rem !important; }
    .company-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .75rem !important;
    }
    .company-avatar { width: 44px !important; height: 44px !important; font-size: 1rem !important; }
    .company-name-en { font-size: 1.125rem !important; }
    .company-meta { flex-wrap: wrap !important; }

    /* KPI grid compact - 2 cols */
    .kpi-grid-compact { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem !important; }
    .kpi-mini { padding: .75rem .875rem !important; }
    .kpi-mini-value { font-size: 1rem !important; }

    /* Funding card - stack */
    .funding-compact,
    .funding-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .5rem !important;
        padding: .875rem 1rem !important;
    }

    /* MNZIL ADMIN DASHBOARD */
    .admin-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .625rem !important; }
    .stat-card { padding: .75rem .875rem !important; }
    .stat-card .stat-value { font-size: 1rem !important; }

    /* Pending banner - stack */
    .pending-banner {
        padding: .75rem 1rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .5rem !important;
    }
    .pending-banner .pb-label {
        border-right: none !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
        padding-bottom: .375rem;
        border-bottom: 2px solid var(--gray-200);
        width: 100%;
    }
    .pending-item { font-size: .75rem !important; padding: .3rem .625rem !important; }

    /* KPI cards - 2 cols */
    .kpi-grid, #kpiCards { grid-template-columns: repeat(2, 1fr) !important; gap: .625rem !important; }
    .kpi-card { padding: .75rem .875rem !important; }
    .kpi-value { font-size: 1rem !important; }

    /* ADVANCE TRACKING */
    .at-stats { grid-template-columns: repeat(2, 1fr) !important; gap: .5rem !important; }
    .at-stat { padding: .75rem !important; }
    .at-stat-value { font-size: 1.125rem !important; }
    .at-stat-icon { width: 32px !important; height: 32px !important; }
    .at-toolbar { flex-direction: column !important; align-items: stretch !important; }
    .at-search { min-width: 0 !important; width: 100% !important; }
    .at-count { margin-left: 0 !important; text-align: center; }
    .at-table-card { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .at-table { min-width: 600px; }

    /* GRIDS - stack properly */
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 1rem !important; }
    .recon-grid, .metrics-grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* TABLES - horizontal scroll */
    .table-wrapper {
        border-radius: .75rem !important;
        margin: 0 -.25rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table { font-size: .75rem !important; min-width: 500px; }
    .data-table th,
    .data-table td { padding: .625rem .5rem !important; font-size: .6875rem !important; }
    .data-table th { font-size: .5625rem !important; white-space: nowrap; }
    .table-toolbar { flex-direction: column; gap: .5rem !important; padding: .75rem !important; }
    .table-search { min-width: 0 !important; width: 100% !important; }
    .table-pagination { flex-direction: column; gap: .5rem; text-align: center; padding: .75rem !important; }
    .table-pagination-btns { justify-content: center; }

    /* Column menu */
    .cm-menu { width: calc(100vw - 2rem) !important; max-width: 300px !important; left: 1rem !important; right: 1rem !important; }

    /* Action buttons in table */
    .action-cell { gap: .25rem !important; }
    .action-icon { width: 26px !important; height: 26px !important; }

    /* STATUS TABS & FILTERS */
    .status-tabs { flex-wrap: wrap !important; gap: .25rem !important; }
    .status-tab { font-size: .6875rem !important; padding: .3rem .625rem !important; }
    .filters-bar { flex-direction: column !important; align-items: stretch !important; }
    .filters-bar .form-input,
    .filters-bar .form-select { max-width: none !important; width: 100% !important; }

    /* CARDS */
    .card { padding: 1.125rem !important; }

    /* SETTINGS PAGE */
    .settings-tabs {
        gap: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .settings-tabs::-webkit-scrollbar { display: none; }
    .settings-tab { padding: .625rem .75rem !important; font-size: .75rem !important; white-space: nowrap; }
    .stab-content { max-width: 100% !important; }
    .s-card { padding: 1rem !important; }
    .info-grid { grid-template-columns: 1fr !important; }
    .pw-grid-3 { grid-template-columns: 1fr !important; }
    .notif-event-row { flex-direction: column !important; align-items: flex-start !important; gap: .5rem !important; }

    /* TEAM MANAGEMENT */
    .users-grid { grid-template-columns: 1fr !important; }
    .user-card { padding: 1rem !important; }
    .emp-stats, .users-stats { gap: .625rem !important; flex-wrap: wrap !important; }
    .emp-stat, .users-stat { font-size: .75rem !important; }

    /* MODALS */
    .modal-box {
        max-width: calc(100vw - 2rem) !important;
        padding: 1.5rem !important;
        margin: 1rem;
        max-height: 85vh !important;
    }
    .modal-form-body { padding: 1.25rem 1rem !important; }
    #addEmployerModal .modal-box { max-width: calc(100vw - 1rem) !important; }
    #addEmployerModal .modal-form-body { padding: 1rem !important; }

    /* DRAWERS */
    .ae-drawer { width: 100vw !important; max-width: 100vw !important; right: -100vw; }
    .review-drawer { width: 100vw !important; max-width: 100vw !important; }

    /* WITHDRAWAL FLOW */
    .withdrawal-form-card { padding: 1.25rem !important; }
    .amount-input-wrapper .form-input {
        font-size: 1.25rem !important;
        padding: 1rem 1.25rem !important;
        padding-inline-end: 3.5rem !important;
    }
    .quick-amounts { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: .375rem !important; }
    .quick-amount-btn { font-size: .75rem !important; padding: .5rem .25rem !important; }
    .eligibility-card { padding: 1.25rem !important; }
    .elig-row { font-size: .8125rem !important; flex-direction: column !important; gap: .25rem !important; }
    .fee-breakdown { padding: 1rem !important; }

    /* HR ADMIN */
    .bulk-bar {
        left: .75rem !important;
        right: .75rem !important;
        transform: none !important;
        padding: .5rem .75rem !important;
        border-radius: 12px !important;
    }
    .bulk-bar.show { bottom: 1rem !important; }
    .bb-actions { flex-wrap: wrap; gap: .25rem !important; }
    .bb-btn { font-size: .6875rem !important; padding: .3rem .5rem !important; }

    /* COMPLIANCE PAGE */
    .compliance-tabs, .report-tabs { flex-wrap: wrap !important; gap: .25rem !important; }

    /* PAGINATION */
    .ae-pagination { flex-direction: column !important; align-items: center !important; gap: .5rem !important; }

    /* NOTIFICATIONS & TOASTS */
    .notification-container { top: .75rem !important; right: .75rem !important; left: .75rem !important; max-width: none !important; }
    .notification { font-size: .75rem !important; padding: .75rem 1rem !important; }
    .toast { left: 1rem !important; right: 1rem !important; transform: none !important; max-width: none !important; }

    /* LOGIN */
    .login-card {
        max-width: calc(100vw - 2rem) !important;
        padding: 2rem 1.5rem !important;
        border-radius: 1.25rem !important;
        margin: 1rem;
    }

    /* BUTTONS & HEADINGS */
    .btn { font-size: .8125rem !important; padding: .625rem 1rem !important; }
    .btn-lg { padding: .75rem 1.5rem !important; font-size: .875rem !important; }
    .section-header { flex-direction: column; align-items: flex-start !important; gap: .5rem; }
    h1 { font-size: 1.25rem !important; }
    h2 { font-size: 1rem !important; }

    /* FORMS */
    .form-input, .form-select { font-size: .875rem !important; padding: .625rem .875rem !important; }
    .ed-grid-2 { grid-template-columns: 1fr !important; }
}


/* ======= SMALL PHONE - max 480px ======= */
@media (max-width: 480px) {
    /* KPIs: stack to 1 column */
    .kpi-grid, #kpiCards, .kpi-grid-compact { grid-template-columns: 1fr !important; }
    .stat-row { grid-template-columns: 1fr !important; }
    .recon-grid, .metrics-grid { grid-template-columns: 1fr !important; }
    .admin-grid { grid-template-columns: 1fr !important; }
    .earnings-grid { grid-template-columns: 1fr !important; }
    .at-stats { grid-template-columns: 1fr !important; }

    /* Login */
    .login-card { padding: 1.5rem 1.25rem !important; border-radius: 1rem !important; }

    /* Page */
    .page { padding: 0 .75rem 4rem !important; }
    .page-banner {
        margin: 0 -.75rem 1rem !important;
        padding: 3.5rem .75rem 1rem !important;
    }
    .page-banner h1 { font-size: 1.125rem !important; }
    .welcome-hero {
        margin: 0 -.75rem 1rem !important;
        padding: 3.5rem .75rem 1rem !important;
    }

    /* Tables: horizontal scroll */
    .data-table { min-width: 500px; }
    .data-table th,
    .data-table td { padding: .5rem .375rem !important; font-size: .625rem !important; }

    /* Modal: near full-screen */
    .modal-box {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
        max-width: calc(100vw - .5rem) !important;
        margin: .25rem !important;
    }

    /* Buttons */
    .btn { font-size: .75rem !important; padding: .5rem .75rem !important; }

    /* Hamburger adjustments */
    .mobile-menu-btn { top: .625rem; left: .625rem; width: 36px; height: 36px; }
    .mobile-menu-btn span { width: 16px; }
    .mobile-menu-btn span:nth-child(1) { top: 10px; }
    .mobile-menu-btn span:nth-child(2) { top: 17px; }
    .mobile-menu-btn span:nth-child(3) { top: 24px; }
    .mobile-menu-btn.open span:nth-child(1) { top: 17px; }
    .mobile-menu-btn.open span:nth-child(3) { top: 17px; }

    /* Quick amounts: 2 cols */
    .quick-amounts { grid-template-columns: repeat(2, 1fr) !important; }

    /* Wizard step options */
    .role-option-card { padding: .75rem !important; }
    .role-option-icon { width: 32px !important; height: 32px !important; font-size: 1rem !important; }

    /* HR Admin: banner actions stack */
    .page-banner .page-banner-row > div:last-child {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: .5rem !important;
    }
    .page-banner .page-banner-row > div:last-child .form-input {
        width: 100% !important;
        max-width: none !important;
    }
    .page-banner .btn-banner { width: 100% !important; text-align: center; justify-content: center; }

    /* HR Admin: emp stats 2 per row */
    .emp-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: .5rem !important;
    }
    .emp-stat strong { font-size: .9375rem !important; }

    /* HR Admin: wizard modal fills screen */
    #addEmpModal .modal-box,
    #addEmpModal .modal-box.wide {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh;
        max-height: 100vh;
    }
    .wizard-body { padding: 1rem !important; }
    .wizard-footer { padding: .75rem 1rem !important; }
    .method-picker, .group-sub-picker { grid-template-columns: 1fr !important; }

    /* HR Admin: result count + pagination */
    #resultCount { font-size: .75rem !important; }
    #pagination .btn { min-width: 28px !important; padding: .375rem .5rem !important; font-size: .6875rem !important; }

    /* Settings tabs */
    .settings-tab { padding: .5rem .625rem !important; font-size: .6875rem !important; }

    /* Company header tiny */
    .company-name-en { font-size: 1rem !important; }
    .company-meta { font-size: .6875rem !important; }

    /* Withdrawal form */
    .withdrawal-form-card { padding: 1rem !important; }
    .amount-input-wrapper .form-input { font-size: 1rem !important; padding: .875rem 1rem !important; }

    /* Employer add modal: full screen */
    #addEmployerModal .modal-box {
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    /* Welcome hero adjustments */
    .welcome-avatar { width: 36px !important; height: 36px !important; font-size: .875rem !important; }
    .welcome-name { font-size: 1rem !important; }
    .balance-hero .balance-amount { font-size: 1.25rem !important; }
}


/* ======= Safe area / bottom bar spacing ======= */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .page { padding-bottom: calc(3rem + env(safe-area-inset-bottom)) !important; }
}