:root{
      --bg: #f5f7fa;
      --bg-soft: #f9fafb;
      --card: #ffffff;
      --accent: #0d6efd;
      --accent-hover: #0a58ca;
      --accent-soft: #e7f1ff;
      --accent-strong: #084298;
      --border: #e2e8f0;
      --text: #1e293b;
      --muted: #6b7280;
      --danger: #dc3545;
      --radius-lg: 18px;
      --radius-md: 12px;
      --shadow-soft: 0 18px 40px rgba(15,23,42,0.18);
      --shadow-medium: 0 12px 32px rgba(15,23,42,0.12);
      --shadow-large: 0 24px 64px rgba(15,23,42,0.16);
      --shadow-glow: 0 0 20px rgba(13,110,253,0.3);
      --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      --gradient-accent: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
      --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.9) 100%);
    
      /* Typography Scale */
      --fs-xs: 0.75rem;    /* 12px */
      --fs-sm: 0.875rem;   /* 14px */
      --fs-md: 1rem;        /* 16px */
      --fs-lg: 1.125rem;    /* 18px */
      --fs-xl: 1.25rem;     /* 20px */
      --fs-2xl: 1.5rem;     /* 24px */
      
      /* Spacing Scale */
      --space-xs: 0.25rem;  /* 4px */
      --space-sm: 0.5rem;   /* 8px */
      --space-md: 1rem;     /* 16px */
      --space-lg: 1.5rem;   /* 24px */
      --space-xl: 2rem;     /* 32px */
      
      /* Line Heights */
      --lh-tight: 1.25;
      --lh-normal: 1.5;
      --lh-relaxed: 1.75;
      
      /* App Container */
      --app-max-width: 1200px;
      --app-padding: 16px 24px;
    }
    /* Luxury Theme */
    body.theme-luxury{
      --bg: #0b1026;
      --bg-soft: #11183a;
      --card: rgba(20,28,54,0.82);
      --accent: #0a6ed1;
      --accent-hover: #0a58ca;
      --accent-soft: rgba(10,110,209,0.12);
      --accent-strong: #084298;
      --border: rgba(148,163,184,0.25);
      --text: #e6edf3;
      --muted: #9aa4b2;
      --danger: #dc2626;
      --shadow-soft: 0 20px 50px rgba(0,0,0,0.35);
      --shadow-medium: 0 26px 60px rgba(0,0,0,0.38);
      --shadow-large: 0 36px 80px rgba(0,0,0,0.45);
      --shadow-glow: 0 0 28px rgba(10,110,209,0.35);
      --gradient-primary: linear-gradient(135deg, #0b1026 0%, #11183a 65%, #0b1026 100%);
      --gradient-accent: linear-gradient(135deg, #0a6ed1 0%, #084298 100%);
      --gradient-card: linear-gradient(135deg, rgba(20,28,54,0.92) 0%, rgba(20,28,54,0.88) 100%);
    }
    body.theme-dark{
      --bg: #0d1117;
      --bg-soft: #161b22;
      --card: #161b22;
      --accent: #58a6ff;
      --accent-hover: #1f6feb;
      --accent-soft: #1e3a8a;
      --accent-strong: #388bfd;
      --border: #30363d;
      --text: #e6edf3;
      --muted: #8b949e;
      --danger: #f85149;
      --shadow-soft: 0 18px 40px rgba(0,0,0,0.5);
      --shadow-medium: 0 12px 32px rgba(0,0,0,0.4);
      --shadow-large: 0 24px 64px rgba(0,0,0,0.6);
      --shadow-glow: 0 0 20px rgba(88,166,255,0.4);
      --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      --gradient-accent: linear-gradient(135deg, #58a6ff 0%, #1f6feb 100%);
      --gradient-card: linear-gradient(135deg, rgba(22,27,34,0.95) 0%, rgba(22,27,34,0.9) 100%);
    }
    body.theme-corporate{
      --bg: #eef2f6;
      --bg-soft: #f1f5f9;
      --card: #ffffff;
      --accent: #1d4ed8;
      --accent-hover: #1e40af;
      --accent-soft: #dbeafe;
      --accent-strong: #1e3a8a;
      --border: #cbd5e1;
      --text: #0f172a;
      --muted: #64748b;
      --danger: #dc2626;
      --shadow-soft: 0 18px 40px rgba(30,64,175,0.15);
      --shadow-medium: 0 12px 32px rgba(30,64,175,0.12);
      --shadow-large: 0 24px 64px rgba(30,64,175,0.18);
      --shadow-glow: 0 0 20px rgba(29,78,216,0.3);
      --gradient-primary: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
      --gradient-accent: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
      --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.95) 100%);
    }
    *{box-sizing:border-box;margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif}
    body{
      background:var(--bg);
      min-height:100vh;
      color:var(--text);
      transition:background 0.3s ease, color 0.3s ease;
      font-size: var(--fs-sm);
      line-height: var(--lh-normal);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      position: relative;
    }
    /* Subtle gradient + noise overlay */
    body::before{
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(1200px 600px at 10% 0%, rgba(10,110,209,0.10), transparent 60%),
        radial-gradient(900px 500px at 90% 100%, rgba(248,196,113,0.08), transparent 60%);
      z-index: -1;
    }
    body::after{
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
      background-size: 48px 48px;
      opacity: 0.18;
      z-index: -1;
    }
    button,input,select{font:inherit;font-size: var(--fs-sm);}
    .hidden{display:none !important;}

    /* Layout */
    .screen{display:none;min-height:100vh;}
    .screen.active{display:flex;}

    /* LOGIN */
    #screen-login{
      align-items:center;
      justify-content:center;
      padding:var(--space-md);
    }
    .login-shell{
      width:100%;
      max-width:880px;
      display:flex;
      gap:24px;
      backdrop-filter:blur(22px);
      background:var(--card);
      border-radius:32px;
      box-shadow:var(--shadow-soft);
      border:1px solid var(--border);
      padding:26px 28px;
    }
    @media (max-width:720px){
      .login-shell{flex-direction:column;}
    }
    .login-brand{
      flex:1;
      display:flex;
      flex-direction:column;
      gap:14px;
      border-inline-start:1px solid var(--border);
      padding-inline-start:18px;
    }
    [dir="rtl"] .login-brand{
      border-inline-start:none;
      border-inline-end:1px solid var(--border);
      padding-inline-start:0;
      padding-inline-end:18px;
    }
    .login-form-side{flex:0 0 280px;}
    .login-logo{
      width:110px;
      height:110px;
      border-radius:30px;
      object-fit:cover;
      margin-bottom:14px;
      box-shadow:0 14px 40px rgba(15,23,42,0.30);
      background:transparent;
    }
    
    /* Override for app-logo-large on login */
    .login-card .app-logo-large {
      max-height: 110px;
      border-radius: 30px;
      box-shadow: 0 14px 40px rgba(15,23,42,0.30);
      margin-bottom: 14px;
    }

    .brand-logo-big{
      width:120px;
      height:120px;
      border-radius:36px;
      background:radial-gradient(circle at 20% 20%,#e0f2fe,#eff6ff 40%,#dbeafe 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 22px 48px rgba(15,23,42,0.35);
      position:relative;
      overflow:hidden;
    }
    .brand-logo-mark{
      position:relative;
      width:78px;
      height:78px;
      border-radius:26px;
      background:linear-gradient(145deg,#0ea5e9,#22c55e);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow:0 16px 32px rgba(15,23,42,0.55);
    }
    .brand-logo-mark::before{
      content:'';
      position:absolute;
      width:50px;
      height:20px;
      border-radius:999px;
      background:linear-gradient(90deg,#ffffff,#e5e7eb);
      box-shadow:0 8px 16px rgba(15,23,42,0.36);
    }
    .brand-logo-mark::after{
      content:'';
      position:absolute;
      width:18px;
      height:18px;
      border-radius:999px;
      border:2px solid rgba(8,47,73,0.4);
      box-shadow:0 0 0 3px rgba(56,189,248,0.45);
      right:9px;
      top:9px;
      background:rgba(15,23,42,0.08);
    }
    .logo-wordmark{
      margin-top:10px;
      font-weight:800;
      font-size:20px;
      letter-spacing:0.12em;
      text-transform:uppercase;
      color:var(--text);
    }
    .logo-sub{
      font-size:11px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:0.17em;
    }
    .login-heading{
      margin-top:10px;
      font-size:18px;
      font-weight:600;
      color:var(--text);
    }
    .login-desc{
      font-size:13px;
      color:var(--muted);
      max-width:320px;
    }
    .login-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }
    .badge-soft{
      padding:4px 10px;
      border-radius:999px;
      border:1px solid var(--border);
      font-size:11px;
      color:var(--text);
      background:var(--bg-soft);
    }
    .login-form-card{
      background:var(--bg-soft);
      border-radius:20px;
      padding:18px 18px 20px;
      border:1px solid var(--border);
    }
    .login-form-card h2{
      font-size:16px;
      margin-bottom:4px;
      color:var(--text);
    }
    .login-form-card p{
      font-size:12px;
      color:var(--muted);
      margin-bottom:14px;
    }
    .field{
      margin-bottom:var(--space-xs);
      display:flex;
      flex-direction:column;
      gap:var(--space-xs);
    }
    .field label{
      font-size:var(--fs-xs);
      color:var(--muted);
      line-height:var(--lh-tight);
    }
    .field input,.field select{
      border-radius:var(--radius-md);
      border:1px solid var(--border);
      padding:var(--space-sm) var(--space-md);
      background:var(--card);
      outline:none;
      color:var(--text);
      font-size:var(--fs-sm);
      line-height:var(--lh-normal);
    }
    .field input:focus,.field select:focus{
      border-color:var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-glow);
      background:var(--card);
      transform: translateY(-1px);
      outline: none;
    }
    .field input, .field select {
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .btn{
      border:none;
      border-radius:var(--radius-md);
      padding:var(--space-sm) var(--space-md);
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:var(--space-xs);
      font-size:var(--fs-sm);
      white-space:nowrap;
      line-height:var(--lh-tight);
    }
    .btn-primary{
      background: var(--gradient-accent);
      color:#ffffff;
      box-shadow: var(--shadow-soft), var(--shadow-glow);
      position: relative;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s ease;
    }
    .btn-primary:hover::before {
      left: 100%;
    }
    .btn-primary:hover{
      background: var(--gradient-accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium), var(--shadow-glow);
    }
    .btn-primary:active{
      transform: translateY(0);
      box-shadow: var(--shadow-soft);
    }
    .btn-outline{
      background:transparent;
      border:1px solid var(--border);
      color:var(--text);
    }
    .btn-outline:hover{
      background:var(--bg-soft);
    }
    .quick-filter.active{
      background:var(--accent-soft);
      border-color:var(--accent);
      color:var(--accent-strong);
    }
    .btn:disabled{
      opacity:0.6;
      cursor:default;
      box-shadow:none;
    }
    .row{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
    }

    .subtabs{
      display:inline-flex;
      gap:8px;
      padding:3px;
      border-radius:999px;
      background:rgba(15,23,42,0.05);
      margin-bottom:12px;
    }
    .subtab-btn{
      border:none;
      border-radius:999px;
      padding:6px 16px;
      font-size:13px;
      background:transparent;
      cursor:pointer;
      color:var(--text);
    }
    .subtab-btn.active{
      background:var(--accent);
      color:#ffffff;
      box-shadow:var(--shadow-soft);
    }
    .subtab-panel{display:none;}
    .subtab-panel.active{display:block;}

    .kpi-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:12px;
      margin-bottom:12px;
    }
    .kpi-card{
      border-radius:16px;
      padding:14px 16px;
      background:var(--card);
      box-shadow:var(--shadow-soft);
      border:1px solid var(--border);
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .kpi-label{
      font-size:13px;
      opacity:0.7;
    }
    .kpi-value{
      font-size:20px;
      font-weight:700;
    }

    .profit-bars{
      margin-top:10px;
      display:flex;
      gap:4px;
      align-items:flex-end;
      height:80px;
    }
    .profit-bar{
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-end;
      font-size:10px;
    }
    .profit-bar-inner{
      width:70%;
      border-radius:6px 6px 0 0;
    }
    .profit-bar-inner.sales{background:#0ea5e9;}
    .profit-bar-inner.purchases{background:#f97316;}
    .profit-bar-inner.expenses{background:#ef4444;}
    .profit-bar-inner.profit{background:#22c55e;}
    .profit-filter-bar{
      display:flex;
      gap:8px;
      align-items:center;
      margin-bottom:10px;
      padding:8px;
      background:var(--bg-soft);
      border-radius:var(--radius-md);
    }
    .profit-filter-btn{
      border:none;
      border-radius:999px;
      padding:4px 12px;
      font-size:13px;
      cursor:pointer;
      background:var(--bg-soft);
      color:var(--text);
    }
    .profit-filter-btn.active{
      background:var(--accent);
      color:#fff;
    }
    #profit-period-select{
      min-width:140px;
    }

    /* APP */
    #screen-app{
      flex-direction:column;
      min-height:100vh;
    }
    #app-shell{
      display:none;
      flex:1;
      min-height:0;
    }
    #app-shell.show{
      display:flex;
    }
    .app-shell{
      display:flex;
      flex:1;
      min-height:0;
    }
    .sidebar{
      width:230px;
      background:var(--card);
      color:var(--text);
      padding:14px 12px 16px;
      display:flex;
      flex-direction:column;
      gap:16px;
      border-right:1px solid var(--border);
    }
    .app-main{
      flex:1;
      display:flex;
      flex-direction:column;
      min-height:0;
      background:var(--bg);
    }
    /* === RTL Fix for Dashboard + Sidebar === */
    [dir="rtl"] body,
    [dir="rtl"] .app-shell,
    [dir="rtl"] .dashboard-header,
    [dir="rtl"] .sidebar{
      direction: rtl !important;
      text-align: right !important;
    }
    [dir="rtl"] .app-shell{flex-direction:row-reverse}
    [dir="rtl"] .sidebar{left:auto !important; right:0 !important}
    .mini-logo{
      width:40px;
      height:40px;
      border-radius:14px;
      background: var(--gradient-accent);
      display:flex;
      align-items:center;
      justify-content:center;
      color:#f9fafb;
      font-size:16px;
      font-weight:800;
      box-shadow: var(--shadow-medium), var(--shadow-glow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .mini-logo::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
      pointer-events: none;
    }
    .mini-logo:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: var(--shadow-large), var(--shadow-glow);
    }
    .sidebar-top{
      display:flex;
      align-items:center;
      gap:10px;
      padding:4px 4px 10px;
      border-bottom:1px solid rgba(30,64,175,0.6);
      margin-bottom:6px;
    }
    .sidebar-title-main{
      font-size:13px;
      font-weight:600;
    }
    .sidebar-title-sub{
      font-size:10px;
      color:var(--muted);
    }
    .sidebar-section-title{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.12em;
      color:var(--muted);
      margin:4px 2px 4px;
    }
    .menu-section{
      margin-top:6px;
    }
    .menu-group-btn{
      width:100%;
      justify-content:space-between;
      padding:7px 10px;
      border-radius:10px;
      border:none;
      background:transparent;
      color:var(--text);
      font-size:13px;
      cursor:pointer;
    }
    .menu-group-btn span.icon{
      font-size:14px;
    }
    .menu-section-items{
      margin-top:4px;
      padding-inline-start:12px;
      display:none;
      flex-direction:column;
      gap:3px;
    }
    .menu-section-items.open{display:flex;}

    .action-bar{
      height:52px;
      padding:8px 16px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      border-bottom:1px solid var(--border);
      background:var(--card);
      backdrop-filter:blur(10px);
    }
    .branch-indicator{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
    }
    #app-logo{
      width:34px;
      height:34px;
      border-radius:12px;
      object-fit:cover;
      margin-inline-end:8px;
      box-shadow:0 6px 18px rgba(15,23,42,0.35);
      background:transparent;
    }

    /* ========= REUSABLE LOGO CLASSES ========= */
    .app-logo {
      max-height: 48px;
      object-fit: contain;
      border-radius: 12px;
      display: inline-block;
      vertical-align: middle;
    }

    .app-logo-large {
      max-height: 80px;
      object-fit: contain;
      border-radius: 16px;
      display: inline-block;
      margin-bottom: 16px;
    }
    .btn-print-page{
      background:var(--accent);
      color:#fff;
      border:none;
      padding:var(--space-xs) var(--space-md);
      border-radius:var(--radius-md);
      cursor:pointer;
      font-size:var(--fs-sm);
      box-shadow:var(--shadow-soft);
      display:inline-flex;
      align-items:center;
      gap:var(--space-xs);
      white-space:nowrap;
      transition:all 0.2s ease;
    }
    .btn-print-page:hover{
      background:var(--accent-hover);
      transform:translateY(-1px);
    }
    .btn-print-page:hover{
      background:var(--accent-hover);
    }
    .btn-print-page span.icon{
      font-size:15px;
    }
    .branch-pill{
      padding:3px 10px;
      border-radius:999px;
      background:var(--accent-soft);
      color:var(--text);
      font-size:11px;
    }
    .branch-pill-clickable{
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      display: inline-block;
      user-select: none;
    }
    .branch-pill-clickable:hover{
      background: var(--gradient-accent);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: var(--shadow-medium);
    }
    .branch-pill-clickable:active{
      transform: translateY(0);
    }
    .status-bar{
      height:42px;
      border-top:1px solid var(--border);
      background:var(--bg-soft);
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 14px;
      font-size:11px;
      color:var(--muted);
    }
    .status-group{display:flex;gap:12px;align-items:center;}
    .status-pill{
      padding:3px 9px;
      border-radius:999px;
      background:var(--bg-soft);
      border:1px solid var(--border);
      display:flex;
      gap:4px;
      align-items:center;
    }
    .alerts-btn{
      position:relative;
      background:transparent;
      border:none;
      font-size:18px;
      cursor:pointer;
      padding:4px 8px;
      border-radius:6px;
      transition:background 0.2s;
    }
    .alerts-btn:hover{background:var(--bg-soft);}
    .alerts-badge{
      position:absolute;
      top:-2px;
      right:-2px;
      background:var(--danger);
      color:white;
      font-size:9px;
      font-weight:bold;
      min-width:16px;
      height:16px;
      border-radius:8px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 4px;
    }
    .alerts-badge:empty{display:none;}
    #alerts-panel{
      position:fixed;
      bottom:42px;
      right:0;
      width:320px;
      max-height:400px;
      background:var(--card);
      border:1px solid var(--border);
      border-bottom:none;
      border-radius:12px 12px 0 0;
      box-shadow:0 -4px 20px rgba(0,0,0,0.15);
      display:none;
      flex-direction:column;
      z-index:1000;
      overflow:hidden;
    }

    /* Branch Dropdown Styles */
    .branch-dropdown-container {
      position: relative;
      display: inline-block;
    }
    
    .branch-dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 160px;
      background-color: var(--card);
      box-shadow: var(--shadow-medium);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 8px 0;
      z-index: 1000;
      margin-top: 5px;
    }
    
    .branch-dropdown-container:hover .branch-dropdown-menu {
      display: block;
    }
    
    .branch-dropdown-item {
      display: block;
      padding: 8px 16px;
      color: var(--text);
      text-decoration: none;
      font-size: var(--fs-sm);
      transition: background-color 0.2s;
    }
    
    .branch-dropdown-item:hover {
      background-color: var(--bg-soft);
      color: var(--accent);
    }

    /* RTL Support for Dropdown */
    [dir="rtl"] .branch-dropdown-menu {
      left: auto;
      right: 0;
    }
    #alerts-panel.open{display:flex;}
    .alerts-header{
      padding:12px 14px;
      border-bottom:1px solid var(--border);
      font-weight:600;
      font-size:13px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .alerts-list{
      overflow-y:auto;
      flex:1;
    }
    .alert-item{
      padding:10px 14px;
      border-bottom:1px solid var(--border);
      font-size:12px;
    }
    .alert-item:last-child{border-bottom:none;}
    .alert-item.warning{border-right:3px solid #f59e0b;}
    .alert-item.danger{border-right:3px solid var(--danger);}
    .alert-category{
      font-size:10px;
      color:var(--muted);
      margin-bottom:4px;
    }
    .alert-message{
      color:var(--text);
      line-height:1.4;
    }

    .workspace{
      flex:1;
      padding:14px 18px 10px;
      overflow:auto;
      min-height:0;
    }
    /* ========== SINGLE PAGE VISIBILITY ENFORCEMENT ========== */
    .page,
    .app-page {
      display: none !important;
    }
    
    .page.active,
    .app-page.active {
      display: block !important;
    }
    
    /* Ensure no page is visible without active class */
    .page:not(.active),
    .app-page:not(.active) {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    .page-inner{
      max-width:100%;
      margin:0 auto;
      padding-top: 0;
    }
    /* Page Header Layout - Title on right, Print button on far left (RTL) */
    .page-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:var(--space-md);
      margin-bottom:var(--space-sm);
      margin-top:var(--space-xs);
      padding-inline:0;
    }
    [dir="rtl"] .page-header{
      flex-direction:row;
    }
    [dir="ltr"] .page-header{
      flex-direction:row-reverse;
    }
    .page-header-main,
    .page-header-title{
      text-align:right;
      display:flex;
      flex-direction:column;
      gap:var(--space-xs);
      flex:1;
      padding-inline-end:0;
    }
    [dir="ltr"] .page-header-main,
    [dir="ltr"] .page-header-title{
      text-align:left;
    }
    .page-header-main h2,
    .page-header-title h2{
      font-size:var(--fs-xl);
      font-weight:700;
      color:var(--text);
      margin:0;
      line-height: var(--lh-tight);
    }
    .page-header-main p,
    .page-header-title p{
      font-size:var(--fs-sm);
      color:var(--muted);
      margin:0;
      line-height: var(--lh-normal);
    }
    .page-header-actions{
      display:flex;
      gap:var(--space-xs);
      align-items:center;
      flex-shrink:0;
      margin-inline-start:auto;
    }
    [dir="rtl"] .page-header-actions{
      margin-inline-start:0;
      margin-inline-end:auto;
    }
    @media (max-width:640px){
      .page-header{
        flex-direction:column;
        align-items:stretch;
        text-align:right;
      }
      .page-header-title{
        text-align:right;
      }
      .page-header-actions{
        justify-content:flex-start;
      }
    }
    [dir="rtl"] .kpi-card{ text-align:right; }
    .form-card{
      border-radius:10px;
      padding:var(--space-sm) var(--space-md);
      background:var(--card);
      box-shadow:var(--shadow-soft);
      border:1px solid var(--border);
      margin-bottom:var(--space-sm);
    }
    .form-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
      gap:var(--space-xs);
      align-items:center;
    }
    .form-actions{
      margin-top:var(--space-xs);
      display:flex;
      justify-content:flex-end;
      gap:var(--space-xs);
    }

    /* Modal styles */
    .modal {
      display: none;
      position: fixed;
      z-index: 10000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.5);
      align-items: center;
      justify-content: center;
    }
    
    .modal-content {
      background-color: var(--card);
      margin: auto;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-large);
      width: 90%;
      max-width: 600px;
      max-height: 90vh;
      overflow-y: auto;
    }
    
    .modal-header {
      padding: var(--space-md);
      border-bottom: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .modal-header h3 {
      margin: 0;
      font-size: var(--fs-lg);
      font-weight: 600;
    }
    
    .modal-close {
      color: var(--muted);
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
      line-height: 1;
    }
    
    .modal-close:hover {
      color: var(--text);
    }
    
    .modal-body {
      padding: var(--space-md);
    }
    
    .modal-footer {
      padding: var(--space-md);
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
      gap: var(--space-sm);
    }
    
    .section-box{
      background:var(--card);
      border-radius:10px;
      padding:var(--space-sm) var(--space-md);
      box-shadow:var(--shadow-soft);
      border:1px solid var(--border);
      margin-bottom:var(--space-sm);
    }
    .section-title{
      font-size:var(--fs-sm);
      font-weight:600;
      margin-bottom:var(--space-xs);
      line-height:var(--lh-tight);
    }
    .grid-2{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
      gap:12px;
    }
    .table-responsive{
      max-height:400px;
      overflow:auto;
      border-radius:16px;
      border:1px solid var(--border);
      background: var(--gradient-card);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      box-shadow: var(--shadow-medium), 0 1px 0 rgba(255,255,255,0.1) inset;
    }
    table{width:100%;border-collapse:collapse;font-size:var(--fs-xs);color:var(--text);}
    thead{
      background: var(--gradient-card);
      backdrop-filter: blur(20px);
      position:sticky;
      top:0;
      z-index:1;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    th{
      padding:var(--space-sm) var(--space-md);
      border-bottom:2px solid var(--border);
      text-align:center;
      font-weight:700;
      color:var(--text);
      font-size:var(--fs-xs);
      line-height:var(--lh-tight);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    td{
      padding:var(--space-sm) var(--space-md);
      border-bottom:1px solid var(--border);
      text-align:center;
      vertical-align:middle;
      color:var(--text);
      line-height:var(--lh-normal);
      font-size:var(--fs-xs);
      transition: background 0.2s ease;
    }
    tbody tr{
      transition: all 0.2s ease;
    }
    tbody tr:nth-child(even){
      background:var(--bg-soft);
    }
    tbody tr:hover{
      background:var(--accent-soft);
      transform: scale(1.01);
    }

    /* Hide print sections on screen */
    .print-section {
      display: none !important;
      position: static !important;
      visibility: visible !important;
    }

    .toast{
      position:fixed;
      bottom:16px;
      left:50%;
      transform:translateX(-50%);
      background:var(--text);
      color:var(--card);
      padding:8px 14px;
      border-radius:999px;
      font-size:12px;
      box-shadow:var(--shadow-soft);
      opacity:0;
      pointer-events:none;
      transition:opacity .2s, transform .2s;
    }
    .toast.show{
      opacity:1;
      transform:translateX(-50%) translateY(-4px);
    }

    /* Branch cards for page-branch-picker (inside app) */
    #page-branch-picker .branch-card{
      background: var(--gradient-card);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      color:var(--text);
      border-radius:20px;
      padding:18px 22px;
      border:1px solid var(--border);
      display:flex;
      flex-direction:column;
      gap:8px;
      cursor:pointer;
      box-shadow: var(--shadow-medium), 0 1px 0 rgba(255,255,255,0.1) inset;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    #page-branch-picker .branch-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--gradient-accent);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    #page-branch-picker .branch-card:hover{
      border-color: transparent;
      background: var(--gradient-accent);
      color: #ffffff;
      transform: translateY(-4px);
      box-shadow: var(--shadow-large), var(--shadow-glow);
    }
    #page-branch-picker .branch-card:hover::before {
      opacity: 1;
    }
    #page-branch-picker .branch-name{
      font-size:18px;
      font-weight:600;
      color:var(--text);
    }
    #page-branch-picker .branch-tag{
      font-size:11px;
      color:var(--muted);
    }

    .dashboard-title{font-size:var(--fs-xl);font-weight:700;color:var(--text);margin:0;line-height:var(--lh-tight);}
    .dashboard-subtitle{font-size:var(--fs-sm);color:var(--muted);margin:0;line-height:var(--lh-normal);}

    .dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-xs);margin-bottom:var(--space-sm)}
    .kpi-card{
      position:relative;
      padding:var(--space-sm) var(--space-md);
      border-radius:16px;
      background: var(--gradient-card);
      backdrop-filter:blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      box-shadow: var(--shadow-medium), 0 1px 0 rgba(255,255,255,0.1) inset;
      border:1px solid rgba(148,163,184,0.2);
      display:flex;
      flex-direction:column;
      gap:var(--space-xs);
      padding-left:28px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }
    .kpi-card::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(13,110,253,0.03) 0%, transparent 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .kpi-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-large), 0 1px 0 rgba(255,255,255,0.15) inset;
      border-color: rgba(13,110,253,0.3);
    }
    .kpi-card:hover::after {
      opacity: 1;
    }
    .kpi-card::before{content:"";position:absolute;top:var(--space-xs);left:var(--space-sm);width:4px;height:20px;border-radius:999px;background:linear-gradient(180deg,var(--accent),var(--accent-strong));opacity:0.85}
    [dir="rtl"] .kpi-card{text-align:right;padding-right:24px;padding-left:var(--space-sm)}
    [dir="rtl"] .kpi-card::before{left:auto;right:var(--space-sm)}
    .kpi-label{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-tight)}
    .kpi-value{font-size:var(--fs-md);font-weight:700;color:var(--text);line-height:var(--lh-tight)}
    .kpi-helper{font-size:var(--fs-xs);color:var(--muted);line-height:var(--lh-tight)}

    .dashboard-panel{
      border-radius:16px;
      background: var(--gradient-card);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      box-shadow: var(--shadow-medium), 0 1px 0 rgba(255,255,255,0.1) inset;
      border:1px solid var(--border);
      padding:var(--space-md) var(--space-lg);
      margin-bottom:var(--space-md);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .dashboard-panel::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--gradient-accent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .dashboard-panel:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-large), 0 1px 0 rgba(255,255,255,0.15) inset;
    }
    .dashboard-panel:hover::before {
      opacity: 1;
    }
    .dashboard-panel-title{font-size:var(--fs-sm);font-weight:600;margin-bottom:var(--space-xs);color:var(--text);line-height:var(--lh-tight)}
    [dir="rtl"] .dashboard-panel,[dir="rtl"] .dashboard-panel-title{text-align:right}
    .summary-box{display:flex;flex-direction:column;gap:var(--space-xs)}
    .summary-row{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--border);font-size:var(--fs-xs);line-height:var(--lh-normal)}
    .summary-row:last-child{border-bottom:none}
    .summary-row span:first-child{font-weight:600;text-align:right}
    .summary-row span:last-child{font-weight:700;text-align:left;font-family:monospace}
    .summary-row.highlight{background:rgba(59,130,246,0.1);border-radius:10px;padding:var(--space-xs) var(--space-sm);font-weight:700}
    .summary-box hr{margin:var(--space-xs) 0;border:none;border-top:2px solid var(--border)}
    [dir="rtl"] .summary-row{flex-direction:row-reverse}
    .chart-container{margin-bottom:12px}
    .chart-title{margin-bottom:8px}
    canvas{max-width:100%;height:120px;}

    /* Old branch selection styles removed - using new modern design below */

    /* Modern layout shell overrides */
    html,body{
      height:100%;
    }
    html {
      background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 25%, #2d1b4e 50%, #1a1f3a 75%, #0a0e27 100%);
    }
    body{
      font-family:system-ui,-apple-system,"Segoe UI",BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
      background:var(--bg);
      color:var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    /* Prevent white flash on initial load - match splash screen color */
    body:not(.loaded) {
      background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 25%, #2d1b4e 50%, #1a1f3a 75%, #0a0e27 100%);
    }
    #app-shell{
      display:none;
      flex:1;
      min-height:0;
    }
    #app-shell.show{
      display:flex;
      flex-direction:column;
      height:100%;
    }
    .app-header{
      height:64px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 var(--space-md);
      background: var(--gradient-card);
      backdrop-filter:blur(30px) saturate(180%);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      box-shadow: var(--shadow-medium), 0 1px 0 rgba(255,255,255,0.1) inset;
      border-bottom:1px solid var(--border);
      position:relative;
      z-index:10;
      gap:var(--space-sm);
      transition: all 0.3s ease;
    }
    .app-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(13,110,253,0.3), transparent);
    }
    .header-left,
    .header-center,
    .header-right{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .header-titles{
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .header-system-name{
      font-size:var(--fs-md);
      font-weight:700;
    }
    .header-system-subtitle{
      font-size:var(--fs-xs);
      opacity:0.7;
    }
    .header-branch-label{
      font-size:13px;
      opacity:0.7;
    }
    /* Mobile adjustments for branch label */
    @media (max-width: 480px) {
      .header-branch-label {
        margin-top: 2px; /* Move down 2px (approximately 0.5cm on mobile) */
      }
      /* Fix date input size in tables on mobile */
      table input[type="date"],
      .table-responsive input[type="date"] {
        max-width: 120px !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
      }
    }
    .header-branch-btn{
      border:none;
      border-radius:999px;
      padding:8px 18px;
      background: var(--gradient-accent);
      color:#fff;
      cursor:pointer;
      font-size:13px;
      font-weight: 600;
      box-shadow: var(--shadow-medium), var(--shadow-glow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .header-branch-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s ease;
    }
    .header-branch-btn:hover::before {
      left: 100%;
    }
    .header-branch-btn:hover{
      background: var(--gradient-accent);
      transform: translateY(-2px);
      box-shadow: var(--shadow-large), var(--shadow-glow);
    }
    .header-branch-btn:active{
      transform: translateY(0);
    }
    .header-lang-btn,
    .header-icon-btn,
    .header-theme-btn{
      border:none;
      border-radius:12px;
      padding:8px;
      cursor:pointer;
      background:var(--bg-soft);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-size:var(--fs-md);
      line-height:1;
      color:var(--text);
      min-width:40px;
      height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      position: relative;
      overflow: hidden;
    }
    .header-lang-btn::before,
    .header-icon-btn::before,
    .header-theme-btn::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 100%;
      height: 100%;
      background: var(--accent-soft);
      border-radius: 12px;
      transition: transform 0.3s ease;
    }
    .header-lang-btn:hover::before,
    .header-icon-btn:hover::before,
    .header-theme-btn:hover::before {
      transform: translate(-50%, -50%) scale(1);
    }
    .header-lang-btn:hover,
    .header-icon-btn:hover,
    .header-theme-btn:hover{
      background:var(--accent-soft);
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }
    .header-lang-btn span,
    .header-icon-btn span,
    .header-theme-btn span {
      position: relative;
      z-index: 1;
    }
    .header-lang-btn{
      font-weight:600;
    }
    /* Single theme toggle button */
    #btn-theme-toggle{
      border:none;
      border-radius:12px;
      padding:8px;
      cursor:pointer;
      background:var(--bg-soft);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-size:18px;
      line-height:1;
      color:var(--text);
      min-width:40px;
      height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      position: relative;
      overflow: hidden;
    }
    #btn-theme-toggle::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 100%;
      height: 100%;
      background: var(--accent-soft);
      border-radius: 12px;
      transition: transform 0.3s ease;
    }
    #btn-theme-toggle:hover::before {
      transform: translate(-50%, -50%) scale(1);
    }
    #btn-theme-toggle:hover{
      background:var(--accent-soft);
      transform: translateY(-2px);
      box-shadow: var(--shadow-medium);
    }
    #btn-theme-toggle span {
      position: relative;
      z-index: 1;
    }
    .header-theme-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:32px;
      height:32px;
    }
    .header-user-avatar{
      width:40px;
      height:40px;
      border-radius:50%;
      background: var(--gradient-accent);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      box-shadow: var(--shadow-medium), var(--shadow-glow);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .header-user-avatar::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.2);
      border-radius: 50%;
      transition: transform 0.3s ease;
    }
    .header-user-avatar:hover::before {
      transform: translate(-50%, -50%) scale(1);
    }
    .header-user-avatar:hover {
      transform: translateY(-2px) scale(1.05);
      box-shadow: var(--shadow-large), var(--shadow-glow);
    }
    .header-hidden-toggle{
      display:none;
    }
    .status-icon-btn{
      border:none;
      border-radius:999px;
      padding:2px 8px;
      cursor:pointer;
      background:rgba(15,23,42,0.12);
      color:#e0fdf7;
      font-size:14px;
    }
    .status-icon-btn:hover{
      background:rgba(15,23,42,0.25);
    }
    .app-body{
      flex:1;
      display:flex;
      min-height:0;
    }
    
    [dir="rtl"] .app-body{
      flex-direction:row-reverse;
    }
    [dir="rtl"] .app-sidebar{
      order:2;
    }
    [dir="rtl"] .app-main{
      order:1;
    }

    .app-sidebar{
      width:240px;
      background: var(--gradient-card);
      backdrop-filter:blur(30px) saturate(180%);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      border-inline-end:1px solid var(--border);
      padding:var(--space-md) var(--space-sm);
      display:flex;
      flex-direction:column;
      gap:var(--space-sm);
      overflow:auto;
      box-shadow: var(--shadow-medium);
      position: relative;
    }
    .app-sidebar::after {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(13,110,253,0.2), transparent);
    }
    [dir="rtl"] .app-sidebar::after {
      right: auto;
      left: 0;
    }
    .sidebar-groups{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .sidebar-group{
      border-radius:16px;
      padding:8px;
      background:var(--bg-soft);
      box-shadow: var(--shadow-medium), 0 1px 0 rgba(255,255,255,0.05) inset;
      border:1px solid var(--border);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar-group:hover {
      box-shadow: var(--shadow-large);
      border-color: rgba(13,110,253,0.2);
    }
    .sidebar-group-header{
      width:100%;
      border:none;
      border-radius:12px;
      padding:10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      cursor:pointer;
      background:transparent;
      color:var(--text);
      font-weight:600;
      gap:10px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .sidebar-group-header::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 100%;
      height: 100%;
      background: var(--accent-soft);
      border-radius: 12px;
      transition: transform 0.3s ease;
    }
    .sidebar-group-header:hover::before {
      transform: translate(-50%, -50%) scale(1);
    }
    .sidebar-group-header:hover{
      background:var(--accent-soft);
      transform: translateX(2px);
    }
    [dir="rtl"] .sidebar-group-header:hover {
      transform: translateX(-2px);
    }
    .sidebar-group-header > * {
      position: relative;
      z-index: 1;
    }
    .sidebar-chevron{
      font-size:10px;
      opacity:0.6;
      transition:transform 0.2s ease;
    }
    .sidebar-group-body{
      margin-top:4px;
      padding-inline-start:6px;
      display:none;
      flex-direction:column;
      gap:4px;
    }
    .sidebar-group.open .sidebar-group-body{
      display:flex;
    }
    .sidebar-group.open .sidebar-chevron{
      transform:rotate(180deg);
    }
    [dir="rtl"] .app-sidebar{
      border-inline-start:1px solid rgba(148,163,184,0.35);
      border-inline-end:none;
    }
    .sidebar-brand{
      display:flex;
      align-items:center;
      gap:12px;
      padding-bottom:16px;
      border-bottom:1px solid var(--border);
      position: relative;
    }
    .sidebar-brand::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(13,110,253,0.3), transparent);
    }
    .sidebar-section-title{
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:0.12em;
      color:var(--muted);
      margin-top:4px;
    }
    .sidebar-section{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .sidebar-item{
      width:100%;
      border:none;
      border-radius:12px;
      padding:10px 14px;
      display:flex;
      align-items:center;
      gap:10px;
      cursor:pointer;
      background:transparent;
      color:var(--text);
      font-size:13px;
      font-weight: 500;
      text-align:start;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .sidebar-item::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 3px;
      height: 0;
      background: var(--gradient-accent);
      border-radius: 0 3px 3px 0;
      transition: height 0.3s ease;
    }
    [dir="rtl"] .sidebar-item::before {
      left: auto;
      right: 0;
      border-radius: 3px 0 0 3px;
    }
    .sidebar-item:hover{
      background:var(--accent-soft);
      transform: translateX(4px);
      padding-left: 18px;
    }
    [dir="rtl"] .sidebar-item:hover {
      transform: translateX(-4px);
      padding-left: 14px;
      padding-right: 18px;
    }
    .sidebar-item:hover::before {
      height: 60%;
    }
    .sidebar-item.active{
      background: var(--gradient-accent);
      color:#fff;
      box-shadow: var(--shadow-medium), var(--shadow-glow);
      transform: translateX(4px);
      padding-left: 18px;
    }
    [dir="rtl"] .sidebar-item.active {
      transform: translateX(-4px);
      padding-left: 14px;
      padding-right: 18px;
    }
    .sidebar-item.active::before {
      height: 80%;
      background: rgba(255,255,255,0.3);
    }
    .sidebar-icon{
      font-size:14px;
    }
    .app-main{
      flex:1;
      padding:var(--space-sm) var(--space-md);
      overflow:auto;
      background:var(--bg);
      backdrop-filter:blur(8px);
    }
    .workspace{
      flex:1;
      padding-bottom:var(--space-md);
      max-width: var(--app-max-width);
      margin-inline: auto;
      width: 100%;
      padding-inline: var(--space-md);
      padding-top: var(--space-sm);
    }
    
    /* Content alignment - ensure titles align with content cards/tables */
    .page-inner{
      padding-inline:0;
    }
    .page-content{
      padding-inline:0;
    }
    
    /* Ensure section-box and cards align with page-header-main */
    .page-inner .section-box,
    .page-inner .form-page-container,
    .page-inner .report-filter-bar,
    .page-inner .report-table-container {
      margin-inline: 0;
    }
    .app-statusbar{
      height:36px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 var(--space-md);
      background:var(--accent);
      color:#fff;
      font-size:var(--fs-xs);
      gap:var(--space-sm);
    }
    .status-left,.status-right{
      display:flex;
      align-items:center;
      gap:12px;
    }
    .status-chip{
      display:flex;
      align-items:center;
    }
    .status-pill{
      padding:4px 10px;
      border-radius:999px;
      background:rgba(255,255,255,0.15);
      border:1px solid rgba(255,255,255,0.25);
      display:flex;
      align-items:center;
      gap:6px;
    }

    /* Login refinements - Enhanced Modern Design */
    #page-login{
      min-height:100vh;
      position:relative;
      overflow:hidden;
    }
    
    /* ========== PROFESSIONAL SPLIT SCREEN LOGIN ========== */
    /* Main styles moved to login-pro.css for better organization */
    
    /* Multi-layer Background */
    .luxury-bg-layer{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    
    .luxury-bg-1{
      background: radial-gradient(ellipse at top left, 
        rgba(102, 126, 234, 0.15) 0%, 
        transparent 50%),
        radial-gradient(ellipse at bottom right, 
        rgba(118, 75, 162, 0.15) 0%, 
        transparent 50%);
      z-index: 0;
      animation: bgPulse1 8s ease-in-out infinite;
    }
    
    .luxury-bg-2{
      background: linear-gradient(135deg, 
        rgba(79, 172, 254, 0.1) 0%, 
        rgba(0, 242, 254, 0.1) 50%, 
        rgba(240, 147, 251, 0.1) 100%);
      background-size: 400% 400%;
      z-index: 0;
      animation: bgGradientShift 20s ease infinite;
    }
    
    .luxury-bg-3{
      background: 
        radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(118, 75, 162, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(79, 172, 254, 0.06) 0%, transparent 50%);
      z-index: 0;
      animation: bgPulse2 12s ease-in-out infinite;
    }
    
    @keyframes bgPulse1{
      0%, 100%{ opacity: 0.8; transform: scale(1); }
      50%{ opacity: 1; transform: scale(1.1); }
    }
    
    @keyframes bgGradientShift{
      0%{ background-position: 0% 50%; }
      50%{ background-position: 100% 50%; }
      100%{ background-position: 0% 50%; }
    }
    
    @keyframes bgPulse2{
      0%, 100%{ opacity: 0.6; }
      50%{ opacity: 1; }
    }
    
    /* Animated Grid */
    .luxury-grid{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        linear-gradient(rgba(102, 126, 234, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(102, 126, 234, 0.03) 1px, transparent 1px);
      background-size: 50px 50px;
      z-index: 0;
      animation: gridMove 20s linear infinite;
      pointer-events: none;
    }
    
    @keyframes gridMove{
      0%{ transform: translate(0, 0); }
      100%{ transform: translate(50px, 50px); }
    }
    
    /* Floating Orbs */
    .luxury-orbs{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }
    
    .luxury-orb{
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.6;
    }
    
    .orb-1{
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(102, 126, 234, 0.4) 0%, transparent 70%);
      top: -100px;
      left: -100px;
      animation: orbFloat1 15s ease-in-out infinite;
    }
    
    .orb-2{
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(118, 75, 162, 0.35) 0%, transparent 70%);
      bottom: -80px;
      right: -80px;
      animation: orbFloat2 18s ease-in-out infinite;
    }
    
    .orb-3{
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(79, 172, 254, 0.3) 0%, transparent 70%);
      top: 50%;
      left: 10%;
      animation: orbFloat3 20s ease-in-out infinite;
    }
    
    .orb-4{
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, rgba(0, 242, 254, 0.3) 0%, transparent 70%);
      top: 20%;
      right: 15%;
      animation: orbFloat4 16s ease-in-out infinite;
    }
    
    .orb-5{
      width: 280px;
      height: 280px;
      background: radial-gradient(circle, rgba(240, 147, 251, 0.3) 0%, transparent 70%);
      bottom: 20%;
      left: 50%;
      animation: orbFloat5 22s ease-in-out infinite;
    }
    
    @keyframes orbFloat1{
      0%, 100%{ transform: translate(0, 0) scale(1); }
      33%{ transform: translate(50px, 100px) scale(1.1); }
      66%{ transform: translate(-30px, 80px) scale(0.9); }
    }
    
    @keyframes orbFloat2{
      0%, 100%{ transform: translate(0, 0) scale(1); }
      50%{ transform: translate(-80px, -100px) scale(1.15); }
    }
    
    @keyframes orbFloat3{
      0%, 100%{ transform: translate(0, 0) scale(1); }
      25%{ transform: translate(100px, -50px) scale(1.2); }
      75%{ transform: translate(-50px, 100px) scale(0.8); }
    }
    
    @keyframes orbFloat4{
      0%, 100%{ transform: translate(0, 0) scale(1); }
      50%{ transform: translate(-60px, 120px) scale(1.1); }
    }
    
    @keyframes orbFloat5{
      0%, 100%{ transform: translate(0, 0) scale(1); }
      33%{ transform: translate(80px, -80px) scale(1.05); }
      66%{ transform: translate(-100px, 50px) scale(0.95); }
    }
    
    /* Light Rays */
    .luxury-light-rays{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }
    
    .light-ray{
      position: absolute;
      background: linear-gradient(180deg, 
        rgba(102, 126, 234, 0.1) 0%, 
        transparent 100%);
      width: 2px;
      height: 100%;
      filter: blur(1px);
    }
    
    .ray-1{
      left: 20%;
      animation: rayMove1 8s ease-in-out infinite;
    }
    
    .ray-2{
      left: 50%;
      animation: rayMove2 10s ease-in-out infinite;
    }
    
    .ray-3{
      left: 80%;
      animation: rayMove3 12s ease-in-out infinite;
    }
    
    @keyframes rayMove1{
      0%, 100%{ opacity: 0.3; transform: translateX(0) scaleY(1); }
      50%{ opacity: 0.6; transform: translateX(20px) scaleY(1.2); }
    }
    
    @keyframes rayMove2{
      0%, 100%{ opacity: 0.2; transform: translateX(0) scaleY(1); }
      50%{ opacity: 0.5; transform: translateX(-15px) scaleY(1.15); }
    }
    
    @keyframes rayMove3{
      0%, 100%{ opacity: 0.25; transform: translateX(0) scaleY(1); }
      50%{ opacity: 0.55; transform: translateX(25px) scaleY(1.1); }
    }
    
    /* Particles Canvas */
    .luxury-particles-system{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }
    
    #particles-canvas{
      width: 100%;
      height: 100%;
      opacity: 0.4;
    }
    
    /* Main Luxury Card */
    .luxury-login-card{
      width: 100%;
      max-width: 520px;
      position: relative;
      z-index: 10;
      animation: cardEntranceLuxury 1s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    @keyframes cardEntranceLuxury{
      0%{ 
        opacity: 0; 
        transform: translateY(50px) scale(0.9) rotateX(10deg);
        filter: blur(10px);
      }
      100%{ 
        opacity: 1; 
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0);
      }
    }
    
    /* Card Glow Layers */
    .luxury-card-glow{
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      pointer-events: none;
      z-index: 0;
    }
    
    .luxury-glow-1{
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(102, 126, 234, 0.5) 0%, transparent 70%);
      top: -200px;
      left: -200px;
      animation: glowPulseLuxury1 5s ease-in-out infinite;
    }
    
    .luxury-glow-2{
      width: 450px;
      height: 450px;
      background: radial-gradient(circle, rgba(118, 75, 162, 0.4) 0%, transparent 70%);
      bottom: -180px;
      right: -180px;
      animation: glowPulseLuxury2 6s ease-in-out infinite;
    }
    
    .luxury-glow-3{
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(79, 172, 254, 0.45) 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: glowPulseLuxury3 7s ease-in-out infinite;
    }
    
    .luxury-glow-4{
      width: 350px;
      height: 350px;
      background: radial-gradient(circle, rgba(0, 242, 254, 0.35) 0%, transparent 70%);
      top: 20%;
      right: -100px;
      animation: glowPulseLuxury4 8s ease-in-out infinite;
    }
    
    @keyframes glowPulseLuxury1{
      0%, 100%{ opacity: 0.4; transform: scale(1); }
      50%{ opacity: 0.8; transform: scale(1.2); }
    }
    
    @keyframes glowPulseLuxury2{
      0%, 100%{ opacity: 0.3; transform: scale(1); }
      50%{ opacity: 0.7; transform: scale(1.15); }
    }
    
    @keyframes glowPulseLuxury3{
      0%, 100%{ opacity: 0.35; transform: translate(-50%, -50%) scale(1); }
      50%{ opacity: 0.75; transform: translate(-50%, -50%) scale(1.25); }
    }
    
    @keyframes glowPulseLuxury4{
      0%, 100%{ opacity: 0.3; transform: scale(1); }
      50%{ opacity: 0.65; transform: scale(1.1); }
    }
    
    /* Animated Border */
    .luxury-card-border{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 40px;
      padding: 2px;
      background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.5) 0%, 
        rgba(118, 75, 162, 0.5) 25%,
        rgba(79, 172, 254, 0.5) 50%,
        rgba(0, 242, 254, 0.5) 75%,
        rgba(102, 126, 234, 0.5) 100%);
      background-size: 300% 300%;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask-composite: exclude;
      animation: borderRotate 8s linear infinite;
      z-index: 1;
      pointer-events: none;
    }
    
    @keyframes borderRotate{
      0%{ background-position: 0% 50%; }
      100%{ background-position: 300% 50%; }
    }
    
    /* Card Content */
    .luxury-card-content{
      position: relative;
      z-index: 2;
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(255, 255, 255, 0.92) 50%,
        rgba(255, 255, 255, 0.95) 100%);
      backdrop-filter: blur(50px) saturate(200%);
      -webkit-backdrop-filter: blur(50px) saturate(200%);
      border-radius: 40px;
      padding: 64px 56px;
      box-shadow: 
        0 40px 80px rgba(0, 0, 0, 0.15),
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset,
        0 2px 0 rgba(255, 255, 255, 0.4) inset;
      border: 1px solid rgba(255, 255, 255, 0.4);
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
    
    /* Premium Header */
    .luxury-header{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
    }
    
    .luxury-logo-container{
      position: relative;
      width: 140px;
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .luxury-logo-rings{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }
    
    .logo-ring{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 2px solid;
    }
    
    .ring-outer{
      width: 140px;
      height: 140px;
      border-color: rgba(102, 126, 234, 0.3);
      animation: ringRotate1 10s linear infinite;
    }
    
    .ring-middle{
      width: 120px;
      height: 120px;
      border-color: rgba(118, 75, 162, 0.25);
      animation: ringRotate2 8s linear infinite reverse;
    }
    
    .ring-inner{
      width: 100px;
      height: 100px;
      border-color: rgba(79, 172, 254, 0.2);
      animation: ringRotate3 6s linear infinite;
    }
    
    @keyframes ringRotate1{
      from{ transform: translate(-50%, -50%) rotate(0deg); }
      to{ transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    @keyframes ringRotate2{
      from{ transform: translate(-50%, -50%) rotate(0deg); }
      to{ transform: translate(-50%, -50%) rotate(-360deg); }
    }
    
    @keyframes ringRotate3{
      from{ transform: translate(-50%, -50%) rotate(0deg); }
      to{ transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    .luxury-logo-glow-effect{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: radial-gradient(circle, 
        rgba(102, 126, 234, 0.4) 0%, 
        rgba(118, 75, 162, 0.3) 40%, 
        transparent 70%);
      animation: logoGlowLuxury 3s ease-in-out infinite;
      z-index: 0;
    }
    
    @keyframes logoGlowLuxury{
      0%, 100%{ 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
      }
      50%{ 
        opacity: 1; 
        transform: translate(-50%, -50%) scale(1.2); 
      }
    }
    
    .luxury-logo-wrapper{
      position: relative;
      z-index: 2;
      width: 120px;
      height: 120px;
      border-radius: 32px;
      overflow: hidden;
      box-shadow: 
        0 24px 48px rgba(102, 126, 234, 0.35),
        0 0 0 4px rgba(255, 255, 255, 0.2) inset,
        0 0 60px rgba(102, 126, 234, 0.2);
      transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .luxury-logo-wrapper:hover{
      transform: scale(1.1) rotate(5deg);
      box-shadow: 
        0 32px 64px rgba(102, 126, 234, 0.45),
        0 0 0 6px rgba(255, 255, 255, 0.3) inset,
        0 0 80px rgba(102, 126, 234, 0.3);
    }
    
    .luxury-logo{
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    
    .luxury-logo-shine{
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent);
      animation: logoShine 3s ease-in-out infinite;
    }
    
    @keyframes logoShine{
      0%{ left: -100%; }
      50%{ left: 100%; }
      100%{ left: 100%; }
    }
    
    .luxury-logo-particles{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      z-index: 3;
      pointer-events: none;
    }
    
    .logo-particle{
      position: absolute;
      width: 4px;
      height: 4px;
      background: radial-gradient(circle, rgba(102, 126, 234, 0.8) 0%, transparent 70%);
      border-radius: 50%;
      box-shadow: 0 0 8px rgba(102, 126, 234, 0.6);
    }
    
    .logo-particle:nth-child(1){
      top: 10%;
      left: 20%;
      animation: particleFloat1 4s ease-in-out infinite;
    }
    
    .logo-particle:nth-child(2){
      top: 30%;
      right: 15%;
      animation: particleFloat2 5s ease-in-out infinite;
    }
    
    .logo-particle:nth-child(3){
      bottom: 20%;
      left: 25%;
      animation: particleFloat3 6s ease-in-out infinite;
    }
    
    .logo-particle:nth-child(4){
      bottom: 15%;
      right: 20%;
      animation: particleFloat4 4.5s ease-in-out infinite;
    }
    
    @keyframes particleFloat1{
      0%, 100%{ transform: translate(0, 0) scale(1); opacity: 0.6; }
      50%{ transform: translate(20px, -20px) scale(1.3); opacity: 1; }
    }
    
    @keyframes particleFloat2{
      0%, 100%{ transform: translate(0, 0) scale(1); opacity: 0.5; }
      50%{ transform: translate(-15px, 25px) scale(1.2); opacity: 0.9; }
    }
    
    @keyframes particleFloat3{
      0%, 100%{ transform: translate(0, 0) scale(1); opacity: 0.7; }
      50%{ transform: translate(25px, 15px) scale(1.4); opacity: 1; }
    }
    
    @keyframes particleFloat4{
      0%, 100%{ transform: translate(0, 0) scale(1); opacity: 0.55; }
      50%{ transform: translate(-20px, -25px) scale(1.25); opacity: 0.95; }
    }
    
    /* Title Section */
    .luxury-title-section{
      text-align: center;
    }
    
    .luxury-title{
      font-size: 0;
      margin: 0;
      line-height: 1.2;
    }
    
    .title-line{
      display: block;
      font-size: 28px;
      font-weight: 900;
      background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 30%,
        #4facfe 60%,
        #00f2fe 100%);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -1px;
      animation: titleGradient 5s ease infinite;
      text-shadow: 0 0 30px rgba(102, 126, 234, 0.3);
    }
    
    .title-line.line-1{
      margin-bottom: 4px;
    }
    
    @keyframes titleGradient{
      0%, 100%{ background-position: 0% 50%; }
      50%{ background-position: 100% 50%; }
    }
    
    .luxury-subtitle{
      margin-top: 12px;
      position: relative;
    }
    
    .subtitle-text{
      font-size: 16px;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: 0.5px;
      position: relative;
      z-index: 1;
    }
    
    .subtitle-underline{
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 3px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.6) 50%, 
        transparent 100%);
      border-radius: 2px;
      animation: underlinePulse 2s ease-in-out infinite;
    }
    
    @keyframes underlinePulse{
      0%, 100%{ width: 80px; opacity: 0.6; }
      50%{ width: 120px; opacity: 1; }
    }
    
    /* Premium Features */
    .luxury-features{
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .luxury-feature-card{
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 24px;
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.7) 0%, 
        rgba(255, 255, 255, 0.5) 100%);
      backdrop-filter: blur(20px);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      position: relative;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      cursor: pointer;
    }
    
    .feature-glow{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.1) 0%, 
        rgba(118, 75, 162, 0.1) 100%);
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    
    .luxury-feature-card:hover .feature-glow{
      opacity: 1;
    }
    
    .luxury-feature-card:hover{
      transform: translateX(-8px) scale(1.02);
      border-color: rgba(102, 126, 234, 0.5);
      box-shadow: 
        0 12px 32px rgba(102, 126, 234, 0.2),
        0 0 0 1px rgba(102, 126, 234, 0.1) inset;
    }
    
    .feature-icon-box{
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14px;
      position: relative;
      flex-shrink: 0;
    }
    
    .feature-icon-bg{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.15) 0%, 
        rgba(118, 75, 162, 0.15) 100%);
      border-radius: 14px;
      transition: all 0.4s ease;
    }
    
    .luxury-feature-card:hover .feature-icon-bg{
      background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.25) 0%, 
        rgba(118, 75, 162, 0.25) 100%);
      transform: scale(1.1) rotate(5deg);
    }
    
    .feature-icon{
      font-size: 24px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
      transition: transform 0.4s ease;
    }
    
    .luxury-feature-card:hover .feature-icon{
      transform: scale(1.15) rotate(-5deg);
    }
    
    .feature-content{
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
    }
    
    .feature-title{
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.3px;
    }
    
    .feature-desc{
      font-size: 13px;
      color: var(--muted);
      font-weight: 500;
    }
    
    /* Premium Form */
    .luxury-form{
      margin-top: 8px;
    }
    
    .luxury-form-header{
      text-align: center;
      margin-bottom: 32px;
    }
    
    .luxury-form-title{
      margin: 0 0 10px 0;
      position: relative;
    }
    
    .form-title-text{
      font-size: 24px;
      font-weight: 800;
      background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 50%,
        #4facfe 100%);
      background-size: 200% 200%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -0.5px;
      animation: formTitleGradient 4s ease infinite;
    }
    
    @keyframes formTitleGradient{
      0%, 100%{ background-position: 0% 50%; }
      50%{ background-position: 100% 50%; }
    }
    
    .form-title-accent{
      position: absolute;
      bottom: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 4px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102, 126, 234, 0.8) 50%, 
        transparent 100%);
      border-radius: 2px;
    }
    
    .luxury-form-subtitle{
      font-size: 14px;
      color: var(--muted);
      margin-top: 12px;
      line-height: 1.6;
    }
    
    .luxury-form-fields{
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    
    .luxury-field{
      position: relative;
    }
    
    .luxury-label{
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }
    
    .label-icon-wrapper{
      position: relative;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .label-icon{
      font-size: 18px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }
    
    .label-icon-glow{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, 
        rgba(102, 126, 234, 0.2) 0%, 
        transparent 70%);
      border-radius: 50%;
      animation: iconGlow 2s ease-in-out infinite;
    }
    
    @keyframes iconGlow{
      0%, 100%{ opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
      50%{ opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    }
    
    .luxury-input-container{
      position: relative;
    }
    
    .luxury-input{
      width: 100%;
      padding: 18px 20px;
      border: 2px solid rgba(255, 255, 255, 0.5);
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      color: var(--text);
      font-size: 15px;
      font-weight: 500;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.06),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset;
    }
    
    .luxury-input:focus{
      outline: none;
      border-color: rgba(102, 126, 234, 0.7);
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 
        0 0 0 4px rgba(102, 126, 234, 0.2),
        0 8px 32px rgba(102, 126, 234, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.4) inset;
      transform: translateY(-2px);
    }
    
    .luxury-input::placeholder{
      color: var(--muted);
      opacity: 0.5;
    }
    
    .input-border-glow{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 16px;
      background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.2) 0%, 
        rgba(118, 75, 162, 0.2) 100%);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: -1;
      filter: blur(10px);
    }
    
    .luxury-input:focus ~ .input-border-glow{
      opacity: 1;
    }
    
    .input-shine-effect{
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
      transition: left 0.6s ease;
      border-radius: 16px;
      pointer-events: none;
    }
    
    .luxury-input:focus ~ .input-shine-effect{
      left: 100%;
    }
    
    /* Premium Submit Button */
    .luxury-submit-btn{
      width: 100%;
      padding: 18px 32px;
      font-size: 18px;
      font-weight: 800;
      border-radius: 16px;
      margin-top: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      position: relative;
      overflow: hidden;
      border: none;
      cursor: pointer;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      z-index: 1;
    }
    
    .btn-bg-gradient{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 30%,
        #4facfe 60%,
        #00f2fe 100%);
      background-size: 300% 300%;
      animation: btnGradientMove 5s ease infinite;
      z-index: 0;
    }
    
    @keyframes btnGradientMove{
      0%, 100%{ background-position: 0% 50%; }
      50%{ background-position: 100% 50%; }
    }
    
    .btn-shine-overlay{
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent);
      transition: left 0.6s ease;
      z-index: 1;
    }
    
    .luxury-submit-btn:hover .btn-shine-overlay{
      left: 100%;
    }
    
    .btn-ripple-effect{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      transform: translate(-50%, -50%);
      transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
      z-index: 1;
      pointer-events: none;
    }
    
    .luxury-submit-btn:active .btn-ripple-effect{
      width: 300px;
      height: 300px;
      opacity: 0;
    }
    
    .btn-text{
      position: relative;
      z-index: 2;
    }
    
    .btn-icon{
      position: relative;
      z-index: 2;
      width: 20px;
      height: 20px;
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .btn-icon svg{
      width: 100%;
      height: 100%;
    }
    
    .luxury-submit-btn:hover{
      transform: translateY(-4px) scale(1.02);
      box-shadow: 
        0 16px 40px rgba(102, 126, 234, 0.5),
        0 8px 20px rgba(118, 75, 162, 0.4),
        0 0 60px rgba(102, 126, 234, 0.3);
    }
    
    .luxury-submit-btn:hover .btn-icon{
      transform: translateX(8px) scale(1.1);
    }
    
    .luxury-submit-btn:active{
      transform: translateY(-2px) scale(0.98);
    }
    
    .btn-particles{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      z-index: 1;
    }
    
    .btn-particle{
      position: absolute;
      width: 6px;
      height: 6px;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    }
    
    .btn-particle:nth-child(1){
      top: 20%;
      left: 20%;
      animation: btnParticle1 2s ease-in-out infinite;
    }
    
    .btn-particle:nth-child(2){
      top: 50%;
      right: 25%;
      animation: btnParticle2 2.5s ease-in-out infinite;
    }
    
    .btn-particle:nth-child(3){
      bottom: 20%;
      left: 30%;
      animation: btnParticle3 2.2s ease-in-out infinite;
    }
    
    @keyframes btnParticle1{
      0%, 100%{ transform: translate(0, 0) scale(1); opacity: 0.6; }
      50%{ transform: translate(15px, -15px) scale(1.5); opacity: 1; }
    }
    
    @keyframes btnParticle2{
      0%, 100%{ transform: translate(0, 0) scale(1); opacity: 0.5; }
      50%{ transform: translate(-20px, 20px) scale(1.4); opacity: 0.9; }
    }
    
    @keyframes btnParticle3{
      0%, 100%{ transform: translate(0, 0) scale(1); opacity: 0.7; }
      50%{ transform: translate(25px, 10px) scale(1.6); opacity: 1; }
    }
    
    /* Premium Footer Note */
    .luxury-footer-note{
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 18px 20px;
      background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.6) 0%, 
        rgba(255, 255, 255, 0.4) 100%);
      backdrop-filter: blur(20px);
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      margin-top: 8px;
    }
    
    .note-icon-wrapper{
      position: relative;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .note-icon{
      font-size: 18px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    }
    
    .note-icon-pulse{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, 
        rgba(102, 126, 234, 0.2) 0%, 
        transparent 70%);
      border-radius: 50%;
      animation: notePulse 2s ease-in-out infinite;
    }
    
    @keyframes notePulse{
      0%, 100%{ opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
      50%{ opacity: 0.8; transform: translate(-50%, -50%) scale(1.3); }
    }
    
    .note-text{
      font-size: 13px;
      color: var(--muted);
      line-height: 1.7;
      flex: 1;
      margin: 0;
    }
    
    /* Mobile Optimizations */
    @media (max-width: 480px) {
      .luxury-card-content{
        padding: 48px 32px;
        border-radius: 32px;
        gap: 32px;
      }
      
      .luxury-logo-container{
        width: 120px;
        height: 120px;
      }
      
      .luxury-logo-wrapper{
        width: 100px;
        height: 100px;
      }
      
      .title-line{
        font-size: 24px;
      }
      
      .luxury-feature-card{
        padding: 16px 20px;
      }
      
      .luxury-form-header{
        margin-bottom: 24px;
      }
      
      .form-title-text{
        font-size: 22px;
      }
      
      .luxury-orbs .luxury-orb{
        filter: blur(100px);
      }
    }
    
    /* Old login styles - keeping for backward compatibility */
    .login-background-decoration{
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 20%, 
        #f093fb 40%, 
        #4facfe 60%, 
        #00f2fe 80%, 
        #667eea 100%);
      background-size: 400% 400%;
      animation: gradientShift 20s ease infinite;
      opacity: 0.12;
      z-index: 0;
    }
    
    @keyframes gradientShift{
      0%{background-position: 0% 50%;}
      50%{background-position: 100% 50%;}
      100%{background-position: 0% 50%;}
    }
    
    /* Floating Particles */
    .floating-particles{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }
    
    .particle{
      position: absolute;
      width: 4px;
      height: 4px;
      background: radial-gradient(circle, rgba(102,126,234,0.8) 0%, transparent 70%);
      border-radius: 50%;
      animation: float 15s infinite ease-in-out;
      box-shadow: 0 0 10px rgba(102,126,234,0.5);
    }
    
    .particle:nth-child(1){ left: 10%; animation-delay: 0s; animation-duration: 12s; }
    .particle:nth-child(2){ left: 20%; animation-delay: 2s; animation-duration: 18s; }
    .particle:nth-child(3){ left: 30%; animation-delay: 4s; animation-duration: 15s; }
    .particle:nth-child(4){ left: 40%; animation-delay: 1s; animation-duration: 20s; }
    .particle:nth-child(5){ left: 50%; animation-delay: 3s; animation-duration: 14s; }
    .particle:nth-child(6){ left: 60%; animation-delay: 5s; animation-duration: 16s; }
    .particle:nth-child(7){ left: 70%; animation-delay: 2.5s; animation-duration: 19s; }
    .particle:nth-child(8){ left: 80%; animation-delay: 4.5s; animation-duration: 13s; }
    
    @keyframes float{
      0%, 100%{ transform: translateY(100vh) translateX(0) scale(0.5); opacity: 0; }
      10%{ opacity: 1; }
      90%{ opacity: 1; }
      100%{ transform: translateY(-100px) translateX(50px) scale(1.2); opacity: 0; }
    }
    
    /* Geometric Shapes */
    .geometric-shapes{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }
    
    .shape{
      position: absolute;
      opacity: 0.08;
      filter: blur(40px);
    }
    
    .shape-1{
      width: 300px;
      height: 300px;
      background: linear-gradient(135deg, #667eea, #764ba2);
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
      top: 10%;
      left: 10%;
      animation: morphShape 20s ease-in-out infinite;
    }
    
    .shape-2{
      width: 250px;
      height: 250px;
      background: linear-gradient(135deg, #4facfe, #00f2fe);
      border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
      bottom: 15%;
      right: 15%;
      animation: morphShape 25s ease-in-out infinite reverse;
    }
    
    .shape-3{
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, #f093fb, #667eea);
      border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: morphShape 18s ease-in-out infinite;
    }
    
    @keyframes morphShape{
      0%, 100%{ border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg); }
      25%{ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(90deg); }
      50%{ border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: rotate(180deg); }
      75%{ border-radius: 40% 60% 70% 30% / 40% 70% 30% 60%; transform: rotate(270deg); }
    }
    
    /* Login Shell */
    .login-shell{
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      padding: 20px;
      position: relative;
      z-index: 2;
    }
    
    /* Premium Login Card */
    .login-card{
      width: 100%;
      max-width: 480px;
      border-radius: 32px;
      background: linear-gradient(135deg, 
        rgba(255,255,255,0.95) 0%, 
        rgba(255,255,255,0.85) 100%);
      backdrop-filter: blur(40px) saturate(200%);
      -webkit-backdrop-filter: blur(40px) saturate(200%);
      padding: 56px 48px;
      box-shadow: 
        0 32px 64px rgba(0,0,0,0.12),
        0 16px 32px rgba(0,0,0,0.08),
        0 0 0 1px rgba(255,255,255,0.2) inset,
        0 1px 0 rgba(255,255,255,0.3) inset;
      border: 1px solid rgba(255,255,255,0.3);
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 32px;
      position: relative;
      overflow: hidden;
      animation: cardEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    @keyframes cardEntrance{
      0%{ opacity: 0; transform: translateY(30px) scale(0.95); }
      100%{ opacity: 1; transform: translateY(0) scale(1); }
    }
    
    /* Card Glow Effects */
    .card-glow{
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.6;
      pointer-events: none;
      z-index: 0;
    }
    
    .card-glow-1{
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(102,126,234,0.4) 0%, transparent 70%);
      top: -100px;
      left: -100px;
      animation: glowPulse 4s ease-in-out infinite;
    }
    
    .card-glow-2{
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, rgba(118,75,162,0.3) 0%, transparent 70%);
      bottom: -80px;
      right: -80px;
      animation: glowPulse 5s ease-in-out infinite reverse;
    }
    
    .card-glow-3{
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, rgba(79,172,254,0.35) 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: glowPulse 6s ease-in-out infinite;
    }
    
    @keyframes glowPulse{
      0%, 100%{ opacity: 0.4; transform: scale(1); }
      50%{ opacity: 0.7; transform: scale(1.1); }
    }
    
    .login-card > *{
      position: relative;
      z-index: 2;
    }
    
    /* Login Header */
    .login-header{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }
    
    .login-logo-wrapper{
      position: relative;
      margin-bottom: 12px;
    }
    
    .logo-orb{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: radial-gradient(circle, 
        rgba(102,126,234,0.2) 0%, 
        rgba(118,75,162,0.15) 50%, 
        transparent 70%);
      animation: orbRotate 8s linear infinite;
      z-index: 0;
    }
    
    @keyframes orbRotate{
      from{ transform: translate(-50%, -50%) rotate(0deg); }
      to{ transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    .login-logo-wrapper .app-logo-large{
      width: 110px;
      height: 110px;
      border-radius: 28px;
      object-fit: cover;
      box-shadow: 
        0 20px 40px rgba(102,126,234,0.3),
        0 0 0 4px rgba(255,255,255,0.1) inset;
      margin: 0 auto;
      position: relative;
      z-index: 3;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .login-logo-wrapper:hover .app-logo-large{
      transform: scale(1.08) rotate(5deg);
      box-shadow: 
        0 24px 48px rgba(102,126,234,0.4),
        0 0 0 6px rgba(255,255,255,0.15) inset;
    }
    
    .login-logo-glow{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: radial-gradient(circle, 
        rgba(102,126,234,0.4) 0%, 
        rgba(118,75,162,0.3) 40%, 
        transparent 70%);
      animation: logoGlow 3s ease-in-out infinite;
      z-index: 1;
    }
    
    @keyframes logoGlow{
      0%, 100%{ 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
      }
      50%{ 
        opacity: 0.9; 
        transform: translate(-50%, -50%) scale(1.15); 
      }
    }
    
    .logo-ring{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 130px;
      height: 130px;
      border: 2px solid rgba(102,126,234,0.2);
      border-radius: 50%;
      z-index: 2;
      animation: ringPulse 2s ease-in-out infinite;
    }
    
    @keyframes ringPulse{
      0%, 100%{ 
        opacity: 0.3; 
        transform: translate(-50%, -50%) scale(1); 
      }
      50%{ 
        opacity: 0.6; 
        transform: translate(-50%, -50%) scale(1.1); 
      }
    }
    
    .login-title{
      font-size: 24px;
      font-weight: 800;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-top: 12px;
      letter-spacing: -0.5px;
    }
    
    .login-subtitle{
      font-size: 15px;
      color: var(--muted);
      font-weight: 500;
      letter-spacing: 0.3px;
    }
    
    .login-divider{
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(102,126,234,0.5) 50%, 
        transparent 100%);
      border-radius: 2px;
      margin: 8px 0;
    }
    
    /* Features */
    .login-features{
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin: 12px 0;
    }
    
    .feature-item{
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 14px 20px;
      background: linear-gradient(135deg, 
        rgba(255,255,255,0.6) 0%, 
        rgba(255,255,255,0.4) 100%);
      backdrop-filter: blur(10px);
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.3);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      overflow: hidden;
    }
    
    .feature-item::before{
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(102,126,234,0.1), 
        transparent);
      transition: left 0.5s ease;
    }
    
    .feature-item:hover::before{
      left: 100%;
    }
    
    .feature-item:hover{
      background: linear-gradient(135deg, 
        rgba(102,126,234,0.15) 0%, 
        rgba(118,75,162,0.1) 100%);
      transform: translateX(-6px) scale(1.02);
      border-color: rgba(102,126,234,0.4);
      box-shadow: 0 8px 24px rgba(102,126,234,0.15);
    }
    
    .feature-icon-wrapper{
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, 
        rgba(102,126,234,0.1) 0%, 
        rgba(118,75,162,0.1) 100%);
      border-radius: 10px;
      transition: all 0.3s ease;
    }
    
    .feature-item:hover .feature-icon-wrapper{
      background: linear-gradient(135deg, 
        rgba(102,126,234,0.2) 0%, 
        rgba(118,75,162,0.2) 100%);
      transform: scale(1.1) rotate(5deg);
    }
    
    .feature-icon{
      font-size: 20px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
    
    .feature-text{
      font-size: 14px;
      color: var(--text);
      font-weight: 600;
      letter-spacing: 0.2px;
    }
    
    /* Form Card */
    .login-form-card{
      margin-top: 12px;
      background: linear-gradient(135deg, 
        rgba(255,255,255,0.7) 0%, 
        rgba(255,255,255,0.5) 100%);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      padding: 32px 28px;
      border: 1px solid rgba(255,255,255,0.3);
      text-align: start;
      box-shadow: 
        0 8px 32px rgba(0,0,0,0.08),
        0 0 0 1px rgba(255,255,255,0.2) inset;
      position: relative;
      overflow: hidden;
    }
    
    .login-form-card::before{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(102,126,234,0.5), 
        rgba(118,75,162,0.5), 
        transparent);
    }
    
    .form-header{
      text-align: center;
      margin-bottom: 28px;
    }
    
    .form-title{
      font-size: 22px;
      font-weight: 800;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 8px;
      letter-spacing: -0.3px;
    }
    
    .form-subtitle{
      font-size: 14px;
      color: var(--muted);
      line-height: 1.5;
    }
    
    .login-form-card .field{
      margin-bottom: 24px;
    }
    
    .login-form-card .field label{
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 10px;
    }
    
    .label-icon{
      font-size: 18px;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
    
    .input-wrapper{
      position: relative;
    }
    
    .login-form-card .field input{
      width: 100%;
      padding: 16px 18px;
      border: 2px solid rgba(255,255,255,0.4);
      border-radius: 14px;
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(10px);
      color: var(--text);
      font-size: 15px;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    
    .login-form-card .field input:focus{
      outline: none;
      border-color: rgba(102,126,234,0.6);
      background: rgba(255,255,255,0.95);
      box-shadow: 
        0 0 0 4px rgba(102,126,234,0.15),
        0 8px 24px rgba(102,126,234,0.2);
      transform: translateY(-2px);
    }
    
    .input-glow{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 14px;
      background: linear-gradient(135deg, 
        rgba(102,126,234,0.1) 0%, 
        rgba(118,75,162,0.1) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: -1;
    }
    
    .login-form-card .field input:focus ~ .input-glow{
      opacity: 1;
    }
    
    .login-form-card .field input::placeholder{
      color: var(--muted);
      opacity: 0.5;
    }
    
    /* Submit Button */
    .btn-login-submit{
      width: 100%;
      padding: 16px 28px;
      font-size: 17px;
      font-weight: 700;
      border-radius: 14px;
      margin-top: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      box-shadow: 
        0 8px 24px rgba(102,126,234,0.4),
        0 4px 12px rgba(118,75,162,0.3);
    }
    
    .btn-shine{
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(255,255,255,0.3), 
        transparent);
      transition: left 0.5s ease;
    }
    
    .btn-login-submit:hover .btn-shine{
      left: 100%;
    }
    
    .btn-login-submit:hover{
      transform: translateY(-3px) scale(1.02);
      box-shadow: 
        0 12px 32px rgba(102,126,234,0.5),
        0 6px 16px rgba(118,75,162,0.4);
    }
    
    .btn-login-submit:active{
      transform: translateY(-1px) scale(0.98);
    }
    
    .btn-arrow{
      font-size: 20px;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    .btn-login-submit:hover .btn-arrow{
      transform: translateX(6px) scale(1.1);
    }
    
    /* Login Note */
    .login-note{
      font-size: 13px;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 16px;
      background: linear-gradient(135deg, 
        rgba(255,255,255,0.5) 0%, 
        rgba(255,255,255,0.3) 100%);
      backdrop-filter: blur(10px);
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.2);
      line-height: 1.6;
    }
    
    .note-icon{
      font-size: 16px;
      flex-shrink: 0;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
    }
    
    /* Mobile Optimizations */
    @media (max-width: 480px) {
      .login-card{
        padding: 40px 28px;
        border-radius: 24px;
        max-width: 100%;
        gap: 28px;
      }
      
      .login-title{
        font-size: 22px;
      }
      
      .login-subtitle{
        font-size: 14px;
      }
      
      .feature-item{
        padding: 12px 16px;
      }
      
      .feature-text{
        font-size: 13px;
      }
      
      .login-form-card{
        padding: 28px 24px;
      }
      
      .form-title{
        font-size: 20px;
      }
      
      .shape-1, .shape-2, .shape-3{
        filter: blur(60px);
      }
    }

    /* Branch selection - Modern Premium Design */
    #page-branch-select{
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:var(--bg);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:10000;
    }
    #page-branch-select.show{
      display:flex;
    }
    @keyframes gradientShift {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .branch-shell{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
      padding:var(--space-md);
    }
    .branch-panel{
      max-width:1000px;
      width:100%;
      border-radius:20px;
      background:var(--card);
      backdrop-filter:blur(30px);
      padding:var(--space-xl) var(--space-lg);
      box-shadow:var(--shadow-soft);
      border:1px solid var(--border);
      text-align:center;
      position:relative;
      overflow:hidden;
    }
    .branch-panel::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:4px;
      background:var(--accent);
    }
    .branch-picker-logo{
      width:120px;
      height:120px;
      border-radius:20px;
      object-fit:cover;
      box-shadow:0 24px 60px rgba(15,23,42,0.35),
                 0 0 0 4px rgba(255,255,255,0.8);
      margin:0 auto var(--space-md);
      background:transparent;
      transition:transform 0.3s ease;
    }
    .branch-picker-logo:hover{
      transform:scale(1.05) rotate(2deg);
    }
    .branch-picker-title{
      font-size:32px;
      font-weight:800;
      color:var(--text);
      margin:0 0 8px 0;
      letter-spacing:-0.02em;
    }
    .branch-picker-subtitle{
      font-size:var(--fs-sm);
      color:var(--muted);
      margin:0 0 var(--space-md) 0;
      font-weight:500;
    }
    .branch-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
      gap:var(--space-md);
      margin-top:var(--space-lg);
    }
    @media (max-width:768px){
      .branch-grid{
        grid-template-columns:repeat(2,1fr);
        gap:var(--space-sm);
      }
    }
    @media (max-width:480px){
      .branch-grid{
        grid-template-columns:1fr;
      }
      .branch-panel{
        padding:var(--space-lg) var(--space-md);
      }
      .branch-picker-title{
        font-size:var(--fs-2xl);
      }
    }
    .branch-card,
    .glass-branch-btn{
      border-radius:16px;
      background: var(--gradient-card);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border:2px solid var(--border);
      padding:var(--space-lg) var(--space-md);
      cursor:pointer;
      box-shadow: var(--shadow-medium), 0 1px 0 rgba(255,255,255,0.1) inset;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:var(--fs-sm);
      font-weight:600;
      transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      flex-direction:column;
      gap:var(--space-xs);
      position:relative;
      overflow:hidden;
      min-height:120px;
      color:var(--text);
    }
    .branch-card::before,
    .glass-branch-btn::before{
      content:'';
      position:absolute;
      top:0;
      left:0;
      right:0;
      height:4px;
      background: var(--gradient-accent);
      opacity:0;
      transition:opacity 0.4s ease;
      box-shadow: var(--shadow-glow);
    }
    .branch-card::after,
    .glass-branch-btn::after{
      content:'';
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(13,110,253,0.1) 0%, transparent 70%);
      transition: transform 0.6s ease;
      pointer-events: none;
    }
    .branch-card:hover::before,
    .glass-branch-btn:hover::before{
      opacity:1;
    }
    .branch-card:hover::after,
    .glass-branch-btn:hover::after{
      transform: translate(-50%, -50%) scale(1);
    }
    .branch-card:hover,
    .glass-branch-btn:hover{
      background: var(--gradient-accent);
      color:#ffffff;
      transform:translateY(-8px) scale(1.03);
      box-shadow: var(--shadow-large), var(--shadow-glow);
      border-color: transparent;
    }
    .branch-card:active,
    .glass-branch-btn:active{
      transform:translateY(-3px) scale(1.01);
    }
    .branch-card:focus,
    .glass-branch-btn:focus{
      outline:none;
      box-shadow:0 20px 60px rgba(102,126,234,0.4),
                 0 0 0 3px rgba(102,126,234,0.2);
    }
    .branch-name{
      font-size:20px;
      font-weight:700;
      color:inherit;
      margin:0;
      position:relative;
      z-index:1;
    }
    .branch-card:hover .branch-name,
    .glass-branch-btn:hover .branch-name{
      color:#ffffff;
    }
    .branch-tag{
      font-size:12px;
      color:inherit;
      opacity:0.75;
      font-weight:500;
      position:relative;
      z-index:1;
    }
    .branch-card:hover .branch-tag,
    .glass-branch-btn:hover .branch-tag{
      color:#ffffff;
      opacity:0.95;
    }
    /* Add icon/badge element */
    .branch-card::after,
    .glass-branch-btn::after{
      content:'';
      position:absolute;
      top:16px;
      right:16px;
      width:32px;
      height:32px;
      border-radius:50%;
      background:linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.15));
      opacity:0.6;
      transition:all 0.3s ease;
    }
    .branch-card:hover::after,
    .glass-branch-btn:hover::after{
      background:rgba(255,255,255,0.25);
      opacity:1;
      transform:scale(1.1);
    }
    [dir="rtl"] .branch-card::after,
    [dir="rtl"] .glass-branch-btn::after{
      right:auto;
      left:16px;
    }

    /* ========= GLOBAL PRINT SYSTEM ========= */
    @media print {
      /* A4 Page Setup */
      @page {
        size: A4 portrait;
        margin: 12mm 15mm;
      }
      
      /* Base print layout */
      body {
        background: #ffffff !important;
        color: #000000 !important;
        margin: 0;
        padding: 0;
      }
      
      /* Hide normal app chrome while printing */
      nav,
      .top-bar,
      .sidebar,
      .app-shell,
      .app-sidebar,
      .app-statusbar,
      .cash-pill,
      .app-body,
      .workspace,
      .main-layout,
      .page-content,
      .screen-login,
      .screen,
      button,
      input,
      select,
      .btn,
      .form-card,
      .form-grid,
      .profit-filter-bar {
        display: none !important;
        visibility: hidden !important;
      }
      
      /* Show page content when printing */
      .page.active,
      .page.active .page-inner,
      .page.active .page-header,
      .page.active .dashboard-panel,
      .page.active table {
        display: block !important;
        visibility: visible !important;
      }
      
      .page.active .page-inner {
        display: block !important;
      }
      
      .page.active table {
        display: table !important;
        width: 100% !important;
      }
      
      .page.active .table-responsive {
        display: block !important;
        overflow: visible !important;
        max-height: none !important;
      }
      
      /* Show only print root */
      #print-root {
        display: block !important;
        visibility: visible !important;
      }
      
      /* Print page container */
      .print-page {
        direction: rtl;
        font-family: inherit;
        max-width: 750px;
        margin: 0 auto;
        position: relative;
        background: #ffffff;
        color: #000000;
        padding: 0;
      }

      /* Minimal header for print (company + branch) */
      .app-header {
        display: block !important;
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        border-bottom: 1px solid #000 !important;
        padding: 0 0 8px 0 !important;
        margin: 0 !important;
      }
      #app-logo,
      .header-menu-toggle,
      .header-right,
      .header-icon-btn,
      .header-lang-btn,
      .header-user-avatar {
        display: none !important;
      }
      .header-titles { display: block !important; }
      .header-system-name,
      .header-system-subtitle { color: #000 !important; }
      .header-center {
        display: block !important;
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 6px !important;
        font-size: 12px !important;
      }
      .header-branch-label { color: #000 !important; }
      #branch-name-label {
        background: #eeeeee !important;
        color: #000 !important;
        box-shadow: none !important;
        border: 1px solid #cccccc !important;
      }

      /* Page title area for print */
      .page-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        border-bottom: 2px solid #000 !important;
        padding: 0 0 8px 0 !important;
        margin-bottom: 10px !important;
        background: transparent !important;
        box-shadow: none !important;
      }
      .page-header-actions { display: none !important; }
      .page-header-main h2 { color: #000 !important; font-weight: 700 !important; }

      /* Date range: show only the fields as inline text */
      .report-filter-bar {
        display: block !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
      }
      .report-filter-bar-title,
      .report-quick-filters,
      .report-filter-actions { display: none !important; }
      .report-filter-fields { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; }
      .report-filter-fields .field { display: flex !important; align-items: center !important; gap: 6px !important; }
      .report-filter-fields .field label { color: #000 !important; font-weight: 600 !important; }
      .report-filter-fields .field input,
      .report-filter-fields .field select {
        display: inline-block !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        color: #000 !important;
        min-width: 120px !important;
        -webkit-appearance: none !important;
        appearance: none !important;
      }
      
      /* Light logo watermark in the background */
      .print-page::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("../img/logo.png") center center no-repeat;
        background-size: 35%;
        opacity: 0.05;
        pointer-events: none;
        z-index: 0;
      }
      
      /* Ensure content is above watermark */
      .print-page > * {
        position: relative;
        z-index: 1;
      }

      /* Print Header - Professional Layout */
      .print-header {
        margin-bottom: 20px !important;
        padding-bottom: 15px !important;
        border-bottom: 3px solid #000000 !important;
      }
      
      .print-header > div:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin-bottom: 15px !important;
        flex-wrap: wrap !important;
      }
      
      .print-header-title,
      .print-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin: 0 0 10px 0 !important;
        color: #000000 !important;
        text-align: center !important;
      }
      
      .print-header-subtitle {
        font-size: 16px !important;
        font-weight: 600 !important;
        margin-top: 6px !important;
        color: #000000 !important;
      }
      
      .print-header-meta {
        text-align: right !important;
        font-size: 12px !important;
        color: #000000 !important;
        margin-top: 0 !important;
        line-height: 1.8 !important;
        font-weight: 600 !important;
      }
      
      .print-header-meta div {
        display: block !important;
        margin-bottom: 6px !important;
      }
      
      .print-header-meta strong {
        font-weight: 700 !important;
        color: #000000 !important;
      }
      
      [dir="ltr"] .print-header-meta {
        text-align: left !important;
      }
      
      .print-header-meta span {
        display: block !important;
        margin-bottom: 4px !important;
        font-weight: 600 !important;
      }
      
      .print-header-main-title {
        font-size: 22px !important;
        font-weight: 700 !important;
        margin: 0 !important;
        color: #000000 !important;
      }
      
      .print-header-report-title {
        font-size: 18px !important;
        font-weight: 700 !important;
        margin-top: 12px !important;
        color: #000000 !important;
        text-align: center !important;
        padding-top: 12px !important;
        border-top: 2px solid #000000 !important;
      }
      
      .print-section-title {
        text-align: center !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        margin: 15px 0 !important;
        color: #000000 !important;
      }
      
      .print-meta-row {
        font-weight: 600 !important;
        margin-bottom: 6px !important;
      }
      
      .print-meta-row span {
        font-weight: 600 !important;
        color: #000000 !important;
      }

      /* Report Table - Professional Financial Report */
      .report-table,
      table {
        width: 100% !important;
        border-collapse: collapse !important;
        margin-top: 12px !important;
        margin-bottom: 12px !important;
        font-size: 11px !important;
        page-break-inside: auto;
        font-variant-numeric: tabular-nums !important;
      }
      
      .report-table th,
      .report-table td,
      table th,
      table td {
        border: 1.5px solid #000000 !important;
        padding: 8px 10px !important;
        font-weight: 600 !important;
      }
      
      .report-table th,
      table th {
        background: #f0f0f0 !important;
        font-weight: 700 !important;
        text-align: center !important;
        font-size: 12px !important;
        border: 2px solid #000000 !important;
        padding: 10px 12px !important;
      }
      
      .report-table td,
      table td {
        text-align: right !important;
        font-weight: 500 !important;
        border: 1.5px solid #333333 !important;
      }
      
      .report-table tr:nth-child(even) td,
      table tr:nth-child(even) td {
        background: #f9f9f9 !important;
      }
      
      .report-table thead,
      table thead {
        display: table-header-group !important;
      }
      
      .report-table tbody,
      table tbody {
        display: table-row-group !important;
      }
      
      .report-table tr,
      table tr {
        page-break-inside: avoid;
        page-break-after: auto;
      }

      /* Avoid page breaks inside summaries */
      .summary-box,
      .report-summary-card,
      .dashboard-panel { page-break-inside: avoid !important; }

      /* Remove watermarks/gradients/animations for print cleanliness */
      .print-page::before,
      .print-section::before { content: none !important; display: none !important; }
      * { background-image: none !important; animation: none !important; }

      /* Footer with page number and system name */
      body::after {
        content: 'صفحة ' counter(page) ' • Pharma Financial Suite';
        position: fixed;
        bottom: 8mm;
        left: 15mm;
        right: 15mm;
        text-align: left;
        font-size: 10px;
        color: #666;
      }
      [dir="rtl"] body::after { text-align: right; }
      
      /* Make any scrollable wrappers expandable on print */
      .card-body,
      .table-wrapper,
      .scrollable,
      .report-card,
      .report-container,
      .table-responsive,
      .report-table-container,
      .section-box {
        overflow: visible !important;
        max-height: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 15px 0 !important;
      }
      
      /* Ensure all text is bold and clear */
      .print-section,
      .print-section * {
        color: #000000 !important;
        font-weight: 600 !important;
      }
      
      .print-section h1,
      .print-section h2,
      .print-section h3,
      .print-section h4 {
        font-weight: 700 !important;
        color: #000000 !important;
      }
      
      /* Print Logo */
      .print-logo {
        max-height: 50px !important;
        object-fit: contain !important;
        display: inline-block !important;
        vertical-align: middle !important;
        margin-bottom: 10px !important;
      }
      
      /* Print Logo */
      .print-logo {
        max-height: 40px;
        object-fit: contain;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 8px;
      }

      /* Print Page Watermark */
      .print-section::before {
        content: '';
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        width: 400px;
        height: 400px;
        background-image: url('../img/logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.05;
        z-index: 0;
        pointer-events: none;
      }

      .print-section > * {
        position: relative;
        z-index: 1;
      }

      /* Optional page footer */
      .print-footer {
        margin-top: 16px;
        font-size: 10px;
        text-align: left;
        color: #666;
      }
      
      [dir="rtl"] .print-footer {
        text-align: right;
      }
    }
    
    /* Hide print-root on screen */
    .print-root {
      display: none;
    }

    /* Dashboard responsive layout */
    @media (max-width: 1024px) {
      .page-inner > div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
    }

    /* Centered Card Layout for All Form Pages */
    .form-page-container {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      min-height: auto;
      padding: var(--space-md) var(--space-sm);
      margin-bottom: var(--space-sm);
    }

    .form-page-card {
      width: 100%;
      max-width: 700px;
      background: var(--card);
      border-radius: 10px;
      padding: var(--space-md);
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      margin-inline: auto;
    }

    .form-page-card .field {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      margin-bottom: 0;
    }
    
    .form-page-card h3 {
      margin-bottom: var(--space-sm) !important;
      font-size: var(--fs-md) !important;
    }
    
    .form-page-card p {
      margin-bottom: var(--space-sm) !important;
      font-size: var(--fs-xs) !important;
    }

    .form-page-card .field label {
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--text);
      text-align: right;
      line-height: var(--lh-tight);
    }

    .form-page-card .field input,
    .form-page-card .field select,
    .form-page-card .field textarea {
      width: 100%;
      padding: var(--space-sm) var(--space-md);
      font-size: var(--fs-sm);
      border-radius: var(--radius-md);
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      outline: none;
      transition: all 0.2s ease;
      text-align: right;
      line-height: var(--lh-normal);
    }

    .form-page-card .field textarea {
      min-height: 100px;
      resize: vertical;
      font-family: inherit;
    }

    .form-page-card .field input:focus,
    .form-page-card .field select:focus,
    .form-page-card .field textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }

    .form-page-card .form-actions {
      margin-top: var(--space-xs);
      display: flex;
      flex-direction: row;
      gap: var(--space-xs);
      justify-content: flex-end;
    }

    .form-page-card .form-actions .btn {
      padding: var(--space-sm) var(--space-lg);
      font-size: var(--fs-sm);
      font-weight: 600;
      border-radius: var(--radius-md);
      transition: all 0.2s ease;
      white-space: nowrap;
    }
    
    @media (max-width: 640px) {
      .form-page-card .form-actions {
        flex-direction: column;
      }
      .form-page-card .form-actions .btn {
        width: 100%;
      }
    }

    .form-page-card .form-actions .btn-primary {
      box-shadow: var(--shadow-soft);
    }

    .form-page-card .form-actions .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .form-page-card .form-actions .btn-primary:active {
      transform: translateY(0);
    }

    .form-page-card .field input[type="checkbox"] {
      width: auto;
      margin: 0;
      cursor: pointer;
    }

    /* ========== REPORT PAGES UNIFIED STYLES ========== */
    
    /* Report Filter Bar */
    .report-filter-bar {
      background: var(--card);
      border-radius: 10px;
      padding: var(--space-sm) var(--space-md);
      margin-bottom: var(--space-sm);
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--border);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      align-items: flex-end;
    }

    .report-filter-bar-title {
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--text);
      width: 100%;
      margin-bottom: var(--space-xs);
      text-align: right;
      line-height: var(--lh-tight);
    }

    .report-quick-filters {
      display: flex;
      gap: var(--space-xs);
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .report-quick-filters .btn {
      padding: var(--space-xs) var(--space-md);
      font-size: var(--fs-xs);
      border-radius: 999px;
      transition: all 0.2s ease;
    }

    .report-quick-filters .btn.active {
      background: var(--accent);
      color: #ffffff;
      border-color: var(--accent);
    }

    .report-filter-fields {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      flex: 1;
      min-width: 200px;
    }
    
    .report-filter-fields .field {
      flex: 1;
      min-width: 150px;
      margin-bottom: 0;
    }

    .report-filter-actions {
      display: flex;
      gap: var(--space-xs);
      justify-content: flex-end;
      align-items: center;
    }

    .report-filter-actions .btn {
      padding: var(--space-sm) var(--space-lg);
      font-size: var(--fs-sm);
    }

    /* Report Summary Card */
    .report-summary-card {
      background: var(--card);
      border-radius: 10px;
      padding: var(--space-sm) var(--space-md);
      margin-bottom: var(--space-sm);
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--border);
    }

    .report-summary-title {
      font-size: var(--fs-sm);
      font-weight: 600;
      color: var(--text);
      margin-bottom: var(--space-xs);
      text-align: right;
      padding-bottom: var(--space-xs);
      border-bottom: 2px solid var(--border);
      line-height: var(--lh-tight);
    }

    .report-summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--space-xs);
    }

    .report-summary-item {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
      padding: var(--space-xs) var(--space-sm);
      background: var(--bg-soft);
      border-radius: 10px;
      text-align: right;
    }

    .report-summary-item-label {
      font-size: var(--fs-xs);
      color: var(--muted);
      font-weight: 500;
      line-height: var(--lh-tight);
    }

    .report-summary-item-value {
      font-size: var(--fs-md);
      font-weight: 700;
      color: var(--text);
      line-height: var(--lh-tight);
    }

    .report-summary-item-value.positive {
      color: #10b981;
    }

    .report-summary-item-value.negative {
      color: var(--danger);
    }

    /* Report Summary Card - Theme Support */
    /* Ensure report-summary-card respects theme */
    body.theme-dark .report-summary-card,
    html[data-theme="dark"] .report-summary-card {
      background: #161b22 !important; /* Same as other dark cards */
      color: #e6edf3;
      border-color: #30363d;
    }

    body.theme-dark .report-summary-card .report-summary-title,
    html[data-theme="dark"] .report-summary-card .report-summary-title {
      color: #e6edf3;
      border-bottom-color: #30363d;
    }

    body.theme-dark .report-summary-card .report-summary-item,
    html[data-theme="dark"] .report-summary-card .report-summary-item {
      background: #0d1117;
    }

    body.theme-dark .report-summary-card .report-summary-item-label,
    html[data-theme="dark"] .report-summary-card .report-summary-item-label {
      color: #8b949e;
    }

    body.theme-dark .report-summary-card .report-summary-item-value,
    html[data-theme="dark"] .report-summary-card .report-summary-item-value {
      color: #e6edf3;
    }

    /* Light theme explicit (to override any forced white) */
    body:not(.theme-dark):not(.theme-corporate) .report-summary-card,
    html[data-theme="light"] .report-summary-card,
    html:not([data-theme]) .report-summary-card {
      background: #ffffff;
      color: #1e293b;
    }

    /* Report Table Container */
    .report-table-container {
      background: var(--card);
      border-radius: 10px;
      padding: var(--space-sm);
      box-shadow: var(--shadow-soft);
      border: 1px solid var(--border);
      overflow: hidden;
    }

    .report-table-container .table-responsive {
      max-height: 500px;
      overflow: auto;
      border-radius: 10px;
    }

    .report-table-container table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--fs-sm);
    }

    .report-table-container thead {
      background: var(--bg-soft);
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .report-table-container th {
      padding: var(--space-xs) var(--space-sm);
      text-align: right;
      font-weight: 600;
      color: var(--text);
      border-bottom: 2px solid var(--border);
      font-size: var(--fs-xs);
      line-height: var(--lh-tight);
    }

    .report-table-container td {
      padding: var(--space-xs) var(--space-sm);
      text-align: right;
      border-bottom: 1px solid var(--border);
      color: var(--text);
      line-height: var(--lh-normal);
      font-size: var(--fs-xs);
    }

    .report-table-container td.number {
      text-align: center;
      font-family: 'Courier New', monospace;
      font-weight: 500;
    }

    /* Profit Analysis Report Card - Theme Support */
    /* Ensure report-table-container respects theme (used by Profit Analysis) */
    body.theme-dark .report-table-container,
    html[data-theme="dark"] .report-table-container {
      background: #161b22 !important; /* Same as other dark cards */
      color: #e6edf3;
      border-color: #30363d;
    }

    body.theme-dark .report-table-container th,
    html[data-theme="dark"] .report-table-container th {
      background: #0d1117;
      color: #e6edf3;
      border-bottom-color: #30363d;
    }

    body.theme-dark .report-table-container td,
    html[data-theme="dark"] .report-table-container td {
      color: #e6edf3;
      border-bottom-color: #30363d;
    }

    /* Light theme explicit (to override any forced white) */
    body:not(.theme-dark):not(.theme-corporate) .report-table-container,
    html[data-theme="light"] .report-table-container,
    html:not([data-theme]) .report-table-container {
      background: #ffffff;
      color: #1e293b;
    }

    /* Print Styles for Reports */

    @media (max-width: 640px) {
      .form-page-card {
        max-width: 100%;
        padding: var(--space-md);
      }
      .workspace {
        padding-inline: var(--space-sm);
      }
      .app-main {
        padding: var(--space-sm);
      }
      .report-filter-bar {
        flex-direction: column;
        align-items: stretch;
      }
      .report-filter-fields {
        flex-direction: column;
      }
      .report-filter-fields .field {
        width: 100%;
      }
      .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xs);
      }
      .page-header-actions {
        margin-inline: 0;
        justify-content: flex-start;
      }
    }
    
    /* ========================================
       LAYOUT REFACTORING SUMMARY
       ========================================
       
       1. HEADER ALIGNMENT (Print Button & Page Title)
       - .page-header: Flex container with space-between
       - .page-header-main: Title/subtitle on right (RTL) or left (LTR)
       - .page-header-actions: Print button on far left (RTL) or right (LTR)
       - .btn-print-page: Consistent styling across all pages
       
       2. TOP TOOLBAR SIMPLIFICATION
       - #btn-theme-toggle: Single cycling button (light → dark → corporate)
       - #btn-lang-toggle: Single toggle button (AR ↔ EN)
       - Removed: #themeSwitcher (multiple buttons), #btn-lang-ar, #btn-lang-en
       
       3. CONTENT ALIGNMENT
       - .page-inner: Removed padding-inline to align with header
       - .page-header-main: Aligned with content cards/tables below
       - Consistent horizontal alignment throughout pages
       
       ======================================== */
    
    /* Additional compact spacing utilities */
    .page-header {
      margin-bottom: var(--space-sm);
    }
    
    /* Ensure consistent vertical rhythm */
    .page-inner > * + * {
      margin-top: var(--space-sm);
    }
    
    /* Compact profit filter bar */
    .profit-filter-bar {
      padding: var(--space-xs) var(--space-sm);
      margin-bottom: var(--space-xs);
    }
    
    .profit-filter-btn {
      padding: var(--space-xs) var(--space-md);
      font-size: var(--fs-xs);
    }
    
    /* Dashboard specific compact styles */
    #page-dashboard .section-box {
      margin-bottom: var(--space-xs);
    }
    
    #page-dashboard .form-grid {
      gap: var(--space-xs);
      margin-bottom: var(--space-xs);
    }
    
    #page-dashboard h3 {
      margin-bottom: var(--space-xs) !important;
      font-size: var(--fs-sm) !important;
    }
    
    #page-dashboard p {
      margin-bottom: var(--space-xs) !important;
      font-size: var(--fs-xs) !important;
    }
    
    /* Compact table styles */
    .table-responsive {
      max-height: 400px;
      font-size: var(--fs-xs);
    }
    
    /* Ensure cards don't stretch too wide */
    .card {
      max-width: 100%;
    }
    
    /* Compact branch selection */
    .branch-grid {
      gap: var(--space-md);
      margin-top: var(--space-lg);
    }
    
    /* Compact login card */
    .login-card {
      padding: var(--space-lg);
      gap: var(--space-md);
    }
    
    /* Ensure RTL spacing works correctly */
    [dir="rtl"] .form-page-card .form-actions {
      justify-content: flex-start;
    }
    
    [dir="rtl"] .report-filter-actions {
      justify-content: flex-start;
    }
    
    /* Responsive adjustments for smaller screens */
    @media (max-width: 1024px) {
      .workspace {
        max-width: 100%;
        padding-inline: var(--space-sm);
      }
      .app-sidebar {
        width: 180px;
      }
    }
    
    @media (max-width: 768px) {
      .dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }
      .kpi-card {
        padding: var(--space-sm);
      }
      .report-summary-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ========= RESPONSIVE DESIGN ========= */
    /* Breakpoints:
       Mobile: max-width: 767px
       Tablet: 768px to 1023px
       Desktop: 1024px and above
    */

    /* ========= MOBILE STYLES (< 768px) ========= */
    @media (max-width: 767px) {
      /* Hamburger Menu Button */
      .header-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: none;
        background: var(--bg-soft);
        border-radius: 8px;
        font-size: 20px;
        cursor: pointer;
        color: var(--text);
        margin-inline-end: 12px;
        transition: background 0.2s ease;
        flex-shrink: 0;
      }
      
      .header-menu-toggle:hover {
        background: var(--accent-soft);
      }

      /* Header adjustments */
      .app-header {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
        height: auto;
        align-items: flex-start;
        padding-bottom: 12px;
      }

      .header-left {
        flex: 1;
        min-width: 0;
      }

      .header-titles {
        display: none; /* Hide on very small screens */
      }

      .header-center {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 8px;
        padding-top: 6px;
        font-size: 12px;
      }

      .header-branch-label {
        display: inline-block;
        margin-inline-end: 6px;
      }

      #branch-name-label {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 6px 12px;
      }

      .header-right {
        gap: 6px;
      }

      .header-icon-btn,
      .header-lang-btn {
        min-width: 32px;
        height: 32px;
        padding: 4px 8px;
        font-size: 14px;
      }

      .header-user-avatar {
        width: 28px;
        height: 28px;
        font-size: 12px;
      }

      /* Sidebar - Mobile Overlay */
      .app-sidebar {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
      }

      [dir="ltr"] .app-sidebar {
        right: auto;
        left: 0;
        transform: translateX(-100%);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
      }

      .app-sidebar.mobile-open {
        transform: translateX(0);
      }

      /* Sidebar overlay backdrop */
      .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        backdrop-filter: blur(2px);
      }

      .sidebar-overlay.active {
        display: block;
      }

      /* Main content adjustments */
      .app-main {
        width: 100%;
      }

      .workspace {
        padding: 12px;
      }

      .page-header {
        padding: 12px;
        margin-bottom: 12px;
      }

      .page-title {
        font-size: 20px;
      }

      .page-subtitle {
        font-size: 13px;
      }

      /* Forms - Full width on mobile */
      .form-page-container {
        max-width: 100%;
        padding: 0;
      }

      .form-page-card,
      .form-card {
        width: 100%;
        padding: 16px;
        margin-bottom: 16px;
      }

      .form-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
      }

      .field {
        width: 100%;
      }

      .field input,
      .field select,
      .field textarea {
        width: 100%;
        box-sizing: border-box;
      }

      /* Buttons - Full width or stacked */
      .form-actions {
        flex-direction: column;
        gap: 8px;
      }

      .form-actions .btn {
        width: 100%;
      }

      /* Dashboard - Stack cards */
      .dashboard-panel {
        width: 100%;
        margin-bottom: 16px;
      }

      /* Dashboard grid layout - stack on mobile */
      .dashboard-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
      }

      /* Two-column layouts become single column */
      .page-inner > div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
      }

      /* Report filters - Stack vertically */
      .report-filter-bar {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
      }

      .report-quick-filters {
        flex-wrap: wrap;
        gap: 6px;
      }

      .report-filter-fields {
        grid-template-columns: 1fr !important;
        gap: 12px;
      }

      .report-filter-actions {
        flex-direction: column;
        width: 100%;
      }

      .report-filter-actions .btn {
        width: 100%;
      }

      /* Profit filter bar */
      .profit-filter-bar {
        flex-wrap: wrap;
        gap: 8px;
      }

      /* Tables - Horizontal scroll */
      .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
      }

      .table-responsive table {
        min-width: 600px;
      }

      /* Summary boxes */
      .summary-box {
        padding: 12px;
      }

      /* Status bar adjustments */
      .app-statusbar {
        flex-wrap: wrap;
        padding: 8px 12px;
        height: auto;
        min-height: 36px;
      }

      .status-left,
      .status-right {
        width: 100%;
        justify-content: space-between;
        margin: 4px 0;
      }

      /* Login screen adjustments */
      .login-shell {
        padding: 16px;
      }

      .login-card {
        padding: 24px 20px;
      }

      /* Branch picker */
      .grid-2 {
        grid-template-columns: 1fr !important;
      }

      /* Print button adjustments */
      .btn-print-page {
        width: 100%;
        margin-top: 8px;
      }
    }

    /* ========= TABLET STYLES (768px - 1023px) ========= */
    @media (min-width: 768px) and (max-width: 1023px) {
      /* Hide hamburger on tablet */
      .header-menu-toggle {
        display: none !important;
      }

      /* Sidebar - Slightly narrower */
      .app-sidebar {
        width: 220px;
      }

      /* Main content */
      .workspace {
        padding: 16px;
      }

      /* Forms - Medium width */
      .form-page-container {
        max-width: 700px;
      }

      /* Two-column layouts can stay but with adjusted gaps */
      .form-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }

      /* Dashboard - Can keep two columns but adjust */
      .dashboard-grid-layout {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
      }

      .page-inner > div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px;
      }

      /* Report filters - Can stay in row but wrap */
      .report-filter-bar {
        flex-wrap: wrap;
      }

      .report-filter-fields {
        grid-template-columns: repeat(2, 1fr) !important;
      }
    }

    /* ========= DESKTOP STYLES (>= 1024px) ========= */
    @media (min-width: 1024px) {
      /* Hide hamburger on desktop */
      .header-menu-toggle {
        display: none !important;
      }

      /* Sidebar - Fixed width */
      .app-sidebar {
        width: 260px;
      }

      /* Main content - Centered with max-width */
      .workspace {
        max-width: 1300px;
        margin: 0 auto;
        padding: 24px;
      }

      /* Forms - Centered with max-width */
      .form-page-container {
        max-width: 700px;
        margin: 0 auto;
      }

      /* Reduce excessive vertical spacing */
      .page-inner {
        gap: 20px;
      }

      .form-page-card,
      .form-card {
        margin-bottom: 20px;
      }

      /* Better table spacing */
      .report-table-container {
        margin-bottom: 20px;
      }

      /* Dashboard - Two column layout */
      .dashboard-grid-layout {
        grid-template-columns: 2fr 1fr !important;
        gap: 24px !important;
      }

      .page-inner > div[style*="grid-template-columns: 2fr 1fr"] {
        gap: 24px;
      }
    }

    /* ========= GENERAL RESPONSIVE UTILITIES ========= */
    /* Table responsive wrapper (use this class on all tables) */
    .table-responsive {
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    @media (min-width: 1024px) {
      .table-responsive {
        overflow-x: visible;
      }
    }

    /* Responsive text sizes */
    @media (max-width: 767px) {
      h1 { font-size: 24px; }
      h2 { font-size: 20px; }
      h3 { font-size: 18px; }
      .page-title { font-size: 20px; }
      .section-title { font-size: 16px; }
    }

    /* Button consistency */
    .btn {
      min-height: 40px;
      border-radius: 8px;
      font-weight: 500;
      transition: all 0.2s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

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

    /* Card consistency */
    .card,
    .form-card,
    .form-page-card,
    .dashboard-panel,
    .section-box {
      border-radius: 12px;
      box-shadow: var(--shadow-soft);
      transition: box-shadow 0.2s ease;
    }

    .card:hover,
    .form-card:hover,
    .dashboard-panel:hover {
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    }

    /* ========= SPLASH SCREEN ========= */
    .splash-screen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 25%, #2d1b4e 50%, #1a1f3a 75%, #0a0e27 100%);
      background-size: 400% 400%;
      animation: splashGradientShift 20s ease infinite;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      opacity: 1;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s ease;
      overflow: hidden;
    }

    .splash-screen.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .splash-background-pattern {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(75, 0, 130, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(25, 25, 112, 0.1) 0%, transparent 70%);
      animation: splashPatternMove 25s ease infinite;
      pointer-events: none;
    }

    .splash-content {
      text-align: center;
      color: white;
      position: relative;
      z-index: 2;
      padding: 2rem;
      animation: splashContentFadeIn 1s ease-out;
    }

    .splash-logo-wrapper {
      position: relative;
      margin-bottom: 3rem;
      display: inline-block;
      width: 160px;
      height: 160px;
    }

    .splash-logo-ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      border: 2px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      animation: splashRingRotate 8s linear infinite;
    }

    .splash-logo-ring::before {
      content: '';
      position: absolute;
      top: -2px;
      left: 50%;
      width: 4px;
      height: 4px;
      background: rgba(255, 255, 255, 0.6);
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    .splash-logo-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 180px;
      height: 180px;
      background: radial-gradient(circle, rgba(138, 43, 226, 0.4) 0%, rgba(75, 0, 130, 0.2) 40%, transparent 70%);
      border-radius: 50%;
      animation: splashGlowPulse 3s ease-in-out infinite;
      z-index: 1;
      filter: blur(20px);
    }

    .splash-logo {
      width: 140px;
      height: 140px;
      border-radius: 28px;
      box-shadow: 
        0 0 40px rgba(138, 43, 226, 0.5),
        0 20px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
      animation: splashLogoFloat 3s ease-in-out infinite;
      position: relative;
      z-index: 3;
      object-fit: contain;
      background: rgba(255, 255, 255, 0.05);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .splash-logo-shine {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      width: 140px;
      height: 140px;
      background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        transparent 100%
      );
      border-radius: 28px;
      animation: splashShine 4s ease-in-out infinite;
      z-index: 4;
      pointer-events: none;
    }

    .splash-title-wrapper {
      margin-bottom: 3rem;
      animation: splashTitleFadeIn 1.2s ease-out 0.3s both;
    }

    .splash-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 0.5rem;
      text-shadow: 
        0 0 20px rgba(138, 43, 226, 0.5),
        0 4px 15px rgba(0, 0, 0, 0.4);
      letter-spacing: 1px;
      background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .splash-subtitle {
      font-size: 0.9rem;
      font-weight: 400;
      opacity: 0.7;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-top: 0.5rem;
    }

    .splash-loader-wrapper {
      width: 280px;
      margin: 0 auto;
      animation: splashLoaderFadeIn 1.4s ease-out 0.6s both;
    }

    .splash-progress-bar {
      width: 100%;
      height: 2px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 10px;
      overflow: hidden;
      margin-bottom: 1rem;
      position: relative;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
    }

    .splash-progress-bar::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
      );
      animation: splashProgressShimmer 2s ease-in-out infinite;
    }

    .splash-progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #8a2be2 0%, #9370db 50%, #8a2be2 100%);
      background-size: 200% 100%;
      border-radius: 10px;
      animation: splashProgressFill 1.5s ease-out forwards, splashProgressGradient 2s linear infinite;
      box-shadow: 0 0 10px rgba(138, 43, 226, 0.6);
    }

    .splash-loader-text {
      font-size: 0.75rem;
      font-weight: 300;
      opacity: 0.6;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    @keyframes splashGradientShift {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes splashPatternMove {
      0%, 100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(20px, -20px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
    }

    @keyframes splashRingRotate {
      from {
        transform: translate(-50%, -50%) rotate(0deg);
      }
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    @keyframes splashGlowPulse {
      0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.15);
      }
    }

    @keyframes splashLogoFloat {
      0%, 100% {
        transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-10px) scale(1.02);
      }
    }

    @keyframes splashShine {
      0%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateX(-100%) rotate(45deg);
      }
      50% {
        opacity: 1;
        transform: translate(-50%, -50%) translateX(100%) rotate(45deg);
      }
    }

    @keyframes splashContentFadeIn {
      from {
        opacity: 0;
        transform: scale(0.95);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

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

    @keyframes splashLoaderFadeIn {
      from {
        opacity: 0;
        transform: translateY(15px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes splashProgressFill {
      from {
        width: 0%;
      }
      to {
        width: 100%;
      }
    }

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

    @keyframes splashProgressShimmer {
      0%, 100% {
        opacity: 0;
      }
      50% {
        opacity: 0.5;
      }
    }

    /* Responsive adjustments for splash screen */
    @media (max-width: 768px) {
      .splash-logo-wrapper {
        width: 140px;
        height: 140px;
      }

      .splash-logo {
        width: 120px;
        height: 120px;
      }

      .splash-logo-ring {
        width: 170px;
        height: 170px;
      }

      .splash-logo-glow {
        width: 150px;
        height: 150px;
      }

      .splash-title {
        font-size: 1.5rem;
      }

      .splash-subtitle {
        font-size: 0.8rem;
      }

      .splash-loader-wrapper {
        width: 240px;
      }

      .splash-progress-fill {
        animation: splashProgressFill 2.5s ease-out forwards, splashProgressGradient 2s linear infinite;
      }
    }

    /* ========= HIDE ADDRESS BAR (iOS Safari) ========= */
    @supports (-webkit-touch-callout: none) {
      body {
        /* iOS Safari specific */
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
      }
    }

    /* Full screen mode styles */
    @media all and (display-mode: standalone) {
      body {
        /* PWA is running in standalone mode */
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
      }
    }

    /* Hide browser UI elements when in standalone mode */
    @media (display-mode: standalone) {
      body {
        overscroll-behavior: none;
      }
    }
/* ===============================
   HARD MOBILE LAYOUT OVERRIDE
   KILLS THE DARK COLUMN ISSUE
   =============================== */
@media (max-width: 768px) {

  /* ========== FIX .app-body FLEX LAYOUT ========== */
  .app-body {
    display: block !important;
    flex-direction: column !important;
  }

  [dir="rtl"] .app-body {
    flex-direction: column !important;
  }

  /* ========== SINGLE PAGE VISIBILITY ENFORCEMENT (MOBILE) ========== */
  .page,
  .app-page {
    display: none !important;
  }
  
  .page.active,
  .app-page.active {
    display: block !important;
  }
  
  /* Force hide all non-active pages on mobile */
  .page:not(.active),
  .app-page:not(.active) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
  }
  
  /* Prevent page stacking */
  .page.active,
  .app-page.active {
    position: relative !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
    left: auto !important;
  }

  /* ========== SIDEBAR OFF-CANVAS ========== */
  .app-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    width: min(82vw, 320px) !important;
    z-index: 2000 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: -2px 0 16px rgba(0,0,0,0.15) !important;
  }

  [dir="ltr"] .app-sidebar {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
  }

  /* Sidebar open state */
  body.sidebar-open .app-sidebar {
    transform: translateX(0) !important;
  }

  /* Sidebar does NOT participate in layout */
  .app-sidebar {
    order: unset !important;
  }

  /* ========== SIDEBAR OVERLAY (BACKDROP) ========== */
  .sidebar-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 1999 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s !important;
  }

  body.sidebar-open .sidebar-overlay {
    opacity: 1 !important;
    pointer-events: all !important;
  }

  /* ========== MAIN CONTENT FULL WIDTH ========== */
  .app-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-inline: 14px !important;
    order: unset !important;
  }

  [dir="rtl"] .app-main {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  /* ========== ANY Layout Grid أساسي */
  body,
  .app-layout,
  .layout,
  .page,
  .dashboard,
  .content-area,
  .main-layout {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  /* ========== أي عنصر واخد 100vw / 100vh غامق */
  .layout::before,
  .layout::after,
  .page::before,
  .page::after,
  .overlay,
  .backdrop,
  .bg-panel,
  .side-panel,
  .dark-panel {
    display: none !important;
  }

  /* ========== العمود الغامق نفسه */
  .layout > div,
  .page > div,
  .dashboard > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ========== المحتوى الحقيقي */
  .main,
  .main-content,
  .content,
  .content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-inline: 14px !important;
    background: transparent !important;
  }

  /* ========== أمان */
  html, body {
    overflow-x: hidden !important;
  }

  /* ========== MOBILE DASHBOARD LAYOUT (<= 480px) ========== */
  @media (max-width: 480px) {
    /* Dashboard Page Container */
    #page-dashboard .page-inner {
      padding: 12px !important;
    }

    /* ========== PREMIUM TOOLBAR CARD ========== */
    .dash-toolbar-card,
    .section-box.dash-toolbar-card,
    .dashboard-filters.dash-toolbar-card {
      width: 100% !important;
      max-width: 100% !important;
      padding: 14px 16px !important;
      margin-bottom: 12px !important;
      background: #fff !important;
      border: 1px solid rgba(0, 0, 0, 0.06) !important;
      border-radius: 16px !important;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06) !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    /* ========== HEAD SECTION ========== */
    .dash-toolbar-head {
      margin-bottom: 12px !important;
      padding-bottom: 10px !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    }

    .dash-title {
      font-size: 16px !important;
      font-weight: 700 !important;
      margin: 0 0 6px 0 !important;
      text-align: right !important;
      color: #0f172a !important;
      line-height: 1.3 !important;
    }

    .dash-subtitle {
      font-size: 12px !important;
      color: #64748b !important;
      margin: 0 !important;
      text-align: right !important;
      line-height: 1.4 !important;
    }

    /* ========== DATE INPUTS (PROFESSIONAL GRID) ========== */
    .dash-toolbar-dates {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px 12px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-bottom: 14px !important;
      box-sizing: border-box !important;
    }

    .dash-toolbar-dates .field {
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      box-sizing: border-box !important;
    }

    .dash-toolbar-dates .field label {
      font-size: 11px !important;
      font-weight: 500 !important;
      color: #475569 !important;
      margin-bottom: 6px !important;
      display: block !important;
      text-align: right !important;
    }

    .dash-toolbar-dates .field .control {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .dash-toolbar-dates .field input {
      width: 100% !important;
      max-width: 100% !important;
      height: 44px !important;
      padding: 0 12px !important;
      font-size: 14px !important;
      background: #f8fafc !important;
      border: 1px solid rgba(15, 23, 42, 0.12) !important;
      border-radius: 12px !important;
      box-sizing: border-box !important;
      -webkit-appearance: none !important;
      appearance: none !important;
      color: #0f172a !important;
      text-align: right !important;
    }

    .dash-toolbar-dates .field input:focus {
      outline: none !important;
      border-color: #3b82f6 !important;
      background: #fff !important;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    }

    /* Stack date inputs at very narrow screens */
    @media (max-width: 360px) {
      .dash-toolbar-dates {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
    }

    /* ========== PRINT BUTTON (PRIMARY PREMIUM) ========== */
    .dash-toolbar-actions {
      width: 100% !important;
      max-width: 100% !important;
      margin-bottom: 14px !important;
      box-sizing: border-box !important;
    }

    .btn-print-primary {
      width: 100% !important;
      max-width: 100% !important;
      height: 46px !important;
      padding: 0 20px !important;
      margin: 0 !important;
      font-size: 15px !important;
      font-weight: 600 !important;
      background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
      color: #fff !important;
      border: none !important;
      border-radius: 12px !important;
      box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22) !important;
      box-sizing: border-box !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }

    .btn-print-primary:active {
      transform: translateY(-1px) !important;
      box-shadow: 0 8px 14px rgba(37, 99, 235, 0.28) !important;
    }

    .btn-print-primary .icon {
      font-size: 16px !important;
      line-height: 1 !important;
    }

    /* ========== QUICK FILTERS (iOS SEGMENTED CONTROL) ========== */
    .dash-toolbar-quick {
      display: flex !important;
      width: 100% !important;
      max-width: 100% !important;
      background: #f1f5f9 !important;
      border-radius: 999px !important;
      padding: 4px !important;
      gap: 0 !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }

    .dash-toolbar-quick .quick-filter {
      flex: 1 !important;
      min-width: 0 !important;
      height: 36px !important;
      padding: 0 12px !important;
      margin: 0 !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 999px !important;
      color: #64748b !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
      transition: all 0.2s ease !important;
      cursor: pointer !important;
      position: relative !important;
    }

    .dash-toolbar-quick .quick-filter.active {
      background: #fff !important;
      color: #0f172a !important;
      font-weight: 600 !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    }

    .dash-toolbar-quick .quick-filter:not(.active):active {
      background: rgba(255, 255, 255, 0.5) !important;
    }

    /* Ensure text doesn't overflow on small screens */
    @media (max-width: 360px) {
      .dash-toolbar-quick .quick-filter {
        font-size: 11px !important;
        padding: 0 8px !important;
      }
    }

    /* ========== KPI CARDS GRID (2 PER ROW) ========== */
    .dashboard-kpi-grid {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      gap: 10px !important;
      margin-bottom: 12px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .kpi-card {
      padding: 12px !important;
      min-height: auto !important;
      height: auto !important;
      margin: 0 !important;
      box-sizing: border-box !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
    }

    .kpi-header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      margin-bottom: 4px !important;
    }

    .kpi-label {
      font-size: 11px !important;
      line-height: 1.2 !important;
      margin: 0 !important;
    }

    .kpi-icon {
      font-size: 16px !important;
      flex-shrink: 0 !important;
    }

    .kpi-value {
      font-size: 18px !important;
      font-weight: 700 !important;
      text-align: center !important;
      line-height: 1.2 !important;
      margin: 0 !important;
    }

    [dir="rtl"] .kpi-card {
      text-align: right !important;
    }

    [dir="rtl"] .kpi-value {
      text-align: center !important;
    }

    /* ========== DASHBOARD GRID (SINGLE COLUMN) ========== */
    .dashboard-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 12px !important;
      margin-bottom: 12px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .dashboard-grid > * {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    /* ========== SECTION BOXES ========== */
    .section-box {
      padding: 12px !important;
      margin-bottom: 12px !important;
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    .section-title {
      font-size: 14px !important;
      font-weight: 600 !important;
      margin-bottom: 10px !important;
      padding-bottom: 8px !important;
      border-bottom: 1px solid var(--border, #e5e7eb) !important;
    }

    /* ========== REDUCE SPACING ========== */
    .page-inner {
      padding: 12px !important;
    }

    .dashboard-panel {
      padding: 12px !important;
      margin-bottom: 12px !important;
      min-height: auto !important;
      height: auto !important;
    }

    /* ========== PREVENT OVERFLOW ========== */
    #page-dashboard * {
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    #page-dashboard input,
    #page-dashboard select,
    #page-dashboard button,
    #page-dashboard .btn {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Tables */
    .table-responsive {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    /* ========== REMOVE EXCESSIVE SPACING ========== */
    .dashboard-filter-header,
    .dashboard-filter-controls,
    .filter-actions {
      margin: 0 !important;
    }

    .dashboard-filter-controls .field {
      margin-bottom: 10px !important;
    }

        .dashboard-filter-controls .field:last-child {
      margin-bottom: 0 !important;
    }
  }
}

/* Global Cash Pill - Fixed Floating Indicator */
.cash-pill {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom));
  left: 16px;
  z-index: 9999;
  background: var(--premium-success, #10b981);
  border-radius: 50px;
  padding: 10px 16px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-family: 'Tajawal', sans-serif;
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  cursor: default;
  direction: rtl;
}

html[dir="ltr"] .cash-pill {
  left: auto;
  right: 16px;
  direction: ltr;
}

html[dir="rtl"] .cash-pill {
  left: 16px;
  right: auto;
}

.cash-pill__label {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: 500;
}

.cash-pill__value {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.cash-pill__currency {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-right: 2px;
}

.cash-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

@media (max-width: 480px) {
  .cash-pill {
    bottom: calc(12px + env(safe-area-inset-bottom));
    left: 12px;
    padding: 8px 14px;
  }
  
  html[dir="ltr"] .cash-pill {
    right: 12px;
  }
  
  html[dir="rtl"] .cash-pill {
    left: 12px;
  }

  .cash-pill__label {
    display: inline-block;
    font-size: 0.75rem;
  }
}

/* Scoped CSS for All Branches Total Cash Card */
#page-all-branches .allb-total-cash-card {
  background: linear-gradient(135deg, #1a1f3a 0%, #2d1b4e 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  margin: 12px 0 24px;
  position: relative;
  overflow: hidden;
}

#page-all-branches .allb-total-cash-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
}

#page-all-branches .allb-total-cash-title {
  font-weight: 700;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}

#page-all-branches .allb-total-cash-value {
  font-weight: 800;
  font-size: 36px;
  color: #fff;
  display: flex;
  gap: 8px;
  align-items: baseline;
  text-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}

#page-all-branches .allb-total-cash-value .egp {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}

#page-all-branches .allb-total-cash-sub {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  margin-top: 8px;
}

/* Calculator Button Styles */
.calc-btn {
  background-color: #e5e7eb;
  padding: 0.5rem;
  border-radius: 0.375rem;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}
.calc-btn:hover {
  background-color: #d1d5db;
}


/* Scoped CSS for All Branches Cash Table */
#page-all-branches .allb-cash-table-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  margin:12px 0 18px;
}
#page-all-branches .allb-cash-table-title{
  font-weight:900;
  font-size:15px;
  margin-bottom:10px;
  color: #333;
}
#page-all-branches .allb-cash-table-wrap{overflow:auto;}
#page-all-branches .allb-cash-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}
#page-all-branches .allb-cash-table th,
#page-all-branches .allb-cash-table td{
  padding:10px 8px;
  border-bottom:1px solid rgba(0,0,0,.06);
  color: #333;
}

/* =========================================
   HOME CASH DASHBOARD (Scoped)
   ========================================= */
#page-home-dashboard .home-cash-section {
  display: block;
  animation: fadeIn 0.3s ease;
}

#page-home-dashboard .home-cash-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#page-home-dashboard .home-cash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 12px rgba(0,0,0,0.15);
}

#page-home-dashboard .home-cash-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.1), transparent 60%);
  pointer-events: none;
}

#page-home-dashboard .btn-outline:hover {
  background: rgba(255,255,255,0.1);
}

#page-home-dashboard .home-cash-history table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#page-home-dashboard .home-cash-history th {
  background: #f8f9fa;
  color: #666;
  font-weight: 600;
  padding: 12px;
  text-align: right;
  border-bottom: 2px solid #e9ecef;
}

#page-home-dashboard .home-cash-history td {
  padding: 12px;
  border-bottom: 1px solid #f1f3f5;
  color: #333;
}

#page-home-dashboard .home-cash-history tr:last-child td {
  border-bottom: none;
}

#page-home-dashboard .home-cash-history tr:hover td {
  background: #f8f9fa;
}
#page-all-branches .allb-cash-table thead th{
  color:rgba(0,0,0,.6);
  font-weight:800;
}
#page-all-branches .allb-cash-table .num{
  text-align:left; /* RTL: ����� ��� ������ */
  font-weight:900;
}
#page-all-branches .allb-cash-table tfoot .total td{
  border-bottom:none;
  padding-top:12px;
  font-weight:900;
}
#page-all-branches .allb-cash-table small{color:rgba(0,0,0,.55);font-weight:700;}

/* Screen State Management & Cash Pill Hiding */
body.screen-login-active #cash-pill,
body.screen-splash-active #cash-pill {
  display: none !important;
}