/* ═══════════════════════════════════════════════════════════════
   SavaCRM Admin Studio — Stylesheet (Mac-like Light Theme)
   ═══════════════════════════════════════════════════════════════
   ADMIN PANEL STYLE RULES (Design System Guidelines)
   ─────────────────────────────────────────────────────────────
   • Use light neutral backgrounds by default
   • Avoid dark gradient-heavy surfaces
   • Prefer off-white / soft grey panels
   • Use blue (#2563eb) as the primary accent for active/selected states
   • Keep color count minimal — neutral grey palette dominates
   • Prefer calm visual hierarchy over strong contrast
   • Use subtle borders and restrained shadows
   • Reduce decorative color usage
   • Maintain a Mac-like clean desktop-product feel
   • Typography: Inter sans-serif, clear hierarchy, medium-weight labels
   • Spacing: generous padding, breathing room inside panels
   ═══════════════════════════════════════════════════════════════ */

/* Shared design tokens — MUST stay first: CSS @import may not follow a rule. */
@import url('presentationTokens.css');

/* ── CSS Custom Properties (Admin Theme Tokens) ──────────────── */
:root {
    /* Backgrounds */
    --admin-bg:             #f5f6f8;     /* page background — soft off-white */
    --admin-bg-deep:        #eef0f3;     /* deepest inset areas */
    --admin-surface:        #ffffff;     /* cards, panels, modals */
    --admin-surface-alt:    #f8f9fb;     /* secondary surface / sidebar */
    --admin-surface-hover:  #f0f2f5;     /* hover state on surfaces */
    --admin-sidebar:        #f8f9fb;     /* sidebar background */
    --admin-topbar:         #ffffff;     /* topbar background */

    /* Text */
    --admin-text:           #1e293b;     /* primary text — dark grey */
    --admin-text-secondary: #64748b;     /* secondary text */
    --admin-text-muted:     #94a3b8;     /* muted / helper text */
    --admin-text-faint:     #c0c7d0;     /* very faint */

    /* Borders */
    --admin-border:         #e2e5ea;     /* standard borders */
    --admin-border-light:   #eef0f3;     /* very subtle borders */

    /* Accent — Blue Only */
    --admin-accent:         #2563eb;     /* primary blue */
    --admin-accent-hover:   #1d4ed8;     /* blue hover */
    --admin-accent-light:   #3b82f6;     /* lighter blue for links */
    --admin-accent-bg:      rgba(37,99,235,.06);  /* blue tint bg */
    --admin-accent-bg-hover:rgba(37,99,235,.1);   /* blue tint hover */
    --admin-accent-text:    #2563eb;     /* blue text */

    /* Semantic */
    --admin-danger-text:    #dc2626;
    --admin-danger-bg:      #fef2f2;
    --admin-danger-hover:   #fee2e2;
    --admin-success-text:   #16a34a;
    --admin-success-bg:     #f0fdf4;

    /* Shadows */
    --admin-shadow-sm:      0 1px 3px rgba(0,0,0,.06);
    --admin-shadow-md:      0 4px 16px rgba(0,0,0,.06);
    --admin-shadow-lg:      0 12px 40px rgba(0,0,0,.08);
    --admin-shadow-modal:   0 24px 64px rgba(0,0,0,.12);
}

/* ── Form Presentation Design Tokens (BL-FORM-006) ─────────────────────────
   THE VALUES LIVE HERE, ONCE. `frontend/engines/formPresentationTokens.js`
   maps a persisted token NAME (e.g. color_preset: 'warning') onto one of these
   custom properties and emits `var(...)` — it never contains a hex or a pixel
   value of its own, and persisted form metadata never contains CSS at all.
   A form author can only choose a token; anything else is refused by
   `validateLayout` before it is saved. Adding a token means adding it in both
   places — `tests/frontend/formPresentationTokens.test.js` fails otherwise.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
    /* Spacing scale — SPACING_PRESETS */
    --sv-form-space-none:          0px;
    --sv-form-space-tight:         4px;
    --sv-form-space-normal:        10px;
    --sv-form-space-loose:         20px;

    /* Row rhythm inside a section — DENSITIES */
    --sv-form-density-compact:     4px;
    --sv-form-density-normal:      10px;
    --sv-form-density-comfortable: 18px;

    /* Colour presets MOVED to `presentationTokens.css` (imported at the top of
       this file) — BL-LIST-006 needs the same six tokens in the two end-user
       runtimes, which do not and should not load the Admin Studio stylesheet.
       One definition, three consumers; the parity test covers both files. */

    /* Label size scale — LABEL_SIZES */
    --sv-form-label-size-sm:       10px;
    --sv-form-label-size-md:       11px;
    --sv-form-label-size-lg:       13px;

    /* Label emphasis colours — LABEL_EMPHASES */
    --sv-form-label-fg-default:    var(--admin-text-secondary);
    --sv-form-label-fg-muted:      var(--admin-text-muted);
    --sv-form-label-fg-strong:     var(--admin-text);

    /* Input height — INPUT_HEIGHTS */
    --sv-form-input-h-compact:     28px;
    --sv-form-input-h-standard:    36px;

    /* Shape tokens used by the presentation chrome */
    --sv-form-label-w-left:        0 0 34%;   /* side-label column basis */
    --sv-form-radius-sm:           4px;

    /* Device preview widths — DEVICES (BL-FORM-007).
       The canvas constrains itself to these and lets the SAME CSS grid rules
       apply; there is no separate responsive simulation engine. */
    --sv-form-device-desktop:      100%;
    --sv-form-device-tablet:       768px;
    --sv-form-device-mobile:       390px;
}

/* ── Reset & Base ────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--admin-bg);color:var(--admin-text);}

/* ── Scrollbar (subtle for light theme) ──────────────────────── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:#f0f2f5;}
::-webkit-scrollbar-thumb{background:#c8cdd5;border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#b0b6c0;}

/* ── Animation ───────────────────────────────────────────────── */
.fade-in{animation:fadeIn .3s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ── Sidebar Items ───────────────────────────────────────────── */
.sb-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:8px;cursor:pointer;transition:all .2s;color:var(--admin-text-secondary);font-size:13px;font-weight:500;border:none;background:none;width:100%;text-align:left;}
.sb-item:hover{background:var(--admin-accent-bg);color:var(--admin-accent);}
.sb-item.active{background:var(--admin-accent-bg-hover);color:var(--admin-accent);border-right:3px solid var(--admin-accent);}

/* ── Cards & Panels ──────────────────────────────────────────── */
.card{background:var(--admin-surface);border-radius:12px;padding:20px;border:1px solid var(--admin-border);box-shadow:var(--admin-shadow-sm);}
.card-sm{background:var(--admin-surface);border-radius:10px;padding:14px;border:1px solid var(--admin-border);}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{padding:7px 14px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;font-family:'Inter',sans-serif;}
.btn-primary{background:var(--admin-accent);color:#fff;}
.btn-primary:hover{background:var(--admin-accent-hover);}
.btn-accent{background:#0284c7;color:#fff;}
.btn-accent:hover{background:#0369a1;}
.btn-ghost{background:rgba(0,0,0,.04);color:var(--admin-text-secondary);border:1px solid var(--admin-border);}
.btn-ghost:hover{background:rgba(0,0,0,.07);color:var(--admin-text);}
.btn-danger{background:var(--admin-danger-bg);color:var(--admin-danger-text);}
.btn-danger:hover{background:var(--admin-danger-hover);}
.btn-success{background:var(--admin-success-bg);color:var,--admin-success-text;}

/* ── Form Controls ───────────────────────────────────────────── */
.inp{width:100%;padding:9px 13px;border:1.5px solid var(--admin-border);border-radius:8px;font-size:13px;font-family:'Inter',sans-serif;background:var(--admin-surface);color:var(--admin-text);}
.inp:focus{outline:none;border-color:var(--admin-accent);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.sel{padding:8px 11px;border:1.5px solid var(--admin-border);border-radius:8px;font-size:13px;background:var(--admin-surface);color:var(--admin-text);font-family:'Inter',sans-serif;}
.sel:focus{outline:none;border-color:var(--admin-accent);}

/* ── Badges ──────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:9999px;font-size:11px;font-weight:600;}
.b-indigo{background:rgba(59,130,246,.1);color:#2563eb;}
.b-teal{background:rgba(20,184,166,.1);color:#0d9488;}
.b-amber{background:rgba(245,158,11,.1);color:#d97706;}
.b-rose{background:rgba(244,63,94,.1);color:#e11d48;}
.b-slate{background:rgba(100,116,139,.1);color:#64748b;}
.b-green{background:rgba(74,222,128,.1);color:#16a34a;}

/* ── Overlay & Modal ─────────────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal{background:var(--admin-surface);border-radius:16px;border:1px solid var(--admin-border);max-width:640px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:var(--admin-shadow-modal);}

/* ── Drag & Drop ─────────────────────────────────────────────── */
.drag-over{outline:2px dashed var(--admin-accent);outline-offset:2px;background:rgba(37,99,235,.04);}
.palette-tile{background:var(--admin-bg);border:1.5px dashed var(--admin-border);border-radius:10px;padding:12px;cursor:grab;transition:border-color .2s,background .2s;user-select:none;}
.palette-tile:hover{border-color:var(--admin-accent);background:rgba(37,99,235,.03);}

/* ── Canvas Widgets (Admin-side) ─────────────────────────────── */
.canvas-widget{background:var(--admin-surface-alt);border:1.5px solid var(--admin-border);border-radius:10px;padding:14px;position:relative;transition:box-shadow .2s;cursor:default;}
.canvas-widget:hover{box-shadow:0 0 0 2px var(--admin-accent);}
.canvas-widget.dragging{opacity:.4;outline:2px dashed var(--admin-accent);}
.canvas-widget.drop-target{outline:2px solid #0284c7;background:rgba(14,165,233,.06);}

/* ── Grid Canvas ─────────────────────────────────────────────── */
.grid-canvas{display:grid;gap:12px;min-height:380px;padding:12px;border:2px dashed var(--admin-border);border-radius:12px;transition:border-color .2s;}
.grid-canvas.drag-active{border-color:var(--admin-accent);background:rgba(37,99,235,.03);}
.grid-cell-drop{border:2px dashed #c8cdd5;border-radius:8px;min-height:48px;display:flex;align-items:center;justify-content:center;transition:all .15s;cursor:pointer;}
.grid-cell-drop:hover,.grid-cell-drop.over{border-color:var(--admin-accent);background:rgba(37,99,235,.05);}
.grid-cell-drop.occupied{border-color:var(--admin-border);background:var(--admin-surface-hover);cursor:default;}

/* ── Combobox ────────────────────────────────────────────────── */
.combo-wrap{position:relative;min-width:220px;}
.combo-btn{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--admin-surface);border:1.5px solid var(--admin-border);border-radius:8px;cursor:pointer;font-size:13px;color:var(--admin-text);font-family:'Inter',sans-serif;width:100%;text-align:left;justify-content:space-between;}
.combo-btn:hover{border-color:var(--admin-accent);}
.combo-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--admin-surface);border:1.5px solid var(--admin-border);border-radius:10px;z-index:400;box-shadow:var(--admin-shadow-lg);overflow:hidden;}
.combo-search{padding:8px 10px;border-bottom:1px solid var(--admin-border);}
.combo-search input{width:100%;background:var(--admin-bg);border:1px solid var(--admin-border);border-radius:6px;padding:6px 10px;font-size:12px;color:var(--admin-text);font-family:'Inter',sans-serif;}
.combo-search input:focus{outline:none;border-color:var(--admin-accent);}
.combo-list{max-height:200px;overflow-y:auto;}
.combo-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;font-size:13px;color:var(--admin-text-secondary);transition:background .15s;}
.combo-opt:hover{background:rgba(37,99,235,.05);color:var(--admin-text);}
.combo-opt.selected{background:rgba(37,99,235,.08);color:var(--admin-text);}
.combo-divider{border:none;border-top:1px solid var(--admin-border);margin:4px 0;}

/* ── Roles Tree ──────────────────────────────────────────────── */
.role-node{border-left:2px solid var(--admin-border);margin-left:18px;padding-left:8px;}
.role-row{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;cursor:pointer;transition:background .15s;}
.role-row:hover{background:rgba(37,99,235,.05);}
.role-row.selected{background:rgba(37,99,235,.08);}

/* ── Position Grid ───────────────────────────────────────────── */
.pos-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;}
.pos-inp{background:var(--admin-surface);border:1.5px solid var(--admin-border);border-radius:7px;padding:6px 8px;font-size:13px;color:var(--admin-text);font-family:'Inter',sans-serif;width:100%;text-align:center;}
.pos-inp:focus{outline:none;border-color:var(--admin-accent);}
.err-badge{background:rgba(239,68,68,.08);color:#dc2626;border-radius:6px;padding:3px 9px;font-size:11px;font-weight:600;}

/* ── Nav Icon ────────────────────────────────────────────────── */
.nav-icon{font-size:10px;font-weight:700;font-family:'Inter',monospace;letter-spacing:-.01em;min-width:24px;text-align:center;opacity:.85;}

/* ═══════════════════════════════════════════════════════════════════════════
   RUNTIME MIRROR CSS — Admin Studio Dashboard Canvas
   Bu CSS sınıfları Admin Dashboard Designer canvas'ını End User Runtime
   (travelagency.html) ile görsel olarak birebir eşleştirir.
   Ne tasarlarsan onu görürsün: admin canvas = runtime canvas.

   ⚠️  DO NOT apply admin theme tokens to these classes.
   These MUST mirror the actual runtime appearance (light/branded).

   rt-canvas-bg     → travelagency.html #F0F8FF body arka planını yansıtır
   rt-canvas-widget → travelagency.html .card sınıfını birebir kopyalar
   rt-stat-card     → travelagency.html .stat-card sınıfını kopyalar
   rt-tr            → travelagency.html .tr hover stilini kopyalar
   rt-editor-overlay → sadece admin'de görünen düzenleyici kontroller (hover)
   rt-drag-handle   → sadece admin'de görünen drag tutacağı (hover)
═══════════════════════════════════════════════════════════════════════════ */

/* Canvas zemin — travelagency.html body background (#F0F8FF) ile birebir eşleşir */
.rt-canvas-bg{background:#F0F8FF;border:2px dashed #bae6fd;border-radius:12px;display:grid;gap:16px;min-height:380px;padding:16px;overflow-y:auto;flex:1;align-content:start;grid-auto-rows:auto;transition:border-color .2s;}
.rt-canvas-bg.drag-active{border-color:#0077B6;background:rgba(0,119,182,.04);}

/* Widget kartı — travelagency.html .card ile pixel-perfect eşleşir */
.rt-canvas-widget{background:#fff;border-radius:16px;padding:22px;box-shadow:0 1px 3px rgba(0,0,0,.08),0 10px 30px rgba(0,119,182,.07);border:1px solid #e2e8f0;position:relative;cursor:default;transition:transform .18s ease,box-shadow .18s ease;}
.rt-canvas-widget:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08),0 18px 42px rgba(0,119,182,.10);}
.rt-canvas-widget.dragging{opacity:.4;outline:2px dashed #0077B6;}
.rt-canvas-widget.drop-target{outline:2px solid #0077B6;box-shadow:0 0 0 2px rgba(0,119,182,.25);}
.rt-canvas-widget.has-error{border-color:#ef4444 !important;box-shadow:0 0 0 1.5px rgba(239,68,68,.35) !important;}

/* KPI stat kartı — travelagency.html .stat-card ile birebir eşleşir */
.rt-stat-card{background:#fff;border-radius:12px;padding:18px;box-shadow:0 2px 12px rgba(0,119,182,.08);border:1px solid #e2e8f0;}
.rt-widget-title{font-weight:700;color:#0f172a;margin-bottom:4px;font-size:14px;letter-spacing:-.01em;}
.rt-widget-subtitle{font-size:12px;color:#64748b;margin-bottom:12px;line-height:1.5;}
.rt-empty-state{text-align:center;padding:30px;color:#94a3b8;font-size:12px;}

/* Tablo satırı hover — travelagency.html .tr:hover ile eşleşir */
.rt-tr:hover{background:#f0f9ff;}

/* Editör overlay — hover ile görünür aksiyon butonları (admin-only, runtime'da yok) */
.rt-editor-overlay{position:absolute;top:6px;right:6px;display:flex;gap:2px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100% - 44px);opacity:0;transition:opacity .15s;z-index:20;pointer-events:none;}
.rt-canvas-widget:hover .rt-editor-overlay{opacity:1;pointer-events:all;}

/* Drag tutacağı — sol üst köşe, hover ile görünür (admin-only) */
.rt-drag-handle{position:absolute;top:9px;left:9px;cursor:grab;color:#94a3b8;font-size:13px;opacity:0;transition:opacity .15s;z-index:20;user-select:none;}
.rt-canvas-widget:hover .rt-drag-handle{opacity:.75;}

/* ═══════════════════════════════════════════════════════════════
   PagesPage — Edit / Create Form Modern UI
   ─────────────────────────────────────────────────────────────
   Scope: .settings-card içindeki PagesPage editörüne özel stiller.
   Diğer settings-card kullanımlarını bozmaz.
   ═══════════════════════════════════════════════════════════════ */

/* Tab Navigation Bar */
.pages-tabs-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 0;
    flex-wrap: wrap;
}

/* Individual Tab Button */
.pages-tab-btn {
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: #64748b;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    bottom: -2px;
    border-bottom: 2px solid transparent;
}
.pages-tab-btn:hover {
    background: #f1f5f9;
    color: #2c3e50;
}
.pages-tab-btn.active {
    background: #fff;
    color: #3498db;
    font-weight: 700;
    border-bottom: 2px solid #3498db;
    box-shadow: none;
}

/* Tab Content Panel */
.pages-tab-panel {
    background: #fafbfc;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 20px;
    min-height: 380px;
}

/* Section heading inside tab */
.pages-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 3-column inline row (Icon / Color / Position) */
.pages-inline-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.pages-inline-row > .form-group {
    flex: 1;
    min-width: 100px;
}

/* Action Buttons (Save / Cancel) */
.pages-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    align-items: center;
}

/* Status Color Builder (calendar / kanban view tab) */
.pages-status-color-box {
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.pages-status-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.pages-status-color-row input[type="text"] {
    flex: 1;
    min-width: 100px;
    font-size: 12px;
}
.pages-status-color-row input[type="color"] {
    width: 44px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
}
.pages-status-color-row .btn-remove-color {
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.15s;
}
.pages-status-color-row .btn-remove-color:hover {
    background: #fca5a5;
}

/* Profile visibility checkbox list */
.pages-profile-list {
    background: #fff;
    border-radius: 8px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.04);
}
.pages-profile-list label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
}
.pages-profile-list label:last-child { margin-bottom: 0; }
.pages-profile-list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3498db;
    cursor: pointer;
    flex-shrink: 0;
}

/* JSON Editor dark container */
.pages-json-editor {
    background: #1e2129;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #3a3f4b;
}
.pages-json-editor textarea {
    width: 100%;
    background: transparent;
    color: #abb2bf;
    font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.6;
    border: none;
    outline: none;
    resize: vertical;
    box-shadow: none !important;
}
.pages-json-editor small {
    color: #f39c12;
    font-size: 11px;
    margin-top: 6px;
    display: block;
}

/* form-group overrides inside settings-card — modern inputs */
.settings-card .form-group {
    margin-bottom: 16px;
}
.settings-card .form-group > label:first-child {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.settings-card .form-group small {
    display: block;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
    line-height: 1.4;
}
.settings-card .form-group input[type="text"],
.settings-card .form-group input[type="number"],
.settings-card .form-group input[type="email"],
.settings-card .form-group select,
.settings-card .form-group textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: #1e293b;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-sizing: border-box;
    appearance: auto;
}
.settings-card .form-group input[type="text"]:focus,
.settings-card .form-group input[type="number"]:focus,
.settings-card .form-group input[type="email"]:focus,
.settings-card .form-group select:focus,
.settings-card .form-group textarea:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52,152,219,0.12);
}
.settings-card .form-group input[type="color"] {
    height: 38px;
    width: 100%;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    padding: 2px 4px;
    background: #fff;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .pages-inline-row { flex-direction: column; }
    .pages-actions { flex-direction: column; }
    .pages-actions > button { width: 100%; }
    .pages-tab-btn { padding: 8px 10px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SAVA ERP — Admin Studio sign-in (adminLoginScreen.js), `login-*` scope.
   Split hero: brand panel (≥960px) + sign-in card. Presentation only — the
   form itself keeps the shared `.inp` / `.btn btn-primary` primitives.
   ═══════════════════════════════════════════════════════════════════════════ */
.login-screen{min-height:100vh;display:flex;background:#f5f6f8;}

/* Brand hero — hidden below 960px; the card carries the identity there. */
.login-hero{display:none;position:relative;flex:1.15;overflow:hidden;color:#e2e8f0;
    background:linear-gradient(160deg,#0b1220 0%,#0f172a 55%,#13224a 100%);}
.login-hero::before{content:'';position:absolute;top:-220px;right:-180px;width:580px;height:580px;
    border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.32),transparent 65%);}
.login-hero::after{content:'';position:absolute;bottom:-260px;left:-200px;width:520px;height:520px;
    border-radius:50%;background:radial-gradient(circle,rgba(14,165,233,.14),transparent 65%);}
.login-hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;
    width:100%;max-width:640px;margin:0 auto;padding:56px 64px;box-sizing:border-box;}

.login-brandrow{display:flex;align-items:center;gap:14px;margin-bottom:48px;}
.login-mark{width:46px;height:46px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;
    font-family:'Inter',sans-serif;font-weight:800;font-size:17px;letter-spacing:.02em;
    box-shadow:0 8px 24px rgba(37,99,235,.35);}
.login-wordmark{font-family:'Inter',sans-serif;font-weight:800;font-size:18px;letter-spacing:.14em;color:#f8fafc;}
.login-platform{font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.22em;
    color:#93c5fd;margin-top:3px;}

.login-headline{font-family:'Playfair Display',serif;font-weight:700;font-size:36px;line-height:1.18;
    color:#f8fafc;margin:0 0 18px;}
.login-hero-sub{font-size:14.5px;line-height:1.65;color:#a9b7ce;max-width:46ch;margin:0;}

.login-pillars{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:22px;}
.login-pillar{position:relative;padding-left:24px;}
.login-pillar::before{content:'';position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:2px;
    background:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.16);}
.login-pillar h3{font-family:'Inter',sans-serif;font-weight:600;font-size:13.5px;color:#e2e8f0;margin:0 0 4px;}
.login-pillar p{font-size:12.5px;line-height:1.6;color:#8c9db6;margin:0;max-width:52ch;}

.login-hero-foot{font-size:12px;color:#64748b;letter-spacing:.03em;margin-top:48px;}

/* Sign-in panel + card */
.login-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 20px;}
.login-card{width:100%;max-width:400px;background:#fff;border:1px solid #e2e8f0;border-radius:16px;
    padding:40px 36px 28px;box-shadow:0 10px 40px rgba(15,23,42,.07);box-sizing:border-box;}

.login-card-brand{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;margin-bottom:24px;}
.login-card-brand .login-platform{color:#2563eb;}
.login-card-wordmark{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;letter-spacing:.14em;
    color:#0f172a;margin:4px 0 0;}

.login-card-title{font-family:'Inter',sans-serif;font-weight:700;font-size:17px;color:#0f172a;margin:0 0 6px;text-align:center;}
.login-card-sub{font-size:12.5px;line-height:1.55;color:#64748b;margin:0 0 24px;text-align:center;}

.login-toggle-pw{position:absolute;right:8px;bottom:6px;background:none;border:none;cursor:pointer;
    color:#2563eb;font-family:'Inter',sans-serif;font-weight:600;font-size:11px;letter-spacing:.04em;
    padding:5px 8px;border-radius:6px;}
.login-toggle-pw:hover{background:rgba(37,99,235,.08);}
.login-toggle-pw:focus-visible{outline:2px solid var(--admin-accent);outline-offset:1px;}

.login-card-foot{margin-top:26px;padding-top:16px;border-top:1px solid #f1f5f9;text-align:center;
    font-family:'Inter',sans-serif;font-weight:600;font-size:10px;letter-spacing:.18em;
    color:#94a3b8;}

@media (min-width:960px){
    .login-hero{display:flex;}
    .login-card-brand{display:none;}
    .login-card-title{text-align:left;}
    .login-card-sub{text-align:left;}
}