/* ============================================================================
 UTSAVSAATHI GOD-MODE DESIGN SYSTEM
 Professional, Sleek, Modern Enterprise-Grade UI/UX
 Brand Colors Extracted from Official Logo:
 Primary Blue: #1A5FB4 | Magenta/Pink: #E91E8C | Warm Orange: #F7A14B
 ============================================================================ */

/* --- Typography & Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..800;1,9..40,400..800&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- CSS Variables --- */
:root {
 /* Brand Core Colors */
 --color-primary: #1A5FB4;
 --color-primary-dark: #0F4382;
 --color-primary-light: #EFF6FF;
 --color-primary-hover: #144F99;

 /* Accent Highlights from Logo Gradient */
 --color-pink: #E91E8C;
 --color-pink-light: #FCE7F3;
 --color-orange: #F7A14B;
 --color-orange-light: #FFEDD5;
 --color-gold: #F59E0B;

 /* State Colors */
 --color-success: #10B981;
 --color-success-bg: #ECFDF5;
 --color-success-dark: #047857;

 --color-danger: #EF4444;
 --color-danger-bg: #FEF2F2;
 --color-danger-dark: #B91C1C;

 --color-warning: #F59E0B;
 --color-warning-bg: #FFFBEB;
 --color-warning-dark: #B45309;

 --color-info: #3B82F6;
 --color-info-bg: #EFF6FF;

 /* Neutral Text & Surface Colors */
 --color-text-dark: #0F172A;
 --color-text-body: #334155;
 --color-text-muted: #64748B;
 --color-text-light: #94A3B8;

 --color-bg-body: #F8FAFC;
 --color-bg-card: #FFFFFF;
 --color-border: rgba(226, 232, 240, 0.8);
 --color-border-hover: rgba(26, 95, 180, 0.3);

 /* Gradients */
 --gradient-warm: linear-gradient(135deg, #F7A14B 0%, #E91E8C 100%);
 --gradient-brand: linear-gradient(135deg, #F7A14B 0%, #E91E8C 45%, #1A5FB4 100%);
 --gradient-brand-subtle: linear-gradient(135deg, rgba(247,161,75,0.08) 0%, rgba(233,30,140,0.06) 50%, rgba(26,95,180,0.08) 100%);
 --gradient-primary: linear-gradient(135deg, #1A5FB4 0%, #2563EB 100%);
 --gradient-dark: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
 --gradient-gold: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
 --gradient-emerald: linear-gradient(135deg, #10B981 0%, #059669 100%);

 /* Spacing */
 --space-2xs: 4px;
 --space-xs: 8px;
 --space-sm: 12px;
 --space-md: 20px;
 --space-lg: 28px;
 --space-xl: 40px;
 --space-2xl: 60px;

 /* Radius */
 --radius-xs: 6px;
 --radius-sm: 10px;
 --radius-md: 14px;
 --radius-lg: 20px;
 --radius-xl: 28px;
 --radius-full: 9999px;

 /* Fonts */
 --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
 --font-family-header: 'DM Sans', system-ui, -apple-system, sans-serif;

 /* Shadows (Multi-layered, Sleek & Modern) */
 --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
 --shadow-sm: 0 4px 12px -2px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
 --shadow-md: 0 12px 24px -4px rgba(15, 23, 42, 0.08), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
 --shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.04);
 --shadow-glow: 0 0 24px rgba(26, 95, 180, 0.22);

 /* Transitions */
 --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
 --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
 --transition-smooth: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ====== GLOBAL RESET & BASE ====== */
*, *::before, *::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 font-size: 16px;
 scroll-behavior: smooth;
 height: 100%;
 overflow-x: hidden !important;
}

body {
 font-family: var(--font-family-body);
 background-color: var(--color-bg-body);
 color: var(--color-text-body);
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 overflow-x: hidden !important;
}

a {
 color: var(--color-primary);
 text-decoration: none;
 transition: color var(--transition-fast);
}

a:hover {
 color: var(--color-primary-dark);
}

button {
 cursor: pointer;
 border: none;
 font-family: inherit;
 background: none;
}

img {
 max-width: 100%;
 height: auto;
 vertical-align: middle;
}
svg {
 vertical-align: middle;
}

/* ====== GUEST HEADER NAV BAR ====== */
.hdr {
 position: sticky;
 top: 0;
 left: 0;
 right: 0;
 height: 68px;
 min-height: 68px;
 box-sizing: border-box;
 z-index: 200;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 40px;
 background: rgba(255, 255, 255, 0.95);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--color-border);
 transition: background 0.2s ease, box-shadow 0.2s ease;
 will-change: transform;
}

.hdr-logo,
a.hdr-logo,
.hdr-logo span,
.hdr-logo-text,
.sidebar-brand span,
.sidebar-brand a,
.portal-brand-title {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
 font-size: 1.35rem !important;
 color: #1A5FB4 !important;
 font-weight: 800 !important;
 letter-spacing: -0.03em !important;
 text-decoration: none !important;
 height: 40px;
}

.hdr-logo img,
a.hdr-logo img {
 width: 40px !important;
 height: 40px !important;
 max-height: 40px !important;
 object-fit: contain;
 border-radius: 8px;
 display: inline-block;
 flex-shrink: 0;
}

.hdr-nav {
 display: flex;
 align-items: center;
 gap: 20px;
}

.hdr-nav a {
 color: var(--color-text-dark);
 font-family: var(--font-family-header);
 font-size: 0.938rem;
 font-weight: 600;
 transition: color var(--transition-fast);
}

.hdr-nav a:hover {
 color: var(--color-pink);
}

.hdr-btn {
 background: var(--gradient-brand);
 color: #FFFFFF !important;
 border-radius: var(--radius-full);
 padding: 9px 22px;
 font-size: 0.875rem;
 font-weight: 700;
 transition: all var(--transition-fast);
 box-shadow: 0 4px 14px rgba(233, 30, 140, 0.25);
 border: none;
 display: inline-flex;
 align-items: center;
 justify-content: center;
}

.hdr-btn:hover {
 transform: translateY(-1px);
 box-shadow: 0 6px 20px rgba(233, 30, 140, 0.35);
 opacity: 0.96;
}

.hdr-btn--ghost {
 background: transparent;
 border: 1.5px solid var(--color-border);
 color: var(--color-primary) !important;
 box-shadow: none;
}

.hdr-btn--ghost:hover {
 border-color: var(--color-primary);
 background: var(--color-primary-light);
 transform: translateY(-1px);
}

.hdr-menu-btn {
 display: none;
 flex-direction: column;
 justify-content: space-between;
 width: 24px;
 height: 18px;
 background: transparent;
 border: none;
 cursor: pointer;
 z-index: 210;
 padding: 0;
}

.hdr-menu-btn .bar {
 width: 100%;
 height: 2px;
 background-color: var(--color-primary);
 border-radius: 2px;
 transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
 .hdr {
 padding: 12px 20px;
 }
 .hdr-menu-btn {
 display: flex;
 }
 .hdr-nav {
 position: fixed;
 top: 0;
 right: -100%;
 width: 260px;
 height: 100vh;
 background: rgba(255, 255, 255, 0.98);
 backdrop-filter: blur(20px);
 border-left: 1px solid var(--color-border);
 box-shadow: var(--shadow-lg);
 flex-direction: column;
 align-items: flex-start;
 padding: 80px 24px;
 gap: 20px;
 transition: right var(--transition-smooth);
 z-index: 205;
 }
 .hdr-nav.active {
 right: 0;
 }
}

/* Custom Sleek Scrollbar */
::-webkit-scrollbar {
 width: 6px;
 height: 6px;
}
::-webkit-scrollbar-track {
 background: transparent;
}
::-webkit-scrollbar-thumb {
 background: #CBD5E1;
 border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
 background: #94A3B8;
}

/* ====== TYPOGRAPHY ====== */
h1, h2, h3, h4, h5, h6 {
 font-family: var(--font-family-header);
 font-weight: 700;
 color: var(--color-text-dark);
 line-height: 1.25;
 letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

/* ====== ANIMATIONS & KEYFRAMES ====== */
@keyframes fadeInUp {
 from {
 opacity: 0;
 transform: translateY(16px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
}

@keyframes fadeInScale {
 from {
 opacity: 0;
 transform: scale(0.96);
 }
 to {
 opacity: 1;
 transform: scale(1);
 }
}

@keyframes slideInRight {
 from {
 opacity: 0;
 transform: translateX(20px);
 }
 to {
 opacity: 1;
 transform: translateX(0);
 }
}

@keyframes shimmer {
 0% { background-position: -200% 0; }
 100% { background-position: 200% 0; }
}

@keyframes pulseDot {
 0%, 100% { transform: scale(1); opacity: 1; }
 50% { transform: scale(1.4); opacity: 0.6; }
}

.anim-fade-in { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.anim-scale-in { animation: fadeInScale 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.anim-slide-right { animation: slideInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* 10/10 Tab Switcher Keyframe Animation */
@keyframes tabSlideFade {
 0% {
 opacity: 0;
 transform: translateY(12px) scale(0.99);
 }
 100% {
 opacity: 1;
 transform: translateY(0) scale(1);
 }
}

@keyframes pulseGlow {
 0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
 50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

@keyframes btnShimmer {
 0% { background-position: -200% 0; }
 100% { background-position: 200% 0; }
}

/* ====== SLEEK GLASS CARDS & SURFACES (10/10 UI) ====== */
.glass-card,
.rounded-card,
.table-container-card,
.form-panel-card,
.dashboard-card,
.kpi-card {
 background: rgba(255, 255, 255, 0.95);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border: 1px solid rgba(226, 232, 240, 0.9);
 border-radius: 20px;
 box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02);
 transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 position: relative;
 overflow: hidden;
}

.glass-card:hover,
.rounded-card:hover,
.table-container-card:hover,
.form-panel-card:hover,
.dashboard-card:hover,
.kpi-card:hover {
 border-color: rgba(26, 95, 180, 0.25);
 box-shadow: 0 16px 36px -8px rgba(26, 95, 180, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
 transform: translateY(-3px);
}

/* KPI Card Modern Accent Line */
.kpi-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3.5px;
 background: var(--gradient-brand);
 opacity: 0;
 transition: opacity 0.3s ease;
}

.kpi-card:hover::before {
 opacity: 1;
}

/* ====== BUTTON SYSTEM ====== */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 11px 22px;
 font-family: var(--font-family-header);
 font-size: 0.938rem;
 font-weight: 700;
 border-radius: 12px;
 transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
 cursor: pointer;
 white-space: nowrap;
 user-select: none;
 box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
 border: none;
}

.btn:hover {
 transform: translateY(-2px) scale(1.01);
 box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.btn:active {
 transform: translateY(0) scale(0.98);
}

.btn-primary {
 background: linear-gradient(135deg, #1A5FB4 0%, #0F4382 100%);
 color: #FFFFFF !important;
}
.btn-primary:hover {
 box-shadow: 0 8px 24px -4px rgba(26, 95, 180, 0.45);
}

.btn-accent {
 background: var(--gradient-brand);
 background-size: 200% auto;
 color: #FFFFFF !important;
 box-shadow: 0 4px 16px rgba(233, 30, 140, 0.28);
}
.btn-accent:hover {
 box-shadow: 0 10px 28px rgba(233, 30, 140, 0.45);
 background-position: right center;
}

.btn-success {
 background: var(--color-success);
 color: #FFFFFF !important;
}
.btn-success:hover {
 background: var(--color-success-dark);
 box-shadow: 0 8px 20px -4px rgba(16, 185, 129, 0.4);
}

.btn-danger {
 background: var(--color-danger);
 color: #FFFFFF !important;
}
.btn-danger:hover {
 background: var(--color-danger-dark);
 box-shadow: 0 8px 20px -4px rgba(239, 68, 68, 0.4);
}

.btn-outline {
 background: transparent;
 border: 1.5px solid var(--color-border);
 color: var(--color-text-dark);
}
.btn-outline:hover {
 border-color: var(--color-primary);
 color: var(--color-primary);
 background: var(--color-primary-light);
}

.btn-action {
 padding: 6px 14px;
 font-size: 0.813rem;
 font-weight: 600;
 border-radius: var(--radius-sm);
 transition: all var(--transition-fast);
 display: inline-flex;
 align-items: center;
 gap: 6px;
}

/* ====== FORM CONTROLS ====== */
.form-group, .form-group-inline {
 margin-bottom: 20px;
}

.form-label, label {
 display: block;
 font-family: var(--font-family-header);
 font-size: 0.875rem;
 font-weight: 600;
 color: var(--color-text-dark);
 margin-bottom: 6px;
}

.input-control, .form-control, select, textarea {
 width: 100%;
 padding: 11px 16px;
 font-family: var(--font-family-body);
 font-size: 0.938rem;
 color: var(--color-text-dark);
 background: #FFFFFF;
 border: 1.5px solid #E2E8F0;
 border-radius: var(--radius-sm);
 transition: all var(--transition-fast);
 outline: none;
}

.input-control:hover, .form-control:hover, select:hover, textarea:hover {
 border-color: #CBD5E1;
}

.input-control:focus, .form-control:focus, select:focus, textarea:focus {
 border-color: var(--color-primary);
 box-shadow: 0 0 0 3px rgba(26, 95, 180, 0.15);
 background: #FFFFFF;
}

.input-control::placeholder, .form-control::placeholder {
 color: var(--color-text-light);
}

/* ====== SLEEK BADGES ====== */
.badge, .payment-badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 4px 12px;
 font-family: var(--font-family-header);
 font-size: 0.75rem;
 font-weight: 700;
 border-radius: var(--radius-full);
 text-transform: uppercase;
 letter-spacing: 0.04em;
 white-space: nowrap;
}

.badge-primary, .payment-badge.bank {
 background: var(--color-primary-light);
 color: var(--color-primary);
}

.badge-success, .payment-badge.cash {
 background: var(--color-success-bg);
 color: var(--color-success-dark);
}

.badge-warning, .payment-badge.upi {
 background: #E0F2FE;
 color: #0369A1;
}

.badge-danger, .payment-badge.other {
 background: var(--color-pink-light);
 color: var(--color-pink);
}

/* ====== TABLES ====== */
.table-container-card {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.responsive-table-wrap, div[style*="overflow-x:auto"] {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

.responsive-table-wrap::-webkit-scrollbar, div[style*="overflow-x:auto"]::-webkit-scrollbar {
  height: 5px;
}
.responsive-table-wrap::-webkit-scrollbar-thumb, div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb {
  background: rgba(26, 95, 180, 0.25);
  border-radius: 4px;
}

.premium-table, .data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

.premium-table th, .data-table th {
  padding: 10px 12px;
  background: #F8FAFC;
  color: var(--color-text-muted);
  font-family: var(--font-family-header);
  font-weight: 700;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  border-bottom: 1.5px solid #E2E8F0;
  white-space: nowrap;
}

.premium-table th:first-child, .data-table th:first-child {
  border-top-left-radius: var(--radius-sm);
}
.premium-table th:last-child, .data-table th:last-child {
  border-top-right-radius: var(--radius-sm);
}

.premium-table td, .data-table td {
  padding: 11px 12px;
  color: var(--color-text-body);
  border-bottom: 1px solid #F1F5F9;
  transition: background var(--transition-fast);
  font-size: 0.86rem;
}

.premium-table td.break-word, .data-table td.break-word {
  white-space: normal;
  word-break: break-word;
}

.premium-table tr:hover td, .data-table tr:hover td {
  background: #F8FAFC;
}

.premium-table tr:last-child td, .data-table tr:last-child td {
 border-bottom: none;
}

/* ====== AUTH PAGES (LOGIN / REGISTER / FORGOT) ====== */
.auth-page-wrapper {
 min-height: 100vh;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
 background: radial-gradient(circle at 10% 20%, rgba(247, 161, 75, 0.08) 0%, rgba(233, 30, 140, 0.05) 50%, rgba(26, 95, 180, 0.08) 100%), #F8FAFC;
 position: relative;
 overflow: hidden;
}

.auth-card {
 width: 100%;
 max-width: 440px;
 background: rgba(255, 255, 255, 0.95);
 backdrop-filter: blur(20px);
 border: 1px solid var(--color-border);
 border-radius: var(--radius-xl);
 padding: 40px 36px;
 box-shadow: var(--shadow-lg);
 animation: fadeInScale 0.4s cubic-bezier(0.16, 1, 0.3, 1);
 position: relative;
 z-index: 10;
}

.auth-emblem {
 text-align: center;
 margin-bottom: 20px;
}
.auth-emblem img {
 height: 64px;
 width: auto;
 filter: drop-shadow(0 4px 12px rgba(26, 95, 180, 0.15));
}

/* ====== MASTER PORTAL LAYOUT ====== */
.portal-layout {
 display: flex;
 min-height: 100vh;
}

.portal-sidebar {
 width: 260px;
 background: #FFFFFF;
 border-right: 1px solid var(--color-border);
 display: flex;
 flex-direction: column;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 z-index: 100;
 transition: transform var(--transition-smooth);
}

.sidebar-brand {
 padding: 0 24px;
 display: flex;
 align-items: center;
 gap: 12px;
 border-bottom: 1px solid var(--color-border);
 height: 68px;
 box-sizing: border-box;
 flex-shrink: 0;
}

.sidebar-brand img {
 height: 38px !important;
 width: 38px !important;
 max-height: 38px !important;
 object-fit: contain;
 border-radius: 8px;
 flex-shrink: 0;
 display: block;
}

.sidebar-brand span {
 font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
 font-weight: 800 !important;
 font-size: 1.25rem !important;
 color: #1A5FB4 !important;
 letter-spacing: -0.02em;
 white-space: nowrap;
}

.sidebar-menu {
 padding: 20px 16px;
 display: flex;
 flex-direction: column;
 gap: 6px;
 flex: 1;
 overflow-y: auto;
}

.sidebar-menu a {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 11px 16px;
 color: #475569;
 font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
 font-size: 0.938rem;
 font-weight: 600;
 border-radius: 12px;
 transition: all 0.2s ease;
 text-decoration: none !important;
}

.sidebar-menu a:hover {
 background: #EFF6FF;
 color: #1A5FB4 !important;
 transform: translateX(3px);
}

.sidebar-menu a.active {
 background: #1A5FB4 !important;
 color: #FFFFFF !important;
 font-weight: 700;
 box-shadow: 0 4px 12px rgba(26, 95, 180, 0.25);
}

.sidebar-menu a.active span {
 color: #FFFFFF !important;
}

.sidebar-footer {
 padding: 16px;
 border-top: 1px solid var(--color-border);
 margin-top: auto;
 flex-shrink: 0;
}

.btn-logout {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 10px;
 background: #FEF2F2;
 color: #EF4444 !important;
 font-weight: 700;
 font-size: 0.875rem;
 border-radius: 10px;
 transition: all 0.2s ease;
 text-decoration: none !important;
}

.btn-logout:hover {
 background: #FEE2E2;
 transform: translateY(-1px);
}

.portal-main {
 margin-left: 260px;
 flex: 1;
 display: flex;
 flex-direction: column;
 min-width: 0;
 width: calc(100% - 260px);
 max-width: calc(100% - 260px);
}

.portal-header {
 height: 68px;
 background: rgba(255, 255, 255, 0.96);
 backdrop-filter: blur(12px);
 border-bottom: 1px solid var(--color-border);
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 0 28px;
 position: sticky;
 top: 0;
 z-index: 90;
 box-sizing: border-box;
 width: 100%;
}

.portal-sidebar-toggle {
 display: none;
 align-items: center;
 justify-content: center;
 width: 40px;
 height: 40px;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 0;
 flex-shrink: 0;
 border-radius: 10px;
 transition: background 0.2s ease;
}

.portal-sidebar-toggle:hover {
 background: rgba(26, 95, 180, 0.08);
}

.portal-content {
 margin-left: 0;
 flex: 1;
 padding: 32px 36px;
 background: var(--color-bg-body);
 box-sizing: border-box;
 width: 100%;
}

.header-title-responsive {
 font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
 font-weight: 800 !important;
 font-size: 1.25rem !important;
 color: #1A5FB4 !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

@media (max-width: 992px) {
 .portal-sidebar {
 position: fixed !important;
 top: 0 !important;
 bottom: 0 !important;
 left: 0 !important;
 height: 100vh !important;
 z-index: 1050 !important;
 transform: translateX(-100%) !important;
 transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
 overflow-y: auto !important;
 -webkit-overflow-scrolling: touch !important;
 }
 .portal-sidebar.active {
 transform: translateX(0) !important;
 }

 .portal-main {
 margin-left: 0 !important;
 width: 100% !important;
 max-width: 100% !important;
 }

 .portal-sidebar-toggle {
 display: flex !important;
 cursor: pointer !important;
 touch-action: manipulation !important;
 z-index: 1000 !important;
 }

 .portal-header {
 padding: 0 14px !important;
 }

 .header-title-responsive {
 font-size: 0.95rem !important;
 max-width: 180px;
 }

 .header-search-bar {
 display: none !important;
 }

 .header-user-text {
 display: none !important;
 }

 .portal-content {
 padding: 20px 14px 84px 14px !important;
 }
}

/* ====== LAYOUT & FORM RESPONSIVE ALIGNMENT FIXES ====== */
*, *::before, *::after {
 box-sizing: border-box;
}

html, body {
 overflow-x: hidden !important;
 width: 100%;
 max-width: 100%;
}

.portal-content {
 box-sizing: border-box !important;
 max-width: 100% !important;
 overflow-x: hidden !important;
}

.panel-split {
 display: grid;
 grid-template-columns: 1.4fr 1fr;
 gap: 24px;
 align-items: start;
 width: 100%;
 box-sizing: border-box;
}

@media (max-width: 1024px) {
 .panel-split {
 grid-template-columns: 1fr !important;
 gap: 20px;
 }
}

.form-panel-card,
.table-container-card,
.rounded-card,
.glass-card,
.dashboard-card,
.kpi-card {
 width: 100% !important;
 max-width: 100% !important;
 box-sizing: border-box !important;
 overflow: hidden;
}

.form-group-inline,
.form-group {
 width: 100% !important;
 max-width: 100% !important;
 box-sizing: border-box !important;
}

.input-control,
.form-control,
select,
textarea,
button,
input {
 box-sizing: border-box !important;
 max-width: 100% !important;
}

@media (max-width: 768px) {
 .form-panel-card,
 .table-container-card,
 .rounded-card {
 padding: 18px 14px !important;
 }
}

/* ====== MOBILE BOTTOM NAVIGATION BAR (HIG THUMB-REACH) ====== */
.mobile-bottom-nav {
 display: none;
}

@media (max-width: 992px) {
 .mobile-bottom-nav {
 display: flex;
 position: fixed;
 bottom: 0;
 left: 0;
 right: 0;
 height: 64px;
 background: rgba(255, 255, 255, 0.98);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border-top: 1px solid var(--color-border);
 box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.08);
 z-index: 150;
 justify-content: space-around;
 align-items: center;
 padding: 0 8px;
 box-sizing: border-box;
 }

 .mobile-bottom-nav a {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 3px;
 color: #64748b;
 font-size: 0.72rem;
 font-weight: 600;
 text-decoration: none !important;
 padding: 6px 12px;
 border-radius: 12px;
 transition: all 0.2s ease;
 flex: 1;
 max-width: 72px;
 }

 .mobile-bottom-nav a svg {
 width: 20px;
 height: 20px;
 stroke-width: 2.2;
 transition: transform 0.2s ease;
 }

 .mobile-bottom-nav a:hover,
 .mobile-bottom-nav a.active {
 color: #1A5FB4 !important;
 font-weight: 700;
 }

 .mobile-bottom-nav a.active svg {
 stroke: #1A5FB4;
 transform: translateY(-2px);
 }

 .mobile-bottom-nav a.active span {
 color: #1A5FB4 !important;
 }
}

/* ====== RESPONSIVE UTILITIES ====== */
@media (max-width: 640px) {
 .kpi-grid {
 grid-template-columns: 1fr !important;
 }
 .auth-card {
 padding: 28px 20px;
 }
}

/* ====== BULLETPROOF LANGUAGE TOGGLE BADGE STYLING ====== */
.lang-toggle-badge {
 display: inline-flex !important;
 align-items: center !important;
 justify-content: center !important;
 gap: 6px !important;
 padding: 6px 14px !important;
 height: 36px !important;
 min-height: 36px !important;
 border-radius: 20px !important;
 border: 1.5px solid rgba(26, 95, 180, 0.3) !important;
 background: #f0f7ff !important;
 color: #1A5FB4 !important;
 font-size: 0.82rem !important;
 font-weight: 700 !important;
 white-space: nowrap !important;
 cursor: pointer !important;
 transition: all 0.2s ease !important;
 box-shadow: 0 2px 6px rgba(26, 95, 180, 0.08) !important;
 user-select: none !important;
 flex-shrink: 0 !important;
 outline: none !important;
 line-height: 1 !important;
}

.lang-toggle-badge:hover {
 background: #1A5FB4 !important;
 color: #FFFFFF !important;
 border-color: #1A5FB4 !important;
 box-shadow: 0 4px 12px rgba(26, 95, 180, 0.25) !important;
}

/* Mobile View Polish & Alignment Fixes */
@media (max-width: 768px) {
 .portal-header {
 padding: 12px 16px !important;
 gap: 10px !important;
 }
 .header-search-bar {
 display: none !important;
 }
 .portal-brand-title {
 font-size: 1.02rem !important;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 }
 .db-tab-navigation {
 display: flex !important;
 overflow-x: auto !important;
 white-space: nowrap !important;
 -webkit-overflow-scrolling: touch;
 padding-bottom: 6px !important;
 margin-bottom: 16px !important;
 gap: 8px !important;
 }
 .db-tab-btn {
 padding: 8px 14px !important;
 font-size: 0.82rem !important;
 flex-shrink: 0 !important;
 }
 .premium-table {
 min-width: 600px;
 }
 .table-container-card {
 overflow-x: auto !important;
 -webkit-overflow-scrolling: touch;
 }
 .form-row, .grid-2, .grid-3 {
 grid-template-columns: 1fr !important;
 }
 .hdr-nav {
 gap: 8px !important;
 }
 .hdr-btn {
 padding: 6px 12px !important;
 font-size: 0.8rem !important;
 }
}

/* ====== BULLETPROOF FLOATING WHATSAPP BUTTON ====== */
.wa-float-btn {
 position: fixed !important;
 bottom: 24px !important;
 right: 24px !important;
 z-index: 2147483647 !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 58px !important;
 height: 58px !important;
 background: #25D366 !important;
 border-radius: 50% !important;
 box-shadow: 0 6px 20px rgba(37,211,102,0.45) !important;
 text-decoration: none !important;
 transition: transform 0.25s cubic-bezier(.4,2,.6,1), box-shadow 0.25s ease !important;
 pointer-events: auto !important;
}
.wa-float-btn:hover {
 transform: scale(1.1) translateY(-3px) !important;
 box-shadow: 0 10px 26px rgba(37,211,102,0.6) !important;
}
.wa-float-btn:active { transform: scale(0.92) !important; }

.wa-float-btn svg {
 width: 32px !important;
 height: 32px !important;
 fill: #ffffff !important;
}

.wa-float-btn::after {
 content: '' !important;
 position: absolute !important;
 inset: -5px !important;
 border-radius: 50% !important;
 border: 2.5px solid rgba(37,211,102,0.4) !important;
 animation: waPulse 2s ease-out infinite !important;
}

@keyframes waPulse {
 0% { transform: scale(1); opacity: 0.8; }
 70% { transform: scale(1.3); opacity: 0; }
 100% { transform: scale(1.3); opacity: 0; }
}

@media (max-width: 768px) {
 .wa-float-btn {
 bottom: 78px !important;
 right: 16px !important;
 width: 52px !important;
 height: 52px !important;
 box-shadow: 0 6px 18px rgba(37,211,102,0.45) !important;
 }
 .wa-float-btn svg {
 width: 28px !important;
 height: 28px !important;
 }
 .wa-float-btn::after {
 inset: -4px !important;
 border-width: 2px !important;
 }
}