/* ───────────────────────────────────────────────────────────── X1 Panel · XC7 Edition — v2 visual refresh Drop-in stylesheet. Replace css/x1-panel.css with this file. Backwards-compatible with existing markup; no PHP changes required. Design system: premium dark, electric-blue accent (#2e7cff), cyan glow (#6ee0ff). Typography: Geist + Geist Mono. Geist is loaded by the ; the CSS falls back to system if it doesn't load. ───────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap'); :root { /* — Refined token set, mapped from old names where possible — */ --x1-bg: #03060d; --x1-ink-1: #060a14; --x1-ink-2: #0b1224; --x1-ink-3: #131c36; --x1-ink-4: #1d2a4d; --x1-surface: rgba(11, 18, 36, 0.72); --x1-surface-2: rgba(11, 18, 36, 0.55); --x1-surface-3: rgba(255, 255, 255, 0.04); --x1-border: rgba(255, 255, 255, 0.08); --x1-border-mid: rgba(255, 255, 255, 0.14); --x1-border-strong: rgba(255, 255, 255, 0.24); --x1-text: #f4f7ff; --x1-text-2: rgba(244, 247, 255, 0.74); --x1-text-3: rgba(244, 247, 255, 0.50); --x1-muted: rgba(244, 247, 255, 0.50); /* Single coherent accent stack — electric blue + cyan glow */ --x1-blue: #2e7cff; --x1-cyan: #6ee0ff; --x1-blue-deep: #1a4dcc; --x1-blue-ink: #0a1b40; /* Kept for parity with old code; aliased to the new accents */ --x1-purple: #6e6eff; --x1-pink: #ff5e8a; --x1-green: #34e3a7; --x1-red: #ff3b4c; --x1-warn: #ffb020; --x1-radius: 16px; --x1-radius-sm: 10px; --x1-radius-lg: 22px; --x1-radius-pill: 999px; --x1-shadow: 0 18px 50px rgba(0,0,0,.38); --x1-shadow-glow: 0 0 0 1px var(--x1-blue), 0 0 24px rgba(46,124,255,.35); --x1-font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --x1-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { min-height: 100vh; background: radial-gradient(60% 80% at 18% 10%, rgba(46,124,255,.18), transparent 60%), radial-gradient(50% 60% at 88% 100%, rgba(110,224,255,.10), transparent 65%), linear-gradient(135deg, #03060d 0%, #060a14 50%, #0b1224 100%) !important; color: var(--x1-text) !important; font-family: var(--x1-font) !important; letter-spacing: 0.005em; } /* subtle grid texture */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 80%); } /* nicer scrollbars */ body::-webkit-scrollbar, #sidebar-wrapper::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-thumb, #sidebar-wrapper::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(46,124,255,.5), rgba(26,77,204,.5)); border-radius: 999px; } #wrapper, #page-content-wrapper, .container-fluid, .navbar { position: relative; z-index: 1; } /* ─── Sidebar ─────────────────────────────────────────────── */ #sidebar-wrapper { width: 264px; min-width: 264px; background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.78)); border-right: 1px solid var(--x1-border); backdrop-filter: blur(20px); max-height: 100vh; overflow-y: auto; box-shadow: none; } #sidebar-wrapper .sidebar-heading { padding: 20px 18px 16px; border-bottom: 1px solid var(--x1-border); background: transparent; } .x1-brand-shell { display: flex; gap: 12px; align-items: center; } .x1-brand-avatar { width: 44px; height: 44px; border-radius: 12px; background: rgba(46,124,255,.10); border: 1px solid var(--x1-border-mid); display: flex; align-items: center; justify-content: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 18px rgba(46,124,255,.18); flex: 0 0 auto; } .x1-brand-avatar img { width: 36px; height: 36px; object-fit: contain; } .x1-brand-copy { min-width: 0; } .x1-brand-kicker { display: inline-block; font-family: var(--x1-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--x1-cyan); margin-bottom: 2px; } .x1-brand-copy strong { display: block; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; } .x1-brand-copy small { display: block; color: var(--x1-text-3); font-family: var(--x1-font-mono); font-size: 9px; font-weight: 500; letter-spacing: 0.08em; margin-top: 4px; } .x1-sidebar-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .x1-mini-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; font-family: var(--x1-font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--x1-text-2); border: 1px solid var(--x1-border-mid); background: rgba(255,255,255,.04); } .x1-mini-pill i { color: var(--x1-green); } .x1-mini-pill--purple { color: var(--x1-cyan); border-color: rgba(110,224,255,.30); background: rgba(110,224,255,.06); } .x1-mini-pill--purple i { color: var(--x1-cyan); } .x1-community-box { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 14px 4px; } .x1-community-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 10px; border-radius: 10px; color: var(--x1-text-2) !important; border: 1px solid rgba(46,124,255,.25); background: rgba(46,124,255,.06); font-family: var(--x1-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none !important; transition: transform .18s ease, background .18s ease, color .18s ease; } .x1-community-link:hover { transform: translateY(-1px); color: #fff !important; background: rgba(46,124,255,.18); } .x1-community-link--discord { border-color: rgba(110,224,255,.25); background: rgba(110,224,255,.06); } #sidebar-wrapper .list-group { width: 264px; padding: 4px 10px 16px; } .x1-menu-section { padding: 14px 8px 6px; font-family: var(--x1-font-mono); color: var(--x1-cyan); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } #sidebar-wrapper .list-group-item { display: flex; align-items: center; gap: 12px; margin: 1px 0; padding: 9px 12px; border: 1px solid transparent; border-radius: 9px; color: var(--x1-text-2); background: transparent; font-family: var(--x1-font); font-weight: 500; font-size: 13px; letter-spacing: -.005em; transition: all .18s ease; position: relative; } #sidebar-wrapper .list-group-item i { width: 18px; color: var(--x1-text-3); text-align: center; } #sidebar-wrapper .list-group-item:hover, #sidebar-wrapper .list-group-item:focus { color: #fff; background: rgba(255,255,255,.04); border-color: var(--x1-border); } #sidebar-wrapper .list-group-item:hover i, #sidebar-wrapper .list-group-item:focus i { color: var(--x1-text-2); } #sidebar-wrapper .list-group-item.active { color: #fff; font-weight: 600; background: linear-gradient(90deg, rgba(46,124,255,.18), rgba(46,124,255,.02)); border-color: var(--x1-blue); box-shadow: 0 0 16px rgba(46,124,255,.22); } #sidebar-wrapper .list-group-item.active i { color: var(--x1-cyan); } #sidebar-wrapper .list-group-item.active::before { content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; border-radius: 2px; background: var(--x1-cyan); box-shadow: 0 0 8px var(--x1-cyan); } .x1-sidebar-profile { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--x1-border); display: flex; align-items: center; gap: 10px; } .x1-profile-avatar { width: 32px; height: 32px; border-radius: 16px; background: linear-gradient(135deg, var(--x1-blue), var(--x1-cyan)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; box-shadow: 0 0 12px rgba(46,124,255,.4); } .x1-profile-copy { flex: 1; min-width: 0; } .x1-profile-copy strong { display: block; font-family: var(--x1-font); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--x1-text); } .x1-profile-copy small { display: block; font-family: var(--x1-font-mono); font-size: 9px; letter-spacing: 0.10em; color: var(--x1-text-3); margin-top: 1px; } .x1-sidebar-profile a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 14px; background: rgba(255,59,76,.08); border: 1px solid rgba(255,59,76,.3); color: var(--x1-red); } /* ─── Top nav (page header) ───────────────────────────────── */ #page-content-wrapper { min-width: 0 !important; width: 100%; } .navbar { margin: 14px 18px 0; min-height: 60px; border: 1px solid var(--x1-border); border-radius: 16px; background: var(--x1-surface) !important; backdrop-filter: blur(18px); box-shadow: 0 12px 30px rgba(0,0,0,.22); justify-content: space-between; padding: 8px 14px; } .x1-nav-left, .x1-nav-actions { display: flex; align-items: center; gap: 10px; } .x1-nav-copy { display: flex; flex-direction: column; margin-left: 4px; } .x1-nav-kicker { font-family: var(--x1-font-mono); color: var(--x1-cyan); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } .x1-nav-copy strong { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 8px; } .x1-nav-copy strong i { color: var(--x1-cyan); } .x1-nav-copy small { color: var(--x1-text-3); font-family: var(--x1-font); font-size: 11px; line-height: 1.3; } #menu-toggle { border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--x1-blue), var(--x1-blue-deep)); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 18px rgba(46,124,255,.4); } #menu-toggle img { border-radius: 6px; width: 22px; height: 22px; } .x1-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--x1-border-mid); color: var(--x1-text-2); font-family: var(--x1-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .x1-pill i { color: var(--x1-green); } .navbar .btn-danger { border: 0; border-radius: 10px; background: rgba(255,59,76,.10) !important; color: var(--x1-red) !important; font-family: var(--x1-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; min-height: 38px; padding: 0 14px; } .navbar .btn-danger:hover { background: rgba(255,59,76,.18) !important; } .container-fluid { padding: 22px 24px 32px !important; } /* ─── Cards / panels ──────────────────────────────────────── */ .card { border: 1px solid var(--x1-border) !important; border-radius: var(--x1-radius-lg) !important; background: var(--x1-surface-2) !important; color: var(--x1-text) !important; box-shadow: var(--x1-shadow); overflow: hidden; backdrop-filter: blur(14px); } .card-header { border-bottom: 1px solid var(--x1-border) !important; background: radial-gradient(circle at top left, rgba(46,124,255,.10), transparent 50%), rgba(255,255,255,.025) !important; color: #fff !important; padding: 16px 20px !important; } .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5 { margin: 0; color: #fff !important; font-weight: 700; letter-spacing: -.02em; } .card-body, .card-footer { background: transparent !important; } .bg-primary, .bg-secondary, .bg-dark { background: var(--x1-surface-2) !important; } /* ─── Forms ───────────────────────────────────────────────── */ .form-group, .form-line { margin-bottom: 18px; } .form-control, .custom-select, select.form-control, textarea.form-control, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="file"] { border: 1px solid var(--x1-border-mid) !important; border-radius: 11px !important; background: rgba(2,6,23,.55) !important; color: var(--x1-text) !important; min-height: 42px; font-family: var(--x1-font); font-size: 13px; transition: border-color .15s, box-shadow .15s, background .15s; } .form-control:focus, .custom-select:focus, input:focus, textarea:focus, select:focus { border-color: var(--x1-blue) !important; box-shadow: 0 0 0 3px rgba(46,124,255,.18) !important; background: rgba(2,6,23,.7) !important; outline: none; } label, .form-label { font-family: var(--x1-font); font-weight: 600; font-size: 12px; color: var(--x1-text-2); letter-spacing: -.005em; } /* ─── Buttons ─────────────────────────────────────────────── */ .btn { border-radius: 11px !important; font-family: var(--x1-font); font-weight: 600; font-size: 13px; letter-spacing: 0.02em; min-height: 40px; padding: 8px 16px; transition: transform .15s, box-shadow .15s, background .15s; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: linear-gradient(135deg, var(--x1-blue), var(--x1-blue-deep)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 10px 24px rgba(46,124,255,.32); } .btn-primary:hover { box-shadow: 0 14px 28px rgba(46,124,255,.42), 0 0 18px rgba(110,224,255,.20); } .btn-secondary, .x1-soft-button { background: rgba(255,255,255,.05) !important; border: 1px solid var(--x1-border-strong) !important; color: var(--x1-text) !important; } .x1-neon-button { background: linear-gradient(135deg, var(--x1-blue), var(--x1-cyan)) !important; color: var(--x1-blue-ink) !important; box-shadow: 0 14px 30px rgba(46,124,255,.34), 0 0 24px rgba(110,224,255,.30) !important; } /* ─── Dashboard-specific overrides ────────────────────────── */ .x1-command-hero, .x1-system-card, .x1-glass-panel { border: 1px solid var(--x1-border) !important; border-radius: var(--x1-radius-lg) !important; background: var(--x1-surface-2) !important; box-shadow: var(--x1-shadow) !important; } .x1-command-hero { background: linear-gradient(135deg, rgba(46,124,255,.18), rgba(26,77,204,.06) 50%, rgba(110,224,255,.06)), radial-gradient(circle at 18% 18%, rgba(46,124,255,.30), transparent 50%), var(--x1-ink-2) !important; } .x1-command-hero:after { font-family: var(--x1-font) !important; color: rgba(255,255,255,.035) !important; font-weight: 800 !important; } .x1-hero-kicker { font-family: var(--x1-font-mono) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.18em !important; color: var(--x1-cyan) !important; border-color: var(--x1-blue) !important; background: rgba(46,124,255,.10) !important; } .x1-command-hero h1 { font-family: var(--x1-font) !important; font-size: clamp(32px, 4.5vw, 50px) !important; font-weight: 800 !important; letter-spacing: -.04em !important; line-height: 1 !important; } .x1-command-hero p { font-family: var(--x1-font) !important; font-weight: 400 !important; font-size: 15px !important; color: var(--x1-text-2) !important; line-height: 1.55 !important; } .x1-system-card h3 { font-family: var(--x1-font) !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: #fff !important; } .x1-system-card > span { font-family: var(--x1-font-mono) !important; font-size: 10px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--x1-text-3) !important; } .x1-score-orb { width: 170px !important; height: 170px !important; margin: 22px auto 14px !important; box-shadow: inset 0 0 30px rgba(0,0,0,.5), 0 0 50px rgba(52,227,167,.18) !important; } .x1-score-orb strong { font-family: var(--x1-font) !important; font-weight: 800 !important; font-size: 44px !important; letter-spacing: -.04em !important; } .x1-score-label { font-family: var(--x1-font-mono) !important; font-size: 10px !important; letter-spacing: 0.18em !important; font-weight: 700 !important; color: var(--x1-green) !important; } .x1-metric-card { border: 1px solid var(--x1-border) !important; border-radius: var(--x1-radius) !important; background: var(--x1-surface-2) !important; box-shadow: 0 18px 50px rgba(0,0,0,.26) !important; } .x1-metric-card .x1-metric-icon { border-radius: 10px !important; background: linear-gradient(135deg, rgba(46,124,255,.22), rgba(110,224,255,.08)) !important; border: 1px solid var(--x1-border-mid) !important; color: var(--x1-cyan) !important; width: 38px !important; height: 38px !important; margin-bottom: 12px !important; } .x1-metric-card small { font-family: var(--x1-font-mono) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--x1-text-3) !important; } .x1-metric-card strong { font-family: var(--x1-font) !important; font-weight: 800 !important; font-size: 30px !important; letter-spacing: -.025em !important; margin-top: 6px !important; color: var(--x1-text) !important; } .x1-metric-card span { font-family: var(--x1-font) !important; font-size: 11.5px !important; font-weight: 500 !important; color: var(--x1-text-3) !important; margin-top: 4px !important; } .x1-panel-head { padding: 14px 18px !important; border-bottom: 1px solid var(--x1-border) !important; background: radial-gradient(circle at top left, rgba(46,124,255,.10), transparent 50%), transparent !important; } .x1-panel-head h3 { font-family: var(--x1-font) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: -.02em !important; color: #fff !important; } .x1-panel-head h3 i { color: var(--x1-cyan); } .x1-panel-head small { font-family: var(--x1-font) !important; font-weight: 400 !important; font-size: 11.5px !important; color: var(--x1-text-3) !important; } .x1-panel-body { padding: 14px 18px !important; } .x1-check-list { gap: 8px !important; } .x1-check-item { grid-template-columns: 38px minmax(0,1fr) auto !important; padding: 12px !important; border: 1px solid var(--x1-border) !important; border-radius: var(--x1-radius-sm) !important; background: rgba(255,255,255,.025) !important; } .x1-check-icon { width: 36px !important; height: 36px !important; border-radius: 9px !important; } .x1-ok { color: var(--x1-green) !important; background: rgba(52,227,167,.12) !important; border: 1px solid rgba(52,227,167,.4) !important; } .x1-warn { color: var(--x1-warn) !important; background: rgba(255,176,32,.12) !important; border: 1px solid rgba(255,176,32,.4) !important; } .x1-check-item b { font-family: var(--x1-font) !important; font-weight: 600 !important; font-size: 13px !important; color: var(--x1-text) !important; } .x1-check-item p { font-family: var(--x1-font) !important; font-size: 11.5px !important; color: var(--x1-text-3) !important; margin: 2px 0 0 !important; } .x1-status-chip { padding: 4px 10px !important; border-radius: 999px !important; font-family: var(--x1-font-mono) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; } .x1-chip-ok { color: var(--x1-green) !important; background: rgba(52,227,167,.12) !important; border: 1px solid rgba(52,227,167,.4) !important; } .x1-chip-warn { color: var(--x1-warn) !important; background: rgba(255,176,32,.12) !important; border: 1px solid rgba(255,176,32,.4) !important; } /* Action tiles + endpoint cards */ .x1-action-tile, .x1-endpoint-card { border: 1px solid var(--x1-border) !important; border-radius: var(--x1-radius-sm) !important; background: rgba(255,255,255,.025) !important; padding: 12px !important; } .x1-action-tile:hover, .x1-endpoint-card:hover { background: linear-gradient(135deg, rgba(46,124,255,.14), rgba(46,124,255,.02)) !important; border-color: var(--x1-blue) !important; box-shadow: 0 0 16px rgba(46,124,255,.18) !important; transform: translateY(-1px); } .x1-action-tile i { width: 36px !important; height: 36px !important; border-radius: 9px !important; background: linear-gradient(135deg, rgba(46,124,255,.22), rgba(26,77,204,.10)) !important; border: 1px solid var(--x1-border-mid) !important; color: var(--x1-cyan) !important; } .x1-action-tile strong { font-family: var(--x1-font) !important; font-weight: 700 !important; font-size: 12px !important; color: var(--x1-text) !important; } .x1-action-tile span span { font-family: var(--x1-font-mono) !important; font-size: 9px !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; color: var(--x1-text-3) !important; } .x1-endpoint-card b { font-family: var(--x1-font) !important; font-weight: 600 !important; font-size: 12px !important; color: var(--x1-text) !important; } .x1-endpoint-card b i { color: var(--x1-cyan); } .x1-endpoint-card code { font-family: var(--x1-font-mono) !important; font-size: 10px !important; color: var(--x1-text-3) !important; } /* Config rows */ .x1-config-row { padding: 11px 0 !important; border-bottom: 1px solid var(--x1-border) !important; } .x1-config-row span { font-family: var(--x1-font-mono) !important; font-weight: 600 !important; font-size: 10px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--x1-text-3) !important; } .x1-config-row code { font-family: var(--x1-font-mono) !important; font-size: 11px !important; color: var(--x1-text) !important; } /* Alerts */ .alert { border-radius: var(--x1-radius) !important; border: 1px solid var(--x1-border-mid) !important; background: rgba(255,255,255,.04) !important; color: var(--x1-text-2) !important; font-family: var(--x1-font); } .alert-success { background: rgba(52,227,167,.10) !important; border-color: rgba(52,227,167,.35) !important; color: var(--x1-green) !important; } .alert-danger { background: rgba(255,59,76,.10) !important; border-color: rgba(255,59,76,.35) !important; color: var(--x1-red) !important; } .alert-warning { background: rgba(255,176,32,.10) !important; border-color: rgba(255,176,32,.35) !important; color: var(--x1-warn) !important; } /* Tables */ table.dataTable, .table { color: var(--x1-text) !important; } .table thead th { border-bottom: 1px solid var(--x1-border) !important; font-family: var(--x1-font-mono) !important; font-size: 10px !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; color: var(--x1-text-3) !important; font-weight: 700 !important; padding: 12px 14px !important; } .table td { border-top: 1px solid var(--x1-border) !important; padding: 12px 14px !important; font-size: 13px; } .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.015) !important; } .table-hover tbody tr:hover { background: rgba(46,124,255,.06) !important; } /* Badges (Bootstrap) */ .badge { border-radius: 999px !important; padding: 4px 10px !important; font-family: var(--x1-font-mono); font-weight: 700; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; } .badge-primary { background: rgba(46,124,255,.18) !important; color: var(--x1-cyan) !important; } .badge-success { background: rgba(52,227,167,.14) !important; color: var(--x1-green) !important; } .badge-warning { background: rgba(255,176,32,.14) !important; color: var(--x1-warn) !important; } .badge-danger { background: rgba(255,59,76,.14) !important; color: var(--x1-red) !important; } /* Custom select chevron */ select.form-control, .custom-select { background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 32px !important; } /* Bootstrap switch / custom switch */ .switch input:checked + .slider { background: var(--x1-blue) !important; box-shadow: 0 0 12px rgba(46,124,255,.4) !important; } /* Code blocks */ code, pre { font-family: var(--x1-font-mono) !important; color: var(--x1-cyan); background: rgba(0,0,0,.35); padding: 2px 6px; border-radius: 4px; font-size: 12px; } /* Make the giant "X1" stamp on the hero respect tokens */ .x1-command-hero:after { font-family: var(--x1-font) !important; font-weight: 800 !important; color: rgba(255,255,255,.035) !important; letter-spacing: -.1em !important; } /* Animations */ @keyframes x1-pulse-ring { 0%, 100% { box-shadow: 0 0 0 3px rgba(46,124,255,.25), 0 0 12px var(--x1-blue); } 50% { box-shadow: 0 0 0 6px rgba(46,124,255,.10), 0 0 16px var(--x1-cyan); } } /* Focus visible — accessibility */ *:focus-visible { outline: 2px solid var(--x1-cyan) !important; outline-offset: 2px; } /* Responsive */ @media (max-width: 1200px) { .x1-command-center, .x1-control-grid { grid-template-columns: 1fr !important; } .x1-metric-strip { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { .container-fluid { padding: 16px !important; } .navbar { margin: 12px !important; } #sidebar-wrapper { position: fixed; transform: translateX(-100%); transition: transform .25s; } #sidebar-wrapper.open { transform: translateX(0); } } /* ───────────────────────────────────────────────────────────── X1 Sidebar Lock · production fix Keeps the left menu compact and prevents the empty gutter/overflow seen in Chromium at 100% zoom. This is intentionally placed last. ───────────────────────────────────────────────────────────── */ :root { --x1-sidebar-w: 244px; } html, body { overflow-x: hidden !important; } #wrapper { display: flex !important; align-items: stretch !important; min-height: 100vh !important; width: 100% !important; overflow-x: hidden !important; } #sidebar-wrapper { flex: 0 0 var(--x1-sidebar-w) !important; width: var(--x1-sidebar-w) !important; min-width: var(--x1-sidebar-w) !important; max-width: var(--x1-sidebar-w) !important; margin-left: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; scrollbar-gutter: stable; } #sidebar-wrapper .sidebar-heading, #sidebar-wrapper .x1-community-box, #sidebar-wrapper .list-group, #sidebar-wrapper .x1-user-card, #sidebar-wrapper .x1-sidebar-footer { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #sidebar-wrapper .sidebar-heading { padding: 16px 14px 12px !important; } #sidebar-wrapper .list-group { width: 100% !important; padding: 4px 8px 14px !important; } #sidebar-wrapper .list-group-item { width: 100% !important; max-width: 100% !important; min-height: 38px !important; padding: 8px 10px !important; gap: 9px !important; border-radius: 10px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } #sidebar-wrapper .list-group-item i { flex: 0 0 17px !important; width: 17px !important; margin: 0 !important; } .x1-brand-avatar { width: 38px !important; height: 38px !important; border-radius: 10px !important; } .x1-brand-avatar img { width: 30px !important; height: 30px !important; } .x1-brand-copy strong { font-size: 15px !important; } .x1-brand-copy small { font-size: 10px !important; letter-spacing: .04em !important; text-transform: none !important; } .x1-brand-kicker, .x1-menu-section { font-size: 9px !important; letter-spacing: .14em !important; } .x1-sidebar-stats { margin-top: 10px !important; gap: 6px !important; } .x1-mini-pill { padding: 5px 8px !important; font-size: 10px !important; } .x1-community-box { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 10px 10px 6px !important; } .x1-community-link { min-height: 36px !important; padding: 7px 8px !important; font-size: 10px !important; letter-spacing: .02em !important; text-transform: none !important; } #page-content-wrapper { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; max-width: calc(100vw - var(--x1-sidebar-w)) !important; } .navbar { margin: 12px 16px 0 !important; min-height: 58px !important; border-radius: 16px !important; } .container-fluid { padding: 18px 18px 30px !important; } .x1-page-title, .x1-command-hero, .x1-glass-panel, .x1-system-card, .card { border-radius: 16px !important; } .x1-command-hero { padding: 24px !important; } .x1-command-hero h1, .x1-page-title h1 { font-size: clamp(28px, 3.4vw, 44px) !important; line-height: 1.02 !important; } .x1-command-hero p, .x1-page-title p { font-size: 14px !important; line-height: 1.55 !important; } @media (min-width: 768px) { #wrapper.toggled #sidebar-wrapper { margin-left: calc(-1 * var(--x1-sidebar-w)) !important; } #wrapper.toggled #page-content-wrapper { max-width: 100vw !important; } } @media (max-width: 767.98px) { #sidebar-wrapper { position: fixed !important; left: 0 !important; top: 0 !important; bottom: 0 !important; z-index: 50 !important; margin-left: calc(-1 * var(--x1-sidebar-w)) !important; transition: margin .22s ease !important; } #wrapper.toggled #sidebar-wrapper { margin-left: 0 !important; } #page-content-wrapper { max-width: 100vw !important; } .navbar { margin: 10px 10px 0 !important; } .container-fluid { padding: 14px 12px 24px !important; } } /* ───────────────────────────────────────────────────────────── X1 Background Lock · replaces legacy particle/star background This keeps the X1 DNA background consistent and prevents the old colorful particle canvas from appearing behind the panel. ───────────────────────────────────────────────────────────── */ :root { --x1-canonical-bg: #0A0E14; --x1-canonical-surface: #111722; --x1-canonical-card: #161E2C; --x1-canonical-accent: #06B6D4; --x1-canonical-violet: #8B5CF6; } html, body { min-height: 100% !important; background: var(--x1-canonical-bg) !important; } body { background: radial-gradient(900px 520px at 16% -12%, rgba(6,182,212,.16), transparent 60%), radial-gradient(780px 520px at 92% 8%, rgba(139,92,246,.12), transparent 62%), linear-gradient(135deg, #0A0E14 0%, #0D1320 46%, #111722 100%) !important; } body::before { background-image: linear-gradient(rgba(230,237,247,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(230,237,247,.018) 1px, transparent 1px) !important; background-size: 64px 64px !important; opacity: .55 !important; mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.18) 80%, transparent) !important; } #js-particles { position: fixed !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; overflow: hidden !important; height: 100vh !important; min-height: 100vh !important; background: radial-gradient(circle at 22% 12%, rgba(6,182,212,.14), transparent 26%), radial-gradient(circle at 78% 18%, rgba(167,139,250,.10), transparent 24%), radial-gradient(circle at 50% 115%, rgba(6,182,212,.07), transparent 38%) !important; } #js-particles::before { content: "X1" !important; position: absolute !important; right: clamp(36px, 6vw, 96px) !important; bottom: clamp(24px, 6vw, 72px) !important; font-family: var(--x1-font, system-ui, sans-serif) !important; font-size: clamp(120px, 22vw, 320px) !important; line-height: .8 !important; font-weight: 900 !important; letter-spacing: -.08em !important; color: rgba(230,237,247,.026) !important; text-shadow: 0 0 80px rgba(6,182,212,.08) !important; transform: skewX(-8deg) !important; } #js-particles::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, rgba(6,182,212,.09), transparent 18%, transparent 82%, rgba(139,92,246,.08)), linear-gradient(to bottom, rgba(10,14,20,.12), rgba(10,14,20,.78)) !important; } #js-particles canvas, .particles-js-canvas-el { display: none !important; visibility: hidden !important; opacity: 0 !important; } #wrapper, #page-content-wrapper, .navbar, .container-fluid, #sidebar-wrapper { position: relative !important; z-index: 1 !important; } #sidebar-wrapper { background: linear-gradient(180deg, rgba(10,14,20,.98), rgba(17,23,34,.96)) !important; border-right: 1px solid rgba(42,52,71,.88) !important; } .navbar, .card, .x1-page-title, .x1-command-hero, .x1-glass-panel, .x1-system-card { background-color: rgba(17,23,34,.82) !important; } /* final sidebar sizing safety */ :root { --x1-sidebar-w: 244px; } #sidebar-wrapper, #sidebar-wrapper .list-group { width: var(--x1-sidebar-w) !important; max-width: var(--x1-sidebar-w) !important; } #page-content-wrapper { max-width: calc(100vw - var(--x1-sidebar-w)) !important; } @media (max-width: 767.98px) { #page-content-wrapper { max-width: 100vw !important; } } /* ───────────────────────────────────────────────────────────── X1 Page-by-page Visual Polish · 2026-05-15 Normalizes legacy settings pages, responsive tables and mobile navigation without changing APK endpoints or server logic. ───────────────────────────────────────────────────────────── */ .x1-admin-page { min-width: 0 !important; } #page-content-wrapper, .container-fluid { min-width: 0 !important; overflow-x: clip !important; } img, video, canvas, iframe, svg { max-width: 100%; } .navbar { gap: 10px !important; } .x1-nav-left, .x1-nav-actions { min-width: 0 !important; } .x1-nav-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-wrap: wrap !important; justify-content: flex-end !important; } .x1-nav-actions .btn, .x1-nav-actions .x1-pill { flex: 0 0 auto; } /* Better legacy-page framing */ .container-fluid > .col-md-8.mx-auto, .container-fluid > .col-md-10.mx-auto, .container-fluid > .col-md-12.mx-auto { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .container-fluid > .col-md-8.mx-auto { max-width: 980px !important; } .container-fluid > .col-md-10.mx-auto { max-width: 1180px !important; } .container-fluid > .col-md-12.mx-auto { max-width: 100% !important; } .container-fluid > .col-md-8.mx-auto > center, .container-fluid > .col-md-10.mx-auto > center, .container-fluid > .col-md-12.mx-auto > center, .container-fluid > .col-md-8.mx-auto > .card-body, .container-fluid > .col-md-10.mx-auto > .card-body, .container-fluid > .col-md-12.mx-auto > .card-body { display: block !important; width: 100% !important; } .container-fluid > .row { min-width: 0 !important; } .container-fluid > .row > .card-body { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } .card { min-width: 0 !important; } .card .card { margin-bottom: 16px !important; box-shadow: 0 10px 28px rgba(0,0,0,.18) !important; background: rgba(17,23,34,.70) !important; } .card-body { min-width: 0 !important; } .card-body > .col-12, .card-body > .row, .card-body > form, .card-body > center { min-width: 0 !important; } .card-header center, .card-body center { width: 100% !important; } .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5 { line-height: 1.15 !important; } .card-header small { display: block; margin-top: 5px; color: var(--x1-text-3) !important; } .alert { overflow-wrap: anywhere !important; } /* Tables and DataTables */ .card-body:has(table), .x1-table-wrap, .table-responsive, .dataTables_wrapper { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } table, .table, table.dataTable { width: 100% !important; max-width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; } .table th, .table td, table.dataTable th, table.dataTable td { vertical-align: middle !important; overflow-wrap: anywhere !important; } td .btn, .table .btn, .dataTable .btn { margin: 2px !important; white-space: nowrap !important; } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { color: var(--x1-text-2) !important; margin: 8px 0 !important; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { margin-left: 8px !important; } /* Forms */ .form-group, .form-line, .input-group { min-width: 0 !important; } .input-group { flex-wrap: wrap !important; gap: 8px !important; } .input-group > .form-control, .input-group > .custom-select { flex: 1 1 220px !important; width: auto !important; } input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { max-width: 100% !important; } input[type="text"]:not(.form-control), input[type="password"]:not(.form-control), input[type="email"]:not(.form-control), input[type="number"]:not(.form-control), textarea:not(.form-control), select:not(.form-control) { width: 100% !important; } input[type="file"] { height: auto !important; min-height: 44px !important; padding: 10px 12px !important; line-height: 1.35 !important; } input[type="color"] { width: 100% !important; min-height: 44px !important; padding: 6px !important; } textarea.form-control, textarea { min-height: 112px !important; resize: vertical; } .btn { max-width: 100% !important; } .btn-group, .x1-hero-actions, .x1-logs-hero-actions, .x1-actions, .x1-copy-row, .x1-apk-actions, .x1-backup-actions, .x1-update-actions { flex-wrap: wrap !important; min-width: 0 !important; } /* Dark modal polish for delete confirmations and restore dialogs */ .modal-content { border: 1px solid var(--x1-border-mid) !important; border-radius: 18px !important; background: rgba(17,23,34,.96) !important; color: var(--x1-text) !important; box-shadow: 0 24px 80px rgba(0,0,0,.55) !important; } .modal-header, .modal-footer { border-color: var(--x1-border) !important; } .modal-body { color: var(--x1-text-2) !important; } /* Mobile off-canvas polish */ @media (max-width: 767.98px) { #wrapper.toggled::before { content: "" !important; position: fixed !important; inset: 0 !important; z-index: 40 !important; background: rgba(0,0,0,.54) !important; backdrop-filter: blur(4px); } #wrapper.toggled #sidebar-wrapper { box-shadow: 18px 0 50px rgba(0,0,0,.45) !important; } .navbar { align-items: flex-start !important; } .x1-nav-actions { margin-left: 0 !important; justify-content: flex-end !important; gap: 6px !important; } .navbar .btn-danger { min-width: 40px !important; width: 40px !important; padding: 0 !important; font-size: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .navbar .btn-danger i { font-size: 14px !important; margin: 0 !important; } .x1-command-hero, .x1-page-title, .x1-dna-hero, .x1-logs-hero, .x1-tg-hero, .x1-branding-hero, .x1-update-hero, .x1-backup-hero, .x1-security-hero { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; text-align: left !important; } .x1-logs-hero { display: flex !important; flex-direction: column !important; align-items: flex-start !important; } .x1-logs-stats, .x1-metric-strip, .x1-status-grid, .x1-kpi-grid, .x1-backup-grid, .x1-update-grid, .x1-branding-grid, .x1-security-grid { grid-template-columns: minmax(0, 1fr) !important; } .card-header, .card-body { padding-left: 14px !important; padding-right: 14px !important; } .btn, .x1-soft-button, .x1-neon-button { white-space: normal !important; } } @media (max-width: 480px) { .container-fluid { padding-left: 10px !important; padding-right: 10px !important; } .x1-login-title h1 { font-size: clamp(26px, 9vw, 33px) !important; } .card-header h2, .card-header h3 { font-size: 20px !important; } .table th, .table td, table.dataTable th, table.dataTable td { padding: 10px 9px !important; font-size: 12px !important; } } /* ───────────────────────────────────────────────────────────── Page-by-page containment pass: keep legacy action buttons inside visible card/action wells instead of floating against the page bg. ───────────────────────────────────────────────────────────── */ /* Legacy pages that used .card-body directly under a column without a .card */ .container-fluid > .col-md-6.mx-auto > .card-body:not(.card .card-body), .container-fluid > .col-md-8.mx-auto > .card-body:not(.card .card-body), .container-fluid > .col-md-10.mx-auto > .card-body:not(.card .card-body), .container-fluid > .col-md-12.mx-auto > .card-body:not(.card .card-body) { border: 1px solid var(--x1-border) !important; border-radius: var(--x1-radius-lg) !important; background: radial-gradient(circle at top left, rgba(46,124,255,.08), transparent 48%), var(--x1-surface-2) !important; box-shadow: var(--x1-shadow) !important; backdrop-filter: blur(14px); padding: 18px !important; margin-bottom: 18px !important; overflow: hidden !important; } /* Current preview blocks on upload pages */ .container-fluid > .col-md-6.mx-auto > .align-items-center, .container-fluid > .col-md-8.mx-auto > .align-items-center, .container-fluid > .col-md-10.mx-auto > .align-items-center, .container-fluid > .col-md-12.mx-auto > .align-items-center { border: 1px solid var(--x1-border) !important; border-radius: var(--x1-radius-lg) !important; background: rgba(11, 18, 36, 0.55) !important; box-shadow: 0 12px 34px rgba(0,0,0,.24) !important; padding: 18px !important; margin-top: 18px !important; overflow: hidden !important; } /* Form submit areas become card footers/action rows */ form .form-group:has(> button[type="submit"]), form .form-group:has(> .btn), form .form-group:has(> a.btn), form > button[type="submit"], form > .btn { max-width: 100% !important; } form .form-group:has(> button[type="submit"]), form .form-group:has(> .btn), form .form-group:has(> a.btn) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; padding: 14px !important; margin-top: 18px !important; margin-bottom: 0 !important; border: 1px solid var(--x1-border) !important; border-radius: 14px !important; background: rgba(255,255,255,.035) !important; } /* Upload/input-group actions stay attached to their card instead of spilling out */ .input-group > button.btn, .input-group > .btn, .custom-file + button.btn, .custom-file + .btn { align-self: stretch !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; } /* Top-of-table legacy action buttons, e.g. filters and "new" buttons */ .card-body > .col-12:has(a.btn), .card-body > center:has(a.btn), .card-body > div:has(> a#button.btn), .card-body > p:has(a.btn) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 12px !important; margin: 0 0 16px 0 !important; border: 1px solid var(--x1-border) !important; border-radius: 14px !important; background: rgba(255,255,255,.035) !important; } /* Inline action links after submit buttons, e.g. user_update.php */ .card-body form > .btn, .card-body form > a.btn, .card-body form > button.btn, .card-body form .btn { margin-top: 4px !important; margin-bottom: 4px !important; } .card-body form > button.btn + a.btn, .card-body form > .btn + .btn, .card-body form .form-group + a.btn { margin-left: 0 !important; } /* Table row action buttons sit in a compact mini-card well */ .table td:has(a.btn), .table td:has(button.btn), table.dataTable td:has(a.btn), table.dataTable td:has(button.btn) { white-space: nowrap !important; } .table td > a.btn, .table td > button.btn, table.dataTable td > a.btn, table.dataTable td > button.btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Modal footer buttons should remain visually inside the modal card */ .modal-footer { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; justify-content: flex-end !important; padding: 14px 16px !important; background: rgba(255,255,255,.025) !important; } /* Mobile: action wells stack cleanly inside cards */ @media (max-width: 575.98px) { form .form-group:has(> button[type="submit"]), form .form-group:has(> .btn), form .form-group:has(> a.btn), .card-body > .col-12:has(a.btn), .card-body > center:has(a.btn), .card-body > div:has(> a#button.btn), .card-body > p:has(a.btn) { padding: 10px !important; gap: 8px !important; } form .form-group:has(> button[type="submit"]) > .btn, form .form-group:has(> .btn) > .btn, .card-body > .col-12:has(a.btn) > .btn, .card-body > center:has(a.btn) > .btn, .card-body > div:has(> a#button.btn) > .btn, .card-body > p:has(a.btn) > .btn { width: 100% !important; justify-content: center !important; } .input-group > button.btn, .input-group > .btn, .custom-file + button.btn, .custom-file + .btn { width: 100% !important; flex: 1 1 100% !important; } } /* ───────────────────────────────────────────────────────────── Structural normalization for legacy pages converted page-by-page. These classes make old PHP screens use the same card grammar as the newer DNA pages without changing APK endpoints or backend behaviour. ───────────────────────────────────────────────────────────── */ .x1-legacy-page, .container-fluid.x1-legacy-page { width: 100%; max-width: 100%; } .x1-card-shell { width: 100%; margin: 0 auto 22px; } .x1-legacy-card, .card.x1-legacy-card { border: 1px solid var(--x1-border) !important; border-radius: var(--x1-radius-lg) !important; background: radial-gradient(52% 78% at 12% 0%, rgba(46,124,255,.11), transparent 70%), radial-gradient(42% 70% at 100% 100%, rgba(110,224,255,.07), transparent 72%), rgba(11, 18, 36, .76) !important; color: var(--x1-text) !important; box-shadow: 0 16px 42px rgba(0,0,0,.30) !important; overflow: hidden !important; margin-bottom: 22px !important; } .x1-legacy-card > .card-header, .x1-legacy-card .card-header.card-header-warning { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important; padding: 18px 20px !important; border-bottom: 1px solid var(--x1-border) !important; background: linear-gradient(135deg, rgba(46,124,255,.13), rgba(110,224,255,.055)) !important; color: var(--x1-text) !important; } .x1-legacy-card > .card-header center, .x1-legacy-card .card-header center { width: 100% !important; text-align: left !important; } .x1-legacy-card > .card-header h1, .x1-legacy-card > .card-header h2, .x1-legacy-card .card-header h1, .x1-legacy-card .card-header h2 { margin: 0 !important; color: var(--x1-text) !important; font-weight: 900 !important; letter-spacing: -.035em !important; font-size: clamp(22px, 2.3vw, 30px) !important; } .x1-legacy-card > .card-body, .x1-legacy-card .card-body { padding: 20px !important; background: transparent !important; } .x1-legacy-card .form-group { max-width: 100%; } .x1-legacy-card hr { border-color: var(--x1-border) !important; margin: 18px 0 !important; } .x1-legacy-card .col-12, .x1-legacy-card .row { max-width: 100%; } .x1-legacy-card .table-responsive { border: 1px solid var(--x1-border) !important; border-radius: 16px !important; background: rgba(255,255,255,.025) !important; padding: 10px !important; } .x1-form-actions, .x1-legacy-card form .form-group.x1-form-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: 10px !important; padding: 14px !important; margin-top: 18px !important; border: 1px solid var(--x1-border) !important; border-radius: 15px !important; background: rgba(255,255,255,.04) !important; } .x1-preview-card { border: 1px solid var(--x1-border) !important; border-radius: var(--x1-radius-lg) !important; background: rgba(11,18,36,.60) !important; box-shadow: 0 14px 36px rgba(0,0,0,.22) !important; padding: 18px !important; margin-top: 18px !important; overflow: hidden !important; } .x1-preview-card video, .x1-preview-card img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; border-radius: 16px !important; border: 1px solid var(--x1-border) !important; background: rgba(0,0,0,.24) !important; } .x1-upload-card .input-group { gap: 10px !important; } .x1-upload-card .custom-file { min-width: 220px !important; } @media (max-width: 767.98px) { .x1-legacy-card > .card-header, .x1-legacy-card .card-header.card-header-warning { padding: 15px !important; } .x1-legacy-card > .card-body, .x1-legacy-card .card-body { padding: 15px !important; } .x1-form-actions, .x1-legacy-card form .form-group.x1-form-actions { justify-content: stretch !important; } .x1-form-actions .btn, .x1-legacy-card form .form-group.x1-form-actions .btn { width: 100% !important; justify-content: center !important; } } .x1-legacy-card > .card-header h3, .x1-legacy-card .card-header h3 { margin: 0 !important; color: var(--x1-text) !important; font-weight: 900 !important; letter-spacing: -.03em !important; font-size: clamp(18px, 1.8vw, 24px) !important; } .x1-legacy-card > .row { margin: 0 !important; padding: 18px !important; gap: 18px !important; } .x1-legacy-card > .alert { margin: 18px 18px 0 !important; } /* ───────────────────────────────────────────────────────────── X1 Sidebar Frame Fix · 2026-05-15 Prevents the left menu from being visually trapped inside a card-like box on legacy pages. Desktop sidebar now grows with the document instead of being clipped to a 100vh internal scroll frame. ───────────────────────────────────────────────────────────── */ @media (min-width: 768px) { html, body, #wrapper { min-height: 100% !important; } #wrapper { overflow: visible !important; align-items: stretch !important; } #sidebar-wrapper { position: relative !important; align-self: stretch !important; min-height: 100vh !important; height: auto !important; max-height: none !important; overflow-x: hidden !important; overflow-y: visible !important; border-radius: 0 !important; flex-shrink: 0 !important; } #sidebar-wrapper .sidebar-heading, #sidebar-wrapper .x1-community-box, #sidebar-wrapper .list-group, #sidebar-wrapper .x1-sidebar-profile { position: relative !important; z-index: 2 !important; border-radius: 0 !important; box-shadow: none !important; } #sidebar-wrapper .list-group { height: auto !important; max-height: none !important; overflow: visible !important; } #page-content-wrapper { overflow: visible !important; } } /* Keep the off-canvas behavior on phones/tablets only. */ @media (max-width: 767.98px) { #wrapper { overflow-x: hidden !important; } #sidebar-wrapper { max-height: 100vh !important; overflow-y: auto !important; } } /* ───────────────────────────────────────────────────────────── X1 VPN Page Card Normalization · 2026-05-15 Brings vpn.php to the same card grammar as the corrected legacy pages. ───────────────────────────────────────────────────────────── */ .x1-vpn-page { padding-left: 0 !important; padding-right: 0 !important; } .x1-section-title { display: flex !important; flex-direction: column !important; gap: 4px !important; padding: 0 0 16px !important; margin: 0 0 18px !important; border-bottom: 1px solid var(--x1-border) !important; } .x1-section-title h3 { margin: 0 !important; color: var(--x1-text) !important; font-weight: 800 !important; letter-spacing: -.025em !important; } .x1-section-title small { color: var(--x1-muted) !important; } .x1-legacy-card .x1-header-action { white-space: nowrap !important; } .x1-table-actions { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; flex-wrap: nowrap !important; } .x1-table-actions .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 38px !important; } .x1-vpn-table td:nth-child(4) { max-width: 320px !important; word-break: break-word !important; } @media (max-width: 767.98px) { .x1-legacy-card > .card-header .x1-header-action, .x1-legacy-card .card-header.card-header-warning .x1-header-action { width: 100% !important; justify-content: center !important; } .x1-section-title { padding-bottom: 14px !important; margin-bottom: 16px !important; } } /* ───────────────────────────────────────────────────────────── X1 Premium Upload Controls · 2026-05-15 Replaces browser-native file inputs with panel-native dark upload cards. ───────────────────────────────────────────────────────────── */ .x1-premium-upload { display: block !important; width: 100% !important; } .x1-premium-upload .x1-upload-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .x1-premium-upload__control { min-height: 64px !important; width: 100% !important; display: grid !important; grid-template-columns: 42px minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; padding: 12px !important; margin: 0 !important; border-radius: 14px !important; border: 1px solid rgba(148, 163, 184, .22) !important; background: radial-gradient(circle at top left, rgba(6, 182, 212, .10), transparent 42%), rgba(7, 11, 22, .70) !important; color: var(--x1-text, #f8fafc) !important; cursor: pointer !important; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important; } .x1-premium-upload__control:hover, .x1-premium-upload__control:focus-within { border-color: rgba(56, 189, 248, .55) !important; background: radial-gradient(circle at top left, rgba(6, 182, 212, .16), transparent 42%), rgba(7, 11, 22, .82) !important; box-shadow: 0 0 0 3px rgba(14, 165, 233, .12), inset 0 1px 0 rgba(255,255,255,.05) !important; } .x1-premium-upload__icon { width: 42px !important; height: 42px !important; border-radius: 13px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, rgba(14, 165, 233, .20), rgba(139, 92, 246, .16)) !important; border: 1px solid rgba(125, 211, 252, .22) !important; color: #7dd3fc !important; font-size: 18px !important; flex: 0 0 auto !important; } .x1-premium-upload__text { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 2px !important; } .x1-premium-upload__title { color: #e5f3ff !important; font-size: 13px !important; font-weight: 850 !important; line-height: 1.2 !important; } .x1-premium-upload__filename { max-width: 100% !important; color: rgba(203, 213, 225, .78) !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1.25 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .x1-premium-upload.has-file .x1-premium-upload__filename { color: #bae6fd !important; } .x1-premium-upload__badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 32px !important; padding: 0 12px !important; border-radius: 999px !important; background: rgba(14, 165, 233, .16) !important; border: 1px solid rgba(125, 211, 252, .26) !important; color: #dff8ff !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .02em !important; white-space: nowrap !important; } .x1-premium-upload__hint { display: block !important; margin-top: 7px !important; color: rgba(148, 163, 184, .82) !important; font-size: 11px !important; line-height: 1.35 !important; } .x1-dna-field .x1-premium-upload__hint, .x1-dna-field .form-text.x1-premium-upload__hint { color: rgba(148, 163, 184, .82) !important; } @media (max-width: 575.98px) { .x1-premium-upload__control { grid-template-columns: 38px minmax(0, 1fr) !important; } .x1-premium-upload__badge { grid-column: 1 / -1 !important; width: 100% !important; } } /* ───────────────────────────────────────────────────────────── X1 Hard Unification Pass · TMDB/Sports/Legacy pages Forces mixed Bootstrap-era screens to the same X1 grammar. ───────────────────────────────────────────────────────────── */ .x1-bad { color: var(--x1-red, #ff3b4c) !important; background: rgba(255, 59, 76, .12) !important; border: 1px solid rgba(255, 59, 76, .38) !important; } .x1-admin-page #page-content-wrapper > .container-fluid { max-width: 100% !important; overflow-x: hidden !important; } .x1-admin-page .card:not(.x1-system-card):not(.x1-metric-card), .x1-admin-page .x1-dna-panel, .x1-admin-page .x1-sports-card, .x1-admin-page .x1-security-card, .x1-admin-page .x1-update-card, .x1-admin-page .x1-backup-card, .x1-admin-page .x1-mac-panel .card { border: 1px solid rgba(148, 163, 184, .16) !important; border-radius: 18px !important; background: radial-gradient(70% 80% at 10% 0%, rgba(46, 124, 255, .10), transparent 72%), radial-gradient(60% 70% at 100% 100%, rgba(110, 224, 255, .06), transparent 72%), rgba(8, 13, 26, .76) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, .30) !important; color: var(--x1-text, #f8fafc) !important; } .x1-admin-page .card-header, .x1-admin-page .x1-dna-card-header, .x1-admin-page .x1-sports-card-head, .x1-admin-page .x1-update-card-header, .x1-admin-page .x1-dna-panel-head { border-bottom: 1px solid rgba(148, 163, 184, .14) !important; background: linear-gradient(135deg, rgba(46,124,255,.13), rgba(110,224,255,.045)) !important; color: #f8fafc !important; } .x1-admin-page .card-header-warning, .x1-admin-page .bg-warning, .x1-admin-page .alert-warning.card-header { background: linear-gradient(135deg, rgba(46,124,255,.14), rgba(110,224,255,.055)) !important; color: #f8fafc !important; } .x1-admin-page .card h1, .x1-admin-page .card h2, .x1-admin-page .card h3, .x1-admin-page .card h4, .x1-admin-page .x1-dna-panel h1, .x1-admin-page .x1-dna-panel h2, .x1-admin-page .x1-dna-panel h3 { color: #f8fafc !important; letter-spacing: -.035em !important; } .x1-admin-page .form-control[readonly], .x1-admin-page input[readonly], .x1-admin-page textarea[readonly] { background: rgba(15, 23, 42, .72) !important; color: rgba(226, 232, 240, .88) !important; border-color: rgba(148, 163, 184, .20) !important; } .x1-admin-page .text-muted, .x1-admin-page .form-text, .x1-admin-page small { color: rgba(148, 163, 184, .86) !important; } .x1-admin-page .table, .x1-admin-page table.dataTable { border-collapse: separate !important; border-spacing: 0 !important; background: rgba(2, 6, 23, .24) !important; } .x1-admin-page .table thead th, .x1-admin-page table.dataTable thead th { background: rgba(15, 23, 42, .82) !important; color: rgba(203, 213, 225, .92) !important; } .x1-admin-page .table tbody td, .x1-admin-page table.dataTable tbody td { background: rgba(15, 23, 42, .42) !important; } .x1-admin-page .table-striped tbody tr:nth-of-type(odd) td { background: rgba(30, 41, 59, .42) !important; } .x1-admin-page .modal-content { border: 1px solid rgba(148, 163, 184, .18) !important; border-radius: 18px !important; background: rgba(8, 13, 26, .96) !important; color: var(--x1-text, #f8fafc) !important; } .x1-admin-page .modal-header, .x1-admin-page .modal-footer { border-color: rgba(148, 163, 184, .14) !important; } .x1-tmdb-last-error { margin-bottom: 16px !important; } .x1-force-cache-btn, .x1-page-tmdb-api .btn-warning, .x1-page-sports .btn-warning { background: linear-gradient(135deg, rgba(245,158,11,.98), rgba(217,119,6,.92)) !important; border-color: rgba(251,191,36,.45) !important; color: #111827 !important; box-shadow: 0 12px 28px rgba(245, 158, 11, .18) !important; } .x1-page-sports .x1-sports-alert, .x1-page-tmdb-api .alert { border-radius: 16px !important; } /* ───────────────────────────────────────────────────────────── X1 Legacy Model Unification · v1.0.13 One visual language for remaining old PHP pages without touching APK contracts or endpoint logic. ───────────────────────────────────────────────────────────── */ .x1-universal-hero { position: relative; display: grid; grid-template-columns: 56px minmax(0,1fr) auto; align-items: center; gap: 16px; margin: 0 0 20px 0; padding: 18px 20px; border: 1px solid rgba(46,124,255,.26); border-radius: 24px; background: radial-gradient(circle at 8% 10%, rgba(110,224,255,.20), transparent 32%), linear-gradient(135deg, rgba(46,124,255,.14), rgba(11,18,36,.84) 50%, rgba(52,227,167,.045)); box-shadow: 0 22px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06); overflow: hidden; } .x1-universal-hero::after { content: "X1"; position: absolute; right: 28px; bottom: -32px; font-size: 108px; line-height: 1; font-weight: 900; letter-spacing: -.08em; color: rgba(255,255,255,.025); pointer-events: none; } .x1-universal-hero__icon { width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--x1-cyan); background: linear-gradient(135deg, rgba(46,124,255,.20), rgba(110,224,255,.08)); border: 1px solid rgba(110,224,255,.26); box-shadow: 0 0 28px rgba(46,124,255,.24); } .x1-universal-hero__icon i { font-size: 22px; } .x1-universal-hero__copy { min-width: 0; position: relative; z-index: 1; } .x1-universal-hero__copy span { display: inline-flex; margin-bottom: 3px; font-family: var(--x1-font-mono); font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--x1-cyan); } .x1-universal-hero__copy h1 { margin: 0; color: #fff; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; font-weight: 900; letter-spacing: -.045em; } .x1-universal-hero__copy p { margin: 7px 0 0; max-width: 720px; color: var(--x1-text-2); font-size: 13px; line-height: 1.45; } .x1-universal-hero__badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 999px; border: 1px solid rgba(52,227,167,.28); background: rgba(52,227,167,.08); color: #d1fae5; font-family: var(--x1-font-mono); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } /* Same page frame for every older PHP screen */ .x1-page-announcement .container-fluid, .x1-page-appads .container-fluid, .x1-page-intro .container-fluid, .x1-page-language .container-fluid, .x1-page-logo .container-fluid, .x1-page-maintenance .container-fluid, .x1-page-message .container-fluid, .x1-page-parental-reset .container-fluid, .x1-page-player .container-fluid, .x1-page-update .container-fluid, .x1-page-user-update .container-fluid, .x1-page-vpn .container-fluid { overflow: visible !important; } .x1-page-announcement .container-fluid > .col-md-8.mx-auto, .x1-page-appads .container-fluid > .col-md-8.mx-auto, .x1-page-intro .container-fluid > .col-md-8.mx-auto, .x1-page-language .container-fluid > .col-md-8.mx-auto, .x1-page-logo .container-fluid > .col-md-8.mx-auto, .x1-page-maintenance .container-fluid > .col-md-8.mx-auto, .x1-page-parental-reset .container-fluid > .col-md-8.mx-auto, .x1-page-update .container-fluid > .col-md-8.mx-auto, .x1-page-user-update .container-fluid > .col-md-8.mx-auto { max-width: 1040px !important; } .x1-page-message .container-fluid > .col-md-12.mx-auto, .x1-page-player .container-fluid > .card, .x1-page-player .container-fluid > .row, .x1-page-vpn .container-fluid > .container-fluid, .x1-page-maintenance .container-fluid > .container-fluid, .x1-page-parental-reset .container-fluid > .container-fluid { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .container-fluid .container-fluid.x1-legacy-page { padding: 0 !important; margin: 0 !important; } .x1-card-shell, .x1-page-player .row, .x1-page-vpn .x1-legacy-page, .x1-page-message .col-md-12.mx-auto { min-width: 0 !important; } .x1-card-shell { width: 100%; margin-bottom: 18px !important; } .x1-legacy-card, .x1-page-player .container-fluid > .card, .x1-page-vpn .card, .x1-page-message .card, .x1-page-announcement .card, .x1-page-appads .card, .x1-page-intro .card, .x1-page-language .card, .x1-page-logo .card, .x1-page-maintenance .card, .x1-page-parental-reset .card, .x1-page-update .card, .x1-page-user-update .card { border: 1px solid rgba(255,255,255,.09) !important; border-radius: 22px !important; background: radial-gradient(circle at 0 0, rgba(46,124,255,.10), transparent 35%), rgba(11,18,36,.72) !important; box-shadow: 0 20px 60px rgba(0,0,0,.34) !important; overflow: hidden !important; backdrop-filter: blur(16px); } .x1-legacy-card > .card-header, .x1-page-player .card > .card-header, .x1-page-vpn .card > .card-header, .x1-page-message .card > .card-header, .x1-page-announcement .card > .card-header, .x1-page-appads .card > .card-header, .x1-page-intro .card > .card-header, .x1-page-language .card > .card-header, .x1-page-logo .card > .card-header, .x1-page-maintenance .card > .card-header, .x1-page-parental-reset .card > .card-header, .x1-page-update .card > .card-header, .x1-page-user-update .card > .card-header { min-height: 64px; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; padding: 17px 20px !important; border-bottom: 1px solid rgba(255,255,255,.085) !important; background: linear-gradient(90deg, rgba(46,124,255,.16), rgba(110,224,255,.035)), rgba(255,255,255,.025) !important; } .x1-legacy-card > .card-header center, .x1-page-player .card > .card-header center, .x1-page-vpn .card > .card-header center, .x1-page-message .card > .card-header center, .x1-page-announcement .card > .card-header center, .x1-page-appads .card > .card-header center, .x1-page-intro .card > .card-header center, .x1-page-language .card > .card-header center, .x1-page-logo .card > .card-header center, .x1-page-maintenance .card > .card-header center, .x1-page-parental-reset .card > .card-header center, .x1-page-update .card > .card-header center, .x1-page-user-update .card > .card-header center { text-align: left !important; width: auto !important; } .x1-legacy-card > .card-header h1, .x1-legacy-card > .card-header h2, .x1-legacy-card > .card-header h3, .x1-page-player .card-header h2, .x1-page-player .card-header h3, .x1-page-vpn .card-header h2, .x1-page-vpn .card-header h3, .x1-page-message .card-header h2, .x1-page-message .card-header h3, .x1-page-announcement .card-header h2, .x1-page-appads .card-header h2, .x1-page-intro .card-header h2, .x1-page-language .card-header h2, .x1-page-logo .card-header h2, .x1-page-maintenance .card-header h2, .x1-page-parental-reset .card-header h2, .x1-page-update .card-header h2, .x1-page-user-update .card-header h2 { display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; color: #fff !important; font-size: clamp(17px, 1.45vw, 22px) !important; font-weight: 900 !important; letter-spacing: -.035em !important; line-height: 1.15 !important; } .x1-legacy-card > .card-header h1 i, .x1-legacy-card > .card-header h2 i, .x1-legacy-card > .card-header h3 i, .x1-page-player .card-header h2 i, .x1-page-player .card-header h3 i, .x1-page-vpn .card-header h2 i, .x1-page-vpn .card-header h3 i, .x1-page-message .card-header h2 i, .x1-page-announcement .card-header h2 i, .x1-page-appads .card-header h2 i, .x1-page-intro .card-header h2 i, .x1-page-language .card-header h2 i, .x1-page-logo .card-header h2 i, .x1-page-maintenance .card-header h2 i, .x1-page-parental-reset .card-header h2 i, .x1-page-update .card-header h2 i, .x1-page-user-update .card-header h2 i { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--x1-cyan) !important; background: rgba(46,124,255,.14); border: 1px solid rgba(110,224,255,.22); font-size: 15px !important; flex: 0 0 auto; } .x1-legacy-card .card-body, .x1-page-player .card-body, .x1-page-vpn .card-body, .x1-page-message .card-body, .x1-page-announcement .card-body, .x1-page-appads .card-body, .x1-page-intro .card-body, .x1-page-language .card-body, .x1-page-logo .card-body, .x1-page-maintenance .card-body, .x1-page-parental-reset .card-body, .x1-page-update .card-body, .x1-page-user-update .card-body { padding: 20px !important; } .x1-page-player .container-fluid > .card > .row, .x1-page-player .container-fluid > .card .row, .x1-page-vpn .row, .x1-page-message .row { margin-left: 0 !important; margin-right: 0 !important; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)) !important; gap: 18px !important; } .x1-page-player .container-fluid > .card > .row > .x1-card-shell, .x1-page-player .container-fluid > .card .row > .x1-card-shell { padding: 0 !important; width: 100% !important; max-width: 100% !important; } /* Make old field labels and helper sections look like product UI */ .x1-legacy-card h3, .x1-page-player h3, .x1-page-vpn h3, .x1-page-message h3, .x1-page-announcement h3, .x1-page-appads h3, .x1-page-language h3, .x1-page-update h3 { color: #fff !important; font-size: 16px !important; font-weight: 850 !important; letter-spacing: -.025em !important; } .x1-legacy-card .col-12 > h3, .x1-page-message .col-12 > h3, .x1-page-announcement .col-12 > h3, .x1-page-language .col-12 > h3 { padding: 12px 14px !important; margin: 0 0 16px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 15px !important; background: rgba(255,255,255,.035) !important; } .x1-legacy-card hr, .x1-page-player hr, .x1-page-vpn hr, .x1-page-message hr, .x1-page-announcement hr, .x1-page-appads hr, .x1-page-language hr, .x1-page-update hr { border-color: rgba(255,255,255,.08) !important; margin: 18px 0 !important; } .x1-legacy-card .alert, .x1-page-player .alert, .x1-page-vpn .alert, .x1-page-message .alert, .x1-page-appads .alert { margin: 0 !important; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; } .x1-page-player .container-fluid > .card > .alert, .x1-page-appads .card > .alert { border-top: 0 !important; } /* Forms become clean commercial settings blocks */ .x1-legacy-card form, .x1-page-player form, .x1-page-vpn form, .x1-page-message form, .x1-page-announcement form, .x1-page-appads form, .x1-page-intro form, .x1-page-language form, .x1-page-logo form, .x1-page-maintenance form, .x1-page-parental-reset form, .x1-page-update form, .x1-page-user-update form { width: 100% !important; } .x1-legacy-card .form-group, .x1-page-player .form-group, .x1-page-vpn .form-group, .x1-page-message .form-group, .x1-page-announcement .form-group, .x1-page-appads .form-group, .x1-page-intro .form-group, .x1-page-language .form-group, .x1-page-logo .form-group, .x1-page-maintenance .form-group, .x1-page-parental-reset .form-group, .x1-page-update .form-group, .x1-page-user-update .form-group { padding: 13px !important; margin-bottom: 12px !important; border: 1px solid rgba(255,255,255,.075); border-radius: 15px; background: rgba(255,255,255,.025); } .x1-legacy-card .form-group label, .x1-page-player .form-group label, .x1-page-vpn .form-group label, .x1-page-message .form-group label, .x1-page-announcement .form-group label, .x1-page-appads .form-group label, .x1-page-intro .form-group label, .x1-page-language .form-group label, .x1-page-logo .form-group label, .x1-page-maintenance .form-group label, .x1-page-parental-reset .form-group label, .x1-page-update .form-group label, .x1-page-user-update .form-group label { display: block !important; margin-bottom: 8px !important; color: var(--x1-text-2) !important; font-family: var(--x1-font-mono) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .x1-legacy-card .form-group label strong, .x1-page-player .form-group label strong, .x1-page-vpn .form-group label strong { font: inherit !important; color: inherit !important; } .x1-legacy-card .x1-form-actions, .x1-page-player .form-group:has(button[type="submit"]), .x1-page-vpn .form-group:has(button[type="submit"]), .x1-page-message .form-group:has(button[type="submit"]), .x1-page-announcement .x1-form-actions, .x1-page-appads .x1-form-actions, .x1-page-intro .x1-form-actions, .x1-page-language .x1-form-actions, .x1-page-logo .x1-form-actions, .x1-page-maintenance .x1-form-actions, .x1-page-parental-reset .x1-form-actions, .x1-page-update .x1-form-actions, .x1-page-user-update .x1-form-actions { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 10px !important; background: rgba(46,124,255,.06) !important; border-color: rgba(46,124,255,.18) !important; } .x1-legacy-card .x1-form-actions center, .x1-page-player .form-group:has(button[type="submit"]) center, .x1-page-message .form-group:has(button[type="submit"]) center, .x1-page-announcement .x1-form-actions center, .x1-page-appads .x1-form-actions center, .x1-page-language .x1-form-actions center, .x1-page-update .x1-form-actions center { width: auto !important; text-align: right !important; } /* Commercial tables instead of raw Bootstrap rows */ .x1-page-message .table-responsive, .x1-page-vpn .table-responsive, .x1-page-language .table-responsive, .x1-page-appads .table-responsive { border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: rgba(255,255,255,.025); padding: 8px; } .x1-page-message .table, .x1-page-vpn .table { margin: 0 !important; } .x1-page-message .table thead th, .x1-page-vpn .table thead th { color: var(--x1-text-3) !important; } /* Keep destructive actions available but visually premium */ .btn-danger, .x1-legacy-card .btn-danger, .x1-page-message .btn-danger, .x1-page-vpn .btn-danger { background: rgba(255,59,76,.12) !important; border: 1px solid rgba(255,59,76,.32) !important; color: #fecaca !important; box-shadow: none !important; } .btn-info, .x1-legacy-card .btn-info, .x1-page-player .btn-info, .x1-page-vpn .btn-info, .x1-page-message .btn-info, .x1-page-announcement .btn-info, .x1-page-appads .btn-info, .x1-page-intro .btn-info, .x1-page-language .btn-info, .x1-page-logo .btn-info, .x1-page-maintenance .btn-info, .x1-page-parental-reset .btn-info, .x1-page-update .btn-info, .x1-page-user-update .btn-info { background: linear-gradient(135deg, var(--x1-blue), var(--x1-blue-deep)) !important; border: 1px solid rgba(110,224,255,.18) !important; color: #fff !important; } @media (max-width: 900px) { .x1-universal-hero { grid-template-columns: 48px minmax(0,1fr); } .x1-universal-hero__badge { grid-column: 1 / -1; justify-self: start; } } @media (max-width: 575.98px) { .x1-universal-hero { padding: 15px; border-radius: 19px; grid-template-columns: 1fr; } .x1-universal-hero__icon { width: 48px; height: 48px; } .x1-universal-hero__copy h1 { font-size: 25px !important; } .x1-legacy-card .card-body, .x1-page-player .card-body, .x1-page-vpn .card-body, .x1-page-message .card-body { padding: 14px !important; } .x1-legacy-card .form-group, .x1-page-player .form-group, .x1-page-vpn .form-group, .x1-page-message .form-group { padding: 11px !important; } } /* ───────────────────────────────────────────────────────────── X1 Button Alignment Lock · v1.0.15 Keeps the top bar, hero buttons and legacy Bootstrap actions on one commercial visual grammar: same height, centered icons/text, no oversized logout block and no floating button wells. ───────────────────────────────────────────────────────────── */ .x1-admin-page .btn, .x1-admin-page button.btn, .x1-admin-page a.btn, .x1-admin-page input[type="submit"].btn, .x1-admin-page input[type="button"].btn, .x1-admin-page .x1-soft-button, .x1-admin-page .x1-neon-button, .x1-admin-page .x1-table-action, .x1-admin-page .x1-filter-pill, .x1-admin-page .x1-action-chip { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; min-height: 40px !important; line-height: 1 !important; vertical-align: middle !important; white-space: nowrap !important; text-align: center !important; } .x1-admin-page .btn i, .x1-admin-page .x1-soft-button i, .x1-admin-page .x1-neon-button i, .x1-admin-page .x1-nav-logout i, .x1-admin-page .x1-pill i { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1em !important; min-width: 1em !important; line-height: 1 !important; margin: 0 !important; } .navbar { display: flex !important; align-items: center !important; gap: 14px !important; min-height: 66px !important; padding: 10px 12px !important; } .x1-nav-left { flex: 1 1 auto !important; min-width: 220px !important; overflow: hidden !important; } .x1-nav-copy { min-width: 0 !important; overflow: hidden !important; } .x1-nav-copy strong, .x1-nav-copy small { max-width: min(660px, 48vw) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .x1-nav-actions { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; flex-wrap: nowrap !important; margin-left: auto !important; min-width: max-content !important; } .x1-nav-actions .x1-pill { height: 34px !important; min-height: 34px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; border-radius: 999px !important; } .x1-nav-logout { height: 38px !important; min-height: 38px !important; padding: 0 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 999px !important; border: 1px solid rgba(255, 59, 76, .34) !important; background: rgba(255, 59, 76, .10) !important; color: #fecaca !important; font-family: var(--x1-font-mono, ui-monospace, monospace) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; line-height: 1 !important; text-decoration: none !important; box-shadow: none !important; white-space: nowrap !important; } .x1-nav-logout:hover, .x1-nav-logout:focus { color: #fff !important; background: rgba(255, 59, 76, .18) !important; border-color: rgba(255, 59, 76, .52) !important; text-decoration: none !important; transform: translateY(-1px); } /* Disable the old Bootstrap .btn-danger navbar rule for the new logout chip. */ .navbar .x1-nav-logout.btn-danger, .navbar a.x1-nav-logout { width: auto !important; max-width: max-content !important; } .x1-hero-actions, .x1-actions, .x1-apk-actions, .x1-backup-actions, .x1-update-actions, .x1-logs-hero-actions, .x1-table-actions, .x1-form-actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap !important; } .x1-hero-actions .btn, .x1-actions .btn, .x1-apk-actions .btn, .x1-backup-actions .btn, .x1-update-actions .btn, .x1-logs-hero-actions .btn { height: 46px !important; min-height: 46px !important; padding: 0 18px !important; border-radius: 14px !important; } .card-body form .btn, form .form-group:has(> button[type="submit"]) > .btn, form .form-group:has(> .btn) > .btn, form .form-group:has(> a.btn) > .btn { height: 42px !important; min-height: 42px !important; padding: 0 16px !important; } .table td > a.btn, .table td > button.btn, table.dataTable td > a.btn, table.dataTable td > button.btn { height: 34px !important; min-height: 34px !important; padding: 0 11px !important; border-radius: 10px !important; font-size: 12px !important; } .btn-group { display: inline-flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; } .btn-group > .btn { margin: 0 !important; border-radius: 12px !important; } .input-group > .btn, .input-group > button.btn { height: auto !important; min-height: 42px !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* The security warning is part of the layout, not a raw Bootstrap strip. */ .container-fluid > .alert { display: flex !important; align-items: center !important; gap: 8px !important; min-height: 46px !important; padding: 12px 16px !important; border-radius: 14px !important; line-height: 1.25 !important; } .container-fluid > .alert a { display: inline-flex !important; align-items: center !important; } @media (max-width: 1199.98px) { .x1-nav-actions .x1-pill:first-child { display: none !important; } .x1-nav-copy small { max-width: 38vw !important; } } @media (max-width: 991.98px) { .navbar { align-items: center !important; flex-wrap: nowrap !important; } .x1-nav-copy small { display: none !important; } .x1-nav-copy strong { max-width: 44vw !important; } .x1-nav-actions .x1-pill { display: none !important; } .x1-nav-logout { width: 40px !important; min-width: 40px !important; padding: 0 !important; } .x1-nav-logout span { display: none !important; } } @media (max-width: 575.98px) { .navbar { margin: 10px 10px 0 !important; min-height: 56px !important; padding: 8px !important; } .x1-nav-left { min-width: 0 !important; } .x1-nav-copy { display: none !important; } .x1-hero-actions .btn, .x1-actions .btn, .x1-apk-actions .btn, .x1-backup-actions .btn, .x1-update-actions .btn, .x1-logs-hero-actions .btn, .x1-form-actions .btn { width: 100% !important; justify-content: center !important; } } /* ───────────────────────────────────────────────────────────── X1 Layout Safety Pass · v1.0.59 Final responsive lock for cards, rows, toolbars and table areas. Keeps Bootstrap-era pages contained inside the content column and prevents card bodies, filter bars and action buttons from overflowing. ───────────────────────────────────────────────────────────── */ .x1-admin-page #page-content-wrapper, .x1-admin-page .container-fluid, .x1-admin-page .card, .x1-admin-page .card-body, .x1-admin-page .card-header, .x1-admin-page .card-footer, .x1-admin-page .row, .x1-admin-page [class^="col-"], .x1-admin-page [class*=" col-"], .x1-admin-page form, .x1-admin-page fieldset, .x1-admin-page .form-group, .x1-admin-page .input-group, .x1-admin-page .table-responsive, .x1-admin-page .dataTables_wrapper { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } .x1-admin-page .card { width: 100% !important; overflow: visible !important; } .x1-admin-page .card-body { overflow-wrap: anywhere !important; word-break: normal !important; } .x1-admin-page .card-header, .x1-admin-page .card-footer { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } .x1-admin-page .card-header > *, .x1-admin-page .card-footer > * { min-width: 0 !important; } .x1-admin-page .card-header h1, .x1-admin-page .card-header h2, .x1-admin-page .card-header h3, .x1-admin-page .card-header h4, .x1-admin-page .card-header h5, .x1-admin-page .x1-page-title h1, .x1-admin-page .x1-universal-hero h1, .x1-admin-page .x1-command-hero h1 { max-width: 100% !important; overflow-wrap: anywhere !important; } .x1-admin-page .table-responsive { width: 100% !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch !important; } .x1-admin-page .table-responsive > .table, .x1-admin-page .table-responsive > table, .x1-admin-page .dataTables_wrapper table { width: max-content !important; min-width: 100% !important; max-width: none !important; } .x1-admin-page .table td, .x1-admin-page .table th, .x1-admin-page table.dataTable td, .x1-admin-page table.dataTable th { vertical-align: middle !important; } .x1-admin-page .table td .btn, .x1-admin-page .table td form, .x1-admin-page .table td .x1-table-actions { white-space: nowrap !important; } .x1-admin-page .x1-table-actions, .x1-admin-page .x1-actions, .x1-admin-page .x1-hero-actions, .x1-admin-page .x1-backup-actions, .x1-admin-page .x1-update-actions, .x1-admin-page .x1-apk-actions, .x1-admin-page .x1-logs-hero-actions, .x1-admin-page .x1-form-actions, .x1-admin-page .btn-toolbar, .x1-admin-page .btn-group { max-width: 100% !important; flex-wrap: wrap !important; } .x1-admin-page .input-group { flex-wrap: nowrap !important; } .x1-admin-page .input-group > .form-control, .x1-admin-page .input-group > input, .x1-admin-page .input-group > select, .x1-admin-page .input-group > textarea { min-width: 0 !important; flex: 1 1 auto !important; } .x1-admin-page .x1-copy-row, .x1-admin-page .x1-import-grid { min-width: 0 !important; max-width: 100% !important; } .x1-admin-page code, .x1-admin-page pre, .x1-admin-page .x1-mac-code { max-width: 100% !important; overflow-x: auto !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; } /* MAC Manager: the previous two-column threshold was based on viewport, not on the content width after the sidebar. Collapse earlier so the Registered MACs card and its filter toolbar cannot break out. */ .x1-page-mac-login .x1-mac-shell { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.35fr) !important; gap: 18px !important; align-items: start !important; width: 100% !important; max-width: 100% !important; } .x1-page-mac-login .x1-mac-panel, .x1-page-mac-login .x1-mac-panel .card, .x1-page-mac-login .x1-mac-panel .card-body { min-width: 0 !important; max-width: 100% !important; } .x1-page-mac-login .x1-toolbar { display: grid !important; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(170px, 1fr) auto !important; align-items: end !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; padding: 12px !important; border: 1px solid rgba(148,163,184,.14) !important; border-radius: 16px !important; background: rgba(2,6,23,.22) !important; } .x1-page-mac-login .x1-toolbar .form-group, .x1-page-mac-login .x1-toolbar .x1-filter-actions { min-width: 0 !important; width: auto !important; margin: 0 !important; } .x1-page-mac-login .x1-toolbar .x1-filter-actions { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; gap: 8px !important; white-space: normal !important; } .x1-page-mac-login .x1-toolbar .x1-filter-actions .btn { flex: 0 0 auto !important; } .x1-page-mac-login .x1-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important; } .x1-page-mac-login .x1-copy-row, .x1-page-mac-login .x1-import-grid { grid-template-columns: minmax(0, 1fr) auto !important; } @media (max-width: 1500px) { .x1-page-mac-login .x1-mac-shell { grid-template-columns: 1fr !important; } } @media (max-width: 1199.98px) { .x1-page-mac-login .x1-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .x1-page-mac-login .x1-toolbar .x1-filter-actions { grid-column: 1 / -1 !important; justify-content: flex-start !important; } } @media (max-width: 767.98px) { body.x1-admin-page::after { content: "V60"; right: 8px; bottom: 8px; min-height: 20px; padding: 4px 7px; font-size: 8px; } .x1-admin-page .container-fluid { width: 100% !important; } .x1-admin-page .card-header, .x1-admin-page .card-footer { align-items: stretch !important; } .x1-admin-page .card-header > *, .x1-admin-page .card-footer > * { width: 100% !important; } .x1-admin-page .input-group { flex-wrap: wrap !important; } .x1-admin-page .input-group > .btn, .x1-admin-page .input-group > button.btn, .x1-admin-page .input-group > a.btn { width: 100% !important; border-radius: 12px !important; } .x1-page-mac-login .x1-toolbar, .x1-page-mac-login .x1-copy-row, .x1-page-mac-login .x1-import-grid { grid-template-columns: 1fr !important; } .x1-page-mac-login .x1-toolbar .x1-filter-actions, .x1-page-mac-login .x1-toolbar .x1-filter-actions .btn { width: 100% !important; } .x1-page-mac-login .x1-toolbar .x1-filter-actions .btn { justify-content: center !important; } .x1-page-mac-login .x1-copy-row .btn, .x1-page-mac-login .x1-import-grid .btn { width: 100% !important; } } /* ───────────────────────────────────────────────────────────── X1 Table/List Pass · v1.0.60 Safe DataTables styling and long-list containment. ───────────────────────────────────────────────────────────── */ .x1-managed-table { width: 100% !important; min-width: 760px; } .x1-datatables-wrapper { width: 100%; max-width: 100%; overflow: hidden; color: var(--x1-text, #f4f7ff); } .x1-datatables-wrapper .dataTables_length, .x1-datatables-wrapper .dataTables_filter, .x1-datatables-wrapper .dataTables_info, .x1-datatables-wrapper .dataTables_paginate { color: var(--x1-text-2, rgba(244,247,255,.74)) !important; font-size: 12px; } .x1-datatables-wrapper .dataTables_length, .x1-datatables-wrapper .dataTables_filter { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; } .x1-datatables-wrapper .dataTables_filter { justify-content: flex-end; } .x1-datatables-wrapper .dataTables_length label, .x1-datatables-wrapper .dataTables_filter label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--x1-text-2, rgba(244,247,255,.74)) !important; font-weight: 700; } .x1-datatables-wrapper .dataTables_length select, .x1-datatables-wrapper .dataTables_filter input { min-height: 36px; border: 1px solid var(--x1-border-mid, rgba(255,255,255,.14)) !important; border-radius: 10px; background: rgba(2, 6, 23, .48) !important; color: var(--x1-text, #f4f7ff) !important; outline: none !important; } .x1-datatables-wrapper .dataTables_filter input { min-width: min(280px, 100%); padding: 7px 10px; } .x1-datatables-wrapper .dataTables_scroll { width: 100%; max-width: 100%; overflow: hidden; } .x1-datatables-wrapper .dataTables_scrollBody { border: 1px solid var(--x1-border, rgba(255,255,255,.08)) !important; border-radius: 14px; background: rgba(2, 6, 23, .14); } .x1-datatables-wrapper table.dataTable { border-collapse: separate !important; border-spacing: 0 !important; margin: 0 !important; } .x1-datatables-wrapper table.dataTable thead th, .x1-datatables-wrapper table.dataTable thead td { border-bottom: 1px solid var(--x1-border-mid, rgba(255,255,255,.14)) !important; } .x1-datatables-wrapper table.dataTable.no-footer { border-bottom: 0 !important; } .x1-datatables-wrapper .dataTables_paginate { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 10px; } .x1-datatables-wrapper .dataTables_paginate .paginate_button { border: 1px solid var(--x1-border-mid, rgba(255,255,255,.14)) !important; border-radius: 10px !important; background: rgba(2, 6, 23, .42) !important; color: var(--x1-text-2, rgba(244,247,255,.74)) !important; padding: 5px 10px !important; margin: 0 !important; } .x1-datatables-wrapper .dataTables_paginate .paginate_button.current, .x1-datatables-wrapper .dataTables_paginate .paginate_button:hover { border-color: rgba(110,224,255,.45) !important; background: rgba(46,124,255,.18) !important; color: #fff !important; } .x1-datatables-wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; cursor: not-allowed !important; } .x1-datatables-wrapper .dataTables_info { margin-top: 10px; } .x1-datatables-wrapper td, .x1-datatables-wrapper th { vertical-align: middle !important; } .x1-datatables-wrapper .btn, .x1-datatables-wrapper button { white-space: nowrap; } .x1-datatables-wrapper code, .x1-datatables-wrapper pre, .x1-client-list code, .x1-client-row code, .x1-country-row code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; } .x1-client-list, .x1-country-list { max-width: 100%; min-width: 0; } .x1-client-row, .x1-country-row { min-width: 0; max-width: 100%; } .x1-client-main, .x1-client-cell, .x1-client-actions-cell, .x1-country-row > div { min-width: 0; } .x1-client-main strong, .x1-client-main small, .x1-client-cell strong, .x1-client-cell small, .x1-geo-primary, .x1-geo-secondary, .x1-operator-pill { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .x1-client-actions-cell { display: flex; justify-content: flex-end; } @media (max-width: 991.98px) { .x1-managed-table { min-width: 680px; } .x1-datatables-wrapper .dataTables_length, .x1-datatables-wrapper .dataTables_filter, .x1-datatables-wrapper .dataTables_info, .x1-datatables-wrapper .dataTables_paginate { justify-content: flex-start; width: 100%; float: none !important; text-align: left !important; } .x1-datatables-wrapper .dataTables_filter input { width: 100%; } } @media (max-width: 575.98px) { .x1-managed-table { min-width: 620px; } .x1-datatables-wrapper .dataTables_length label, .x1-datatables-wrapper .dataTables_filter label { width: 100%; } .x1-datatables-wrapper .dataTables_length select, .x1-datatables-wrapper .dataTables_filter input { width: 100%; } } /* ─── V61 navigation/link/button safety pass ───────────────── */ .x1-skip-link { position: fixed; left: 12px; top: 12px; transform: translateY(-140%); z-index: 9999; padding: 10px 14px; border-radius: var(--x1-radius-sm); background: var(--x1-blue); color: #fff !important; font-weight: 700; text-decoration: none !important; box-shadow: var(--x1-shadow-glow); } .x1-skip-link:focus { transform: translateY(0); outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; } #page-content-wrapper[tabindex="-1"]:focus { outline: none; } #menu-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } #sidebar-wrapper .x1-sidebar-link { display: flex !important; align-items: center; gap: 10px; min-height: 42px; width: 100%; overflow: hidden; text-decoration: none !important; } #sidebar-wrapper .x1-sidebar-link .fa { width: 20px; min-width: 20px; text-align: center; } #sidebar-wrapper .x1-sidebar-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sidebar-wrapper .x1-sidebar-link[aria-current="page"] { box-shadow: inset 3px 0 0 var(--x1-cyan); } .x1-community-link, .x1-nav-logout, .x1-sidebar-profile a, a.btn, button.btn, input[type="submit"].btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .x1-nav-actions { flex-wrap: wrap; gap: 8px; } .x1-nav-left { min-width: 0; } .x1-nav-copy { min-width: 0; } .x1-nav-copy strong, .x1-nav-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .x1-fix-marker[data-x1-fix="V61"] { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 0 12px; padding: 7px 10px; border: 1px solid rgba(110,224,255,.24); border-radius: 999px; color: rgba(244,247,255,.72); background: rgba(46,124,255,.10); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .x1-fix-marker[data-x1-fix="V61"]::before { content: "✓"; color: var(--x1-green); } @media (max-width: 767.98px) { #sidebar-wrapper { position: fixed; inset: 0 auto 0 0; z-index: 1040; transform: translateX(-100%); transition: transform .22s ease; } #wrapper.toggled #sidebar-wrapper { transform: translateX(0); } #page-content-wrapper { width: 100%; min-width: 0; } .navbar { gap: 10px; } .x1-nav-actions { justify-content: flex-end; } } @media (max-width: 575.98px) { .x1-nav-logout span { display: none; } .x1-nav-actions .x1-pill { display: none !important; } } /* X1 V63 media upload previews */ .x1-media-preview-img, .x1-media-preview-video { display: block; margin: 0 auto; border-radius: 12px; max-width: 100%; } .x1-upload-card input[type="file"] { max-width: 100%; }