/* Original XXL R Data Center styling, isolated to .sxxl-app */
.sxxl-app {
            --navy:#0B1F33;
            --steel:#123E67;
            --blue:#006EB6;
            --sky:#1E9BD7;
            --border:#D9E2EC;
            --text:#111827;
            --muted:#64748B;
            --slate:#334155;
            --green:#16A34A;
            --red:#DC2626;
            color:var(--text);
            background:linear-gradient(135deg,#EEF3F7 0%,#F8FBFD 100%);
            font-family:Inter,Segoe UI,Arial,sans-serif;
            padding:28px;
            border-radius:24px;
        }
        .sxxl-app * { box-sizing:border-box; }
        .sxxl-shell { max-width:1440px; margin:0 auto; }

        /* Identical layout proportions to Sanja R V2 hero. */
        .sxxl-command {
            display:grid;
            grid-template-columns:minmax(0,1fr) 460px;
            gap:22px;
            align-items:center;
            background:linear-gradient(135deg,var(--navy),var(--steel));
            border-radius:24px;
            padding:28px;
            color:#fff;
            box-shadow:0 22px 50px rgba(11,31,51,.18);
            margin-bottom:18px;
        }
        .sxxl-kicker {
            font-size:12px;
            letter-spacing:.14em;
            text-transform:uppercase;
            color:#B9DDF2;
            font-weight:900;
            margin-bottom:10px;
        }
        .sxxl-title {
            font-size:36px;
            line-height:1.05;
            font-weight:950;
            margin:0 0 10px;
            letter-spacing:-.03em;
            color:#fff;
        }
        .sxxl-subtitle {
            font-size:15px;
            color:#D7E8F4;
            margin:0;
            max-width:720px;
            line-height:1.45;
        }
        .sxxl-controls {
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.18);
            border-radius:18px;
            padding:16px;
            display:grid;
            gap:12px;
        }
        .sxxl-control-grid {
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
        }
        .sxxl-field-full { grid-column:1/-1; }
        .sxxl-field label,
        .sxxl-add-form label {
            display:block;
            font-size:10px;
            text-transform:uppercase;
            letter-spacing:.08em;
            font-weight:900;
            margin-bottom:6px;
        }
        .sxxl-field label { color:#B9DDF2; }
        .sxxl-add-form label { color:var(--muted); }
        .sxxl-field input,
        .sxxl-field select {
            width:100%;
            border:1px solid rgba(255,255,255,.18);
            background:rgba(255,255,255,.12);
            color:#fff;
            border-radius:12px;
            padding:12px;
            font-size:15px;
            font-weight:800;
            outline:none;
        }
        .sxxl-field select option { color:var(--text); background:#fff; }
        .sxxl-filter-month,
        .sxxl-filter-day,
        .sxxl-filter-range { display:none; }
        .sxxl-mode-month .sxxl-filter-month { display:block; }
        .sxxl-mode-day .sxxl-filter-day { display:block; }
        .sxxl-mode-range .sxxl-filter-range { display:block; }
        .sxxl-button-row {
            display:grid;
            grid-template-columns:minmax(0,1fr) auto;
            gap:10px;
        }
        .sxxl-btn {
            appearance:none;
            border:0;
            background:linear-gradient(135deg,var(--sky),var(--blue));
            color:#fff;
            border-radius:12px;
            padding:13px 16px;
            font-weight:950;
            font-size:12px;
            letter-spacing:.04em;
            cursor:pointer;
            box-shadow:0 12px 24px rgba(0,110,182,.28);
            text-decoration:none;
            display:inline-flex;
            justify-content:center;
            align-items:center;
            transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
        }
        .sxxl-btn:hover {
            color:#fff;
            transform:translateY(-2px);
            filter:brightness(1.03);
            box-shadow:0 16px 30px rgba(0,110,182,.34);
        }
        .sxxl-btn-secondary {
            background:rgba(255,255,255,.14);
            border:1px solid rgba(255,255,255,.22);
            box-shadow:none;
        }
        .sxxl-btn-green { background:linear-gradient(135deg,var(--green),var(--sky)); }
        .sxxl-btn.loading { pointer-events:none; opacity:.82; }
        .sxxl-btn.loading::after {
            content:"";
            width:16px;
            height:16px;
            border:3px solid rgba(255,255,255,.45);
            border-top-color:#fff;
            border-radius:999px;
            display:inline-block;
            margin-left:10px;
            animation:sxxlSpin .75s linear infinite;
        }
        @keyframes sxxlSpin { to { transform:rotate(360deg); } }
        .sxxl-message {
            border-radius:16px;
            padding:16px 18px;
            margin-bottom:18px;
            font-weight:800;
            line-height:1.45;
        }
        .sxxl-success { background:#DCFCE7; color:#14532D; border:1px solid #86EFAC; }
        .sxxl-error { background:#FEE2E2; color:#7F1D1D; border:1px solid #FCA5A5; }
        .sxxl-timeframe {
            margin:0 0 18px;
            background:#F8FBFD;
            border:1px solid var(--border);
            border-radius:16px;
            padding:12px 14px;
            color:var(--slate);
            font-size:13px;
            font-weight:800;
        }

        /* Sliding switch is native/accessible, not separate On/Off buttons. */
        .sxxl-switch-panel {
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:18px;
            padding:15px 19px;
            border:1px solid var(--border);
            border-radius:17px;
            background:#fff;
            box-shadow:0 8px 24px rgba(15,23,42,.04);
            margin-bottom:18px;
        }
        .sxxl-switch-heading {
            font-size:14px;
            font-weight:900;
            color:var(--navy);
            margin:0 0 4px;
        }
        .sxxl-switch-description {
            font-size:12px;
            color:var(--muted);
            line-height:1.5;
            margin:0;
        }
        .sxxl-switch-control {
            display:flex;
            align-items:center;
            gap:10px;
            flex:0 0 auto;
            cursor:pointer;
        }
        .sxxl-switch-control input {
            position:absolute;
            opacity:0;
            width:1px;
            height:1px;
        }
        .sxxl-switch-track {
            position:relative;
            display:inline-block;
            width:58px;
            height:32px;
            border-radius:999px;
            background:#94A3B8;
            transition:background .2s ease;
            flex-shrink:0;
        }
        .sxxl-switch-track::after {
            content:"";
            position:absolute;
            width:24px;
            height:24px;
            top:4px;
            left:4px;
            background:white;
            border-radius:50%;
            box-shadow:0 2px 6px rgba(0,0,0,.2);
            transition:transform .2s ease;
        }
        .sxxl-switch-control input:checked + .sxxl-switch-track { background:var(--green); }
        .sxxl-switch-control input:checked + .sxxl-switch-track::after { transform:translateX(26px); }
        .sxxl-switch-control input:focus-visible + .sxxl-switch-track {
            outline:3px solid #93C5FD;
            outline-offset:3px;
        }
        .sxxl-switch-state {
            font-size:12px;
            font-weight:950;
            color:var(--slate);
            min-width:25px;
        }
        @media(prefers-reduced-motion:reduce) {
            .sxxl-switch-track, .sxxl-switch-track::after { transition:none; }
        }

        /* Same KPI shape and spacing as Sanja R V2. */
        .sxxl-grid { display:grid; gap:18px; }
        .sxxl-kpis { grid-template-columns:repeat(5,minmax(0,1fr)); margin-bottom:18px; }
        .sxxl-card,
        .sxxl-panel {
            background:#fff;
            border:1px solid var(--border);
            border-radius:20px;
            box-shadow:0 12px 30px rgba(15,23,42,.06);
        }
        .sxxl-card { padding:18px; min-width:0; }
        .sxxl-panel { padding:22px; min-width:0; }
        .sxxl-label {
            font-size:11px;
            color:var(--muted);
            font-weight:900;
            text-transform:uppercase;
            letter-spacing:.08em;
        }
        .sxxl-value {
            font-size:28px;
            font-weight:950;
            color:var(--navy);
            margin:8px 0 6px;
            letter-spacing:-.03em;
            overflow-wrap:anywhere;
            font-variant-numeric:tabular-nums;
        }
        .sxxl-help,
        .sxxl-note {
            font-size:12px;
            color:var(--muted);
            line-height:1.4;
        }
        .sxxl-note { font-size:13px; margin:0 0 16px; }
        .sxxl-chip {
            display:inline-flex;
            margin-top:10px;
            border-radius:999px;
            padding:5px 9px;
            font-size:11px;
            font-weight:900;
            background:#E0F2FE;
            color:var(--blue);
        }
        .sxxl-chip.green { background:#DCFCE7; color:var(--green); }
        .sxxl-chip.purple { background:#EDE9FE; color:#6D28D9; }
        .sxxl-chip.red { background:#FEE2E2; color:var(--red); }
        .sxxl-positive { color:var(--green) !important; }
        .sxxl-negative { color:var(--red) !important; }
        .sxxl-neutral { color:var(--muted) !important; }

        .sxxl-data-layout {
            display:grid;
            grid-template-columns:360px minmax(0,1fr);
            gap:18px;
        }
        .sxxl-panel-title {
            font-size:18px;
            font-weight:950;
            color:var(--navy);
            margin:0 0 8px;
        }
        .sxxl-add-form { display:grid; gap:12px; }
        .sxxl-add-form input {
            width:100%;
            border:1px solid var(--border);
            background:#fff;
            color:var(--text);
            border-radius:12px;
            padding:12px;
            font-size:15px;
            font-weight:800;
            outline:none;
        }
        .sxxl-table-header {
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:16px;
            margin-bottom:14px;
        }
        .sxxl-table-export {
            flex:0 0 auto;
            background:#EFF6FF;
            color:var(--blue);
            border:1px solid #BFDBFE;
            box-shadow:none;
            padding:10px 14px;
            font-size:11px;
        }
        .sxxl-table-export:hover { color:var(--blue); box-shadow:none; }
        .sxxl-table-wrap { overflow:auto; max-height:760px; }
        .sxxl-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
        .sxxl-table th {
            position:sticky;
            top:0;
            z-index:2;
            background:var(--navy);
            color:#fff;
            text-align:right;
            padding:12px 10px;
            border-right:1px solid rgba(255,255,255,.12);
            white-space:nowrap;
        }
        .sxxl-table th:first-child,
        .sxxl-table th:nth-child(2),
        .sxxl-table td:first-child,
        .sxxl-table td:nth-child(2) { text-align:left; }
        .sxxl-table td {
            padding:13px 10px;
            border-bottom:1px solid var(--border);
            text-align:right;
            white-space:nowrap;
            color:var(--text);
            font-variant-numeric:tabular-nums;
        }
        .sxxl-table tbody tr:hover td { background:#F8FAFC; }
        .sxxl-table tbody tr.sxxl-single-day td:first-child { position:relative; }
        .sxxl-single-chip {
            display:inline-block;
            font-size:9px;
            font-weight:800;
            color:#64748B;
            background:#F1F5F9;
            padding:3px 6px;
            border-radius:6px;
            margin-left:7px;
        }
        .sxxl-empty { text-align:center !important; padding:28px !important; color:var(--muted) !important; }

        /* Pencil edit controls match the R Model without changing table layout. */
        .sxxl-table .sxxl-edit-cell, .sxxl-table th:last-child { text-align:center; width:66px; }
        .sxxl-edit-btn {
            display:inline-flex; align-items:center; justify-content:center;
            width:36px; height:36px; padding:0; border:1px solid #BFDBFE;
            border-radius:10px; background:#EFF6FF; color:#006EB6; cursor:pointer;
        }
        .sxxl-edit-btn:hover, .sxxl-edit-btn:focus-visible {
            background:#DBEAFE; border-color:#60A5FA; box-shadow:0 0 0 2px #BFDBFE;
        }
        .sxxl-edit-btn svg { pointer-events:none; }
        /* Dialog lives in the browser top layer, above the scrollable trade table. */
        .sxxl-edit-dialog {
            width:min(560px,calc(100vw - 28px)); max-width:none;
            max-height:calc(100dvh - 28px); padding:0; margin:auto;
            border:0; border-radius:22px; background:#fff; color:var(--text);
            box-shadow:0 35px 90px rgba(11,31,51,.32); overflow:auto;
        }
        .sxxl-edit-dialog::backdrop { background:rgba(11,31,51,.66); backdrop-filter:blur(3px); }
        .sxxl-edit-dialog-body { padding:28px; }
        .sxxl-edit-dialog-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; }
        .sxxl-edit-dialog-kicker { color:var(--blue); font-size:11px; font-weight:900; letter-spacing:.1em; }
        .sxxl-edit-dialog-top h2 { margin:7px 0; font-size:24px; color:var(--navy); letter-spacing:-.025em; }
        .sxxl-edit-dialog-intro { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
        .sxxl-edit-dialog-close { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
            border:1px solid var(--border); border-radius:10px; width:36px; height:36px; padding:0;
            font-size:26px; line-height:1; background:#F8FAFC; color:#334155; cursor:pointer; }
        .sxxl-edit-dialog-close:hover,.sxxl-edit-dialog-close:focus-visible { background:#EFF6FF; outline:2px solid #93C5FD; outline-offset:2px; }
        .sxxl-edit-fields { display:grid; grid-template-columns:1fr 1fr; gap:17px 14px; }
        .sxxl-edit-field label { display:block; margin-bottom:7px; color:#475569;
            text-transform:uppercase; letter-spacing:.07em; font-weight:850; font-size:11px; }
        .sxxl-edit-field input { display:block; width:100%; min-width:0; padding:12px 13px;
            font-family:inherit; font-size:16px; font-weight:750; color:var(--navy);
            background:#fff; border:1px solid #CBD5E1; border-radius:12px; }
        .sxxl-edit-field input:focus-visible { outline:2px solid #60A5FA; outline-offset:2px; }
        .sxxl-edit-dialog-note { margin:16px 0 22px; color:#64748B; font-size:12px; line-height:1.5; }
        .sxxl-edit-dialog-actions { display:flex; justify-content:flex-end; gap:10px; align-items:center; }
        .sxxl-edit-dialog-actions .sxxl-btn { min-height:46px; box-shadow:none; }
        .sxxl-edit-cancel { min-height:46px; padding:11px 18px; font-size:13px; font-weight:850; cursor:pointer;
            color:#334155; background:#F1F5F9; border:1px solid #CBD5E1; border-radius:12px; }
        .sxxl-edit-cancel:hover { background:#E2E8F0; }
        .sxxl-edit-dialog .sxxl-message { margin-bottom:18px; }
        @media(max-width:540px) {
            .sxxl-edit-dialog-body { padding:20px 17px; }
            .sxxl-edit-fields { grid-template-columns:1fr; gap:13px; }
            .sxxl-edit-dialog-actions { display:grid; grid-template-columns:1fr 1fr; }
            .sxxl-edit-dialog-actions .sxxl-btn, .sxxl-edit-cancel { width:100%; padding:10px; }
            .sxxl-edit-dialog-top h2 { font-size:22px; }
        }
        @media(max-width:1200px) {
            .sxxl-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
        }
        @media(max-width:1100px) {
            .sxxl-command,
            .sxxl-data-layout { grid-template-columns:1fr; }
        }
        @media(max-width:640px) {
            .sxxl-app { padding:14px; }
            .sxxl-command { padding:20px; }
            .sxxl-title { font-size:28px; }
            .sxxl-kpis,
            .sxxl-control-grid,
            .sxxl-button-row { grid-template-columns:1fr; }
            .sxxl-switch-panel { align-items:flex-start; padding:14px; }
            .sxxl-switch-description { max-width:270px; }
            .sxxl-switch-control { margin-top:5px; }
            .sxxl-table-header { display:grid; }
            .sxxl-table-export { width:100%; }
            .sxxl-table { min-width:500px; }
        }