/* =================================================== SMS Switch Pro � Custom styles (AdminLTE v4 layer) Bootstrap 5 + AdminLTE v4 handle the main layout. This file adds only what they do not provide.=================================================== */ /* ��� Section visibility toggle ��� */ .rxy-section { display: none; } .rxy-section.active { display: block; } /* ��� App bootstrap loading shell ��� */ /* While the SPA is bootstrapping, the chrome (sidebar + header) stays visible and we render only a small inline spinner inside the content area. Sections stay hidden so role-mismatched content can't flash before UI.bootstrap() resolves the correct landing route. The body attribute is removed at the end of UI.bootstrap(). */ body[data-app-bootstrapping] .rxy-section { display: none !important; } body[data-app-bootstrapping] #appLoadingShell { display: flex; } #appLoadingShell { display: none; align-items: center; justify-content: center; padding: 32px 16px; min-height: 160px; background: transparent; } /* ��� First-paint auth gate ��� */ /* The attribute is set synchronously in before body parses, so the very first paint already shows the right shell — no "login flash" on F5 when a valid session token exists. These rules use !important to defeat any later JS-managed `hidden` toggling that races with the first paint. The token attribute is refreshed by UI.setAuthView()/logout(). */ html[data-has-token="1"] #loginView { display: none !important; } html[data-has-token="0"] #appView, html[data-has-token="0"] #appLoadingShell { display: none !important; } /* ─── Premium shared login ──────────────────────────────────────────── Authentication behavior remains owned by app.js/ui-core.js. These theme-aware tokens and selectors are intentionally scoped to #loginView. */ :root { --login-canvas: #050a14; --login-canvas-deep: #030711; --login-panel: rgba(9, 18, 34, 0.82); --login-panel-strong: rgba(12, 24, 44, 0.94); --login-input: rgba(7, 16, 31, 0.82); --login-text: #f3f7fc; --login-muted: #8ea0b8; --login-border: rgba(137, 167, 204, 0.2); --login-accent: #27d5e8; --login-accent-2: #8068f7; --login-success: #47d98b; --login-danger: #fb7185; } html[data-ui-theme="theme-1"] { --login-canvas: var(--t1-canvas); --login-canvas-deep: var(--t1-canvas-accent); --login-panel: color-mix(in srgb, var(--t1-surface-solid) 84%, transparent); --login-panel-strong: var(--t1-surface-solid); --login-input: color-mix(in srgb, var(--t1-surface-panel) 88%, transparent); --login-text: var(--t1-text); --login-muted: var(--t1-text-muted); --login-border: var(--t1-border); --login-accent: var(--t1-primary); --login-accent-2: var(--t1-primary-strong); --login-success: var(--t1-success); --login-danger: var(--t1-danger); } html[data-ui-theme="theme-2"] { --login-canvas: var(--t2-app); --login-canvas-deep: var(--t2-sidebar); --login-panel: color-mix(in srgb, var(--t2-surface-1) 84%, transparent); --login-panel-strong: var(--t2-surface-1); --login-input: color-mix(in srgb, var(--t2-surface-2) 88%, transparent); --login-text: var(--t2-text); --login-muted: var(--t2-text-secondary); --login-border: var(--t2-border); --login-accent: var(--t2-cyan); --login-accent-2: var(--t2-info); --login-success: var(--t2-success); --login-danger: var(--t2-danger); } html[data-ui-theme="theme-3"] { --login-canvas: var(--t3-canvas-deep); --login-canvas-deep: var(--t3-canvas); --login-panel: color-mix(in srgb, var(--t3-surface-1) 86%, transparent); --login-panel-strong: var(--t3-window); --login-input: var(--t3-input); --login-text: var(--t3-text); --login-muted: var(--t3-muted); --login-border: var(--t3-border); --login-accent: var(--t3-violet); --login-accent-2: var(--t3-copper); --login-success: var(--t3-green); --login-danger: var(--t3-red); } html[data-ui-theme="4"] { --login-canvas: var(--noxe-bg-app); --login-canvas-deep: var(--noxe-bg-sidebar); --login-panel: color-mix(in srgb, var(--noxe-bg-surface-1) 84%, transparent); --login-panel-strong: var(--noxe-bg-surface-1); --login-input: var(--noxe-bg-surface-2); --login-text: var(--noxe-text-primary); --login-muted: var(--noxe-text-secondary); --login-border: var(--noxe-border-default); --login-accent: var(--noxe-accent); --login-accent-2: var(--noxe-finance); --login-success: var(--noxe-success); --login-danger: var(--noxe-danger); } .rxy-login-shell { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; overflow-x: hidden; padding: clamp(28px, 5vh, 64px) 24px; color: var(--login-text); background-color: var(--login-canvas); background-image: radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--login-accent) 13%, transparent), transparent 31%), radial-gradient(circle at 85% 78%, color-mix(in srgb, var(--login-accent-2) 12%, transparent), transparent 34%), linear-gradient(135deg, var(--login-canvas), var(--login-canvas-deep)); } .rxy-login-shell::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: 0.16; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--login-accent) 20%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--login-accent-2) 16%, transparent) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse at center, black 4%, transparent 72%); } .rxy-login-layout { width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 2.5vh, 22px); margin: auto; } .rxy-login-identity { min-height: 88px; display: grid; place-items: center; border: 0; background: transparent; } #loginView #loginLogoImg.rxy-login-logo { display: block; width: 280px; max-width: 100%; height: auto; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.22)); } #loginView .rxy-login-identity .rxy-brand-icon { width: 88px; height: 88px; margin: 0; color: var(--login-text); background: color-mix(in srgb, var(--login-panel-strong) 72%, transparent) !important; border: 1px solid color-mix(in srgb, var(--login-accent) 42%, transparent); border-radius: 22px; box-shadow: 0 0 28px color-mix(in srgb, var(--login-accent) 17%, transparent); } html[data-ui-theme] #loginView .rxy-login-card { position: relative; width: 100%; margin: 0; padding: clamp(22px, 3.5vw, 28px); color: var(--login-text); background: var(--login-panel) !important; border: 1px solid color-mix(in srgb, var(--login-accent) 48%, var(--login-border)) !important; border-radius: 24px !important; box-shadow: -20px 0 48px -38px color-mix(in srgb, var(--login-accent) 76%, transparent), 20px 0 48px -38px color-mix(in srgb, var(--login-accent-2) 76%, transparent), 0 28px 72px rgba(0, 0, 0, 0.42) !important; backdrop-filter: blur(24px) saturate(120%); -webkit-backdrop-filter: blur(24px) saturate(120%); } html[data-ui-theme] #loginView .rxy-login-card::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: inset 1px 0 color-mix(in srgb, var(--login-accent) 64%, transparent), inset -1px 0 color-mix(in srgb, var(--login-accent-2) 58%, transparent), inset 0 1px rgba(255, 255, 255, 0.13); } .rxy-login-heading { margin-bottom: 18px; } .rxy-login-heading h1 { margin: 0; color: var(--login-text); font-size: clamp(1.65rem, 5vw, 2rem); font-weight: 600; letter-spacing: -0.035em; } .rxy-login-subtitle { margin: 5px 0 0; color: color-mix(in srgb, var(--login-text) 76%, var(--login-muted)); font-size: 0.88rem; } .rxy-login-field { margin: 0 0 13px; } .rxy-login-field .form-label, .rxy-verification-field > legend { float: none; width: auto; margin: 0 0 6px; padding: 0; color: color-mix(in srgb, var(--login-text) 88%, var(--login-muted)); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.015em; } .rxy-login-input-wrap { position: relative; display: flex; align-items: center; } .rxy-login-input-wrap > i { position: absolute; left: 15px; z-index: 1; color: var(--login-muted); font-size: 0.92rem; pointer-events: none; } #loginView .rxy-login-input-wrap .form-control { min-height: 44px; padding: 0.58rem 2.75rem; color: var(--login-text); background: var(--login-input) !important; border: 1px solid var(--login-border) !important; border-radius: 11px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important; font-size: 0.9rem; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; } #loginView .rxy-login-input-wrap .form-control::placeholder { color: color-mix(in srgb, var(--login-muted) 72%, transparent); opacity: 1; } #loginView .rxy-login-input-wrap:focus-within .form-control { border-color: color-mix(in srgb, var(--login-accent) 72%, var(--login-border)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-accent) 15%, transparent), 0 0 22px color-mix(in srgb, var(--login-accent) 8%, transparent) !important; outline: none; } #loginView .rxy-login-input-wrap:focus-within > i { color: var(--login-accent); } .rxy-password-toggle, .rxy-captcha-refresh { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; color: var(--login-muted); background: transparent; border: 0; border-radius: 10px; } .rxy-password-toggle { position: absolute; right: 6px; } .rxy-password-toggle:hover, .rxy-captcha-refresh:hover { color: var(--login-accent); background: color-mix(in srgb, var(--login-accent) 10%, transparent); } .rxy-password-toggle:focus-visible, .rxy-captcha-refresh:focus-visible { color: var(--login-accent); outline: 2px solid var(--login-accent); outline-offset: 2px; } .rxy-verification-field { min-width: 0; padding: 0; border: 0; } .rxy-verification-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 0.78fr); gap: 9px; } .rxy-captcha-challenge { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px 0 13px; color: var(--login-text); background: color-mix(in srgb, var(--login-input) 88%, var(--login-accent) 5%); border: 1px solid var(--login-border); border-radius: 11px; } .rxy-captcha-challenge strong { min-width: 72px; font-size: 0.94rem; font-weight: 600; letter-spacing: 0.05em; text-align: center; } #loginView .rxy-login-submit { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 2px; color: #f8fbff !important; background: linear-gradient(100deg, var(--login-accent), var(--login-accent-2)) !important; border: 1px solid color-mix(in srgb, var(--login-accent) 62%, white 18%) !important; border-radius: 11px !important; box-shadow: 0 12px 28px color-mix(in srgb, var(--login-accent) 20%, transparent) !important; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.01em; transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; } #loginView .rxy-login-submit:hover { filter: brightness(1.07); transform: translateY(-1px); } #loginView .rxy-login-submit:active { transform: translateY(0); } #loginView .rxy-login-submit:focus-visible { outline: 2px solid var(--login-text); outline-offset: 3px; } .rxy-login-card #loginNotice { margin-top: 10px; } .rxy-login-card #loginNotice:empty { display: none; } .rxy-login-card #loginNotice .alert { margin: 0; border: 1px solid color-mix(in srgb, var(--login-danger) 55%, transparent); background: color-mix(in srgb, var(--login-danger) 14%, transparent); color: color-mix(in srgb, var(--login-danger) 72%, white); border-radius: 11px; line-height: 1.45; } .rxy-login-card #loginNotice:focus { outline: none; } .rxy-login-status { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--login-muted); font-size: 0.78rem; } .rxy-status-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--login-muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-muted) 12%, transparent); } .rxy-login-status:has(#loginSystemStatus.ok) .rxy-status-dot { background: var(--login-success); box-shadow: 0 0 10px color-mix(in srgb, var(--login-success) 60%, transparent); } .rxy-login-status:has(#loginSystemStatus.err) .rxy-status-dot { background: var(--login-danger); } @media (max-width: 575.98px) { .rxy-login-shell { align-items: center; padding: 18px 14px; } .rxy-login-layout { gap: 16px; } html[data-ui-theme] #loginView .rxy-login-card { padding: 20px 16px; border-radius: 20px !important; } #loginView #loginLogoImg.rxy-login-logo { width: 208px; margin-bottom: 0; } .rxy-verification-row { grid-template-columns: 1fr; } .rxy-captcha-challenge { justify-content: space-between; } } @media (max-height: 720px) and (min-width: 576px) { .rxy-login-shell { align-items: start; padding-block: 18px; } .rxy-login-layout { gap: 16px; } html[data-ui-theme] #loginView .rxy-login-card { padding-block: 22px; } } @media (prefers-reduced-motion: reduce) { #loginView *, #loginView *::before, #loginView *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } .rxy-brand-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: linear-gradient(140deg, #2cb4ff, #4c7dff); font-size: 18px; } .rxy-brand-icon-sm { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(140deg, #2cb4ff, #4c7dff); font-size: 13px; } /* ��� Sidebar active nav item accent ��� */ .app-sidebar .nav-link.active { font-weight: 600; } /* ��� Utility classes ��� */ .hidden { display: none !important; } .text-muted { color: #6c757d !important; } code,.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ��� Captcha card on legacy login pages ��� */ .captcha-card { border: 1px solid var(--bs-border-color); border-radius: 0.5rem; background: var(--bs-body-bg); padding: 10px 12px; } .captcha-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } /* ��� Card content area padding fix ��� */ .card-body .table { margin-bottom: 0; } /* ��� Small badge tweaks ��� */ .badge { font-size: 0.72em; font-weight: 600; } /* ��� Responsive table overflow ��� */ .card-body { overflow-x: auto; } /* ��� Ops center live wall link ��� */ .ops-live-link { font-size: 13px; } /* ��� System status badge on login ��� */ .system-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--bs-border-color); font-size: 12px; } /* ��� Provider profile list item active highlight ��� */ .list-group-item.active .text-muted { color: rgba(255, 255, 255, 0.75) !important; } /* ��� Stat card value emphasis ��� */ .small-box .inner h3 { font-size: 2rem; font-weight: 700; } /* Bulk action toolbar (opsTable) - sticky, high-visibility row when any rows selected */ .ops-bulk-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; padding:.5rem .75rem; margin:0 0 .75rem 0; background:#eef6ff; border:1px solid #b6dafd; border-radius:.375rem; position:sticky; top:0; z-index:5; } .ops-bulk-toolbar .ops-bulk-count { font-weight:600; color:#0b5ed7; } [dir='rtl'] .ops-bulk-toolbar { direction:rtl; } /* --- Number Allocation form --- */ /* Number Allocation � switch control panel (dark-theme aware) */ .alloc-panel { background: transparent; border: 1px solid var(--bs-border-color, rgba(255,255,255,.12)); border-radius: .5rem; overflow: hidden; } .alloc-panel-header { padding: .65rem 1rem; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--bs-border-color, rgba(255,255,255,.10)); font-size: .95rem; } .alloc-panel-body { padding: 1rem 1rem .25rem 1rem; } .alloc-form .form-label { letter-spacing: .01em; } .alloc-row-primary { padding: .9rem 1rem; background: rgba(255,255,255,.04); border: 1px solid var(--bs-border-color, rgba(255,255,255,.10)); border-radius: .5rem; } .alloc-row-primary .form-label { font-size: 1rem; } .alloc-row-primary [data-af-target-ms] > .dropdown > button,.alloc-row-primary [data-af-apps-ms] > .dropdown > button { min-height: 2.6rem; font-size: .95rem; } .alloc-form-actions { border-top: 1px solid var(--bs-border-color, rgba(255,255,255,.10)); margin-top: .5rem; } .alloc-form-actions .btn { min-width: 9rem; } [dir="rtl"] .alloc-form .ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* Header status badges (alerts / runtime) — clickable, hover affordance */ .rxy-status-badge { display: inline-flex; align-items: center; gap: .15rem; cursor: pointer; padding: .35rem .55rem; font-weight: 500; letter-spacing: .01em; line-height: 1; transition: filter .15s ease, transform .15s ease; } .rxy-status-badge:hover { filter: brightness(1.12); transform: translateY(-1px); } .rxy-status-badge:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; } /* Sidebar groups vs children - clear visual hierarchy (light + dark) */ .app-sidebar .sidebar-menu > .nav-item { margin: 4px 8px; } .app-sidebar .sidebar-menu > .nav-item > .nav-link[data-rxy-group] { background: rgba(13,110,253,.12); border: 1px solid rgba(13,110,253,.25); border-left: 3px solid #0d6efd; border-radius: 8px; padding: .55rem .75rem; font-weight: 600; letter-spacing: .01em; transition: background-color .15s ease, border-color .15s ease; } .app-sidebar .sidebar-menu > .nav-item > .nav-link[data-rxy-group]:hover, .app-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link[data-rxy-group] { background: rgba(13,110,253,.22); border-color: rgba(13,110,253,.45); } .app-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link[data-rxy-group] .nav-arrow { transform: rotate(90deg); transition: transform .15s ease; } .app-sidebar .sidebar-menu .nav-treeview { margin: .25rem .25rem .35rem .5rem; padding-left: .5rem; border-left: 1px dashed rgba(255,255,255,.10); } .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link { background: transparent !important; border: 0 !important; border-radius: 6px; padding: .35rem .65rem .35rem .85rem; font-weight: 400; color: var(--bs-body-color); opacity: .85; } .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link:hover { background: rgba(255,255,255,.06) !important; opacity: 1; } .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link.active { background: rgba(13,110,253,.18) !important; color: #6ea8fe !important; font-weight: 500; } [data-bs-theme="light"] .app-sidebar .sidebar-menu .nav-treeview { border-left-color: rgba(0,0,0,.10); } [data-bs-theme="light"] .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link:hover { background: rgba(13,110,253,.08) !important; } [data-bs-theme="light"] .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link.active { background: rgba(13,110,253,.14) !important; color: #0d6efd !important; } /* Generation solo top-level item (Dashboard) and treeview open behavior */ .app-sidebar .sidebar-menu > .nav-item.gen-solo > .nav-link { background: rgba(13,110,253,.18); border: 1px solid rgba(13,110,253,.35); border-left: 3px solid #0d6efd; border-radius: 8px; padding: .55rem .75rem; font-weight: 600; } .app-sidebar .sidebar-menu > .nav-item.gen-solo > .nav-link:hover { background: rgba(13,110,253,.28); } .app-sidebar .sidebar-menu > .nav-item > .nav-treeview { display: none; } .app-sidebar .sidebar-menu > .nav-item.menu-open > .nav-treeview, .app-sidebar .sidebar-menu > .nav-item.open > .nav-treeview { display: block; } /* Final override — li-specific + !important beats AdminLTE/Bootstrap */ .app-sidebar .sidebar-menu > li.nav-item > .nav-treeview { display: none !important; } .app-sidebar .sidebar-menu > li.nav-item.menu-open > .nav-treeview, .app-sidebar .sidebar-menu > li.nav-item.open > .nav-treeview { display: block !important; } .app-sidebar .sidebar-menu > .nav-item.gen-group > .nav-treeview { display: none; } .app-sidebar .sidebar-menu > .nav-item.gen-group.menu-open > .nav-treeview { display: block; } /* ============================================================ Providers module � polished telecom control-panel table ============================================================ */ .prov-card .card-header { background: linear-gradient(180deg, rgba(13,110,253,.10), rgba(13,110,253,.04)); border-bottom: 1px solid rgba(13,110,253,.18); } :root { --provider-table-layout-version: "providers-visual-polish-v1-20260711"; } /* HOTFIX 20260709: sub-line for host:port under provider name */ .provider-name-cell .provider-name-sub { font-size: .75rem; line-height: 1.25; opacity: .78; margin-top: 2px; font-family: var(--bs-font-monospace, monospace); } .provider-name-cell .provider-name-main { font-weight: 600; } .provider-table-scroll .prov-table, .provider-table-scroll .provider-table, .provider-table-scroll .provider-table-clean { --bs-table-striped-bg: transparent; border-collapse: separate; border-spacing: 0; min-width: 1850px !important; width: 1850px !important; table-layout: fixed !important; margin-bottom: 0 !important; } .provider-table-scroll .prov-table th, .provider-table-scroll .prov-table td, .provider-table-scroll .provider-table th, .provider-table-scroll .provider-table td, .provider-table-scroll .provider-table-clean th, .provider-table-scroll .provider-table-clean td { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; vertical-align: middle !important; padding-top: 10px !important; padding-bottom: 10px !important; } /* Horizontal scroll shell for the provider table */ .provider-table-scroll { width: 100%; max-width: 100% !important; overflow-x: auto !important; overflow-y: hidden; border: 1px solid rgba(148,163,184,.25); border-radius: 10px; } [data-bs-theme="light"] .provider-table-scroll { border-color: #d2d8e2; } .prov-thead th { background: linear-gradient(180deg, #2a3142, #1f2533); color: #e7ebf3; font-weight: 600; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.08) !important; padding: .65rem .75rem; position: sticky; top: 0; z-index: 1; } [data-bs-theme="light"] .prov-thead th { background: linear-gradient(180deg, #eef2f8, #e2e8f1); color: #2a2f3a; border-bottom: 1px solid #d2d8e2 !important; } .prov-table tbody td { padding: .55rem .75rem; border-top: 1px solid rgba(255,255,255,.05); vertical-align: middle; } [data-bs-theme="light"] .prov-table tbody td { border-top: 1px solid #eef0f4; } .prov-row:nth-child(odd) td { background: rgba(255,255,255,.015); } .prov-row:nth-child(even) td { background: rgba(255,255,255,.035); } [data-bs-theme="light"] .prov-row:nth-child(odd) td { background: #ffffff; } [data-bs-theme="light"] .prov-row:nth-child(even) td { background: #f7f9fc; } .prov-row:hover td { background: rgba(13,110,253,.08); } [data-bs-theme="light"] .prov-row:hover td { background: rgba(13,110,253,.06); } .prov-row.prov-row-selected td { background: rgba(13,110,253,.16) !important; box-shadow: inset 3px 0 0 0 #0d6efd; } [data-bs-theme="light"] .prov-row.prov-row-selected td { background: rgba(13,110,253,.10) !important; } .prov-ip-chip { display: inline-block; padding: 1px 6px; margin: 1px 2px; border-radius: 4px; background: rgba(108,117,125,.18); color: inherit; font-size: .75rem; font-family: var(--bs-font-monospace, monospace); } .prov-ips { max-width: 260px; line-height: 1.5; } /* Badges */ .prov-badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; border: 1px solid transparent; } .prov-badge-status-active { background: rgba(25,135,84,.16); color: #4ade80; border-color: rgba(25,135,84,.35); } .prov-badge-status-inactive { background: rgba(108,117,125,.16); color: #adb5bd; border-color: rgba(108,117,125,.32); } .prov-badge-status-suspended { background: rgba(255,193,7,.18); color: #ffd166; border-color: rgba(255,193,7,.40); } .prov-badge-status-archived { background: rgba(33,37,41,.55); color: #cdd3da; border-color: rgba(255,255,255,.10); } .prov-badge-bind-active { background: rgba(25,135,84,.16); color: #4ade80; border-color: rgba(25,135,84,.35); } .prov-badge-bind-failed { background: rgba(220,53,69,.18); color: #ff8a99; border-color: rgba(220,53,69,.40); } .prov-badge-bind-inactive { background: rgba(108,117,125,.16); color: #adb5bd; border-color: rgba(108,117,125,.32); } .prov-badge-bind-unknown { background: rgba(108,117,125,.10); color: #9aa1ab; border-color: rgba(108,117,125,.22); } .prov-badge-conn-smpp { background: rgba(13,110,253,.16); color: #6ea8ff; border-color: rgba(13,110,253,.32); } .prov-badge-conn-http { background: rgba(102,16,242,.16); color: #b794ff; border-color: rgba(102,16,242,.32); } .prov-badge-conn-other { background: rgba(108,117,125,.12); color: #adb5bd; border-color: rgba(108,117,125,.25); } [data-bs-theme="light"] .prov-badge-status-active { color: #146c43; } [data-bs-theme="light"] .prov-badge-status-suspended{ color: #8a6500; } [data-bs-theme="light"] .prov-badge-bind-active { color: #146c43; } [data-bs-theme="light"] .prov-badge-bind-failed { color: #b02a37; } [data-bs-theme="light"] .prov-badge-conn-smpp { color: #0a58ca; } [data-bs-theme="light"] .prov-badge-conn-http { color: #5a25c0; } /* Action buttons */ .prov-actions, .provider-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; flex-wrap: nowrap !important; min-width: 390px !important; overflow: visible !important; } .provider-table-scroll .prov-actions, .provider-table-scroll .provider-actions { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; width: 100% !important; min-width: 390px !important; overflow: visible !important; } .prov-actions .btn { border: 1px solid transparent; background: transparent; color: #cdd3da; padding: .25rem .55rem; } .prov-actions .btn:disabled { opacity: .35; cursor: not-allowed; } .provider-action-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; flex: 0 0 30px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; } .provider-table-scroll .provider-actions-col { width: 460px !important; min-width: 460px !important; max-width: 460px !important; overflow: visible !important; } .provider-table-scroll .provider-action-btn { width: 30px !important; height: 30px !important; min-width: 30px !important; flex: 0 0 30px !important; } /* Sticky header + row polish */ .provider-table-scroll thead th { position: sticky; top: 0; z-index: 2; } .provider-table-scroll tbody tr { min-height: 52px; } .provider-table-scroll tbody tr:hover td { background: rgba(148,163,184,.08) !important; } /* Provider name cell two-line layout */ .provider-name-cell { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .provider-name-main { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .provider-name-sub { font-size: 12px; opacity: 0.72; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .provider-table-scroll td[title], .provider-table-scroll .provider-ellipsis { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .prov-actions .btn-prov-edit:not(:disabled):hover { background: rgba(13,110,253,.18); color: #6ea8ff; border-color: rgba(13,110,253,.35); } .prov-actions .btn-prov-test:not(:disabled):hover { background: rgba(20,166,196,.16); color: #6ee0f5; border-color: rgba(20,166,196,.35); } .prov-actions .btn-prov-reconnect:not(:disabled):hover { background: rgba(102,16,242,.16); color: #b794ff; border-color: rgba(102,16,242,.35); } .prov-actions .btn-prov-delete:not(:disabled):hover { background: rgba(220,53,69,.16); color: #ff8a99; border-color: rgba(220,53,69,.35); } [data-bs-theme="light"] .prov-actions .btn { color: #495057; } /* Toast container � keep above modal backdrops */ #provToastHost { pointer-events: none; } #provToastHost .toast { pointer-events: auto; } [dir="rtl"] .prov-row.prov-row-selected td { box-shadow: inset -3px 0 0 0 #0d6efd; } /* ??? Compact date/time cells (two-line DD-MM-YYYY / HH:mm:ss) ??? */ .dt-cell { line-height: 1.25; white-space: nowrap; } .dt-date { font-weight: 600; } .dt-time { opacity: 0.75; font-size: 12px; } /* ??? Language selector in navbar ??? */ .rxy-lang-select { width: auto; min-width: 110px; font-size: 0.85rem; } [dir="rtl"] .rxy-lang-select { text-align: right; } /* Header live clock */ .rxy-clock { line-height: 1.1; font-variant-numeric: tabular-nums; min-width: 6.5rem; user-select: none; } .rxy-clock-date { font-size: 0.78rem; font-weight: 600; opacity: 0.85; } .rxy-clock-time { font-size: 0.92rem; font-weight: 700; } [dir="rtl"] .rxy-clock { text-align: left; } /* Header user block (avatar + name + role) */ .rxy-user-block { padding: 2px 6px; border-radius: 999px; cursor: pointer; text-decoration: none; color: inherit; } .rxy-user-block:hover, .rxy-user-block:focus { background: rgba(127, 127, 127, 0.12); outline: none; text-decoration: none; color: inherit; } .rxy-user-block.show { background: rgba(127, 127, 127, 0.18); } .rxy-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); color: #fff; font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; overflow: hidden; flex: 0 0 auto; } .rxy-avatar img { width: 100%; height: 100%; object-fit: cover; } .rxy-user-meta { line-height: 1.05; } .rxy-user-name { font-size: 0.85rem; font-weight: 600; max-width: 12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rxy-user-role { font-size: 0.72rem; opacity: 0.7; text-transform: capitalize; } /* Profile dropdown menu — premium polish (.profile-menu retains .rxy-profile-menu class for backwards compatibility). */ .rxy-profile-menu, .profile-menu { --pm-radius: 16px; --pm-bg: var(--bs-body-bg, #1e2330); --pm-bg-elev: color-mix(in srgb, var(--pm-bg) 92%, white 8%); --pm-border: rgba(127, 127, 127, 0.22); --pm-divider: rgba(127, 127, 127, 0.16); --pm-hover: color-mix(in srgb, var(--bs-primary, #4f46e5) 14%, transparent); --pm-active: color-mix(in srgb, var(--bs-primary, #4f46e5) 22%, transparent); --pm-muted: color-mix(in srgb, currentColor 60%, transparent); min-width: 308px; max-width: 340px; padding: 0.35rem 0; margin-top: 0.45rem !important; border-radius: var(--pm-radius); border: 1px solid var(--pm-border); background-color: var(--pm-bg-elev); background-clip: padding-box; box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.35); z-index: 1085; overflow: hidden; } [data-bs-theme="light"] .rxy-profile-menu, [data-bs-theme="light"] .profile-menu { --pm-bg: #ffffff; --pm-bg-elev: #ffffff; --pm-border: rgba(15, 23, 42, 0.10); --pm-divider: rgba(15, 23, 42, 0.08); --pm-hover: rgba(13, 110, 253, 0.08); --pm-active: rgba(13, 110, 253, 0.14); box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.18), 0 4px 10px -4px rgba(15, 23, 42, 0.10); } /* Header (avatar + name + role/email) */ .rxy-profile-menu .rxy-profile-header, .profile-menu .profile-menu-header { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 0.95rem 0.8rem; border-bottom: 1px solid var(--pm-divider); margin-bottom: 0.3rem; } .profile-menu .profile-menu-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%); color: #fff; font-weight: 700; font-size: 0.95rem; display: inline-flex; align-items: center; justify-content: center; text-transform: uppercase; flex: 0 0 auto; overflow: hidden; } .profile-menu .profile-menu-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-menu .profile-menu-id { min-width: 0; flex: 1 1 auto; } .rxy-profile-menu .rxy-profile-header .name, .profile-menu .profile-menu-name { font-weight: 600; font-size: 0.95rem; line-height: 1.2; word-break: break-word; } .rxy-profile-menu .rxy-profile-header .meta, .profile-menu .profile-menu-role { font-size: 0.75rem; color: var(--pm-muted); text-transform: capitalize; margin-top: 1px; } .profile-menu .profile-menu-email { font-size: 0.72rem; color: var(--pm-muted); margin-top: 1px; word-break: break-all; } /* Section titles */ .rxy-profile-menu .dropdown-header, .profile-menu .profile-menu-title { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pm-muted); padding: 0.55rem 0.95rem 0.2rem; margin: 0; } /* Items */ .rxy-profile-menu .dropdown-item, .profile-menu .profile-menu-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.95rem; margin: 0 0.35rem; font-size: 0.88rem; border-radius: 10px; color: inherit; background-color: transparent; transition: background-color 0.15s ease, color 0.15s ease; } .rxy-profile-menu .dropdown-item:hover, .rxy-profile-menu .dropdown-item:focus, .profile-menu .profile-menu-item:hover, .profile-menu .profile-menu-item:focus { background-color: var(--pm-hover); color: inherit; outline: none; } .rxy-profile-menu .dropdown-item.active, .rxy-profile-menu .dropdown-item:active, .profile-menu .profile-menu-item.active, .profile-menu .profile-menu-item:active { background-color: var(--pm-active); color: inherit; } .rxy-profile-menu .dropdown-item i, .profile-menu .profile-menu-item-icon { width: 1.05rem; text-align: center; font-size: 0.95rem; opacity: 0.78; flex: 0 0 auto; } .profile-menu .profile-menu-item-text { flex: 1 1 auto; min-width: 0; } .profile-menu .profile-menu-item-check { width: 1.1rem; text-align: center; color: var(--bs-primary, #4f46e5); font-size: 0.8rem; flex: 0 0 auto; } .rxy-profile-menu .dropdown-item .badge { margin-left: auto; font-weight: 500; } [dir="rtl"] .rxy-profile-menu .dropdown-item .badge { margin-left: 0; margin-right: auto; } /* Divider */ .rxy-profile-menu .dropdown-divider, .profile-menu .profile-menu-divider { border-top: 1px solid var(--pm-divider); margin: 0.35rem 0.6rem; opacity: 1; } /* Logout — red text only, not a heavy red block */ .profile-menu .profile-menu-logout-wrap { border-top: 1px solid var(--pm-divider); margin-top: 0.3rem; padding-top: 0.3rem; } .rxy-profile-menu .dropdown-item.profile-menu-logout, .profile-menu .profile-menu-logout { color: var(--bs-danger, #ef4444); } .rxy-profile-menu .dropdown-item.profile-menu-logout:hover, .profile-menu .profile-menu-logout:hover { background-color: color-mix(in srgb, var(--bs-danger, #ef4444) 12%, transparent); color: var(--bs-danger, #ef4444); } [dir="rtl"] .rxy-profile-menu, [dir="rtl"] .profile-menu { text-align: right; } /* Hover bridge — keep dropdown open while moving from button to menu */ #userBlockWrap { position: relative; } #userBlockWrap .dropdown-menu { margin-top: 0.45rem; } /* Operator-managed branding hooks (white-label). Defaults match SMS Switch. The values are set at runtime by ui-branding.js based on /api/system/branding. */ :root { --brand-primary: #0d6efd; --brand-secondary: #111827; --brand-sidebar: #111827; --brand-login-bg: #0f172a; } .rxy-login-shell { background-color: var(--brand-login-bg); } /* Sidebar/secondary colors are exposed as CSS variables only. The default AdminLTE/Bootstrap classes still drive the layout; operators can override specific rules via additional CSS if needed. */ /* ────────────────────────────────────────────────────────────────────── Admin modal density pack ────────────────────────────────────────────────────────────────────── Applies to every Bootstrap .modal rendered inside the authenticated app shell (Add/Edit Provider, Add/Edit Range, Add/Edit Customer, destructive-action confirms, …). Cosmetic only — no behavior, no payload, no class rename. Targets bs5 markup we already emit: .modal-content / .modal-header / .modal-body / .modal-footer form > fieldset.border > legend > .row.g-3 > .col-* > .form-label.small + input/select/textarea.form-control(-sm)/form-select(-sm) The login screen lives in .rxy-login-shell (no .modal) and is not touched. The 2FA inline prompt lives inside #loginForm and is not touched either. */ :root { --rxy-modal-bg: #1d2330; --rxy-modal-fg: #e6e8ed; --rxy-modal-muted: #9aa3b2; --rxy-modal-border: rgba(255,255,255,0.08); --rxy-modal-field-bg: rgba(255,255,255,0.04); --rxy-modal-field-bd: rgba(255,255,255,0.12); --rxy-modal-footer-bg: rgba(0,0,0,0.18); --rxy-modal-input-h: 36px; } [data-bs-theme="light"] { --rxy-modal-bg: #ffffff; --rxy-modal-fg: #1f2430; --rxy-modal-muted: #5b6373; --rxy-modal-border: rgba(0,0,0,0.08); --rxy-modal-field-bg: #ffffff; --rxy-modal-field-bd: rgba(0,0,0,0.18); --rxy-modal-footer-bg: rgba(0,0,0,0.03); } .modal-content { background: var(--rxy-modal-bg); color: var(--rxy-modal-fg); border: 1px solid var(--rxy-modal-border); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--rxy-modal-border) !important; padding: 0.85rem 1.1rem; } .modal-header .modal-title { font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; } .modal-body { padding: 1rem 1.1rem; } .modal-body .vstack { gap: 0.75rem !important; } .modal-body > form.vstack { gap: 0.85rem !important; } /* Section boxes ------------------------------------------------------- */ .modal-body fieldset.border { border: 1px solid var(--rxy-modal-border) !important; border-radius: 10px; padding: 0.7rem 0.9rem 0.85rem !important; background: rgba(255,255,255,0.015); } [data-bs-theme="light"] .modal-body fieldset.border { background: rgba(0,0,0,0.015); } .modal-body fieldset.border > legend { font-size: 0.7rem !important; letter-spacing: 0.06em; color: var(--rxy-modal-muted); margin-bottom: 0.4rem; padding: 0 0.4rem !important; width: auto; } /* Row gutters ---------------------------------------------------------- */ .modal-body .row.g-3 { --bs-gutter-y: 0.6rem; --bs-gutter-x: 0.75rem; } /* Labels --------------------------------------------------------------- */ .modal-body .form-label, .modal-body .form-label.small { font-size: 0.72rem !important; font-weight: 500; color: var(--rxy-modal-muted); margin-bottom: 0.25rem; letter-spacing: 0.01em; text-transform: none; } /* Inputs / selects ----------------------------------------------------- */ .modal-body .form-control, .modal-body .form-select, .modal-body .form-control-sm, .modal-body .form-select-sm { height: var(--rxy-modal-input-h); min-height: var(--rxy-modal-input-h); font-size: 0.85rem; padding: 0.35rem 0.65rem; background: var(--rxy-modal-field-bg); color: var(--rxy-modal-fg); border: 1px solid var(--rxy-modal-field-bd); border-radius: 7px; line-height: 1.3; } .modal-body .form-select, .modal-body .form-select-sm { padding-right: 1.8rem; background-position: right 0.55rem center; background-size: 14px 10px; } .modal-body textarea.form-control, .modal-body textarea.form-control-sm { height: auto; min-height: 0; line-height: 1.35; padding: 0.4rem 0.65rem; } .modal-body input[type="number"].form-control, .modal-body input[type="number"].form-control-sm { padding-right: 0.4rem; } .modal-body .form-control:focus, .modal-body .form-select:focus { background: var(--rxy-modal-field-bg); color: var(--rxy-modal-fg); border-color: rgba(13,110,253,0.55); box-shadow: 0 0 0 0.18rem rgba(13,110,253,0.18); } .modal-body .form-control::placeholder { color: var(--rxy-modal-muted); opacity: 0.7; } .modal-body .form-text { font-size: 0.7rem; margin-top: 0.2rem; color: var(--rxy-modal-muted); } /* Footer --------------------------------------------------------------- */ .modal-footer { border-top: 1px solid var(--rxy-modal-border) !important; padding: 0.65rem 1.1rem; position: sticky; bottom: 0; background: var(--rxy-modal-footer-bg); backdrop-filter: blur(6px); z-index: 2; } .modal-footer .btn { padding: 0.4rem 0.95rem; font-size: 0.85rem; } /* Header close button visibility in dark theme ------------------------- */ .modal-content .btn-close { opacity: 0.7; } .modal-content .btn-close:hover { opacity: 1; } /* Narrow viewports ---------------------------------------------------- */ @media (max-width: 575.98px) { .modal-body { padding: 0.85rem 0.9rem; } .modal-body fieldset.border { padding: 0.6rem 0.75rem 0.7rem !important; } .modal-body .row.g-3 { --bs-gutter-y: 0.5rem; --bs-gutter-x: 0.5rem; } .modal-header, .modal-footer { padding-left: 0.9rem; padding-right: 0.9rem; } :root { --rxy-modal-input-h: 38px; } /* slightly taller hit-target on touch */ } /* ============================================================ P0 PRE-LIVE � Compact UI Standard + Branding Polish Adds compact-mode utility classes used by tables, buttons, and filter bars across the admin console. Activate per-page by adding the .rxy-compact class to a table or wrapper. Branding sidebar sizing tweaks complement /api/system/branding swap-in. ============================================================ */ .rxy-compact { font-size: 0.86rem; } .rxy-compact .form-control, .rxy-compact .form-select { padding: 0.28rem 0.55rem; font-size: 0.83rem; min-height: 32px; } .rxy-compact .input-group-text { padding: 0.28rem 0.55rem; font-size: 0.83rem; } .rxy-compact .btn { padding: 0.28rem 0.6rem; font-size: 0.82rem; } .rxy-compact .btn-sm { padding: 0.22rem 0.45rem; font-size: 0.78rem; } .rxy-compact table { font-size: 0.84rem; } .rxy-compact table > :not(caption) > * > * { padding: 0.4rem 0.55rem; vertical-align: middle; } .rxy-compact thead th { padding: 0.45rem 0.55rem; font-weight: 600; letter-spacing: 0.02em; } .rxy-action-icons { display: inline-flex; gap: 4px; flex-wrap: nowrap; } .rxy-action-icons .btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; } .rxy-action-icons .btn i { font-size: 0.95rem; line-height: 1; } .rxy-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: end; padding: 0.5rem 0.65rem; background: var(--bs-body-bg, transparent); border: 1px solid var(--bs-border-color, rgba(255,255,255,0.08)); border-radius: 8px; margin-bottom: 0.65rem; } .rxy-filter-bar .form-control, .rxy-filter-bar .form-select { min-width: 130px; max-width: 220px; } .rxy-filter-bar .ms-auto { margin-left: auto !important; } .rxy-status-pill { display: inline-block; padding: 0.15rem 0.55rem; font-size: 0.72rem; line-height: 1.4; border-radius: 999px; font-weight: 600; letter-spacing: 0.02em; } .rxy-status-pill.is-active { background: rgba(34,197,94,0.18); color: #4ade80; } .rxy-status-pill.is-suspended { background: rgba(239,68,68,0.18); color: #f87171; } .rxy-status-pill.is-disabled { background: rgba(148,163,184,0.18); color: #cbd5e1; } .rxy-status-pill.is-degraded { background: rgba(234,179,8,0.18); color: #facc15; } .rxy-action-disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; } /* Unified authenticated sidebar identity: logo, tenant brand, user role. */ .sidebar-brand.sidebar-identity { display: flex; flex-direction: column; align-items: center; width: 100%; height: auto; min-height: 158px; padding: 14px 14px 12px; gap: 8px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.08); } /* AdminLTE sizes .sidebar-wrapper as if the brand were its stock 57px tall. Our richer identity block is taller, so that fixed remainder used to extend below the viewport and create phantom document scroll. Keep the sidebar at the shell height and let only its navigation remainder scroll. */ #appView .app-sidebar { display: flex; flex-direction: column; min-height: 0; } #appView .app-sidebar > .sidebar-brand { flex: 0 0 auto; } #appView .app-sidebar > .sidebar-wrapper { flex: 1 1 auto; height: auto; min-height: 0; } .sidebar-brand-logo { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 72px; max-height: 105px; } .sidebar-brand-logo img#sidebarLogoImg { display: block; width: calc(100% - 28px); max-width: 180px; height: auto; max-height: 105px; object-fit: contain; object-position: center; } .sidebar-brand-logo img#sidebarLogoImg.d-none { display: none !important; } .sidebar-brand-logo #sidebarBrandIcon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 14px; font-size: 22px; flex: 0 0 auto; } .sidebar-brand-name { width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; color: rgba(255,255,255,0.96); font-size: 1.05rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.015em; text-align: center; overflow-wrap: anywhere; } .sidebar-user-role-badge { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 34px; padding: 7px 10px; border-radius: 6px; background: var(--brand-primary, #0d6efd); color: #fff; font-size: 0.82rem; font-weight: 600; line-height: 1.2; text-align: center; cursor: default; user-select: none; } .sidebar-user-role-badge:hover { background: var(--brand-primary, #0d6efd); } body.sidebar-collapse .sidebar-brand.sidebar-identity, .sidebar-collapse .sidebar-brand.sidebar-identity { min-height: 76px; padding: 10px 6px; gap: 0; } body.sidebar-collapse .sidebar-brand-logo, .sidebar-collapse .sidebar-brand-logo { min-height: 54px; } body.sidebar-collapse .sidebar-brand-logo img#sidebarLogoImg, .sidebar-collapse .sidebar-brand-logo img#sidebarLogoImg { width: 48px; max-width: 48px; max-height: 54px; } body.sidebar-collapse .sidebar-brand-logo #sidebarBrandIcon, .sidebar-collapse .sidebar-brand-logo #sidebarBrandIcon { width: 44px; height: 44px; font-size: 15px; } body.sidebar-collapse .sidebar-brand-name, body.sidebar-collapse .sidebar-user-role-badge, .sidebar-collapse .sidebar-brand-name, .sidebar-collapse .sidebar-user-role-badge { display: none; } @media (max-width: 767.98px) { .sidebar-brand.sidebar-identity { padding-inline: 14px; } .sidebar-brand-logo img#sidebarLogoImg { max-width: 180px; width: calc(100% - 28px); } } /* Login screen fallback icon sizing */ .rxy-login-shell .rxy-brand-icon { width: 64px; height: 64px; font-size: 22px; border-radius: 16px; } /* =================================================================== Bordered data tables + Column Visibility toolbar (UI/UX layer) Reusable, dark-theme aware. Opt-in via .rxy-data-table on a (or .rxy-table-shell on a wrapping element). Does not change any data/calculations — purely presentational. =================================================================== */ .rxy-data-table { --rxy-tbl-border: var(--bs-border-color, rgba(255,255,255,.16)); border-collapse: separate; border-spacing: 0; width: 100%; } .rxy-data-table > thead > tr > th, .rxy-data-table > tbody > tr > td, .rxy-data-table > tfoot > tr > td { border: 1px solid var(--rxy-tbl-border) !important; padding: .5rem .6rem; vertical-align: middle; } .rxy-data-table > thead > tr > th { background: var(--bs-tertiary-bg, #20262e); border-bottom-width: 2px !important; font-weight: 600; white-space: nowrap; position: relative; } .rxy-data-table > tbody > tr:hover > td { background: var(--bs-primary-bg-subtle, rgba(13,110,253,.14)); } [data-bs-theme="light"] .rxy-data-table { --rxy-tbl-border: #d2d8e2; } [data-bs-theme="light"] .rxy-data-table > thead > tr > th { background: #eef1f6; } /* Sticky header for tables already inside a scroll area. */ .rxy-table-shell { border: 1px solid var(--bs-border-color, rgba(255,255,255,.16)); border-radius: .5rem; overflow: auto; width: 100%; max-width: 100%; max-height: var(--rxy-table-maxh, 70vh); } .rxy-table-shell .rxy-data-table > thead > tr > th { position: sticky; top: 0; z-index: 3; } /* ------------------------------------------------------------------ Wide-table containment. Without min-width:0 on the flex main column, AdminLTE's flexbox lets an intrinsically-wide table stretch the whole page horizontally. Constraining the main content + forcing horizontal overflow INSIDE the table wrapper keeps the page layout fixed and moves the scrollbar into the table area only. Purely presentational. ------------------------------------------------------------------ */ .app-wrapper, .app-main, .app-content, .app-content > .container-fluid { min-width: 0; max-width: 100%; } .app-content > .container-fluid { overflow-x: hidden; } /* Any Bootstrap/admin table wrapper scrolls internally, never the page. */ .app-content .table-responsive, .app-content .rxy-table-shell { width: 100%; max-width: 100%; overflow-x: auto; } /* Density toggle. */ .rxy-data-table.rxy-density-compact > thead > tr > th, .rxy-data-table.rxy-density-compact > tbody > tr > td, .rxy-data-table.rxy-density-compact > tfoot > tr > td { padding: .25rem .4rem; font-size: .82rem; } /* Column hide (used by the Display Columns toolbar). Hides header + cells. */ .rxy-col-hidden { display: none !important; } /* Display Columns dropdown panel. */ .rxy-col-menu { min-width: 230px; max-height: 360px; overflow: auto; padding: .5rem .25rem; } .rxy-col-menu .form-check { margin: .1rem .5rem; } .rxy-col-menu .rxy-col-locked { opacity: .7; } .rxy-col-menu .rxy-col-locked .form-check-input { cursor: not-allowed; } .rxy-col-toolbar-actions { border-top: 1px solid var(--bs-border-color, rgba(255,255,255,.14)); margin-top: .35rem; padding-top: .4rem; display: flex; gap: .4rem; justify-content: space-between; } /* --------------------------------------------------------------------------- * Global date / date-time calendar picker (Flatpickr) — see ui-datetime-picker.js * Float the calendar above modals (z-index 1055), offcanvas (1045) and * dropdowns so it is never cropped inside cards, modals or scroll panels. * The dark theme colours come from flatpickr's themes/dark.css. * ------------------------------------------------------------------------- */ .flatpickr-calendar { z-index: 100060 !important; } .flatpickr-calendar.open { z-index: 100060 !important; } /* Keep day/time text crisp on the dark theme and align with our font stack. * Force LTR + the UI font so time-spinner and calendar-day numerals always * render as plain Western digits — never Arabic-looking glyphs, dots, or a * masked/password-style font inherited from the surrounding (possibly RTL) * page context. */ .flatpickr-calendar, .flatpickr-calendar .flatpickr-time input, .flatpickr-calendar .flatpickr-time .flatpickr-time-separator, .flatpickr-calendar .numInputWrapper input, .flatpickr-calendar .flatpickr-day, .flatpickr-calendar .flatpickr-weekday, .flatpickr-calendar span.flatpickr-weekday, .flatpickr-calendar .flatpickr-current-month input.cur-year, .flatpickr-calendar .flatpickr-current-month .numInputWrapper { font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-variant-numeric: tabular-nums lining-nums; -webkit-text-security: none; /* never mask numerals as dots */ -webkit-font-feature-settings: 'tnum' 1, 'lnum' 1; font-feature-settings: 'tnum' 1, 'lnum' 1; direction: ltr; unicode-bidi: isolate; } /* The time hour/minute/second spinners must read left-to-right and centred. */ .flatpickr-calendar .flatpickr-time input, .flatpickr-calendar .numInputWrapper input { text-align: center; direction: ltr !important; } /* ============================================================================= Reusable operational table layout (rxy-table-shell / rxy-data-table) Added 2026-07-02 (table-layout-v1). Structure-only; no business logic. Goal: keep columns readable on resize, contain horizontal scroll inside the table shell (not the page), keep header aligned with body, keep actions usable, and truncate long text with ellipsis + title tooltip. ========================================================================== */ .rxy-table-shell { width: 100%; overflow-x: auto; overflow-y: hidden; border-radius: 12px; -webkit-overflow-scrolling: touch; } .rxy-data-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; } .rxy-data-table th, .rxy-data-table td { white-space: nowrap; vertical-align: middle; } /* Long free-text cells: cap width, ellipsis, full text via title tooltip. */ .rxy-cell-ellipsis { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Numeric columns read better with tabular figures. */ .rxy-col-num { text-align: right; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } /* Action column: never squeeze, keep buttons on one line. */ .rxy-col-actions, .rxy-table-actions { white-space: nowrap; text-align: right; } /* Sticky first/last columns (opt-in per table). Inherit row background so the sticky cell paints over horizontally-scrolled content. */ .rxy-sticky-start { position: sticky; left: 0; z-index: 2; background-color: var(--bs-body-bg, #fff); } .rxy-sticky-end { position: sticky; right: 0; z-index: 2; background-color: var(--bs-body-bg, #fff); } .rxy-data-table thead th.rxy-sticky-start, .rxy-data-table thead th.rxy-sticky-end { z-index: 3; } /* Keep selected-row highlight from breaking sticky-cell borders. */ .rxy-data-table tbody tr.table-active .rxy-sticky-start, .rxy-data-table tbody tr.table-active .rxy-sticky-end, .rxy-data-table tbody tr.selected .rxy-sticky-start, .rxy-data-table tbody tr.selected .rxy-sticky-end { background-color: var(--bs-table-active-bg, #e9ecef); } /* Toolbars (search / page-size / export / bulk actions) wrap cleanly. */ .rxy-table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* ── Mobile Network Catalog — internal scroll table ────────────────────────── */ .mnc-table-scroll { max-height: calc(100vh - 430px); min-height: 360px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--bs-border-color, rgba(255,255,255,.16)); border-radius: .5rem; width: 100%; } .mnc-table-scroll .mnc-table > thead > tr > th { position: sticky; top: 0; z-index: 2; background: var(--bs-tertiary-bg, #20262e); } [data-bs-theme="light"] .mnc-table-scroll .mnc-table > thead > tr > th { background: var(--bs-tertiary-bg, #f8f9fa); } .mnc-table { min-width: 1250px; width: 100%; } /* ================================================================ Shared table scroll wrapper + pagination controls (UI-only) Added 2026-07-09 — presentation only, no logic changes. Applied around every data table in the app so wide tables scroll horizontally and long tables scroll vertically inside the wrapper instead of stretching the page layout. ================================================================ */ .table-scroll-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: auto; max-height: var(--table-scroll-maxh, 68vh); border: 1px solid var(--bs-border-color, rgba(255, 255, 255, .16)); border-radius: .5rem; -webkit-overflow-scrolling: touch; } /* When placed inside a Bootstrap card body that already provides a border, * avoid a double-border look but keep the internal scroll. */ .card-body > .table-scroll-wrap { border: 0; border-radius: 0; } [data-bs-theme="light"] .table-scroll-wrap { border-color: rgba(0, 0, 0, .12); } /* Reusable pagination bar produced by UI.paginationBar / bindPagination. * Layout only — the buttons remain standard Bootstrap. */ .ui-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; } .ui-pager .ui-pager-info { color: var(--bs-secondary-color, #6c757d); font-size: .8125rem; } .ui-pager .ui-pager-controls { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; flex-wrap: wrap; } .ui-pager .ui-pager-input { width: 4.25rem; text-align: center; font-variant-numeric: tabular-nums; } .ui-pager .ui-pager-size { width: auto; } /* Providers compact table + workspace modal polish */ .provider-table-scroll .prov-table, .provider-table-scroll .provider-table, .provider-table-scroll .provider-table-clean { min-width: 1179px !important; width: 1179px !important; } .provider-table-scroll .provider-actions-col { width: 112px !important; min-width: 112px !important; max-width: 112px !important; } .provider-actions-compact { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; } .provider-actions-compact .provider-action-btn { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 8px; } .provider-connection-stack { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .provider-workspace-modal .modal-content { border: 1px solid rgba(148,163,184,.26); overflow: hidden; } .provider-workspace-head { align-items: flex-start; gap: 16px; border-bottom: 1px solid rgba(148,163,184,.18); background: rgba(15,23,42,.22); } .provider-workspace-body { padding-top: 14px; } .provider-workspace-tabs .nav-link { display: inline-flex; align-items: center; border-radius: 8px 8px 0 0; } .provider-workspace-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .provider-info-panel, .provider-edit-panel, .provider-data-preview { border: 1px solid rgba(148,163,184,.22); border-radius: 8px; background: rgba(148,163,184,.06); padding: 14px; } .provider-panel-label { color: #8f9baa; font-size: 12px; font-weight: 700; letter-spacing: .04em; margin-bottom: 8px; text-transform: uppercase; } .provider-panel-value { color: inherit; font-size: 14px; font-weight: 600; } .provider-action-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .provider-command { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 12px; border: 1px solid rgba(148,163,184,.24); border-radius: 8px; background: rgba(148,163,184,.06); color: inherit; text-align: left; } .provider-command i { font-size: 16px; color: #6ea8ff; } .provider-command:hover:not(:disabled) { border-color: rgba(13,110,253,.45); background: rgba(13,110,253,.12); } .provider-command:disabled { cursor: not-allowed; opacity: .42; } .provider-edit-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .provider-data-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; } .provider-data-preview div { min-width: 0; } .provider-data-preview span { display: block; color: #8f9baa; font-size: 12px; margin-bottom: 3px; } .provider-data-preview strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-bs-theme="light"] .provider-workspace-head, [data-bs-theme="light"] .provider-info-panel, [data-bs-theme="light"] .provider-edit-panel, [data-bs-theme="light"] .provider-data-preview, [data-bs-theme="light"] .provider-command { background: #f8fafc; } @media (max-width: 992px) { .provider-workspace-grid, .provider-action-board, .provider-data-preview { grid-template-columns: 1fr; } .provider-edit-panel { align-items: stretch; flex-direction: column; } } /* Providers page visual polish 20260711 */ #providers { width: 100%; } #providers .prov-card { width: 100%; border: 1px solid rgba(148, 163, 184, .18); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .16); overflow: hidden; } #providers .prov-card.card-outline { border-top: 3px solid var(--bs-primary); } #providers .prov-card .card-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: rgba(18, 24, 33, .76); border-bottom: 1px solid rgba(148, 163, 184, .16); } #providers .prov-card .card-title { display: inline-flex; align-items: center; gap: 8px; min-width: max-content; font-size: 1rem; letter-spacing: 0; } #providers #provSearch { min-height: 34px; } #providers .prov-card .card-header .input-group { width: min(320px, 38vw) !important; } #providers #provAddBtn, #providers #provRefresh { min-height: 34px; border-radius: 7px; } #providers .prov-card .card-body { padding: 16px; } #providers .prov-card .card-body > .d-flex:first-child { gap: 12px !important; margin-bottom: 14px !important; } #providers [data-export] { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 5px 10px; border-color: rgba(148, 163, 184, .24); background: rgba(148, 163, 184, .055); color: var(--bs-secondary-color); font-weight: 500; } #providers [data-export]:hover { background: rgba(13, 110, 253, .11); border-color: rgba(13, 110, 253, .32); color: var(--bs-body-color); } #providers #provRows { min-height: 31px; border-radius: 7px; border-color: rgba(148, 163, 184, .28); background-color: rgba(148, 163, 184, .055); } #providers .provider-table-scroll { width: 100%; border: 1px solid rgba(148, 163, 184, .16); border-radius: 10px; background: rgba(9, 14, 22, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025); } #providers .provider-table-scroll .prov-table, #providers .provider-table-scroll .provider-table, #providers .provider-table-scroll .provider-table-clean { width: 100% !important; min-width: 1179px !important; table-layout: fixed !important; border-collapse: separate !important; border-spacing: 0 !important; } #providers .provider-table-scroll th, #providers .provider-table-scroll td { border-right: 0 !important; border-left: 0 !important; } #providers .prov-thead th { padding: 12px 12px !important; background: rgba(23, 30, 41, .96) !important; border-bottom: 1px solid rgba(148, 163, 184, .22) !important; color: rgba(235, 241, 248, .88); font-size: .74rem; font-weight: 700; letter-spacing: 0; } #providers .prov-table tbody td { padding: 13px 12px !important; border-top: 1px solid rgba(148, 163, 184, .12) !important; background: transparent !important; } #providers .prov-row:nth-child(odd) td, #providers .prov-row:nth-child(even) td { background: transparent !important; } #providers .prov-row:hover td { background: rgba(13, 110, 253, .075) !important; } #providers .prov-row.prov-row-selected td { background: rgba(13, 110, 253, .13) !important; } #providers .provider-name-main { font-weight: 700; color: var(--bs-body-color); } #providers .provider-name-sub { color: var(--bs-secondary-color) !important; font-size: .76rem; line-height: 1.35; } #providers .provider-connection-stack { gap: 6px; } #providers .prov-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; min-width: 76px; padding: 4px 9px; border-radius: 999px; font-size: .69rem; line-height: 1; letter-spacing: 0; font-weight: 700; } #providers .provider-actions-col { text-align: center !important; } #providers .provider-actions-compact { justify-content: center; gap: 8px; width: 100%; } #providers .provider-actions-compact .provider-action-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; border-radius: 8px; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 !important; } #providers .provider-actions-compact .provider-action-btn:hover { transform: translateY(-1px); } #providers .ui-pager, #providers [data-ui-pager], #providers .pagination-bar { width: 100%; } #providers .ui-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; } #providers .ui-pager .btn, #providers .ui-pager input, #providers .ui-pager select { border-radius: 7px; } [data-bs-theme="light"] #providers .prov-card { border-color: rgba(15, 23, 42, .12); box-shadow: 0 10px 26px rgba(15, 23, 42, .08); } [data-bs-theme="light"] #providers .prov-card .card-header { background: #ffffff; border-bottom-color: #e6eaf0; } [data-bs-theme="light"] #providers .provider-table-scroll { background: #ffffff; border-color: #e2e8f0; } [data-bs-theme="light"] #providers .prov-thead th { background: #f8fafc !important; color: #334155; border-bottom-color: #e2e8f0 !important; } [data-bs-theme="light"] #providers .prov-table tbody td { border-top-color: #edf2f7 !important; } [data-bs-theme="light"] #providers .prov-row:hover td { background: #f3f7ff !important; } @media (max-width: 768px) { #providers .prov-card .card-header { align-items: stretch; } #providers .prov-card .card-header .input-group { width: 100% !important; order: 2; } #providers #provAddBtn, #providers #provRefresh { order: 3; } #providers .prov-card .card-body > .d-flex:first-child { align-items: stretch !important; } #providers .prov-card .card-body > .d-flex:first-child .btn-group { width: 100%; flex-wrap: wrap; } #providers [data-export] { flex: 1 1 auto; justify-content: center; } } /* Date/time range controls should stay readable even in RTL shells. */ input[type="datetime-local"], .rxy-datetime-local { direction: ltr; text-align: left; } /* Date/time report filters: hide technical API "T" from visible fields. */ .rxy-datetime-display { direction: ltr; text-align: left; min-width: 170px; } /* Date/time report filters: clean display + native picker button. */ .rxy-datetime-display { direction: ltr; text-align: left; min-width: 170px; } .rxy-hidden-datetime-picker { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .rxy-calendar-btn { margin-left: 6px; white-space: nowrap; vertical-align: middle; } /* Date/time report filters: click field to open native picker. */ .rxy-datetime-display { direction: ltr; text-align: left; min-width: 170px; cursor: pointer; } .rxy-hidden-datetime-picker { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .rxy-calendar-btn { display: none !important; } /* Traffic/report filter toolbar standard. Scoped to traffic report pages only. */ .traffic-report-toolbar { align-items: end; row-gap: 0.55rem !important; column-gap: 0.55rem !important; overflow: visible; } .traffic-report-toolbar > div { min-width: 150px; } .traffic-report-toolbar .form-label { margin-bottom: 0.25rem; font-size: 0.78rem; color: var(--bs-secondary-color, #94a3b8); } .traffic-report-toolbar .form-control-sm, .traffic-report-toolbar .form-select-sm, .traffic-report-toolbar .rxy-search-select-toggle, .traffic-report-toolbar .btn-sm { min-height: 32px; } .traffic-report-toolbar .rxy-search-select { width: 100%; min-width: 150px; } .traffic-report-toolbar .rxy-search-select-toggle { width: 100%; } .traffic-report-toolbar .btn { white-space: nowrap; } .cdr-toolbar.traffic-report-toolbar > div { flex: 1 1 160px; max-width: 240px; } .cdr-toolbar.traffic-report-toolbar > div:has(input[id$="_f_q"]), .cdr-toolbar.traffic-report-toolbar > div:has(input[id$="_f_search"]) { flex-basis: 300px; max-width: 420px; } #reportsCenter .traffic-report-toolbar, #fieldTraffic .traffic-report-toolbar, #agentReports .traffic-report-toolbar { overflow: visible; } #reportsCenter .traffic-report-toolbar .col-md-4, #fieldTraffic .traffic-report-toolbar .col-md-2.d-flex, #agentReports .traffic-report-toolbar .col-md-2.d-flex { min-width: 260px; } /* Finance filter searchable dropdowns. Scoped so Traffic/Report toolbar behavior remains untouched. */ .rxy-finance-filter-card, .rxy-finance-filter-card > .card-body, .rxy-finance-filter-card .row { overflow: visible; } /* Test Numbers: one consistent, professional bordered-table treatment for both the Test Numbers and Traffic tabs. Presentation only. */ .test-numbers-table-shell { --test-table-border: rgba(148, 163, 184, 0.34); border: 1px solid var(--test-table-border); border-radius: 0.45rem; overflow: auto; max-width: 100%; } .test-numbers-bordered-table { border-collapse: collapse !important; border: 1px solid var(--test-table-border) !important; width: 100%; } .test-numbers-bordered-table > thead > tr > th, .test-numbers-bordered-table > tbody > tr > td { border: 1px solid var(--test-table-border) !important; padding: 0.55rem 0.7rem; vertical-align: middle; } .test-numbers-bordered-table > thead > tr > th { background: var(--bs-tertiary-bg, #20262e); border-bottom-width: 2px !important; font-weight: 600; white-space: nowrap; } .test-numbers-bordered-table > tbody > tr:hover > td { background: var(--bs-primary-bg-subtle, rgba(13, 110, 253, 0.14)); } [data-bs-theme="light"] .test-numbers-table-shell { --test-table-border: #c9d1dc; } [data-bs-theme="light"] .test-numbers-bordered-table > thead > tr > th { background: #eef1f6; } .rxy-finance-filter-card { position: relative; z-index: 20; } .rxy-finance-filter-card:has(.rxy-search-select.open), .rxy-finance-filter-card .rxy-search-select.open { z-index: 1090; } .rxy-finance-filter-card .rxy-search-select { width: 100%; } .rxy-finance-filter-card .rxy-search-select-menu { z-index: 1091; max-height: min(320px, 60vh); overflow: hidden; } .rxy-finance-filter-card .rxy-search-select-options { max-height: min(240px, 45vh); overflow-y: auto; } .rxy-search-select { position: relative; min-width: 150px; } .rxy-search-select-toggle { display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; } .rxy-search-select-label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 0.75rem; } .rxy-search-select-menu { display: none; position: absolute; z-index: 1080; top: calc(100% + 4px); left: 0; min-width: 100%; width: max(220px, 100%); max-width: 320px; padding: 0.45rem; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 0.5rem; background: #1f252b; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32); } .rxy-search-select.open .rxy-search-select-menu { display: block; } .rxy-search-select-search { margin-bottom: 0.4rem; } .rxy-search-select-clear { display: block; margin: -0.15rem 0 0.25rem auto; padding: 0.1rem 0.25rem; color: #93c5fd; text-decoration: none; } .rxy-search-select-options { max-height: 240px; overflow-y: auto; } .rxy-search-select-option { display: block; width: 100%; padding: 0.4rem 0.55rem; border: 0; border-radius: 0.35rem; color: #e5edf6; background: transparent; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rxy-search-select-option:hover, .rxy-search-select-option.active, .rxy-search-select-option.keyboard-active { background: rgba(59, 130, 246, 0.18); color: #fff; } .rxy-search-select-option.keyboard-active { outline: 1px solid rgba(96, 165, 250, 0.85); outline-offset: -1px; } .rxy-search-select-empty { padding: 0.45rem 0.55rem; color: #94a3b8; font-size: 0.85rem; } [data-bs-theme="light"] .rxy-search-select-menu { border-color: rgba(15, 23, 42, 0.18); background: #fff; box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16); } [data-bs-theme="light"] .rxy-search-select-option { color: #1f2937; } [data-bs-theme="light"] .rxy-search-select-option:hover, [data-bs-theme="light"] .rxy-search-select-option.active, [data-bs-theme="light"] .rxy-search-select-option.keyboard-active { color: #111827; background: rgba(37, 99, 235, 0.12); } .rxy-column-picker { position: relative; } .rxy-column-picker-menu { min-width: 230px; max-height: 360px; overflow-y: auto; padding: 0.5rem; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 0.5rem; background: #1f252b; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.32); } .rxy-column-picker-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.38rem 0.45rem; margin: 0; border-radius: 0.35rem; color: #e5edf6; cursor: pointer; } .rxy-column-picker-option:hover { background: rgba(59, 130, 246, 0.16); } .rxy-column-picker-option input { margin: 0; } .rxy-calendar-btn, .rxy-hidden-datetime-picker { display: none !important; } .rxy-dt-picker { position: absolute; z-index: 100080; padding: 0.65rem; border: 1px solid rgba(148, 163, 184, 0.28); border-radius: 0.65rem; background: #151b22; color: #e5edf6; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42); font-family: var(--bs-body-font-family, Arial, sans-serif); direction: ltr; text-align: left; } .rxy-dt-picker-head, .rxy-dt-actions, .rxy-dt-time-row { display: flex; align-items: center; gap: 0.5rem; } .rxy-dt-picker-head { justify-content: space-between; margin-bottom: 0.55rem; } .rxy-dt-picker-title { font-weight: 700; letter-spacing: 0; color: #f8fafc; } .rxy-dt-weekdays, .rxy-dt-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; } .rxy-dt-weekdays span { color: #93a4b8; font-size: 0.72rem; text-align: center; padding: 0.2rem 0; } .rxy-dt-day, .rxy-dt-empty { min-width: 34px; height: 32px; } .rxy-dt-day { border: 0; border-radius: 0.42rem; background: transparent; color: #dbeafe; font-variant-numeric: tabular-nums; } .rxy-dt-day:hover { background: rgba(59, 130, 246, 0.18); color: #fff; } .rxy-dt-day.today { outline: 1px solid rgba(96, 165, 250, 0.55); } .rxy-dt-day.selected { background: #2563eb; color: #fff; } .rxy-dt-time-row { justify-content: space-between; margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px solid rgba(148, 163, 184, 0.18); } .rxy-dt-time-row label { margin: 0; color: #b8c4d5; font-size: 0.85rem; } .rxy-dt-time-row input { width: 86px; direction: ltr; text-align: center; border: 1px solid rgba(148, 163, 184, 0.32); border-radius: 0.42rem; background: #0f141a; color: #f8fafc; padding: 0.32rem 0.45rem; } .rxy-dt-actions { justify-content: flex-end; margin-top: 0.65rem; } .rxy-datetime-display { direction: ltr !important; text-align: left !important; font-variant-numeric: tabular-nums; cursor: pointer; padding-right: 2rem !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h.5A2.5 2.5 0 0 1 16 3.5v10a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 13.5v-10A2.5 2.5 0 0 1 2.5 1H3V.5a.5.5 0 0 1 .5-.5M1 4v9.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5V4z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 1rem 1rem; } /* Shared toolbar layout repair: viewport-positioned entity menus and stable report/Finance action rows. Filter values and request behavior are unchanged. */ .rxy-search-select-menu { position: fixed; z-index: 1095; top: 0; left: 0; min-width: 220px; width: 220px; max-width: min(520px, calc(100vw - 16px)); max-height: min(320px, calc(100vh - 16px)); overflow: hidden; overscroll-behavior: contain; } .rxy-search-select-options { max-height: min(240px, calc(100vh - 96px)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; } .card-body:has(> .traffic-report-toolbar), .card-body:has(> .traffic-report-toolbar-actions), .rxy-finance-filter-card > .card-body { overflow: visible; } .traffic-report-toolbar { min-width: 0; } .cdr-toolbar.traffic-report-toolbar > div { flex: 1 1 180px; max-width: 230px; } .cdr-toolbar.traffic-report-toolbar > div:has(.rxy-datetime-display) { flex-basis: 175px; max-width: 185px; } .cdr-toolbar.traffic-report-toolbar > div:has(.form-select:not(.rxy-search-select-toggle)) { flex-basis: 125px; max-width: 155px; } .cdr-toolbar.traffic-report-toolbar > div:has(input[id$="_f_q"]), .cdr-toolbar.traffic-report-toolbar > div:has(input[id$="_f_search"]) { flex-grow: 2; flex-basis: 300px; max-width: 420px; } .traffic-report-toolbar-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.55rem 1rem; min-width: 0; overflow: visible; } /* SMS Reports only: compact full-filtered-dataset totals above the table. */ .sms-report-kpi-summary { display: grid; grid-template-columns: repeat(5, minmax(128px, 1fr)); gap: 1px; margin: 0 0 0.75rem; overflow: hidden; border: 1px solid var(--bs-border-color); border-radius: 0.5rem; background: var(--bs-border-color); } .sms-report-kpi-item { min-width: 0; padding: 0.65rem 0.85rem; background: var(--bs-tertiary-bg, var(--bs-body-bg)); } .sms-report-kpi-label { display: block; margin-bottom: 0.15rem; overflow: hidden; color: var(--bs-secondary-color); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.035em; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .sms-report-kpi-value { display: block; overflow: hidden; color: var(--bs-body-color); font-size: 1.05rem; font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .sms-report-kpi-value.is-zero { color: var(--bs-secondary-color); } .sms-report-kpi-profit .sms-report-kpi-value.is-positive { color: var(--bs-success); } .sms-report-kpi-profit .sms-report-kpi-value.is-negative { color: var(--bs-danger); } @media (max-width: 991.98px) { .sms-report-kpi-summary { grid-template-columns: repeat(3, minmax(128px, 1fr)); } } @media (max-width: 575.98px) { .sms-report-kpi-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sms-report-kpi-label { white-space: normal; } } .traffic-report-secondary-controls, .traffic-report-primary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; } .traffic-report-primary-actions { justify-content: flex-end; margin-inline-start: auto; } .traffic-report-page-size { width: 110px; min-width: 110px; } .traffic-report-local-search { width: min(260px, 100%); } .rxy-finance-filter-card .row > .col-auto:has(.rxy-search-select) { flex: 1 1 190px; min-width: 190px; max-width: 230px; } .rxy-finance-filter-card .row > .col-auto:has(.rxy-datetime-display) { flex: 0 1 180px; min-width: 170px; } .rxy-finance-filter-card .row > .col-auto:has(> .btn) { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 0.4rem; } @media (max-width: 768px) { .cdr-toolbar.traffic-report-toolbar > div, .cdr-toolbar.traffic-report-toolbar > div:has(.rxy-datetime-display), .cdr-toolbar.traffic-report-toolbar > div:has(.form-select:not(.rxy-search-select-toggle)), .cdr-toolbar.traffic-report-toolbar > div:has(input[id$="_f_q"]), .cdr-toolbar.traffic-report-toolbar > div:has(input[id$="_f_search"]) { flex: 1 1 100%; max-width: none; } .traffic-report-primary-actions { width: 100%; justify-content: flex-start; margin-inline-start: 0; } }