/* Space Gate Hostinger-like UI layer
   هدف الملف: توحيد الشكل والتفاعل فقط دون تغيير منطق PHP/API. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root,
body,
body.sg-dark {
    --h-primary: #673de6;
    --h-primary-2: #5025d1;
    --h-primary-soft: rgba(103, 61, 230, .12);
    --h-accent: #00b090;
    --h-danger: #fc5185;
    --h-warning: #ffcd35;
    --h-info: #2f80ed;
    --bg: #0f1021;
    --panel: #17172f;
    --surface: #17172f;
    --surface-light: #20203c;
    --card: #1e1e3b;
    --line: rgba(255,255,255,.09);
    --border: rgba(255,255,255,.10);
    --text: #ffffff;
    --muted: #b8b5d6;
    --menu: #262646;
    --blue: var(--h-primary);
    --blue-2: var(--h-primary-2);
    --primary: var(--h-primary);
    --primary-hover: var(--h-primary-2);
    --secondary: #8c85ff;
    --accent: var(--h-accent);
    --success: #00b090;
    --danger: #fc5185;
    --warning: #ffcd35;
    --glass-bg: rgba(30, 30, 59, .72);
    --glass-border: rgba(255, 255, 255, .08);
    --shadow: 0 20px 45px rgba(0, 0, 0, .22);
    --radius: 18px;
    color-scheme: dark;
}

body.light,
body.sg-light {
    --bg: #f4f5ff;
    --panel: #ffffff;
    --surface: #ffffff;
    --surface-light: #f8f7ff;
    --card: #ffffff;
    --line: #e4e0ff;
    --border: #e4e0ff;
    --text: #1d1e30;
    --muted: #6d7081;
    --menu: #ffffff;
    --glass-bg: rgba(255, 255, 255, .82);
    --glass-border: rgba(103, 61, 230, .12);
    --shadow: 0 18px 42px rgba(80, 37, 209, .10);
    color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background:
        radial-gradient(circle at 10% 0%, rgba(103, 61, 230, .16), transparent 30%),
        radial-gradient(circle at 95% 8%, rgba(0, 176, 144, .10), transparent 28%),
        var(--bg) !important;
    color: var(--text) !important;
    letter-spacing: 0;
}
body.light {
    background:
        radial-gradient(circle at 8% 0%, rgba(103, 61, 230, .12), transparent 32%),
        radial-gradient(circle at 94% 4%, rgba(0, 176, 144, .10), transparent 28%),
        var(--bg) !important;
}

::selection { background: var(--h-primary); color: #fff; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(103, 61, 230, .45); border-radius: 20px; }
::-webkit-scrollbar-track { background: transparent; }

/* Layout */
.app-shell,
.app {
    background: transparent !important;
}
.sidebar {
    background: var(--panel) !important;
    border-left: 1px solid var(--border) !important;
    box-shadow: -12px 0 34px rgba(80, 37, 209, .08) !important;
}
.main,
.main-content,
.content-scroll {
    background: transparent !important;
}

.brand,
.brand-title,
.app-bar h1,
.page-title h1,
.hero-title {
    color: var(--text) !important;
}
.brand-icon,
.logo-icon,
.fab,
.btn-primary {
    background: linear-gradient(135deg, var(--h-primary), #8f7aff) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(103, 61, 230, .28) !important;
}

/* Navigation */
.nav-link,
.menu button,
.menu-item,
.sidebar-group-head {
    color: var(--muted) !important;
    border-radius: 14px !important;
    border: 1px solid transparent !important;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.nav-link:hover,
.menu button:hover,
.menu-item:hover,
.sidebar-group-head:hover {
    background: var(--h-primary-soft) !important;
    color: var(--h-primary) !important;
    border-color: rgba(103, 61, 230, .20) !important;
    transform: translateX(-2px);
}
.nav-link.active,
.menu button.active,
.menu-item.active {
    background: var(--h-primary) !important;
    color: #fff !important;
    border-color: var(--h-primary) !important;
    box-shadow: 0 12px 24px rgba(103, 61, 230, .26) !important;
}
.nav-title,
.menu-title,
.brand-sub,
.sub-header,
.kpi-label,
.field label,
.field-label {
    color: var(--muted) !important;
}

/* Cards / panels */
.card,
.kpi-card,
.side-card,
.panel,
.table-wrap,
.empty-state,
.router-card,
.quick-card,
.list-item,
.field-row,
.search-box,
.connect-card,
.modal-card,
.loader-box,
.popup-menu,
.toast,
.bulk-bar,
.topbar,
.mobile-topbar,
.app-bar {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow) !important;
}
.kpi-card,
.card,
.side-card,
.list-item,
.field-row {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.kpi-card:hover,
.card:hover,
.side-card:hover,
.list-item:hover,
.field-row:hover {
    transform: translateY(-2px);
    border-color: rgba(103, 61, 230, .30) !important;
    box-shadow: 0 24px 56px rgba(80, 37, 209, .16) !important;
}

/* Buttons */
button,
.btn,
.icon-btn,
.bulk-btn,
.action-btn {
    font-family: inherit !important;
}
.btn,
.bulk-btn,
.action-btn,
.icon-btn,
.fab {
    border-radius: 14px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease !important;
}
.btn:hover,
.bulk-btn:hover,
.action-btn:hover,
.icon-btn:hover,
.fab:hover {
    transform: translateY(-2px);
}
.btn-secondary,
.icon-btn,
.bulk-btn {
    background: var(--surface-light) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.btn-secondary:hover,
.icon-btn:hover,
.bulk-btn:hover {
    background: var(--h-primary-soft) !important;
    border-color: rgba(103, 61, 230, .26) !important;
    color: var(--h-primary) !important;
}
.bulk-btn.danger,
.btn-danger,
.action-danger { background: rgba(252, 81, 133, .12) !important; color: var(--danger) !important; }

/* Inputs */
input,
select,
textarea,
.field-input,
.search-input {
    background: var(--surface-light) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 14px !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
input:focus,
select:focus,
textarea:focus,
.field-input:focus,
.search-input:focus {
    border-color: var(--h-primary) !important;
    box-shadow: 0 0 0 4px rgba(103, 61, 230, .15) !important;
}
input::placeholder,
textarea::placeholder { color: color-mix(in srgb, var(--muted), transparent 25%) !important; }

/* Tables */
table { border-collapse: separate !important; border-spacing: 0 !important; width: 100%; }
th {
    background: var(--surface-light) !important;
    color: var(--muted) !important;
    font-weight: 800 !important;
    border-bottom: 1px solid var(--border) !important;
}
td { border-bottom: 1px solid var(--border) !important; color: var(--text) !important; }
tr:hover td { background: var(--h-primary-soft) !important; }

/* Status elements */
.status-pill,
.conn-status,
.badge,
.method-badge {
    background: var(--surface-light) !important;
    border: 1px solid var(--border) !important;
    color: var(--muted) !important;
    border-radius: 999px !important;
}
.dot.ok,
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-danger { color: var(--danger) !important; }

/* Floating theme button */
.sg-theme-fab {
    position: fixed;
    left: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: var(--h-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 35px rgba(103, 61, 230, .35);
    cursor: pointer;
    z-index: 5000;
}
.sg-theme-fab:hover { transform: translateY(-3px) scale(1.03); }
.sg-theme-fab i { pointer-events: none; }

/* Mobile */
@media (max-width: 1100px) {
    .app-shell,
    .app { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
    body { font-size: 14px; }
    .sidebar {
        width: min(88vw, 310px) !important;
        border-radius: 0 !important;
    }
    .main,
    .main-content { padding: 14px !important; }
    .topbar,
    .mobile-topbar,
    .app-bar {
        margin: 10px !important;
        padding: 12px !important;
    }
    .kpi-grid,
    .stats-grid,
    .dashboard-grid,
    .grid {
        grid-template-columns: 1fr !important;
    }
    .card,
    .kpi-card,
    .side-card,
    .table-wrap,
    .list-item,
    .field-row {
        border-radius: 16px !important;
    }
    .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    table { min-width: 680px; }
    .toast-wrap { left: 12px !important; right: 12px !important; top: 12px !important; }
    .toast { width: 100% !important; }
    .sg-theme-fab { left: 14px; bottom: 14px; width: 44px; height: 44px; }
}

@media (max-width: 520px) {
    h1 { font-size: 20px !important; }
    .brand-title { font-size: 22px !important; }
    .btn { width: 100%; }
    .fab-container { bottom: 18px !important; left: 16px !important; }
}

/* Shared Hostinger-style shell refinements */
:root {
    --sg-sidebar-width: 292px;
    --sg-top-gap: 18px;
}
.app-shell {
    display: grid;
    grid-template-columns: var(--sg-sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
    gap: 0;
}
.sg-sidebar,
.sidebar {
    width: var(--sg-sidebar-width);
    min-height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    overflow: hidden;
    isolation: isolate;
}
.sg-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 8%, rgba(103,61,230,.18), transparent 36%);
    pointer-events: none;
    z-index: -1;
}
.sg-brand,
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    padding: 8px 4px 18px;
    border-bottom: 1px solid var(--border);
}
.brand-title { font-size: 18px; font-weight: 900; color: var(--text); letter-spacing: .8px; line-height: 1.2; }
.brand-sub { font-size: 9px; color: var(--h-primary); font-weight: 900; letter-spacing: 2px; margin-top: 2px; }
.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 14px;
    padding-inline-end: 4px;
}
.nav-group { display: grid; gap: 7px; }
.nav-title {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 0 13px 3px;
}
.nav-link,
.sg-menu-button {
    width: 100%;
    min-height: 42px;
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 10px 13px !important;
    border-radius: 14px;
    font-size: 13px !important;
    font-weight: 800;
    text-align: start;
    cursor: pointer;
    background: transparent;
}
.nav-link i,
.sidebar-group-head i:first-child {
    width: 20px;
    text-align: center;
    flex: 0 0 20px;
}
.sidebar-group-head {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px;
    cursor: pointer;
    background: color-mix(in srgb, var(--card) 70%, transparent);
    font-family: inherit;
}
.sidebar-group-head .title-wrap { display: flex; align-items: center; gap: 11px; font-size: 13px; font-weight: 900; }
.sidebar-group-head .chev { width: auto; color: var(--muted); transition: transform .22s ease; }
.sidebar-group.open .sidebar-group-head .chev { transform: rotate(180deg); }
.sidebar-submenu { display: grid; gap: 6px; margin-top: 8px; padding-inline-start: 0; padding-inline-end: 10px; }
.sidebar-submenu .nav-link { min-height: 38px; font-size: 12px !important; padding-block: 8px !important; }
.sidebar-overlay,
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 16, 33, .55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .24s ease, visibility .24s ease;
}
.sidebar-overlay.show,
.menu-overlay.show {
    opacity: 1;
    visibility: visible;
}
.main,
.main-content,
.content-scroll {
    min-width: 0;
}
.topbar,
.mobile-topbar,
.app-bar {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.mobile-topbar { display: none; }
.sg-theme-fab {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 2100;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--primary);
    box-shadow: var(--shadow);
    cursor: pointer;
}
.table-wrap,
.table-panel,
.content-scroll { overflow-x: auto; }
@media (max-width: 1100px) {
    .app-shell { grid-template-columns: 260px minmax(0, 1fr); }
    .sg-sidebar, .sidebar { width: 260px; }
}
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr !important; }
    .sg-sidebar,
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        right: -320px !important;
        width: 292px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        z-index: 2000 !important;
        box-shadow: -18px 0 50px rgba(15,16,33,.38) !important;
        transition: right .28s cubic-bezier(.4,0,.2,1) !important;
    }
    .sg-sidebar.open,
    .sidebar.open,
    .sidebar.show { right: 0 !important; display: flex !important; }
    .main,
    .main-content,
    .screen,
    .content-scroll { width: 100%; max-width: 100vw; }
    .main { padding: 14px 14px 92px !important; }
    .topbar { display: none !important; }
    .mobile-topbar { display: flex !important; justify-content: space-between; align-items: center; margin-bottom: 14px; padding: 12px; }
    .card,
    .kpi-card,
    .panel,
    .table-wrap { border-radius: 16px !important; }
}
@media (max-width: 560px) {
    body { font-size: 14px; }
    .btn,
    .sg-btn,
    .action-btn,
    .bulk-btn { min-height: 42px; padding-inline: 12px !important; }
    .brand-title { font-size: 16px; }
}