/* ============================================================ Arix Theme – all colors driven by CSS variables Variables are injected via /css/theme-dynamic.css (DB-backed) ============================================================ */ /* ── iOS / Safari polish ─────────────────────────────────────── `-webkit-touch-callout` only exists as a real CSS property in WebKit-on-iOS (Safari, and every other iOS browser — they're all WebKit under the hood by Apple's rules), so this feature query is a reliable way to target iPhone/iPad specifically without touching desktop Safari or any other browser. */ @supports (-webkit-touch-callout: none) { /* iOS auto-zooms the whole page when a focused input's font-size is under 16px — every "sm"/compact form control in this app is well under that. Force 16px minimum only on iOS; desktop keeps its normal, more compact sizing. */ input, select, textarea { font-size: max(16px, 1em) !important; } /* Fixed-position overlays (modals, the sidebar) fight with iOS's address bar hide/show animation when sized with plain vh — prefer the dynamic viewport unit where the browser supports it. */ .full-vh-ios { height: 100vh; height: 100dvh; } } /* Removes the gray tap-highlight rectangle iOS draws on any tappable element — harmless everywhere else, but this app supplies its own hover/active states so the native one only ever looks like a glitch. */ * { -webkit-tap-highlight-color: transparent; } /* Momentum scrolling for anything explicitly scrollable — without this, iOS Safari scrolls these containers in janky, non-inertial steps. */ .table-responsive { -webkit-overflow-scrolling: touch; } /* ── Scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ax-accent) 65%, #000); border-radius: 9px; } ::-webkit-scrollbar-thumb:hover{ background: var(--ax-accent); } ::-webkit-scrollbar-track { background: var(--ax-bg); border-radius: 10px; } /* Firefox has no ::-webkit-scrollbar support — without this it falls back to the bulky native OS scrollbar (visible arrow buttons etc.), which looked out of place everywhere it showed up, most noticeably in the collapsed sidebar's own scroll region. */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ax-accent) 65%, #000) var(--ax-bg); } /* Sidebar nav list: with many plugins enabled it can genuinely overflow and need its own scroll. Browsers disagree too much on how (or whether) to combine `scrollbar-color` with `::-webkit-scrollbar-*` — depending on engine/version this either renders a plain native thumb or ignores the custom styling outright. Instead of fighting that, the real scrollbar is hidden entirely and replaced with a small JS-driven overlay (markup/logic in main.blade.php, right after `.sidebar`) that always renders exactly this: a slim, rounded, glowing accent-colored pill, draggable, identical in every browser. */ .sidebar { scrollbar-width: none !important; -ms-overflow-style: none !important; } .sidebar::-webkit-scrollbar { display: none !important; width: 0 !important; } .ax-sidebar-scrollbar-track { position: absolute; right: 5px; width: 4px; z-index: 10; pointer-events: none; } .ax-sidebar-scrollbar-track.is-empty { display: none; } .ax-sidebar-scrollbar-thumb { position: absolute; left: 0; right: 0; min-height: 30px; border-radius: 4px; background: var(--ax-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--ax-accent) 50%, transparent); cursor: pointer; pointer-events: auto; transition: background .15s ease; } .ax-sidebar-scrollbar-thumb:hover, .ax-sidebar-scrollbar-thumb.is-dragging { background: var(--ax-accent2); } /* ── Body / wrapper ────────────────────────────────────────── */ body.dark-mode, body { background-color: var(--ax-bg) !important; color: var(--ax-text) !important; } .wrapper { background-color: var(--ax-bg) !important; } /* ── Top navbar ────────────────────────────────────────────── */ .main-header.navbar, .dark-mode .main-header.navbar { background: var(--ax-surface) !important; border-bottom: 1px solid color-mix(in srgb, var(--ax-border) 25%, transparent) !important; box-shadow: 0 2px 20px rgba(0,0,0,.4) !important; height: var(--ax-header-h, 58px) !important; min-height: var(--ax-header-h, 58px) !important; display: flex !important; align-items: center !important; } .main-header .nav-link, .main-header .navbar-nav .nav-link { color: var(--ax-text) !important; } .main-header .nav-link:hover { color: var(--ax-accent) !important; } /* Hamburger icon-only link: tighter horizontal padding to balance visual gaps */ .main-header [data-widget="pushmenu"].nav-link { padding-left: .5rem !important; padding-right: .5rem !important; } /* ── Sidebar ───────────────────────────────────────────────── */ .main-sidebar, .dark-mode .main-sidebar { background: var(--ax-surface) !important; border-right: 1px solid color-mix(in srgb, var(--ax-border) 25%, transparent) !important; box-shadow: 4px 0 24px rgba(0,0,0,.5) !important; } /* AdminLTE only ships `.sidebar-mini.sidebar-collapse .main-sidebar { overflow-x: hidden }` — scoped to the collapsed state only. In the normal expanded state nothing sets overflow-x, so with overflow-y already forced to hidden the CSS spec promotes the unset axis to "auto", producing a phantom horizontal scrollbar under the nav list. */ .main-sidebar { overflow-x: hidden !important; } .brand-link, .dark-mode .brand-link, .layout-fixed .brand-link { background: var(--ax-surface2) !important; border-bottom: 1px solid color-mix(in srgb, var(--ax-border) 25%, transparent) !important; height: var(--ax-header-h, 58px) !important; min-height: var(--ax-header-h, 58px) !important; display: flex !important; align-items: center !important; padding: 0 16px !important; width: 100% !important; } .brand-link .brand-image { margin-top: 0 !important; margin-bottom: 0 !important; max-height: 34px !important; width: 34px !important; height: 34px !important; object-fit: contain !important; } .brand-text { color: var(--ax-text) !important; font-weight: 700 !important; } /* Sidebar nav links */ .sidebar .nav-sidebar > .nav-item > .nav-link, .dark-mode .sidebar .nav-sidebar > .nav-item > .nav-link { color: var(--ax-muted) !important; border-radius: 8px !important; margin: 2px 8px !important; padding: 9px 12px !important; transition: all .2s ease !important; } .sidebar .nav-sidebar > .nav-item > .nav-link:hover, .dark-mode .sidebar .nav-sidebar > .nav-item > .nav-link:hover { background: color-mix(in srgb, var(--ax-accent) 12%, transparent) !important; color: var(--ax-text) !important; } .sidebar .nav-sidebar > .nav-item > .nav-link.active, .dark-mode .sidebar .nav-sidebar > .nav-item > .nav-link.active { background: linear-gradient(135deg, var(--ax-accent), var(--ax-accent2)) !important; color: #fff !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--ax-accent) 45%, transparent) !important; } .nav-header { color: var(--ax-muted) !important; font-size: .7rem !important; letter-spacing: .1em !important; text-transform: uppercase !important; padding: 10px 20px 4px !important; } /* Mobile sidebar logout — lives as the LAST item inside the scrolling nav list itself (not pinned outside it), styled with `position: sticky`. That gives both cases their correct behavior for free, with no JS and no fixed-height guesswork: - Short nav list (regular users): sticky never "activates" since there's nothing to scroll past, so it just sits in normal flow right after the last real item — no dead gap floating above it. - Long nav list (admins): once you scroll down far enough that this item's natural position would go off the bottom of the visible scroll area, it sticks there instead — reachable without hunting all the way to the very end, without needing a separate fixed-height overlay. */ @media (max-width: 991.98px) { .ax-sidebar-logout-bar { position: sticky; bottom: 0; background: var(--ax-surface2); border-top: 1px solid color-mix(in srgb, var(--ax-border) 20%, transparent); padding: 8px; margin-top: 8px; z-index: 20; } .ax-sidebar-logout-item { list-style: none; } } .ax-sidebar-logout-form { margin: 0; } .ax-sidebar-logout-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 44px; color: #e17055 !important; background: color-mix(in srgb, #e17055 8%, transparent) !important; border: 1px solid color-mix(in srgb, #e17055 20%, transparent) !important; border-radius: 8px !important; font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s ease !important; } .ax-sidebar-logout-btn:hover, .ax-sidebar-logout-btn:active { background: color-mix(in srgb, #e17055 18%, transparent) !important; color: #e17055 !important; } /* ── Content area ──────────────────────────────────────────── */ .content-wrapper, .dark-mode .content-wrapper { background: var(--ax-bg) !important; } /* ── Cards ─────────────────────────────────────────────────── */ .card, .dark-mode .card { background: var(--ax-surface) !important; border: 1px solid color-mix(in srgb, var(--ax-border) 20%, transparent) !important; border-radius: 12px !important; box-shadow: 0 4px 24px rgba(0,0,0,.3) !important; } .card-header, .dark-mode .card-header { background: var(--ax-surface2) !important; border-bottom: 1px solid color-mix(in srgb, var(--ax-border) 20%, transparent) !important; color: var(--ax-text) !important; border-radius: 12px 12px 0 0 !important; } .card-body { color: var(--ax-text) !important; } .card-footer { background: var(--ax-surface2) !important; border-top: 1px solid color-mix(in srgb, var(--ax-border) 20%, transparent) !important; border-radius: 0 0 12px 12px !important; } .card-outline.card-primary { border-top: 3px solid var(--ax-accent) !important; } .small-box, .dark-mode .small-box { background: var(--ax-surface) !important; border: 1px solid color-mix(in srgb, var(--ax-border) 20%, transparent) !important; border-radius: 12px !important; box-shadow: 0 4px 24px rgba(0,0,0,.3) !important; } .small-box h3, .small-box p { color: var(--ax-text) !important; } /* ── Buttons ───────────────────────────────────────────────── */ .btn-primary { background: linear-gradient(135deg, var(--ax-accent), var(--ax-accent2)) !important; border: none !important; box-shadow: 0 4px 14px color-mix(in srgb, var(--ax-accent) 40%, transparent) !important; border-radius: 8px !important; font-weight: 600 !important; transition: all .2s ease !important; } .btn-primary:hover, .btn-primary:focus { filter: brightness(1.12) !important; box-shadow: 0 6px 20px color-mix(in srgb, var(--ax-accent) 60%, transparent) !important; transform: translateY(-1px); } /* ── Form controls ─────────────────────────────────────────── */ .form-control, .dark-mode .form-control { background: var(--ax-bg) !important; border: 1px solid color-mix(in srgb, var(--ax-border) 25%, transparent) !important; border-radius: 8px !important; color: var(--ax-text) !important; transition: border-color .2s ease, box-shadow .2s ease !important; } .form-control:focus, .dark-mode .form-control:focus { background: var(--ax-bg) !important; border-color: var(--ax-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-accent) 20%, transparent) !important; color: var(--ax-text) !important; } .form-control::placeholder { color: var(--ax-muted) !important; } .input-group-text, .dark-mode .input-group-text { background: var(--ax-surface2) !important; border: 1px solid color-mix(in srgb, var(--ax-border) 25%, transparent) !important; color: var(--ax-muted) !important; border-radius: 8px !important; } /* ── Tables ────────────────────────────────────────────────── */ .table, .dark-mode .table { color: var(--ax-text) !important; } .table thead th, .dark-mode .table thead th { border-bottom: 2px solid color-mix(in srgb, var(--ax-border) 25%, transparent) !important; color: var(--ax-muted) !important; font-size: .75rem !important; text-transform: uppercase !important; letter-spacing: .06em !important; } .table td, .table th, .dark-mode .table td, .dark-mode .table th { border-top: 1px solid color-mix(in srgb, var(--ax-border) 15%, transparent) !important; } /* ── Dropdowns ─────────────────────────────────────────────── */ .dropdown-menu, .dark-mode .dropdown-menu { background: var(--ax-surface2) !important; border: 1px solid color-mix(in srgb, var(--ax-border) 25%, transparent) !important; border-radius: 10px !important; box-shadow: 0 8px 30px rgba(0,0,0,.5) !important; } .dropdown-item, .dark-mode .dropdown-item { color: var(--ax-text) !important; border-radius: 6px !important; margin: 2px 4px !important; } .dropdown-item:hover, .dark-mode .dropdown-item:hover { background: color-mix(in srgb, var(--ax-accent) 15%, transparent) !important; color: var(--ax-text) !important; } .dropdown-divider { border-top: 1px solid color-mix(in srgb, var(--ax-border) 20%, transparent) !important; } /* ── Footer ────────────────────────────────────────────────── */ .main-footer, .dark-mode .main-footer { background: var(--ax-surface) !important; border-top: 1px solid color-mix(in srgb, var(--ax-border) 20%, transparent) !important; color: var(--ax-muted) !important; } /* ── Alerts ────────────────────────────────────────────────── */ .alert { border-radius: 10px !important; border: none !important; } .alert-danger { background: rgba(227,52,47,.15) !important; color: #ff6b6b !important; border: 1px solid rgba(227,52,47,.3) !important; } .alert-warning { background: rgba(246,153,63,.15) !important; color: #ffa94d !important; border: 1px solid rgba(246,153,63,.3) !important; } .alert-success { background: rgba(56,193,114,.15) !important; color: #51cf66 !important; border: 1px solid rgba(56,193,114,.3) !important; } .alert-info { background: color-mix(in srgb, var(--ax-accent) 12%, transparent) !important; color: color-mix(in srgb, var(--ax-accent) 80%, #fff) !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 30%, transparent) !important; } /* ── Select2 ───────────────────────────────────────────────── */ .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple { background: var(--ax-bg) !important; border: 1px solid color-mix(in srgb, var(--ax-border) 25%, transparent) !important; border-radius: 8px !important; color: var(--ax-text) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ax-text) !important; } .select2-dropdown { background: var(--ax-surface2) !important; border: 1px solid color-mix(in srgb, var(--ax-border) 25%, transparent) !important; } .select2-container--default .select2-results__option { color: var(--ax-text) !important; } .select2-container--default .select2-results__option--highlighted { background: var(--ax-accent) !important; } /* ── List groups ───────────────────────────────────────────── */ .list-group-item, .dark-mode .list-group-item { background: transparent !important; border-color: color-mix(in srgb, var(--ax-border) 15%, transparent) !important; color: var(--ax-text) !important; } /* ── Breadcrumb ────────────────────────────────────────────── */ .content-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--ax-text); } .breadcrumb { background: transparent !important; } .breadcrumb-item, .breadcrumb-item a, .breadcrumb-item.active { color: var(--ax-muted) !important; } .breadcrumb-item + .breadcrumb-item::before { color: var(--ax-muted) !important; } /* ── Content area & header padding: comfortable breathing room from sidebar ── */ .content-header { padding: 16px 1.25rem 8px 1.25rem !important; } .content { padding: 0 1.25rem 1.5rem 1.25rem !important; } /* ── Misc ──────────────────────────────────────────────────── */ .callout { border-radius: 10px !important; } .callout-danger { background: rgba(227,52,47,.1) !important; border-left-color: #e3342f !important; } .text-muted { color: var(--ax-muted) !important; } hr { border-color: color-mix(in srgb, var(--ax-border) 15%, transparent) !important; } small.text-danger { color: #ff6b6b !important; font-size: .8rem !important; } /* ── iCheck ────────────────────────────────────────────────── */ .icheck-primary label { color: var(--ax-muted) !important; font-size: .83rem !important; } /* nav-link alignment */ .nav-link > span, .nav-link { display: flex; align-items: center; } /* ============================================================= LOGIN / REGISTER PAGES ============================================================= */ body.login-page, body.register-page { background-color: var(--ax-bg) !important; background-image: radial-gradient(ellipse 80% 60% at 15% 80%, color-mix(in srgb, var(--ax-accent) 30%, var(--ax-bg)) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 85% 20%, color-mix(in srgb, var(--ax-accent2) 25%, var(--ax-bg)) 0%, transparent 55%) !important; min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; } body.login-page::before, body.register-page::before { content: ''; position: fixed; top: -20%; left: -15%; width: 55vw; height: 55vw; background: radial-gradient(circle, color-mix(in srgb, var(--ax-accent2) 20%, transparent) 0%, transparent 65%); border-radius: 50%; pointer-events: none; animation: axFloatOrb 12s ease-in-out infinite alternate; } body.login-page::after, body.register-page::after { content: ''; position: fixed; bottom: -20%; right: -15%; width: 50vw; height: 50vw; background: radial-gradient(circle, color-mix(in srgb, var(--ax-accent) 15%, transparent) 0%, transparent 65%); border-radius: 50%; pointer-events: none; animation: axFloatOrb 14s ease-in-out infinite alternate-reverse; } @keyframes axFloatOrb { from { transform: translate(0,0) scale(1); } to { transform: translate(3%,5%) scale(1.08); } } .login-box, .register-box { width: 420px !important; max-width: 95vw !important; margin: 0 auto !important; position: relative; z-index: 10; } .login-box .card, .register-box .card, .dark-mode .login-box .card, .dark-mode .register-box .card { background: color-mix(in srgb, var(--ax-surface) 92%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 28%, transparent) !important; border-radius: 18px !important; box-shadow: 0 24px 64px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) !important; overflow: hidden !important; } .login-box .card-header, .register-box .card-header, .dark-mode .login-box .card-header, .dark-mode .register-box .card-header { background: color-mix(in srgb, var(--ax-surface2) 88%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--ax-accent) 22%, transparent) !important; padding: 24px 28px 18px !important; border-radius: 18px 18px 0 0 !important; } .login-box .card-header a, .register-box .card-header a { color: var(--ax-text) !important; text-decoration: none !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -.02em !important; } .login-box .card-header a:hover, .register-box .card-header a:hover { color: var(--ax-accent) !important; } .login-box .card-body, .register-box .card-body { padding: 22px 28px 28px !important; } .login-box-msg { color: var(--ax-muted) !important; font-size: .875rem !important; margin-bottom: 20px !important; text-align: center !important; } .login-box a, .register-box a { color: var(--ax-accent) !important; text-decoration: none !important; font-size: .85rem !important; } .login-box a:hover, .register-box a:hover { filter: brightness(1.2); text-decoration: underline !important; } .login-box .form-control, .register-box .form-control, .dark-mode .login-box .form-control, .dark-mode .register-box .form-control { background: color-mix(in srgb, var(--ax-bg) 85%, transparent) !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 32%, transparent) !important; border-right: none !important; border-radius: 10px 0 0 10px !important; color: var(--ax-text) !important; height: 44px !important; font-size: .9rem !important; } .login-box .form-control:focus, .register-box .form-control:focus { border-color: var(--ax-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ax-accent) 20%, transparent) !important; } .login-box .input-group-text, .register-box .input-group-text, .dark-mode .login-box .input-group-text, .dark-mode .register-box .input-group-text { background: color-mix(in srgb, var(--ax-surface2) 90%, transparent) !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 32%, transparent) !important; border-left: none !important; border-radius: 0 10px 10px 0 !important; color: var(--ax-accent) !important; height: 44px !important; cursor: pointer; } .login-box .btn-primary, .register-box .btn-primary { background: linear-gradient(135deg, var(--ax-accent), var(--ax-accent2)) !important; border: none !important; border-radius: 10px !important; height: 44px !important; font-weight: 600 !important; font-size: .95rem !important; letter-spacing: .02em !important; box-shadow: 0 6px 20px color-mix(in srgb, var(--ax-accent) 50%, transparent) !important; transition: all .2s ease !important; width: 100% !important; display: block !important; } .login-box .btn-primary:hover, .register-box .btn-primary:hover { filter: brightness(1.12) !important; box-shadow: 0 8px 26px color-mix(in srgb, var(--ax-accent) 70%, transparent) !important; transform: translateY(-2px); } /* ============================================================= DASHBOARD – Stat Cards ============================================================= */ .ax-stat-card { display: flex !important; align-items: center !important; gap: 18px; background: var(--ax-surface) !important; border: 1px solid color-mix(in srgb, var(--ax-border) 22%, transparent); border-radius: 14px; padding: 20px 22px; box-shadow: 0 4px 24px rgba(0,0,0,.3); transition: transform .2s ease, box-shadow .2s ease; text-decoration: none !important; color: var(--ax-text) !important; } .ax-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.45); } .ax-stat-icon { width: 56px !important; height: 56px !important; min-width: 56px; border-radius: 14px; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0; font-size: 1.4rem; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35); } .ax-stat-body { flex: 1; min-width: 0; } .ax-stat-label { display: block; font-size: .78rem; color: var(--ax-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } .ax-stat-value { display: block; font-size: 1.65rem; font-weight: 700; color: var(--ax-text); line-height: 1.1; } .ax-stat-limit { font-size: .9rem; font-weight: 400; color: var(--ax-muted); } /* ============================================================= DASHBOARD – Useful Links rows ============================================================= */ .ax-link-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid color-mix(in srgb, var(--ax-border) 12%, transparent); text-decoration: none !important; color: var(--ax-text) !important; transition: background .15s ease; } .ax-link-row:last-child { border-bottom: none; } .ax-link-row:hover { background: color-mix(in srgb, var(--ax-accent) 8%, transparent); } .ax-link-icon { width: 34px; height: 34px; border-radius: 9px; background: color-mix(in srgb, var(--ax-accent) 15%, transparent); display: flex; align-items: center; justify-content: center; color: var(--ax-accent); flex-shrink: 0; font-size: .95rem; } .ax-link-info { flex: 1; min-width: 0; } .ax-link-title { display: block; font-weight: 600; font-size: .9rem; color: var(--ax-text); } .ax-link-desc { display: block; font-size: .78rem; color: var(--ax-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ax-link-arrow { color: var(--ax-muted); font-size: .75rem; } /* ============================================================= DASHBOARD – Activity Log rows ============================================================= */ .ax-log-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid color-mix(in srgb, var(--ax-border) 10%, transparent); } .ax-log-row:last-child { border-bottom: none; } .ax-log-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .8rem; } .ax-log-green { background: rgba(56,193,114,.15); color: #51cf66; } .ax-log-red { background: rgba(227,52,47,.15); color: #ff6b6b; } .ax-log-blue { background: rgba(9,132,227,.15); color: #74b9ff; } .ax-log-muted { background: color-mix(in srgb, var(--ax-muted) 12%, transparent); color: var(--ax-muted); } .ax-log-body { flex: 1; min-width: 0; } .ax-log-title { font-size: .88rem; color: var(--ax-text); font-weight: 500; } .ax-log-details { margin: 4px 0 0 0; padding-left: 14px; font-size: .78rem; color: var(--ax-muted); } .ax-log-time { font-size: .75rem; color: var(--ax-muted); white-space: nowrap; flex-shrink: 0; padding-top: 3px; } /* ============================================================= DASHBOARD – Badge blocks (referral) ============================================================= */ .ax-badge-block { display: flex; align-items: center; padding: 10px 14px; border-radius: 10px; font-size: .85rem; font-weight: 500; margin-bottom: 8px; } .ax-badge-purple { background: color-mix(in srgb, var(--ax-accent) 15%, transparent); color: var(--ax-accent); border: 1px solid color-mix(in srgb, var(--ax-accent) 28%, transparent); } .ax-badge-blue { background: rgba(9,132,227,.15); color: #74b9ff; border: 1px solid rgba(9,132,227,.28); } .ax-badge-orange { background: rgba(246,153,63,.15); color: #ffa94d; border: 1px solid rgba(246,153,63,.28); } /* ============================================================= RESPONSIVE – Mobile optimizations ============================================================= */ /* ── Stat cards: 2-col on xs, 4-col on md+ ── */ @media (max-width: 575.98px) { .ax-stat-card { padding: 14px 12px; border-radius: 12px; } .ax-stat-icon { width: 36px; height: 36px; font-size: .9rem; border-radius: 10px; margin-right: 10px; } .ax-stat-value { font-size: 1.3rem; } } /* ── Hero banner mobile stack ── */ @media (max-width: 767.98px) { .ax-hero { flex-direction: column; align-items: flex-start; padding: 20px 18px; gap: 14px; } .ax-hero-orb1, .ax-hero-orb2, .ax-hero-orb3 { display: none; } .ax-hero-left { gap: 12px; } .ax-hero-avatar-wrap { width: 52px; height: 52px; } .ax-hero-name { font-size: 1.2rem; } .ax-hero-quickstats { width: 100%; padding: 10px 14px; gap: 10px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .ax-hero-quickstats::-webkit-scrollbar { display: none; } .ax-hero-qs { flex-shrink: 0; } .ax-hero-actions { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; } .ax-hero-actions::-webkit-scrollbar { display: none; } .ax-action-btn { padding: 8px 14px; font-size: .8rem; white-space: nowrap; flex-shrink: 0; } } /* ── Server rows: hide product on xs ── */ @media (max-width: 480px) { .ax-server-product { display: none; } .ax-server-row { padding: 9px 12px; } } /* ── Useful links: full-width on xs ── */ @media (max-width: 575.98px) { .ax-link-tile { padding: 9px 10px; gap: 8px; } .ax-link-tile-desc { display: none; } } /* ── Referral mini stats: wrap ── */ @media (max-width: 480px) { .ax-mini-stat { padding: 8px 6px; } .ax-mini-stat-val { font-size: .95rem; } .ax-mini-stat-label { font-size: .62rem; } } /* ── Cards: full padding reduction on mobile ── */ @media (max-width: 575.98px) { .content > .container-fluid, .content-header > .container-fluid { padding-left: 10px !important; padding-right: 10px !important; } .container-fluid.px-4 { padding-left: 10px !important; padding-right: 10px !important; } .px-4 { padding-left: 10px !important; padding-right: 10px !important; } .pt-4 { padding-top: 12px !important; } .card { border-radius: 12px; } .card-header { padding: 12px 14px !important; font-size: .86rem; } .card-body { padding: 12px !important; } } /* ── Activity log: shorten time text on xs ── */ @media (max-width: 480px) { .ax-log-row { padding: 8px 12px; gap: 8px; } .ax-log-time { font-size: .68rem; } .ax-log-title { font-size: .78rem; } } /* ── Admin sidebar: better mobile ── */ @media (max-width: 991.98px) { .main-sidebar { z-index: 1050; } .ax-stat-card { margin-bottom: 0; } } /* ── Navbar top bar on mobile ── */ @media (max-width: 575.98px) { .navbar-nav .nav-item .nav-link { padding: 6px 8px; } .main-header .navbar { padding: 4px 8px; } } /* ── DarkReader override: force our own colors ── */ html[data-darkreader-mode], html[data-darkreader-scheme] { background-color: var(--ax-bg) !important; color: var(--ax-text) !important; } /* ============================================================= SMOOTH ANIMATION SYSTEM — GPU-accelerated, compositor-only All animations use only transform + opacity → zero layout cost ============================================================= */ /* ── 1. Global hardware-acceleration base ── */ *, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── 2. Core keyframe library ── */ /* Fade + lift (for page entry) */ @keyframes axFadeUp { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } } /* Opacity-only variant — safe for elements that must not become a stacking context once the animation has finished (see .content-wrapper above). */ @keyframes axFadeIn { from { opacity: 0; } to { opacity: 1; } } /* Fade + shrink in (for dropdowns, modals) */ @keyframes axScaleIn { from { opacity: 0; transform: translate3d(0, -8px, 0) scale3d(0.96, 0.96, 1); } to { opacity: 1; transform: none; } } /* Slide from left (sidebar items) */ @keyframes axSlideInLeft { from { opacity: 0; transform: translate3d(-14px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Slide in from right (toasts) */ @keyframes axSlideInRight { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* Gentle float (icon accents) */ @keyframes axFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -5px, 0); } } /* Shimmer sweep (buttons, active nav) */ @keyframes axShimmer { 0% { background-position: -300% center; } 100% { background-position: 300% center; } } /* Pulse ring (status dots, accent glows) */ @keyframes axPulseRing { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ax-accent) 55%, transparent); transform: scale3d(1, 1, 1); } 50% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; transform: scale3d(1, 1, 1); } } /* Ripple click effect */ @keyframes axRipple { from { opacity: 0.55; transform: scale3d(0, 0, 1); } to { opacity: 0; transform: scale3d(4, 4, 1); } } /* Progress bar fill */ @keyframes axBarFill { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Skeleton loading shimmer */ @keyframes axSkeleton { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } } /* Soft glow pulse on active accent */ @keyframes axGlowPulse { 0%, 100% { box-shadow: 0 4px 14px color-mix(in srgb, var(--ax-accent) 40%, transparent); } 50% { box-shadow: 0 4px 28px color-mix(in srgb, var(--ax-accent) 70%, transparent); } } /* ── 3. Page-entry reveal — cards & sections ── */ .ax-reveal { animation: axFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; } /* JS adds this class when element enters viewport */ .ax-reveal-pending { opacity: 0; transform: translate3d(0, 22px, 0); } /* Stagger siblings automatically */ .ax-stagger > *:nth-child(1) { animation-delay: 0.00s; } .ax-stagger > *:nth-child(2) { animation-delay: 0.06s; } .ax-stagger > *:nth-child(3) { animation-delay: 0.12s; } .ax-stagger > *:nth-child(4) { animation-delay: 0.18s; } .ax-stagger > *:nth-child(5) { animation-delay: 0.24s; } .ax-stagger > *:nth-child(6) { animation-delay: 0.30s; } .ax-stagger > *:nth-child(7) { animation-delay: 0.36s; } .ax-stagger > *:nth-child(8) { animation-delay: 0.42s; } /* Cards — no entry animation (causes jitter on navigation) */ .card { animation: none; } /* DataTables wrapper — no fade (it redraws) */ .dataTables_wrapper .card { animation: none; } /* Stat card stagger */ .row.ax-stat-row > [class*="col-"]:nth-child(1) .ax-stat-card, .row.ax-stat-row > [class*="col-"]:nth-child(1) .ax-mini-stat-card { animation-delay: 0.04s; } .row.ax-stat-row > [class*="col-"]:nth-child(2) .ax-stat-card, .row.ax-stat-row > [class*="col-"]:nth-child(2) .ax-mini-stat-card { animation-delay: 0.10s; } .row.ax-stat-row > [class*="col-"]:nth-child(3) .ax-stat-card, .row.ax-stat-row > [class*="col-"]:nth-child(3) .ax-mini-stat-card { animation-delay: 0.16s; } .row.ax-stat-row > [class*="col-"]:nth-child(4) .ax-stat-card, .row.ax-stat-row > [class*="col-"]:nth-child(4) .ax-mini-stat-card { animation-delay: 0.22s; } /* ── 4. Sidebar nav — no slide animation (causes shake on navigation) ── */ .sidebar .nav-sidebar > .nav-item { animation: none; } /* Active nav item — shimmer + glow pulse. In the collapsed (icon-only) sidebar the same blur radius reads as a smeared blob around the small icon, so keep a crisp static highlight there instead of the pulse. */ .sidebar .nav-sidebar > .nav-item > .nav-link.active { animation: axGlowPulse 3s ease-in-out infinite !important; background-size: 200% auto !important; } .sidebar-collapse .sidebar .nav-sidebar > .nav-item > .nav-link.active { animation: none !important; box-shadow: 0 2px 8px color-mix(in srgb, var(--ax-accent) 35%, transparent) !important; } /* Sidebar nav hover — faster, snappier */ .sidebar .nav-sidebar > .nav-item > .nav-link, .dark-mode .sidebar .nav-sidebar > .nav-item > .nav-link { transition: background 0.18s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important; } .sidebar .nav-sidebar > .nav-item > .nav-link:hover, .dark-mode .sidebar .nav-sidebar > .nav-item > .nav-link:hover { transform: translate3d(3px, 0, 0) !important; } /* ── 5. Cards — smooth hover lift ── */ .card { transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease !important; } .card:hover { transform: translate3d(0, -3px, 0) !important; box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px color-mix(in srgb, var(--ax-accent) 15%, transparent) !important; } /* Don't lift table-wrapper cards on hover */ .dataTables_wrapper > .card:hover, .ax-no-lift:hover { transform: none !important; box-shadow: 0 4px 24px rgba(0,0,0,.3) !important; } /* ── 6. Stat cards — icon float + snappy hover ── */ .ax-stat-card, .ax-mini-stat-card { animation: axFadeUp 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important; } .ax-stat-card:hover { transform: translate3d(0, -5px, 0) !important; } .ax-mini-stat-card:hover { transform: translate3d(0, -4px, 0) !important; } /* Stat icons gently float */ .ax-stat-icon, .ax-mini-stat-icon { animation: axFloat 4s ease-in-out infinite; will-change: transform; } .ax-stat-card:nth-child(1) .ax-stat-icon { animation-delay: 0s; } .ax-stat-card:nth-child(2) .ax-stat-icon { animation-delay: 0.6s; } .ax-stat-card:nth-child(3) .ax-stat-icon { animation-delay: 1.2s; } .ax-stat-card:nth-child(4) .ax-stat-icon { animation-delay: 1.8s; } /* ── 7. Buttons — ripple + spring scale ── */ .btn { position: relative; overflow: hidden; transition: transform 0.18s cubic-bezier(0.34, 1.5, 0.64, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), filter 0.18s ease !important; } .btn:active { transform: scale3d(0.96, 0.96, 1) !important; } .btn-primary { transition: transform 0.18s cubic-bezier(0.34, 1.5, 0.64, 1), box-shadow 0.2s ease, filter 0.18s ease !important; } .btn-primary:hover, .btn-primary:focus { transform: translate3d(0, -2px, 0) scale3d(1.015, 1.015, 1) !important; } .btn-primary:active { transform: scale3d(0.97, 0.97, 1) translate3d(0, 1px, 0) !important; } /* Ripple element (injected by JS) */ .ax-ripple { position: absolute; border-radius: 50%; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; background: rgba(255, 255, 255, 0.28); pointer-events: none; animation: axRipple 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* ── 8. Dropdowns — smooth scale-in ── */ .dropdown-menu { transform-origin: top center; transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.3, 0.64, 1) !important; } .dropdown-menu.show { animation: axScaleIn 0.22s cubic-bezier(0.34, 1.3, 0.64, 1) both; } /* Dropdown items — stagger hover glow */ .dropdown-item { transition: background 0.14s ease, transform 0.14s cubic-bezier(0.34, 1.3, 0.64, 1), color 0.14s ease !important; } .dropdown-item:hover, .dark-mode .dropdown-item:hover { transform: translate3d(3px, 0, 0) !important; } /* ── 9. Form controls — smooth glow focus ── */ .form-control, .dark-mode .form-control { transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease !important; } /* ── 10. Navbar links — underline slide ── */ .main-header .nav-link { transition: color 0.18s ease !important; position: relative; } .main-header .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 2px; background: var(--ax-accent); border-radius: 2px; transition: left 0.22s cubic-bezier(0.34, 1.2, 0.64, 1), right 0.22s cubic-bezier(0.34, 1.2, 0.64, 1); } .main-header .nav-link:hover::after { left: 8px; right: 8px; } /* ── 11. Table row hover — accent left border sweep ── */ .table tbody tr { transition: background 0.15s ease !important; position: relative; } /* ── 12. Progress bars — animate fill on load ── */ .progress-bar { transform-origin: left center; animation: axBarFill 1s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.3s; } /* ── 13. Alerts — slide in from right ── */ .alert { animation: axSlideInRight 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ── 14. Toastr / SweetAlert smooth override ── */ /* Target .swal2-show only — never override .swal2-hide or Swal will freeze on close */ .swal2-popup.swal2-show { animation: axScaleIn 0.3s cubic-bezier(0.34, 1.3, 0.64, 1) both; } /* ── 15. Scrollbar — smooth momentum ── */ html { scroll-behavior: smooth; } /* ── 16. Status / online dot pulse ── */ .ax-online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #51cf66; animation: axPulseRing 2s ease-in-out infinite; } .ax-offline-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ax-muted); } /* ── 17. Sidebar brand — accent shimmer ── */ .brand-link { transition: background 0.2s ease !important; position: relative; overflow: hidden; } .brand-link::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--ax-accent) 12%, transparent) 50%, transparent 60%); background-size: 200% 100%; animation: axShimmer 5s linear infinite; pointer-events: none; } /* ── 18. Content wrapper — fade in on page load ── */ /* Opacity only, never transform: with animation-fill-mode "both" Chromium keeps the element promoted for the animated transform property even after the animation finished (computed transform stays an identity matrix). That makes .content-wrapper a permanent stacking context, which traps every Bootstrap modal inside it *below* the body-level .modal-backdrop (z-index 1040) — the backdrop then swallows every click inside any modal on the panel. */ .content-wrapper { animation: axFadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.05s; } /* Belt and braces: an open modal must never sit inside a stacking context. */ body.modal-open .content-wrapper { animation: none !important; transform: none !important; filter: none !important; } /* ── 19. Sidebar animation — disabled after first load ── */ /* JS setzt .ax-sidebar-ready via sessionStorage nach dem ersten Besuch */ .ax-sidebar-ready .sidebar .nav-sidebar > .nav-item { animation: none !important; opacity: 1 !important; transform: none !important; } /* ── 20. Reduce motion — respects OS preference ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================= GLASSMORPHISM — Extreme backdrop-blur system Compositor-only: backdrop-filter never triggers layout ============================================================= */ /* ── Ambient gradient orbs behind content ── */ .content-wrapper::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 55% 45% at 12% 22%, color-mix(in srgb, var(--ax-accent) 10%, transparent) 0%, transparent 100%), radial-gradient(ellipse 45% 38% at 88% 78%, color-mix(in srgb, var(--ax-accent2) 8%, transparent) 0%, transparent 100%), radial-gradient(ellipse 38% 32% at 72% 12%, color-mix(in srgb, var(--ax-accent) 6%, transparent) 0%, transparent 100%); } /* ── Navbar — extreme glass blur ── */ .main-header.navbar, .dark-mode .main-header.navbar { background: color-mix(in srgb, var(--ax-surface) 68%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid color-mix(in srgb, var(--ax-accent) 20%, transparent) !important; box-shadow: 0 2px 32px rgba(0,0,0,.4), inset 0 -1px 0 color-mix(in srgb, var(--ax-accent) 10%, transparent) !important; } /* ── Sidebar — strong glass blur ── */ .main-sidebar, .dark-mode .main-sidebar { background: color-mix(in srgb, var(--ax-surface) 70%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-right: 1px solid color-mix(in srgb, var(--ax-accent) 16%, transparent) !important; box-shadow: 4px 0 40px rgba(0,0,0,.5), inset -1px 0 0 color-mix(in srgb, var(--ax-accent) 8%, transparent) !important; } /* ── Brand link ── */ .brand-link, .dark-mode .brand-link { background: color-mix(in srgb, var(--ax-surface2) 68%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid color-mix(in srgb, var(--ax-accent) 18%, transparent) !important; } /* ── Cards — glass with inset shine ── */ .card, .dark-mode .card { background: color-mix(in srgb, var(--ax-surface) 78%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 14%, transparent) !important; box-shadow: 0 4px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important; } .card:hover { border-color: color-mix(in srgb, var(--ax-accent) 32%, transparent) !important; box-shadow: 0 16px 52px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--ax-accent) 22%, transparent), inset 0 1px 0 rgba(255,255,255,.08) !important; } .card-header, .dark-mode .card-header { background: color-mix(in srgb, var(--ax-surface2) 78%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid color-mix(in srgb, var(--ax-accent) 12%, transparent) !important; } .card-footer, .dark-mode .card-footer { background: color-mix(in srgb, var(--ax-surface2) 72%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Stat cards — glass ── */ .ax-stat-card, .ax-mini-stat-card { background: color-mix(in srgb, var(--ax-surface) 75%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 16%, transparent) !important; box-shadow: 0 4px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07) !important; } .ax-stat-card:hover, .ax-mini-stat-card:hover { border-color: color-mix(in srgb, var(--ax-accent) 42%, transparent) !important; box-shadow: 0 20px 56px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--ax-accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.10), 0 0 32px color-mix(in srgb, var(--ax-accent) 12%, transparent) !important; } /* ── Dropdowns — ultra-glass ── */ .dropdown-menu, .dark-mode .dropdown-menu { background: color-mix(in srgb, var(--ax-surface2) 70%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 24%, transparent) !important; box-shadow: 0 20px 56px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* ── Modals — cinematic glass ── */ .modal-content { background: color-mix(in srgb, var(--ax-surface) 78%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 24%, transparent) !important; box-shadow: 0 40px 100px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.04), inset 0 1px 0 rgba(255,255,255,.07) !important; border-radius: 20px !important; } .modal-backdrop.show { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 0.65 !important; background: rgba(0,0,0,.45) !important; } .modal-header, .dark-mode .modal-header { background: color-mix(in srgb, var(--ax-surface2) 72%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: 1px solid color-mix(in srgb, var(--ax-accent) 16%, transparent) !important; border-radius: 20px 20px 0 0 !important; } .modal-footer, .dark-mode .modal-footer { background: color-mix(in srgb, var(--ax-surface2) 68%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top: 1px solid color-mix(in srgb, var(--ax-accent) 12%, transparent) !important; border-radius: 0 0 20px 20px !important; } /* ── Footer — glass ── */ .main-footer, .dark-mode .main-footer { background: color-mix(in srgb, var(--ax-surface) 68%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-top: 1px solid color-mix(in srgb, var(--ax-accent) 14%, transparent) !important; } /* ── SweetAlert2 — glass ── */ .swal2-popup { background: color-mix(in srgb, var(--ax-surface) 82%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 26%, transparent) !important; box-shadow: 0 28px 72px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.07) !important; border-radius: 20px !important; } /* ── Select2 dropdown — glass ── */ .select2-dropdown { background: color-mix(in srgb, var(--ax-surface2) 75%, transparent) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid color-mix(in srgb, var(--ax-accent) 22%, transparent) !important; box-shadow: 0 16px 48px rgba(0,0,0,.6) !important; } /* ── Page transitions — disabled (caused shake/jitter on navigation) ── */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } /* ============================================================= MOBILE – Comprehensive responsive improvements ============================================================= */ /* ── Global touch targets & base ── */ @media (max-width: 767.98px) { /* Bigger tap targets for all buttons and inputs */ .btn { min-height: 40px; padding-top: .45rem; padding-bottom: .45rem; } .btn-sm { min-height: 34px; } .form-control { min-height: 42px; font-size: 16px; } /* 16px prevents iOS zoom */ select.form-control { font-size: 16px; } /* Content padding */ .content-wrapper { padding-bottom: 20px; } .content-header > .container-fluid { padding: 8px 12px 0; } .container-fluid { padding-left: 10px !important; padding-right: 10px !important; } /* Card improvements */ .card { border-radius: 12px !important; margin-bottom: 14px; } .card-header { padding: 12px 14px !important; font-size: .88rem; } .card-body { padding: 14px !important; } .card-footer { padding: 10px 14px !important; } /* Tables: horizontal scroll */ .table-responsive, .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } table.dataTable { min-width: 600px; } .table td, .table th { padding: .5rem .6rem; font-size: .82rem; white-space: nowrap; } /* Modals: full-width, better padding */ .modal-dialog { margin: 8px; max-width: calc(100vw - 16px); } .modal-dialog-centered { align-items: flex-end; } /* slide up from bottom */ .modal-content { border-radius: 16px 16px 0 0 !important; } .modal-dialog-centered .modal-content { border-radius: 16px !important; } .modal-body { padding: 16px !important; } .modal-header { padding: 14px 16px !important; } .modal-footer { padding: 12px 16px !important; flex-wrap: wrap; gap: 8px; } .modal-footer .btn { flex: 1; min-width: 120px; } /* Dropdown menus: full width */ .dropdown-menu { min-width: 180px; font-size: .875rem; } /* Hide breadcrumbs on mobile */ .breadcrumb { display: none; } /* Email verify banner: stack on xs */ #home-verify-banner { flex-direction: column; align-items: flex-start !important; gap: .4rem; } #home-verify-banner span:last-child { display: none; } /* Navbar: compact */ .main-header .navbar { padding: 4px 10px; } .navbar-nav .nav-item .nav-link { padding: 6px 8px; font-size: .87rem; } /* DataTables controls: stack */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; text-align: left; margin-bottom: 8px; } .dataTables_wrapper .dataTables_length select { width: auto; } .dataTables_wrapper .dataTables_filter input { width: 100%; max-width: 260px; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { float: none; text-align: left; margin-top: 8px; } .dataTables_paginate .paginate_button { padding: 6px 10px !important; } } /* ── Phones portrait (xs) ── */ @media (max-width: 575.98px) { /* Full-width buttons in key areas */ .checkout-pay-btn, #submit_form_button { width: 100%; font-size: .95rem; } /* Store product cards */ .ax-product-card { margin-bottom: 12px; } /* Profile: collapse two-col rows */ .profile-billing-row .col-md-6 { flex: 0 0 100%; max-width: 100%; } /* Stat grid: keep 2-col but tighter */ .ax-stat-card .ax-stat-icon { width: 32px; height: 32px; font-size: .8rem; } .ax-stat-card .ax-stat-value { font-size: 1.1rem; } .ax-stat-card .ax-stat-label { font-size: .68rem; } /* Hero: more compact */ .ax-hero { padding: 14px 12px; gap: 10px; } .ax-hero-avatar-wrap { width: 46px; height: 46px; } .ax-hero-name { font-size: 1.05rem; } .ax-hero-qs-val { font-size: 1rem; } .ax-hero-qs-icon { width: 30px; height: 30px; font-size: .75rem; } /* Section headers */ .ax-section-title { font-size: .95rem; } /* Useful links: 2-col */ .ax-link-tile { padding: 8px 10px; } /* Admin tables: hide less important columns */ .hide-xs { display: none !important; } /* Page titles */ h1.ax-page-title { font-size: 1.2rem; } /* Checkout: product info before payment on mobile */ .checkout-product-col { order: -1; margin-bottom: 12px; } /* Dropdowns full-width on mobile */ .dropdown-menu-right { right: 0; left: auto; } .dropdown.d-inline-block .dropdown-menu { position: fixed !important; left: 10px !important; right: 10px !important; width: auto !important; bottom: auto; } } /* ── Tablet (sm-md) ── */ @media (min-width: 576px) and (max-width: 991.98px) { .modal-dialog { max-width: 95vw; margin: 12px auto; } .modal-content { border-radius: 14px !important; } table.dataTable { min-width: 500px; } .container-fluid { padding-left: 16px !important; padding-right: 16px !important; } } /* ── Checkout page specific ── */ @media (max-width: 991.98px) { /* Stack payment + product summary correctly */ .checkout-product-col { margin-bottom: 16px; } #payment_form .row { flex-direction: column; } #payment_form .col-xl-4, #payment_form .col-xl-3 { max-width: 100%; flex: 0 0 100%; } } /* ── Admin pages: compact on tablet ── */ @media (max-width: 991.98px) { .ax-card { padding: 14px !important; } .ax-page-title { font-size: 1.15rem; } .ax-stat-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ── Sidebar toggle fix on mobile ── */ @media (max-width: 767.98px) { body.sidebar-open .content-wrapper, body.sidebar-open .main-footer { margin-left: 0 !important; } } /* ── Input groups: don't shrink on mobile ── */ @media (max-width: 575.98px) { .input-group { flex-wrap: nowrap; } .input-group-prepend .input-group-text { padding: .375rem .5rem; font-size: .85rem; } } /* ── Address autocomplete dropdown: full width on mobile ── */ @media (max-width: 575.98px) { #addr-dropdown, #av_dropdown { border-radius: 8px; } #addr-dropdown div, #av_dropdown div { padding: .6rem .8rem !important; } } /* ── Notification dropdown: full width on mobile ── */ @media (max-width: 575.98px) { .notifications-dropdown { width: 90vw; max-width: 340px; right: -30px !important; } } /* ── Footer: stack on mobile ── */ @media (max-width: 575.98px) { .main-footer { flex-direction: column; gap: 4px; text-align: center; font-size: .78rem; padding: 10px 12px; } } /* ── SweetAlert2 toast: better position on mobile ── */ @media (max-width: 575.98px) { .swal2-container.swal2-top-end { top: 60px !important; right: 8px !important; } .swal2-toast { font-size: .85rem !important; } } /* ── Global count/status badge (used on security, VPN, suspended-servers, etc.) ── */ .ax-count-badge { display:inline-flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--ax-accent) 15%,transparent); color:var(--ax-accent); font-size:.7rem;font-weight:800; padding:2px 10px;border-radius:50px; border:1px solid color-mix(in srgb,var(--ax-accent) 25%,transparent); line-height:1.4;white-space:nowrap; } /* ── DataTables control padding — prevent flush-left when card has p-0 ── */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { padding: 10px 16px 0; } .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { padding: 0 16px 10px; } /* ============================================================= iOS / iPadOS — layout containment -webkit-touch-callout is iOS-only, so this block never hits desktop ============================================================= */ @supports (-webkit-touch-callout: none) { /* Belt-and-suspenders: keep gradient from extending document on iOS */ .content-wrapper::before { position: absolute; } /* Prevent horizontal bleed */ html, body { overflow-x: hidden !important; max-width: 100% !important; } /* Contain layout-fixed on small phones only — on tablets/iPad let the window scroll naturally */ @media (max-width: 767.98px) { body.layout-fixed { height: -webkit-fill-available !important; overflow: hidden !important; } body.layout-fixed .wrapper { height: -webkit-fill-available; overflow-x: hidden; } body.layout-fixed .content-wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; } } @media (min-width: 768px) { body.layout-fixed, body.layout-fixed .wrapper { height: auto !important; min-height: 100% !important; overflow: visible !important; } body.layout-fixed .content-wrapper { overflow-y: visible !important; min-height: calc(100vh - 56px) !important; } } } /* ============================================================= PRINT – Hide non-essential on print ============================================================= */ @media print { .main-sidebar, .main-header, .ax-hero-actions, .content-header { display: none !important; } .card { border: 1px solid #ccc; box-shadow: none; } } /* ============================================================= ADMIN DATATABLES — shared chrome Every admin list (users, servers, …) renders through DataTables' Bootstrap-4 integration. Its markup puts .paginate_button on the
  • while Bootstrap paints .page-link inside it, so page-level rules that only targeted .paginate_button left the active page button Bootstrap-blue instead of the panel accent. ============================================================= */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { padding: 12px 20px; color: var(--ax-muted) !important; font-size: .82rem; } .dataTables_wrapper .dataTables_length label, .dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--ax-muted); } .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background: rgba(var(--ax-surface2-rgb), .8) !important; border: 1px solid rgba(var(--ax-border-rgb), .22) !important; border-radius: 8px !important; color: var(--ax-text) !important; padding: 6px 10px !important; min-height: 34px; font-size: .84rem; outline: none; } .dataTables_wrapper .dataTables_length select { min-width: 74px; } .dataTables_wrapper .dataTables_filter input { min-width: 220px; } .dataTables_wrapper .dataTables_length select:focus, .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--ax-accent) !important; box-shadow: 0 0 0 3px rgba(var(--ax-accent-rgb), .16) !important; } /* Pagination — style the , which is what Bootstrap actually colours */ .dataTables_wrapper .pagination { margin: 0; gap: 4px; } .dataTables_wrapper .page-item .page-link { background: rgba(var(--ax-surface2-rgb), .6) !important; border: 1px solid rgba(var(--ax-border-rgb), .16) !important; color: var(--ax-muted) !important; border-radius: 8px !important; padding: 6px 13px !important; font-size: .82rem; font-weight: 600; transition: background .14s, color .14s, border-color .14s; box-shadow: none !important; } .dataTables_wrapper .page-item .page-link:hover { background: rgba(var(--ax-accent-rgb), .14) !important; border-color: rgba(var(--ax-accent-rgb), .32) !important; color: var(--ax-text) !important; } .dataTables_wrapper .page-item.active .page-link { background: linear-gradient(135deg, var(--ax-accent), var(--ax-accent2)) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 3px 12px rgba(var(--ax-accent-rgb), .38) !important; } .dataTables_wrapper .page-item.disabled .page-link { background: transparent !important; border-color: rgba(var(--ax-border-rgb), .1) !important; color: rgba(var(--ax-muted-rgb), .45) !important; } /* Suspension-reason badge in the admin server list */ .ax-susp-badge { display: inline-flex !important; align-items: center; font-size: .72rem !important; font-weight: 700; padding: 4px 11px !important; border-radius: 20px !important; white-space: nowrap; line-height: 1.4; } /* ── Compact admin row actions ───────────────────────────────── Shared by the user and server lists so both look the same; used to live only inside the user list's own