:root{
            /* Dark Luxury Enterprise Theme (Navy + Gold + Black) */
            --bg:#050505;
            --surface:#141414;
            --surface-2:#1f1f1f;
            --navy:#0b2239;
            --navy-2:#123a5c;
            --gold:#d4af37;
            --gold-2:#b8921f;
            --ink:#f1f5f9;
            --muted:#94a3b8;
            --border:rgba(255,255,255,0.12);
            --shadow: 0 18px 55px rgba(0,0,0,0.6);
            --shadow-soft: 0 10px 25px rgba(0,0,0,0.4);
            
            --input-bg: #222;
            --input-readonly: #1a1a1a;
            --nav-bg: rgba(20,20,20,0.85);
            --clock-bg: #000;
            
            --ok:#16a34a;
            --bad:#dc2626;
            --info:#2563eb;
            --warn:#f59e0b;
            --violet:#7c3aed;
            --radius:18px;
            --radius-sm:14px;
            --speed:140ms;
        }

        /* Light Mode Override */
        [data-theme="light"] {
            --bg: #f1f5f9;
            --surface: #ffffff;
            --surface-2: #f8fafc;
            --ink: #0f172a;
            --muted: #64748b;
            --border: #e2e8f0;
            --shadow: 0 10px 30px rgba(0,0,0,0.06);
            --shadow-soft: 0 4px 12px rgba(0,0,0,0.03);
            
            --input-bg: #ffffff;
            --input-readonly: #f1f5f9;
            --nav-bg: rgba(255,255,255,0.85);
            --clock-bg: #f1f5f9;
        }

*{ box-sizing:border-box; }
        html, body{
            height: auto !important;
            overflow-y: visible !important;
        }
        body{
            margin:0;
            font-family:'Cairo', sans-serif;
            background-color: var(--bg);
            /* Dark mode gradient only shows when theme is NOT light (default) */
            background-image: radial-gradient(1200px 600px at 85% -10%, rgba(212,175,55,0.08), transparent 60%),
                              radial-gradient(900px 500px at 10% 0%, rgba(11,34,57,0.40), transparent 55%);
            color:var(--ink);
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        [data-theme="light"] body {
            background-image: none; /* Clean look for light mode */
        }

        /* Layout container */
        .shell{
            width:100%;
            max-width: 100%;
            margin: 0 auto;
            min-height: 100vh;
            display:flex;
            flex-direction:column;
            padding: 0 18px;
        }

        /* Header */
        .master-header{
            height:150px;
            background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:0 32px;
            box-shadow: 0 16px 40px rgba(2,10,22,0.25);
            position:relative;
            overflow: visible;
            position: sticky; top: 0; z-index: 1000;
            height: 160px; /* Slightly bigger */
        }
        .master-header:after{
            content:"";
            position:absolute;
            inset:-40px -140px auto auto;
            width:340px; height:340px;
            border-radius:50%;
            background: radial-gradient(circle at 30% 30%, rgba(212,175,55,0.35), rgba(212,175,55,0.06), transparent 65%);
            filter: blur(1px);
            pointer-events:none;
        }
        .header-left{ display:flex; align-items:center; gap:16px; position:relative; z-index:2; }
        .logo-img{ height:70px; width:70px; background:white; border-radius:50%; padding:5px; box-shadow:0 10px 22px rgba(0,0,0,0.18); }
        .header-title{ margin:0; color:white; font-size:24px; font-weight:900; letter-spacing:0.2px; }
        .header-sub{ color: rgba(255,255,255,0.78); font-weight:800; font-size:17px; margin-top:2px; }
        .header-right{ display:flex; align-items:center; gap:12px; position:relative; z-index:2; }

        .user-chip{
            display:flex;
            align-items:center;
            gap:10px;
            padding:10px 14px;
            border-radius: 18px;
            background: rgba(0,0,0,0.25);
            border:1px solid rgba(255,255,255,0.22);
            color:#fff;
            font-weight:900;
            font-size:15px;
            white-space:nowrap;
        }
        .user-badge{
            width:42px;
            height:42px;
            border-radius: 50%;
            display:grid;
            place-items:center;
            background: rgba(255,255,255,0.18);
            border:1px solid rgba(255,255,255,0.28);
            box-shadow: 0 10px 25px rgba(0,0,0,0.18);
            backdrop-filter: blur(8px);
        }
        .user-badge img{
            width:100%;
            height:100%;
            border-radius:50%;
            object-fit:cover;
            display:block;
        }

        .role-pill{
            margin-right:8px;
            padding:6px 10px;
            border-radius:999px;
            background: rgba(212,175,55,0.14);
            border:1px solid rgba(212,175,55,0.35);
            color: var(--gold);
            font-size:12px;
            font-weight:900;
        }
        .logout-link{
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color:white;
            padding:12px 14px;
            border-radius:18px;
            text-decoration:none;
            font-weight:900;
            box-shadow: 0 10px 20px rgba(239,68,68,0.25);
            transition:.2s;
        }
        .logout-link:hover{ filter:brightness(1.03); }

        /* Tabs */
        .platform-navigation{
            display:flex;
            gap:14px;
            padding:16px 10px;
            margin-top:-18px;
            align-items:center;
            justify-content:center;
            flex-wrap:wrap;
            background: var(--nav-bg);
            border:1px solid var(--border);
            border-radius: 22px;
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(10px);
            position: sticky; top: 145px; z-index: 990; /* Sticky below header */
            padding: 20px 15px; /* Bigger padding */
        }
        .tab-btn i{
            font-size:18px;
            opacity:.95;
            display:inline-flex;
            color: currentColor;
        }
        .tab-btn{
            border:none;
            background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
            color: var(--ink);
            font-weight:900;
            padding:18px 30px; /* Bigger tabs */
            border-radius: 20px;
            cursor:pointer;
            box-shadow: var(--shadow-soft);
            border:1px solid var(--border);
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
            font-size:18px; /* Bigger font */
            white-space:nowrap;
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            gap:12px;
            letter-spacing: .2px;
        }
        .tab-btn > *{ position:relative; z-index:1; }
        .tab-btn:before{
            content:"";
            position:absolute; inset:-1px;
            background: linear-gradient(135deg, rgba(212,175,55,0.0), rgba(212,175,55,0.28));
            opacity:0; transition:.18s;
            pointer-events:none;
            z-index:0;
        }
        .tab-btn:hover{
            box-shadow: 0 18px 42px rgba(0,0,0,0.4);
            background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
            border-color: rgba(212,175,55,0.35);
        }
        .tab-btn:hover:before{ opacity:1; }
        .tab-btn.active{
            background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
            color: var(--gold);
            box-shadow: 0 18px 45px rgba(11,34,57,0.5);
            border-color: transparent;
        }
        .tab-btn.active i{ color: var(--gold); }
        [data-theme="light"] .tab-btn{
            background: #ffffff;
            color: #0b2239;
            border-color:#dbe7f5;
            box-shadow: 0 10px 24px rgba(11,34,57,0.08);
        }
        [data-theme="light"] .tab-btn:hover{
            border-color: rgba(11,34,57,0.25);
            box-shadow: 0 14px 30px rgba(11,34,57,0.12);
        }
        [data-theme="light"] .tab-btn.active{
            background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
            color: var(--gold);
            box-shadow: 0 18px 45px rgba(11,34,57,0.5);
            border-color: transparent;
        }
        [data-theme="light"] .tab-btn i{ color:#0b2239; }
        [data-theme="light"] .tab-btn.active i{ color: var(--gold); }

        .tabs-tail{
            display:flex;
            align-items:center;
            gap:12px;
            margin-inline-start:auto;
        }
        .tab-btn.active:after{
            content:"";
            position:absolute;
            inset:auto 14px 8px 14px;
            height:3px;
            border-radius:999px;
            background: linear-gradient(90deg, var(--gold), rgba(212,175,55,0.25));
            pointer-events:none;
        }

        /* Workspace */
        .workspace-panel{
            display:none;
            flex: 1;
            padding:18px 24px;
            overflow: visible;
        }
        .workspace-panel.active{ display:flex; flex-direction:column; gap:14px; animation:fadeIn .12s ease; }
        @keyframes fadeIn{ from{opacity:.0; transform: translateY(6px);} to{opacity:1; transform: translateY(0);} }

        /* Cards */
        .card{
            background: var(--surface);
            border:1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
            padding:18px;
            overflow: visible;
        }
        .card:hover{ box-shadow: 0 22px 60px rgba(0,0,0,0.5); }
        .card-title{
            margin:0 0 12px;
            font-size:20px;
            font-weight:900;
            color: var(--gold);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
        }
        .subtle{ color:var(--muted); font-size:14px; font-weight:800; }

        /* Top split */
        .top-split{
            display:grid;
            grid-template-columns: 1.75fr 1fr;
            gap:14px;
            min-height:320px;
        }

        /* Forms */
        .form-grid{
            display:grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap:12px;
        }
        .form-group{ display:flex; flex-direction:column; gap:7px; }
        .form-group.full{ grid-column:1/-1; }
        label{ font-weight:900; color:var(--ink); font-size:14px; }
        input, select{
            width:100%;
            border:1px solid var(--border);
            border-radius: 18px;
            padding:14px 14px;
            font-family:'Cairo', sans-serif;
            font-weight:900;
            outline:none;
            background:var(--input-bg);
            color:var(--ink);
            font-size:15px;
            transition:.15s;
        }
        input:focus, select:focus{
            border-color: rgba(212,175,55,0.75);
            box-shadow: 0 0 0 4px rgba(212,175,55,0.16);
        }
        input[readonly]{ background:var(--input-readonly); color:var(--muted); }
        .select-hint{
            font-size:12px; font-weight:900; color: var(--muted);
            margin-top: -4px;
        }

        .btn-primary{
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
            color:#000;
            border:none;
            border-radius: 18px;
            padding:14px 16px;
            font-weight:900;
            cursor:pointer;
            width:100%;
            font-size:16px;
            box-shadow: 0 16px 36px rgba(212,175,55,0.15);
            transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }
        .btn-primary:hover{ filter: brightness(1.02); }
        .btn-gold{
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
            color: #1b2430;
            border:none;
            border-radius:18px;
            padding:12px 14px;
            font-weight:900;
            cursor:pointer;
            box-shadow: 0 16px 34px rgba(212,175,55,0.20);
        }
        .btn-soft{
            background:rgba(255,255,255,0.05);
            color: var(--ink);
            border:1px solid var(--border);
            border-radius:18px;
            padding:12px 14px;
            font-weight:900;
            cursor:pointer;
        }

        /* Widgets */
        .widget-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
        }
        .timebox{
            grid-column:1/-1;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            border:1px dashed rgba(11,34,57,0.22);
            border-radius: 18px;
            padding:12px;
            background:var(--surface-2);
        }
        .timebox .date{ font-weight:900; color:var(--gold); font-size:15px; }
        .timebox .clock{
            font-weight:900;
            font-size:18px;
            color:var(--ink);
            background:var(--clock-bg);
            padding:10px 14px;
            border-radius:16px;
            border:1px solid var(--border);
            min-width:122px;
            text-align:center;
        }
        .kpi{
            border:1px solid var(--border);
            border-radius: 18px;
            padding:14px 14px;
            background: linear-gradient(180deg, var(--surface-2), var(--surface));
            min-height:104px;
            box-shadow: 0 12px 26px rgba(0,0,0,0.2);
            transition:.18s;
        }
        .kpi:hover{ }
        .kpi .kpi-label{ color:var(--muted); font-weight:900; font-size:15px; }
        .kpi .kpi-val{ font-weight:900; font-size:34px; margin-top:2px; letter-spacing:.2px; }
        .val-navy{ color: #1E40AF; }
        .val-gold{ color: var(--gold-2); }
        /* KPI visibility fixes (force readable colors regardless of theme) */
        #kpi_int_total,
        #kpi_int_new,
        #kpi_int_guid,
        #kpi_int_conv{ color:#C9A227 !important; }
        #kpi_ord_total,
        #kpi_ord_new,
        #kpi_ord_exec{ color:#22C55E !important; }
        #kpi_int_closed,
        #kpi_ord_closed{ color:#3B82F6 !important; }
        .val-ok{ color: var(--ok); }
        .val-info{ color: var(--info); }
        .val-violet{ color: var(--violet); }

        .progress-wrap{
            grid-column:1/-1;
            border:1px solid var(--border);
            border-radius:18px;
            padding:14px;
            background:var(--surface-2);
        }
        .progress-title{
            display:flex;
            justify-content:space-between;
            align-items:center;
            font-weight:900;
            color:var(--ink);
            font-size:14px;
            margin-bottom:10px;
        }
        .progress-bar{
            height:12px;
            background:var(--clock-bg);
            border-radius:999px;
            overflow:hidden;
            border:1px solid var(--border);
        }
        .progress-bar > div{
            height:100%;
            width:0%;
            background: linear-gradient(90deg, var(--gold), rgba(212,175,55,0.15));
        }

        /* Table section */
        .table-card{ display:flex; flex-direction:column; }
        .table-toolbar{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:10px;
            margin-bottom:10px;
            flex-wrap:wrap;
        }
        .toolbar-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
        .toolbar-right{ display:flex; gap:10px; flex-wrap:wrap; }
        .searchbox{
            display:flex; align-items:center; gap:10px;
            background:var(--surface-2);
            border:1px solid var(--border);
            border-radius: 18px;
            padding:10px 12px;
            min-width: 340px;
            box-shadow: 0 12px 24px rgba(0,0,0,0.2);
        }
        .searchbox input{
            border:none;
            padding:0;
            outline:none;
            background:transparent;
            color:var(--ink);
            font-size:15px;
            font-weight:900;
            width:100%;
        }
        .searchbox input:focus{ box-shadow:none; }
        .btn-excel{
            background: linear-gradient(135deg, var(--ok) 0%, #0f9f43 100%);
            color:white;
            border:none;
            border-radius:18px;
            padding:12px 14px;
            font-weight:900;
            cursor:pointer;
            white-space:nowrap;
            box-shadow: 0 14px 28px rgba(22,163,74,0.22);
        }
        .btn-print{
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
            color:#1b2430;
            border:none;
            border-radius:18px;
            padding:12px 14px;
            font-weight:900;
            cursor:pointer;
            white-space:nowrap;
        }
        .table-scroll{
            border:1px solid var(--border);
            border-radius:18px;
            background:var(--surface);
            box-shadow: 0 14px 30px rgba(0,0,0,0.3);
        }
        table{ width:100%; border-collapse:collapse; min-width:1100px; }
        th, td{
            padding:14px 12px;
            border-bottom:1px solid var(--border);
            font-size:14px;
            text-align:center;
            white-space:nowrap;
            font-weight:900;
        }
        th{
            position:sticky;
            top:0;
            background:var(--surface-2);
            z-index:2;
            color:var(--gold);
            border-bottom: 2px solid var(--border);
        }
        tr:hover td{ background:rgba(255,255,255,0.03); }

        .pill{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:6px 12px;
            border-radius:999px;
            font-weight:900;
            font-size:15px;
            border:1px solid var(--border);
            background:rgba(255,255,255,0.05);
        }
        .p-ok{ color: var(--ok); }
        .p-warn{ color: var(--warn); }
        .p-bad{ color: var(--bad); }
        .p-info{ color: var(--info); }
        .p-gold{ color: var(--gold-2); }

        .btn-action{
            border:none;
            border-radius:14px;
            padding:10px 12px;
            font-weight:900;
            cursor:pointer;
            color:white;
            font-size:15px;
            white-space:nowrap;
            transition:.15s;
        }
        .btn-action:hover{ filter: brightness(1.02); }
        .btn-edit{ background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
        .btn-create{ background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%); color:#000; }
        .btn-create-blue{ background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%); }
        .btn-view{ background: linear-gradient(135deg, #334155 0%, #0f172a 100%); }

        /* Toast */
        .toast{
            position:fixed;
            bottom:18px;
            left:18px;
            background: rgba(11,34,57,0.95);
            color:white;
            padding:12px 14px;
            border-radius:18px;
            border:1px solid rgba(212,175,55,0.25);
            box-shadow: 0 20px 60px rgba(2,10,22,0.25);
            display:none;
            z-index:99999;
            font-weight:900;
        }

        .system-credit{
            margin-top:12px;
            padding:10px 14px;
            border-radius:16px;
            background: linear-gradient(135deg, rgba(11,34,57,0.12), rgba(212,175,55,0.18));
            border:1px solid rgba(212,175,55,0.45);
            color: var(--gold);
            font-weight:900;
            display:flex;
            align-items:center;
            gap:8px;
            box-shadow: 0 10px 24px rgba(11,34,57,0.18);
        }

        /* Modal (edit) — keep functional */
        .modal-overlay{
            display:none;
            position:fixed;
            inset:0;
            background:rgba(2,10,22,0.82);
            z-index:9999;
            padding:22px;
        }
        .modal{
            background:var(--surface);
            max-width:1200px;
            margin:0 auto;
            border-radius:26px;
            border:1px solid rgba(255,255,255,0.25);
            box-shadow:0 40px 120px rgba(0,0,0,0.55);
            max-height: calc(100vh - 44px);
            overflow:auto;
            padding:18px;
        }
        .modal-head{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:10px;
            border-bottom:1px solid var(--border);
            padding-bottom:12px;
            margin-bottom:14px;
        }
        .modal-title{ margin:0; font-weight:900; font-size:20px; color:var(--gold); }
        .modal-close{
            background:#64748b;
            color:white;
            border:none;
            border-radius:18px;
            padding:12px 14px;
            font-weight:900;
            cursor:pointer;
        }

        /* High-End History Modal (Glassmorphism + Navy & Gold) */
        .h-modal-overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px); z-index:11000; animation:fadeIn .3s cubic-bezier(0.4, 0, 0.2, 1); }
        .h-modal{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:90%; max-width:520px; background:var(--surface); border-radius:30px; padding:40px; box-shadow:0 40px 100px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.1); text-align:center; border:1px solid var(--border); }
        
        .h-icon{ width:80px; height:80px; background:linear-gradient(135deg, var(--navy), var(--navy-2)); color:var(--gold); border-radius:50%; display:grid; place-items:center; font-size:36px; margin:-80px auto 25px auto; border:6px solid var(--surface); box-shadow:0 15px 35px rgba(0,0,0,0.5); }
        
        .h-title{ font-size:26px; font-weight:900; color:var(--gold); margin-bottom:8px; letter-spacing:-0.5px; }
        .h-sub{ color:#64748b; font-size:15px; font-weight:700; margin-bottom:30px; line-height:1.5; }
        
        .h-input-box{ position:relative; margin-bottom:25px; }
        .h-input{ width:100%; padding:18px 55px 18px 25px; border:2px solid var(--border); border-radius:20px; font-size:17px; font-weight:800; outline:none; transition:all .3s ease; font-family:'Cairo'; background:var(--input-bg); color:var(--ink); }
        .h-input:focus{ border-color:var(--gold); background:#fff; box-shadow:0 0 0 5px rgba(212,175,55,0.15); transform:translateY(-2px); }
        .h-input-icon{ position:absolute; right:25px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:20px; opacity:0.6; }
        
        .h-btn{ background:linear-gradient(135deg, var(--navy) 0%, #0f2a45 50%, var(--navy) 100%); background-size:200% auto; color:#fff; width:100%; padding:18px; border:none; border-radius:20px; font-size:18px; font-weight:900; cursor:pointer; box-shadow:0 20px 40px rgba(11,34,57,0.25); transition:all .3s ease; display:flex; align-items:center; justify-content:center; gap:12px; animation:gradientAnim 3s infinite alternate; }
        .h-btn:hover{ background-position:right center; box-shadow:0 25px 50px rgba(11,34,57,0.35); }
        .h-btn i{ color:var(--gold); transition:transform .3s; }
        .h-btn:hover i{ }
        
        .h-close{ position:absolute; top:20px; right:20px; background:#f1f5f9; border:none; width:36px; height:36px; border-radius:50%; font-size:18px; color:#64748b; cursor:pointer; transition:.2s; display:grid; place-items:center; }
        .h-close:hover{ background:var(--bad); color:#fff; }

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

        /* Theme Toggle Switch */
        .theme-toggle-btn {
            background: var(--surface-2);
            border: 1px solid var(--border);
            color: var(--muted);
            width: 46px; height: 46px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            font-size: 20px;
            transition: 0.3s;
        }
        .theme-toggle-btn:hover { background: var(--surface); color: var(--gold); }

        /* Responsive */
        @media (max-width: 1260px){
            html, body{ height: auto !important; overflow-y: visible !important; }
            .shell{ height: auto; }
            .workspace-panel{ height: auto; overflow: visible; }
            .top-split{ grid-template-columns:1fr; }
            .form-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
            table{ min-width:980px; }
        }
        @media (max-width: 680px){
            .form-grid{ grid-template-columns: 1fr; }
            .platform-navigation{ overflow: visible; height: auto; padding: 12px; }
            .tab-btn{ font-size:16px; padding:12px 14px; }
            .searchbox{ min-width: 260px; }
            table{ min-width:900px; }
        }