/*################################################################################ # DESIGN TOKENS — LIGHT THEME ################################################################################*/ :root { /* Typography */ --gs-font-base: 13px; --gs-font-small: 11px; --gs-font-family: "Inter", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --gs-line-height: 1.5; /* Brand Colors */ --gs-color-primary: #1f6ab3; --gs-color-primary-hover: #195a98; --gs-color-primary-active: #124574; --gs-color-primary-on: #ffffff; --gs-color-secondary: #9cc602; --gs-color-secondary-on: #142000; --gs-color-warning: #fab444; --gs-color-warning-on: #2b1b00; --gs-color-danger: #c93632; --gs-color-danger-on: #ffffff; --gs-color-dark: #1e293b; /* Text Colors */ --gs-color-text: #334155; --gs-color-text-secondary: #64748b; --gs-color-text-muted: #94a3b8; /* Background Colors */ --gs-color-bg: #f1f5f9; --gs-bg-body: #f1f5f9; --gs-bg-panel: #ffffff; --gs-bg-input: #ffffff; --gs-bg-input-hover: #f8fafc; --gs-bg-disabled: #e2e8f0; --gs-bg-subtle: #f1f5f9; --gs-bg-hover: #f1f5f9; /* Border Colors */ --gs-border-color: #e2e8f0; --gs-border-color-strong: #cbd5e1; /* Spacing */ --gs-s-1: 4px; --gs-s-2: 8px; --gs-s-3: 12px; --gs-s-4: 16px; --gs-s-5: 20px; --gs-s-6: 24px; --gs-s-7: 28px; --gs-s-8: 32px; /* Border Radius */ --gs-radius-xs: 3px; --gs-radius-sm: 6px; --gs-radius-md: 8px; --gs-radius-lg: 12px; --gs-radius-xl: 16px; --gs-radius-2xl: 20px; --gs-radius-pill: 9999px; /* Elevation Shadows */ --gs-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04); --gs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04); --gs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --gs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); --gs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.06); --gs-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.18); /* Glass System — Light Theme */ --gs-glass-bg: rgba(255, 255, 255, 0.78); --gs-glass-bg-strong: rgba(255, 255, 255, 0.92); --gs-glass-bg-panel: rgba(255, 255, 255, 0.85); --gs-glass-bg-dialog: rgba(255, 255, 255, 0.88); --gs-glass-border: rgba(255, 255, 255, 0.20); --gs-glass-border-strong: rgba(255, 255, 255, 0.30); --gs-glass-border-dialog: rgba(255, 255, 255, 0.40); --gs-glass-blur: blur(20px) saturate(180%); --gs-glass-blur-strong: blur(28px) saturate(200%); --gs-glass-blur-dialog: blur(24px) saturate(180%); --gs-glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.10); /* Layout Dimensions */ --gs-top-height: 48px; --gs-side-width: 360px; /* Accent Glow */ --gs-glow-primary: 0 0 0 3px rgba(43, 130, 212, 0.18); /* Focus Ring */ --gs-focus-ring: 0 0 0 3px rgba(43, 130, 212, 0.22), 0 0 0 1px rgba(43, 130, 212, 0.35); /* Transitions */ --gs-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --gs-transition-fast: 0.12s cubic-bezier(0.4, 0, 0.2, 1); --gs-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /*################################################################################ # DESIGN TOKENS — DARK THEME ################################################################################*/ :root[data-theme="dark"] { --gs-color-bg: #0f1117; --gs-bg-body: #0f1117; --gs-bg-panel: #16181f; --gs-bg-input: #1e2128; --gs-bg-input-hover: #252931; --gs-bg-disabled: #181b21; --gs-bg-subtle: #1a1d24; --gs-bg-hover: #22262e; --gs-border-color: #2a2f3a; --gs-border-color-strong: #3a4150; --gs-color-text: #e2e8f0; --gs-color-text-secondary: #94a3b8; --gs-color-text-muted: #64748b; --gs-color-primary: #5aadf7; --gs-color-primary-hover: #7ac2ff; --gs-color-primary-active: #3b9aed; --gs-color-primary-on: #061827; --gs-color-secondary: #b6d92b; --gs-color-secondary-on: #162000; --gs-color-warning: #f5b84f; --gs-color-warning-on: #2b1b00; --gs-color-danger: #ff6b66; --gs-color-danger-on: #260000; --gs-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.30); --gs-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.35), 0 1px 2px -1px rgba(0, 0, 0, 0.30); --gs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.40), 0 2px 4px -2px rgba(0, 0, 0, 0.35); --gs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.45), 0 4px 6px -4px rgba(0, 0, 0, 0.40); --gs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.55), 0 8px 10px -6px rgba(0, 0, 0, 0.50); --gs-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.70); --gs-glass-bg: rgba(22, 24, 31, 0.78); --gs-glass-bg-strong: rgba(22, 24, 31, 0.92); --gs-glass-bg-panel: rgba(22, 24, 31, 0.88); --gs-glass-bg-dialog: rgba(22, 24, 31, 0.95); --gs-glass-border: rgba(255, 255, 255, 0.07); --gs-glass-border-strong: rgba(255, 255, 255, 0.12); --gs-glass-border-dialog: rgba(255, 255, 255, 0.12); --gs-glass-blur-dialog: blur(30px); --gs-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.40); --gs-glow-primary: 0 0 0 3px rgba(59, 154, 237, 0.22); --gs-focus-ring: 0 0 0 3px rgba(59, 154, 237, 0.25), 0 0 0 1px rgba(59, 154, 237, 0.40); } /*################################################################################ # GLOBAL RESET & BASE ################################################################################*/ *, *::before, *::after { box-sizing: border-box; } .ui-jqgrid, .ui-jqgrid *, .ui-jqgrid *::before, .ui-jqgrid *::after { box-sizing: content-box; } .ui-jqgrid input, .ui-jqgrid select, .ui-jqgrid textarea, .ui-jqgrid button { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { height: 100%; margin: 0; padding: 0; font-size: var(--gs-font-base); font-family: var(--gs-font-family); line-height: var(--gs-line-height); color: var(--gs-color-text); background-color: var(--gs-bg-body); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a, a:hover { text-decoration: none; color: var(--gs-color-primary); } a:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); border-radius: var(--gs-radius-sm); } b, strong { font-weight: 600; } *:focus { outline: 0; box-shadow: none; } *:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); border-radius: var(--gs-radius-sm); } img { max-width: 100%; height: auto; } button { font-family: var(--gs-font-family); cursor: pointer; } input, textarea, select { font-family: var(--gs-font-family); } .clearfix { display: table; width: 100%; height: 100%; } /*################################################################################ # GLASS UTILITY ################################################################################*/ .gs-glass { background: var(--gs-glass-bg); backdrop-filter: var(--gs-glass-blur); -webkit-backdrop-filter: var(--gs-glass-blur); border: 1px solid var(--gs-glass-border); box-shadow: var(--gs-glass-shadow); } .gs-glass-strong { background: var(--gs-glass-bg-strong); backdrop-filter: var(--gs-glass-blur-strong); -webkit-backdrop-filter: var(--gs-glass-blur-strong); border: 1px solid var(--gs-glass-border-strong); box-shadow: var(--gs-glass-shadow); } @supports not (backdrop-filter: blur(20px)) { .gs-glass, .gs-glass-strong { background: var(--gs-bg-panel); } } /*################################################################################ # SURFACE & CARD UTILITIES ################################################################################*/ .gs-card { background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-sm); transition: box-shadow var(--gs-transition), transform var(--gs-transition), border-color var(--gs-transition); } .gs-card:hover { box-shadow: var(--gs-shadow-md); } .gs-card-elevated { background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-md); } .gs-section { padding: 16px 20px; border-bottom: 1px solid var(--gs-border-color); } .gs-section:last-child { border-bottom: none; } .gs-section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gs-color-text-muted); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--gs-border-color); } .gs-detail-list { display: flex; flex-direction: column; } .gs-detail-row { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--gs-border-color); gap: 12px; min-height: 32px; } .gs-detail-row:last-child { border-bottom: none; } .gs-detail-row .label { font-size: 12px; color: var(--gs-color-text-secondary); font-weight: 500; flex-shrink: 0; } .gs-detail-row .value { font-size: 13px; color: var(--gs-color-text); font-weight: 500; text-align: right; word-break: break-word; } /*################################################################################ # TYPOGRAPHY UTILITIES ################################################################################*/ .gs-text-xs { font-size: 11px; } .gs-text-sm { font-size: 12px; } .gs-text-base { font-size: 13px; } .gs-text-md { font-size: 14px; } .gs-text-lg { font-size: 16px; } .gs-text-xl { font-size: 18px; } .gs-text-muted { color: var(--gs-color-text-muted); } .gs-text-secondary { color: var(--gs-color-text-secondary); } .gs-text-primary { color: var(--gs-color-primary); } .gs-text-danger { color: var(--gs-color-danger); } .gs-text-warning { color: var(--gs-color-warning); } .gs-text-success { color: var(--gs-color-secondary); } .gs-font-medium { font-weight: 500; } .gs-font-semibold { font-weight: 600; } .gs-font-bold { font-weight: 700; } .gs-uppercase { text-transform: uppercase; letter-spacing: 0.5px; } /*################################################################################ # BUTTONS ################################################################################*/ input.button, input.button-32, button.button, button.button-32 { border: 1px solid var(--gs-border-color-strong); background-color: var(--gs-bg-panel); height: 34px; min-width: 100px; color: var(--gs-color-text); cursor: pointer; text-align: center; margin-bottom: 0; padding: 0 16px; border-radius: var(--gs-radius-md); font-family: var(--gs-font-family); font-weight: 500; font-size: var(--gs-font-base); transition: background-color var(--gs-transition-fast), border-color var(--gs-transition-fast), box-shadow var(--gs-transition-fast), transform var(--gs-transition-fast), color var(--gs-transition-fast); } input.button.icon, button.button.icon { text-align: left; padding-left: 36px; padding-right: 14px; background-repeat: no-repeat; background-position: 12px center; background-size: 14px 14px; } input.button-32 { height: 38px; padding: 0 16px; } input.button-32.icon-16 { text-align: left; padding-left: 40px; padding-right: 14px; background-repeat: no-repeat; background-position: 14px center; background-size: 16px 16px; } input.button.no-text.icon, button.button.no-text.icon { background-position: center center; padding: 0; min-width: 34px; } input.button:hover, input.button-32:hover, button.button:hover, button.button-32:hover { background-color: var(--gs-bg-hover); border-color: var(--gs-border-color-strong); } input.button:active, input.button-32:active, button.button:active, button.button-32:active { background-color: var(--gs-bg-hover); transform: translateY(1px); } input.button:disabled, input.button-32:disabled, button.button:disabled, button.button-32:disabled { border: 1px solid var(--gs-border-color); background-color: var(--gs-bg-disabled); color: var(--gs-color-text-muted); cursor: not-allowed; } input.button.primary, input.button-32.primary, button.button.primary, button.button-32.primary { background: var(--gs-color-primary); border-color: var(--gs-color-primary); color: var(--gs-color-primary-on); box-shadow: 0 1px 3px rgba(43, 130, 212, 0.30); } input.button.primary:hover, input.button-32.primary:hover, button.button.primary:hover, button.button-32.primary:hover { background: var(--gs-color-primary-hover); border-color: var(--gs-color-primary-hover); box-shadow: 0 2px 6px rgba(43, 130, 212, 0.40); transform: translateY(-1px); } input.button.primary:active, input.button-32.primary:active, button.button.primary:active, button.button-32.primary:active { background: var(--gs-color-primary-active); transform: translateY(0); box-shadow: 0 1px 2px rgba(43, 130, 212, 0.25); } input.button.success, input.button-32.success, button.button.success, button.button-32.success { background: var(--gs-color-secondary); border-color: var(--gs-color-secondary); color: var(--gs-color-secondary-on); } input.button.success:hover, input.button-32.success:hover, button.button.success:hover, button.button-32.success:hover { opacity: 0.92; transform: translateY(-1px); } input.button.danger, input.button-32.danger, button.button.danger, button.button-32.danger { background: var(--gs-color-danger); border-color: var(--gs-color-danger); color: var(--gs-color-danger-on); } input.button.danger:hover, input.button-32.danger:hover, button.button.danger:hover, button.button-32.danger:hover { opacity: 0.90; transform: translateY(-1px); } input.button.ghost, button.button.ghost { background: transparent; border-color: transparent; color: var(--gs-color-text-secondary); } input.button.ghost:hover, button.button.ghost:hover { background: var(--gs-bg-hover); border-color: var(--gs-border-color); color: var(--gs-color-text); } button.panel-button { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 4px; border-radius: 50%; cursor: pointer; transition: background-color var(--gs-transition-fast); overflow: visible; } button.panel-button img { display: block; padding: 6px; background: var(--gs-bg-panel); border-radius: 50%; border: 1px solid var(--gs-border-color); box-shadow: var(--gs-shadow-sm); transition: background-color var(--gs-transition-fast), border-color var(--gs-transition-fast), transform var(--gs-transition-fast), box-shadow var(--gs-transition-fast); margin: auto; } button.panel-button:hover { background: var(--gs-bg-hover); } button.panel-button:hover img { border-color: var(--gs-border-color-strong); transform: scale(1.05); box-shadow: var(--gs-shadow-md); } button.panel-button:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } button.panel-button:active img { transform: scale(0.97); box-shadow: var(--gs-shadow-xs); } button.panel-button[aria-pressed="true"] { background: rgba(43, 130, 212, 0.12); } button.panel-button[aria-pressed="true"] img { background: rgba(43, 130, 212, 0.12); border-color: rgba(43, 130, 212, 0.20); } .panel-button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; min-height: 32px; box-sizing: border-box; border: none; background: transparent; padding: 0; border-radius: 50%; cursor: pointer; line-height: normal; vertical-align: middle; overflow: visible; } .panel-button > img { display: block; flex: 0 0 auto; width: 16px !important; height: 16px !important; max-width: none; padding: 0; margin: auto; object-fit: contain; opacity: 1; visibility: visible; align-self: center; } div.panel-button { background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); box-shadow: var(--gs-shadow-sm); } div.panel-button:hover { border-color: var(--gs-border-color-strong); background: var(--gs-bg-hover); box-shadow: var(--gs-shadow-md); } div.panel-button img { display: block; padding: 0; background: transparent; border: none; box-shadow: none; } .graph-status-live { display: inline-block; min-width: 60px; font-size: 11px; font-weight: 600; color: var(--gs-color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; } .gs-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--gs-radius-md); border: 1px solid transparent; background: transparent; color: var(--gs-color-text-secondary); transition: all var(--gs-transition-fast); cursor: pointer; } .gs-icon-btn:hover { background: var(--gs-bg-hover); border-color: var(--gs-border-color); color: var(--gs-color-text); } .gs-icon-btn.active { background: rgba(43, 130, 212, 0.10); border-color: rgba(43, 130, 212, 0.25); color: var(--gs-color-primary); } .gs-icon-btn.danger:hover { background: rgba(255, 78, 73, 0.08); border-color: rgba(255, 78, 73, 0.20); color: var(--gs-color-danger); } /*################################################################################ # ICONS ################################################################################*/ .icon-new { background-image: url(images/plus.svg); } .icon-save { background-image: url(images/save.svg); } .icon-follow { background-image: url(images/follow.svg); } .icon-street { background-image: url(images/street-view.svg); } .icon-create { background-image: url(images/create.svg); } .icon-share { background-image: url(images/share.svg); } .icon-show { background-image: url(images/eye.svg); } .icon-hide { background-image: url(images/eye-crossed.svg); } .icon-close { background-image: url(images/remove.svg); } .icon-edit { background-image: url(images/edit.svg); } .icon-search { background-image: url(images/search2.svg); } .icon-time { background-image: url(images/history.svg); } .icon-refresh { background-image: url(images/refresh.svg); } .icon-check { background-image: url(images/tick.svg); } .icon-play { background-image: url(images/play.svg); } .icon-import { background-image: url(images/import.svg); } .icon-export { background-image: url(images/export.svg); } .icon-arrow-right { background-image: url(images/arrow-right.svg); } .icon-import-arrow { background-image: url(images/import-arrow.svg); } .icon-export-arrow { background-image: url(images/export-arrow.svg); } .icon-import-export { background-image: url(images/import-export.svg); } .icon-upload { background-image: url(images/upload.svg); } .icon-erase { background-image: url(images/erase.svg); } .icon-tick { background-image: url(images/tick.svg); } .icon-remove3 { background-image: url(images/remove3.svg); } .icon-action2 { background-image: url(images/action2.svg); } .icon-key { background-image: url(images/key.svg); } .icon-marker { background-image: url(images/marker.svg); } .icon-markers { background-image: url(images/markers.svg); } .icon-routes { background-image: url(images/routes.svg); } .icon-zones { background-image: url(images/zones.svg); } .icon-kml { background-image: url(images/kml.svg); } .icon-tasks { background-image: url(images/tasks.svg); } .icon-maintenance { background-image: url(images/maintenance.svg); } .icon-gallery { background-image: url(images/gallery.svg); } .icon-time { background-image: url(images/time.svg); } .icon-warning { background-image: url(images/warning.svg); } .icon-nearest-marker { background-image: url(images/nearest-marker.svg); } .icon-nearest-zone { background-image: url(images/nearest-zone.svg); } .icon-address { background-image: url(images/address.svg); } .icon-altitude { background-image: url(images/altitude.svg); } .icon-angle { background-image: url(images/angle.svg); } .icon-speed { background-image: url(images/speed.svg); } .icon-engine-hours { background-image: url(images/engine-hours.svg); } .icon-odometer { background-image: url(images/odometer.svg); } .icon-model { background-image: url(images/model.svg); } .icon-plate-number { background-image: url(images/plate-number.svg); } .icon-sim { background-image: url(images/sim.svg); } .icon-vin { background-image: url(images/vin.svg); } .icon-user { background-image: url(images/user.svg); } .icon-trailer { background-image: url(images/trailer.svg); } .icon-default-custom-fields { background-image: url(images/default-custom-fields.svg); } .icon-default-sensor { background-image: url(images/default-sensor.svg); } .icon-status { background-image: url(images/status.svg); } .icon-battery-lev-0 { background-image: url(images/battery-lev-0.svg); } .icon-battery-lev-1 { background-image: url(images/battery-lev-1.svg); } .icon-battery-lev-2 { background-image: url(images/battery-lev-2.svg); } .icon-battery-lev-3 { background-image: url(images/battery-lev-3.svg); } .icon-di { background-image: url(images/di.svg); } .icon-do { background-image: url(images/do.svg); } .icon-fuel { background-image: url(images/fuel.svg); } .icon-engine { background-image: url(images/engine.svg); } .icon-gsm { background-image: url(images/gsm.svg); } .icon-gps { background-image: url(images/gps.svg); } .icon-temperature { background-image: url(images/temperature.svg); } .icon-billing { background-image: url(images/billing.svg); } .leaflet-control-zoom-in, .leaflet-control-zoom-out, .leaflet-control a span, .history-view-control span { display: table; width: 100%; height: 100%; background-size: 12px 12px; background-repeat: no-repeat; background-position: center center; } .history-view-control span.icon-close { background-size: 10px 10px; } .leaflet-control a span.disabled, .history-view-control a span.disabled { opacity: 0.5; } .icon-route-route { background-image: url(images/route-route.svg); } .icon-route-snap { background-image: url(images/route-snap.svg); } .icon-route-arrow { background-image: url(images/route-arrow.svg); } .icon-route-data-point { background-image: url(images/route-data-point.svg); } .icon-route-event { background-image: url(images/route-event.svg); } .icon-route-stop { background-image: url(images/route-stop.svg); } .leaflet-control-zoom-in { background-image: url(images/plus.svg); } .leaflet-control-zoom-out { background-image: url(images/minus.svg); } .icon-objects { background-image: url(images/object-arrow.svg); } .icon-text { background-image: url(images/text.svg); } .icon-clusters { background-image: url(images/clusters.svg); } .icon-traffic { background-image: url(images/traffic.svg); } .icon-fit-objects { background-image: url(images/fit.svg); } .icon-ruler { background-image: url(images/ruler.svg); } .icon-measure { background-image: url(images/measure.svg); } .icon-places-marker, .icon-object-edit { position: relative; width: 44px; } .icon-custom-delete { position: absolute; bottom: 0px; right: 0px; } /*################################################################################ # INPUTS & SELECTS ################################################################################*/ input[type="checkbox"] { height: 18px; width: 18px; margin: 4px 0; appearance: none; -webkit-appearance: none; background-color: var(--gs-bg-input); border: 1px solid var(--gs-border-color-strong); border-radius: var(--gs-radius-xs); cursor: pointer; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked { background-color: var(--gs-color-primary); border-color: var(--gs-color-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 14px 14px; } input[type="checkbox"]:hover { border-color: var(--gs-color-primary); } input[type="checkbox"]:focus-visible { box-shadow: var(--gs-focus-ring); outline: none; } input[type="checkbox"]:disabled { background-color: var(--gs-bg-disabled); border-color: var(--gs-border-color); cursor: not-allowed; } input.inputbox, textarea.inputbox { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-md); font-size: var(--gs-font-base); font-family: var(--gs-font-family); color: var(--gs-color-text); background: var(--gs-bg-input); transition: border-color var(--gs-transition), box-shadow var(--gs-transition), background-color var(--gs-transition); } textarea.inputbox { height: auto; padding: 8px 10px; resize: vertical; min-height: 80px; } input.inputbox:hover, textarea.inputbox:hover { background-color: var(--gs-bg-input-hover); border-color: var(--gs-border-color-strong); } input.inputbox:focus, textarea.inputbox:focus { background-color: var(--gs-bg-input-hover); border-color: var(--gs-color-primary); box-shadow: var(--gs-focus-ring); outline: none; } input.inputbox:disabled, textarea.inputbox:disabled { border: 1px solid var(--gs-border-color); background-color: var(--gs-bg-disabled); color: var(--gs-color-text-muted); cursor: not-allowed; } input.inputbox-calendar, input.inputbox-calendar-mmdd { color: var(--gs-color-text); border: 1px solid var(--gs-border-color-strong); background: var(--gs-bg-input) url("images/calendar.svg") right 10px center no-repeat; background-size: 14px 14px; cursor: pointer; } input.inputbox-calendar:disabled, input.inputbox-calendar-mmdd:disabled { background: var(--gs-bg-disabled) url("images/calendar.svg") right 10px center no-repeat; background-size: 14px 14px; cursor: not-allowed; } input.inputbox-search { width: 100%; height: 36px; text-indent: 36px; background: var(--gs-bg-input) url("images/search.svg") 12px center no-repeat; background-size: 15px 15px; float: left; border-radius: var(--gs-radius-pill); border: 1px solid var(--gs-border-color); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04); font-size: var(--gs-font-base); font-weight: 500; transition: border-color var(--gs-transition), box-shadow var(--gs-transition), background-color var(--gs-transition); } input.inputbox-search:hover { background-color: var(--gs-bg-input-hover); border-color: var(--gs-border-color-strong); } input.inputbox-search:focus { background-color: var(--gs-bg-input-hover); border-color: var(--gs-color-primary); box-shadow: var(--gs-focus-ring), inset 0 1px 3px rgba(0, 0, 0, 0.04); } select, select.select { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-md); font-size: var(--gs-font-base); font-family: var(--gs-font-family); color: var(--gs-color-text); background: var(--gs-bg-input); cursor: pointer; transition: border-color var(--gs-transition), box-shadow var(--gs-transition), background-color var(--gs-transition); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; } select:hover, select.select:hover { background-color: var(--gs-bg-input-hover); border-color: var(--gs-border-color-strong); } select:focus, select.select:focus { border-color: var(--gs-color-primary); box-shadow: var(--gs-focus-ring); outline: none; } select:disabled, select.select:disabled { border: 1px solid var(--gs-border-color); background-color: var(--gs-bg-disabled); color: var(--gs-color-text-muted); cursor: not-allowed; } select optgroup { font-style: normal; font-weight: 600; color: var(--gs-color-text); } select option { font-family: var(--gs-font-family); color: var(--gs-color-text); } ::-webkit-input-placeholder { color: #9ca3af; } ::-moz-placeholder { color: #9ca3af; } :-ms-input-placeholder { color: #9ca3af; } :-moz-placeholder { color: #9ca3af; } :root[data-theme="dark"] ::-webkit-input-placeholder { color: var(--gs-color-text-muted); } :root[data-theme="dark"] ::-moz-placeholder { color: var(--gs-color-text-muted); } :root[data-theme="dark"] :-ms-input-placeholder { color: var(--gs-color-text-muted); } :root[data-theme="dark"] :-moz-placeholder { color: var(--gs-color-text-muted); } /*################################################################################ # LOADING & BLOCKING PANELS ################################################################################*/ #loading_panel { background-color: var(--gs-bg-panel); position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 99999; display: flex; align-items: center; justify-content: center; } #loading_data_panel { background-color: var(--gs-bg-panel); opacity: 0.7; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 99999; display: flex; align-items: center; justify-content: center; } #blocking_panel { background-color: rgba(15, 23, 42, 0.40); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: none; z-index: 99999; } #blocking_panel_text { background: var(--gs-bg-panel); padding: 32px; border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-xl); text-align: center; max-width: 400px; margin: 0 auto; } /*################################################################################ # LOADER / SPINNER ################################################################################*/ .loader { width: 70px; display: block; margin: 25px auto; } .loader span { float: left; vertical-align: middle; width: 8px; height: 8px; margin-right: 2px; background: var(--gs-color-primary); opacity: 0.1; border-radius: 50%; animation: loader 0.7s infinite alternate; } .loader span:nth-of-type(2) { animation-delay: 0.1s; } .loader span:nth-of-type(3) { animation-delay: 0.2s; } .loader span:nth-of-type(4) { animation-delay: 0.3s; } .loader span:nth-of-type(5) { animation-delay: 0.4s; } .loader span:nth-of-type(6) { animation-delay: 0.5s; } .loader span:nth-of-type(7) { animation-delay: 0.6s; } @keyframes loader { 0% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.1; transform: scale(1); } } .spinner { font-size: 2px; width: 3px; height: 3px; border-radius: 50%; -webkit-animation: load5 1.1s infinite ease; animation: load5 1.1s infinite ease; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); } @keyframes load5 { 0%, 100% { box-shadow: 0em -2.6em 0em 0em #a7a7a7, 1.8em -1.8em 0 0em rgba(167,167,167, 0.2), 2.5em 0em 0 0em rgba(167,167,167, 0.2), 1.75em 1.75em 0 0em rgba(167,167,167, 0.2), 0em 2.5em 0 0em rgba(167,167,167, 0.2), -1.8em 1.8em 0 0em rgba(167,167,167, 0.2), -2.6em 0em 0 0em rgba(167,167,167, 0.5), -1.8em -1.8em 0 0em rgba(167,167,167, 0.7); } 12.5% { box-shadow: 0em -2.6em 0em 0em rgba(167,167,167, 0.7), 1.8em -1.8em 0 0em #a7a7a7, 2.5em 0em 0 0em rgba(167,167,167, 0.2), 1.75em 1.75em 0 0em rgba(167,167,167, 0.2), 0em 2.5em 0 0em rgba(167,167,167, 0.2), -1.8em 1.8em 0 0em rgba(167,167,167, 0.2), -2.6em 0em 0 0em rgba(167,167,167, 0.2), -1.8em -1.8em 0 0em rgba(167,167,167, 0.5); } 25% { box-shadow: 0em -2.6em 0em 0em rgba(167,167,167, 0.5), 1.8em -1.8em 0 0em rgba(167,167,167, 0.7), 2.5em 0em 0 0em #a7a7a7, 1.75em 1.75em 0 0em rgba(167,167,167, 0.2), 0em 2.5em 0 0em rgba(167,167,167, 0.2), -1.8em 1.8em 0 0em rgba(167,167,167, 0.2), -2.6em 0em 0 0em rgba(167,167,167, 0.2), -1.8em -1.8em 0 0em rgba(167,167,167, 0.2); } 37.5% { box-shadow: 0em -2.6em 0em 0em rgba(167,167,167, 0.2), 1.8em -1.8em 0 0em rgba(167,167,167, 0.5), 2.5em 0em 0 0em rgba(167,167,167, 0.7), 1.75em 1.75em 0 0em #a7a7a7, 0em 2.5em 0 0em rgba(167,167,167, 0.2), -1.8em 1.8em 0 0em rgba(167,167,167, 0.2), -2.6em 0em 0 0em rgba(167,167,167, 0.2), -1.8em -1.8em 0 0em rgba(167,167,167, 0.2); } 50% { box-shadow: 0em -2.6em 0em 0em rgba(167,167,167, 0.2), 1.8em -1.8em 0 0em rgba(167,167,167, 0.2), 2.5em 0em 0 0em rgba(167,167,167, 0.5), 1.75em 1.75em 0 0em rgba(167,167,167, 0.7), 0em 2.5em 0 0em #a7a7a7, -1.8em 1.8em 0 0em rgba(167,167,167, 0.2), -2.6em 0em 0 0em rgba(167,167,167, 0.2), -1.8em -1.8em 0 0em rgba(167,167,167, 0.2); } 62.5% { box-shadow: 0em -2.6em 0em 0em rgba(167,167,167, 0.2), 1.8em -1.8em 0 0em rgba(167,167,167, 0.2), 2.5em 0em 0 0em rgba(167,167,167, 0.2), 1.75em 1.75em 0 0em rgba(167,167,167, 0.5), 0em 2.5em 0 0em rgba(167,167,167, 0.7), -1.8em 1.8em 0 0em #a7a7a7, -2.6em 0em 0 0em rgba(167,167,167, 0.2), -1.8em -1.8em 0 0em rgba(167,167,167, 0.2); } 75% { box-shadow: 0em -2.6em 0em 0em rgba(167,167,167, 0.2), 1.8em -1.8em 0 0em rgba(167,167,167, 0.2), 2.5em 0em 0 0em rgba(167,167,167, 0.2), 1.75em 1.75em 0 0em rgba(167,167,167, 0.2), 0em 2.5em 0 0em rgba(167,167,167, 0.5), -1.8em 1.8em 0 0em rgba(167,167,167, 0.7), -2.6em 0em 0 0em #a7a7a7, -1.8em -1.8em 0 0em rgba(167,167,167, 0.2); } 87.5% { box-shadow: 0em -2.6em 0em 0em rgba(167,167,167, 0.2), 1.8em -1.8em 0 0em rgba(167,167,167, 0.2), 2.5em 0em 0 0em rgba(167,167,167, 0.2), 1.75em 1.75em 0 0em rgba(167,167,167, 0.2), 0em 2.5em 0 0em rgba(167,167,167, 0.2), -1.8em 1.8em 0 0em rgba(167,167,167, 0.5), -2.6em 0em 0 0em rgba(167,167,167, 0.7), -1.8em -1.8em 0 0em #a7a7a7; } } /*################################################################################ # DIMENSIONS ################################################################################*/ .width1 { width: 1%; } .width2 { width: 2%; } .width4 { width: 4%; } .width5 { width: 5%; } .width8 { width: 8%; } .width9 { width: 9%; } .width10 { width: 10%; } .width11 { width: 11%; } .width12 { width: 12%; } .width13 { width: 13%; } .width14 { width: 14%; } .width15-left { width: 15%; float: left; } .width15 { width: 15%; } .width16 { width: 16%; } .width17 { width: 17%; } .width18 { width: 18%; } .width19 { width: 19%; } .width195 { width: 19.5%; } .width20 { width: 20%; } .width21 { width: 21%; } .width235 { width: 23.5%; } .width24 { width: 24%; } .width245 { width: 24.5%; } .width25 { width: 25%; } .width27 { width: 27%; } .width28 { width: 28%; } .width29 { width: 29%; } .width30 { width: 30%; } .width31 { width: 31%; } .width33 { width: 33.33333%; } .width34 { width: 34%; } .width35 { width: 35%; } .width38 { width: 38%; } .width39 { width: 39%; } .width40 { width: 40%; } .width41 { width: 41%; } .width44 { width: 44%; } .width45 { width: 45%; } .width50 { width: 50%; } .width55 { width: 55%; } .width60 { width: 60%; } .width65 { width: 65%; } .width66 { width: 66%; } .width70 { width: 70%; } .width71 { width: 71%; } .width75 { width: 75%; } .width755 { width: 75.5%; } .width76 { width: 76%; } .width765 { width: 76.5%; } .width80 { width: 80%; } .width805 { width: 80.5%; } .width83 { width: 83%; } .width85 { width: 85%; } .width90 { width: 90%; } .width95 { width: 95%; } .width100 { width: 100%; } .width-1000 { max-width: 1000px; } /*################################################################################ # FLOATING AND SPACING ################################################################################*/ .float-left, .block { float: left; } .float-right { float: right; } .container { margin-right: 10px; } .container.last, .last .title-block, .container.last fieldset { margin-right: 0; } .container.prev { margin-left: 10px; } .absolute-right { position: absolute; right: 10px; top: 36px; margin: 0; } /*################################################################################ # TABLELESS STYLING ################################################################################*/ .row { margin-bottom: 12px; display: table; width: 100%; } .row2 { margin-bottom: 8px; display: table; width: 100%; text-align: left; line-height: 1.4; font-size: 0; } .row2 > div { display: inline-block; vertical-align: middle; font-size: var(--gs-font-base); } .row2.empty, .row2.text { height: 32px; } .row2.right { text-align: right; } .row3 { margin-bottom: 14px; display: table; width: 100%; line-height: 1.4; font-size: 0; } .row3 > div { display: inline-block; vertical-align: middle; font-size: var(--gs-font-base); } .row4 { margin-bottom: 0; display: table; width: 100%; text-align: left; line-height: 14px; font-size: 0; } .row4 > div { display: inline-block; vertical-align: middle; font-size: var(--gs-font-base); } .scroll-y { height: 100%; padding-right: 5px; overflow-y: scroll; } .title-block { margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--gs-border-color); font-weight: 600; font-size: 13px; color: var(--gs-color-text); } .center-middle { vertical-align: middle; text-align: center; } .table { display: table; width: 100%; height: 100%; } .table-cell { display: table-cell; } .info { padding-bottom: 15px; height: 35px; display: table-cell; vertical-align: middle; } .info2 { height: 22px; display: table-cell; vertical-align: middle; } .subinfo { color: #949494; line-height: 12px; } .logo { border: 0; width: 250px; height: 56px; } .logo_small { border: 0; width: 32px; height: 32px; } .favicon { border: 0; width: 32px; height: 32px; } /*################################################################################ # TOP PANEL ################################################################################*/ #top_panel { height: var(--gs-top-height); background: var(--gs-glass-bg); backdrop-filter: var(--gs-glass-blur); -webkit-backdrop-filter: var(--gs-glass-blur); border-bottom: 1px solid var(--gs-glass-border); box-shadow: var(--gs-shadow-sm); z-index: 200; transition: background-color var(--gs-transition-slow), border-color var(--gs-transition-slow); display: flex; justify-content: space-between; align-items: center; overflow: visible; } @supports not (backdrop-filter: blur(20px)) { #top_panel { background: var(--gs-bg-panel); } } #top_panel img { display: block; width: 16px; height: 16px; padding: 0; } /* ===== Zones ===== */ #top_panel .tp-zone { display: flex; align-items: center; height: 100%; gap: 6px; } #top_panel .tp-zone-left { flex: 1 1 auto; min-width: 0; padding: 0 6px; overflow: visible; } #top_panel .tp-zone-right { flex-shrink: 0; padding: 0 6px 0 4px; gap: 8px; } /* ===== Brand ===== */ #top_panel .tp-brand { display: flex; align-items: center; flex-shrink: 0; } #top_panel .tp-brand button { display: flex; align-items: center; padding: 0 6px; height: 34px; border: 1px solid transparent; border-radius: var(--gs-radius-md); background: transparent; cursor: pointer; transition: all var(--gs-transition-fast); } #top_panel .tp-brand button:hover { background: var(--gs-bg-hover); border-color: var(--gs-border-color); } #top_panel .tp-brand img { width: 22px; height: 22px; } #top_panel .tp-brand-help a { display: flex; align-items: center; gap: 6px; padding: 0 8px; height: 32px; color: var(--gs-color-text-muted); font-size: 11px; text-decoration: none; border-radius: var(--gs-radius-md); border: 1px solid transparent; transition: all var(--gs-transition-fast); } #top_panel .tp-brand-help a:hover { color: var(--gs-color-text); background: var(--gs-bg-hover); border-color: var(--gs-border-color); } /* ===== Segmented primary nav ===== */ #top_panel .tp-segmented { display: flex; align-items: center; background: var(--gs-bg-subtle); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-lg); padding: 3px; gap: 2px; flex-shrink: 0; } #top_panel .tp-segmented-item { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 28px; font-size: 12px; font-weight: 500; color: var(--gs-color-text-secondary); background: transparent; border: none; border-radius: var(--gs-radius-md); cursor: pointer; transition: all var(--gs-transition-fast); white-space: nowrap; position: relative; } #top_panel .tp-segmented-item:hover { color: var(--gs-color-text); background: var(--gs-bg-panel); } #top_panel .tp-segmented-item.active { color: var(--gs-color-primary-on); background: var(--gs-color-primary); box-shadow: var(--gs-shadow-sm); font-weight: 600; } #top_panel .tp-segmented-item.active:hover { background: var(--gs-color-primary-hover); } #top_panel .tp-segmented-item:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } #top_panel .tp-segmented-item img { opacity: 0.85; } #top_panel .tp-segmented-item.active img { filter: brightness(0) invert(1); opacity: 1; } /* ===== Menu trigger button ===== */ #top_panel .tp-menu-trigger { flex-shrink: 0; display: flex; align-items: center; } #top_panel .tp-menu-trigger button { display: flex; align-items: center; gap: 4px; padding: 0 12px; height: 32px; font-size: 12px; font-weight: 500; color: var(--gs-color-text-secondary); background: transparent; border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-lg); cursor: pointer; transition: all var(--gs-transition-fast); white-space: nowrap; } #top_panel .tp-menu-trigger button:hover { color: var(--gs-color-text); background: var(--gs-bg-hover); border-color: var(--gs-border-color-strong); } #top_panel .tp-menu-trigger button[aria-expanded="true"] { color: var(--gs-color-primary); background: rgba(43, 130, 212, 0.10); border-color: rgba(43, 130, 212, 0.30); } #top_panel .tp-menu-caret { transition: transform var(--gs-transition-fast); } #top_panel .tp-menu-trigger button[aria-expanded="true"] .tp-menu-caret { transform: rotate(180deg); } /* ===== Badges ===== */ .tp-badge { font-size: 10px; line-height: 14px; height: 14px; background: var(--gs-color-danger); color: #fff; padding: 1px 5px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--gs-radius-pill); font-weight: 700; min-width: 18px; } .app-menu-item.billing-btn .tp-badge { background: rgba(20, 32, 0, 0.25); color: var(--gs-color-secondary-on); } /* ===== App menu overlay (mismo patron que cmdk, al nivel body) ===== */ .app-menu-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: app-menu-fade-in 0.12s ease-out; } @keyframes app-menu-fade-in { from { opacity: 0; } to { opacity: 1; } } .app-menu-overlay[hidden] { display: none; } .app-menu-panel { width: 100%; max-width: 720px; background: var(--gs-glass-bg-strong); backdrop-filter: var(--gs-glass-blur-strong); -webkit-backdrop-filter: var(--gs-glass-blur-strong); border: 1px solid var(--gs-glass-border-strong); border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-2xl); overflow: hidden; animation: app-menu-slide-in 0.18s cubic-bezier(0.4, 0, 0.2, 1); padding: 14px; } @keyframes app-menu-slide-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .app-menu-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; } .app-menu-col { padding: 4px; min-width: 0; } .app-menu-heading { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--gs-color-text-muted); padding: 6px 8px 8px; } .app-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--gs-radius-md); cursor: pointer; color: var(--gs-color-text-secondary); font-size: 13px; font-weight: 500; transition: all var(--gs-transition-fast); } .app-menu-item img { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.85; } .app-menu-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-menu-item:hover, .app-menu-item:focus-visible { background: var(--gs-bg-hover); color: var(--gs-color-text); outline: none; } .app-menu-item:hover img { opacity: 1; } .app-menu-item.cpanel-btn { color: var(--gs-color-warning-on); } .app-menu-item.cpanel-btn:hover { background: var(--gs-color-warning); color: var(--gs-color-warning-on); } .app-menu-item.cpanel-btn img { filter: brightness(0) invert(1); } .app-menu-item.billing-btn { color: var(--gs-color-secondary-on); } .app-menu-item.billing-btn:hover { background: var(--gs-color-secondary); color: var(--gs-color-secondary-on); } .app-menu-item.billing-btn img { filter: brightness(0) invert(1); } .app-menu-item.logout-btn { color: var(--gs-color-danger); } .app-menu-item.logout-btn:hover { background: var(--gs-color-danger); color: var(--gs-color-danger-on); } .app-menu-item.logout-btn img { filter: none; } .app-menu-item.logout-btn:hover img { filter: brightness(0) invert(1); } .app-menu-separator { height: 1px; background: var(--gs-border-color); margin: 6px 8px; } :root[data-theme="dark"] .app-menu-item { color: var(--gs-color-text-secondary); } :root[data-theme="dark"] .app-menu-overlay { background: rgba(0, 0, 0, 0.65); } @media (max-width: 700px) { .app-menu-grid { grid-template-columns: 1fr; } .app-menu-panel { max-width: 90vw; } } .app-menu-header { display: flex; align-items: center; justify-content: flex-end; margin: -6px -6px 4px 0; } .app-menu-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--gs-radius-md); background: var(--gs-bg-subtle); color: var(--gs-color-text-muted); cursor: pointer; transition: all var(--gs-transition-fast); flex-shrink: 0; } .app-menu-close:hover { background: var(--gs-bg-hover); color: var(--gs-color-text); } /* ===== Primary nav (dentro del app-menu-panel) ===== */ .app-menu-panel .app-menu-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--gs-border-color); } .app-menu-panel .tp-segmented-item { width: 100%; text-align: left; background: transparent; border: none; font: inherit; } .app-menu-panel .tp-segmented-item.active { background: var(--gs-bg-hover); color: var(--gs-color-primary); } .app-menu-panel .tp-segmented-item.active img { opacity: 1; } /* ===== Command palette trigger ===== */ #top_panel .tp-cmdk-trigger { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 32px; min-width: 180px; background: var(--gs-bg-subtle); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-lg); color: var(--gs-color-text-muted); font-size: 12px; cursor: pointer; transition: all var(--gs-transition-fast); } #top_panel .tp-cmdk-trigger:hover { color: var(--gs-color-text); background: var(--gs-bg-panel); border-color: var(--gs-border-color-strong); box-shadow: var(--gs-shadow-sm); } #top_panel .tp-cmdk-trigger svg { flex-shrink: 0; } #top_panel .tp-cmdk-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #top_panel .tp-cmdk-kbd { font-family: var(--gs-font-family); font-size: 10px; font-weight: 600; color: var(--gs-color-text-muted); background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-xs); padding: 1px 5px; line-height: 1.4; flex-shrink: 0; } /* ===== Utility group (theme + language) ===== */ #top_panel .tp-group-utility { display: flex; align-items: center; gap: 4px; } #top_panel .select-language { padding: 4px 6px; } #top_panel .select-language select.lang-select { height: 30px; border-radius: var(--gs-radius-md); font-size: 11px; padding: 0 24px 0 10px; background-position: right 6px center; } #top_panel .select-language select.lang-select { appearance: none; -webkit-appearance: none; background-color: var(--gs-bg-input); border: 1px solid var(--gs-border-color); color: var(--gs-color-text); cursor: pointer; background-image: url(images/arrow-bottom.svg); background-repeat: no-repeat; background-size: 12px 12px; } #top_panel .select-language select.lang-select:hover { border-color: var(--gs-border-color-strong); background-color: var(--gs-bg-input-hover); } #top_panel .select-language select.lang-select:focus { outline: none; border-color: var(--gs-color-primary); box-shadow: var(--gs-focus-ring); } .theme-toggle { margin: 0; padding: 0; } .theme-toggle button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: var(--gs-radius-md); border: 1px solid transparent; transition: all var(--gs-transition-fast); background: transparent; cursor: pointer; } .theme-toggle .theme-icon { display: flex; align-items: center; justify-content: center; color: var(--gs-color-text-secondary); transition: color var(--gs-transition), transform var(--gs-transition); } .theme-toggle button:hover { background: var(--gs-bg-hover); border-color: var(--gs-border-color); } .theme-toggle button:hover .theme-icon { color: var(--gs-color-primary); } .theme-toggle button:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } @keyframes rotate-sun { 0% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } } @keyframes rotate-moon { 0% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } } :root[data-theme="dark"] .theme-toggle .theme-icon svg { animation: rotate-moon 0.4s ease-in-out; } /* ===== Avatar (static) ===== */ #top_panel .tp-avatar-wrap { flex-shrink: 0; display: flex; align-items: center; } #top_panel .tp-avatar-static { display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 34px; background: var(--gs-bg-subtle); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-pill); } #top_panel .tp-avatar-static img { width: 22px; height: 22px; border-radius: 50%; background: var(--gs-color-primary); padding: 3px; filter: brightness(0) invert(1); } #top_panel .tp-avatar-static .tp-avatar-name { font-size: 12px; font-weight: 600; color: var(--gs-color-text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ===== Command palette overlay ===== */ .cmdk-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; animation: cmdk-fade-in 0.12s ease-out; } @keyframes cmdk-fade-in { from { opacity: 0; } to { opacity: 1; } } .cmdk-overlay[hidden] { display: none; } .cmdk-dialog { width: 100%; max-width: 640px; background: var(--gs-glass-bg-strong); backdrop-filter: var(--gs-glass-blur-strong); -webkit-backdrop-filter: var(--gs-glass-blur-strong); border: 1px solid var(--gs-glass-border-strong); border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-2xl); overflow: hidden; animation: cmdk-slide-in 0.18s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes cmdk-slide-in { from { opacity: 0; transform: translateY(-12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .cmdk-input-wrap { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--gs-border-color); } .cmdk-input-icon { color: var(--gs-color-text-muted); flex-shrink: 0; } .cmdk-input { flex: 1; border: none; outline: none; background: transparent; font-size: 15px; font-family: var(--gs-font-family); color: var(--gs-color-text); padding: 4px 0; } .cmdk-input::placeholder { color: var(--gs-color-text-muted); } .cmdk-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--gs-radius-md); background: var(--gs-bg-subtle); color: var(--gs-color-text-muted); cursor: pointer; transition: all var(--gs-transition-fast); flex-shrink: 0; } .cmdk-close:hover { background: var(--gs-bg-hover); color: var(--gs-color-text); } .cmdk-results { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; scrollbar-width: thin; } .cmdk-results::-webkit-scrollbar { width: 6px; } .cmdk-results::-webkit-scrollbar-thumb { background: var(--gs-border-color-strong); border-radius: 3px; } .cmdk-results:empty::after { content: attr(data-empty); display: block; padding: 24px; text-align: center; color: var(--gs-color-text-muted); font-size: 13px; } .cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--gs-radius-md); cursor: pointer; color: var(--gs-color-text-secondary); font-size: 13px; transition: background var(--gs-transition-fast); } .cmdk-item img, .cmdk-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; } .cmdk-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cmdk-item-category { font-size: 10px; color: var(--gs-color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; flex-shrink: 0; } .cmdk-item.selected, .cmdk-item:hover { background: var(--gs-color-primary); color: var(--gs-color-primary-on); } .cmdk-item.selected img, .cmdk-item.selected svg, .cmdk-item:hover img, .cmdk-item:hover svg { opacity: 1; filter: brightness(0) invert(1); } .cmdk-item.selected .cmdk-item-category, .cmdk-item:hover .cmdk-item-category { color: rgba(255, 255, 255, 0.7); } .cmdk-footer { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--gs-border-color); font-size: 11px; color: var(--gs-color-text-muted); background: var(--gs-bg-subtle); } .cmdk-footer kbd { font-family: var(--gs-font-family); font-size: 10px; font-weight: 600; background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-xs); padding: 1px 5px; margin-right: 4px; color: var(--gs-color-text-secondary); } /* ===== Dark theme adjustments for new menu ===== */ :root[data-theme="dark"] #top_panel .tp-segmented { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); } :root[data-theme="dark"] #top_panel .tp-segmented-item:hover { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] #top_panel .tp-cmdk-trigger { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); } :root[data-theme="dark"] #top_panel .tp-cmdk-kbd { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } :root[data-theme="dark"] #top_panel .tp-avatar { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); } :root[data-theme="dark"] .cmdk-overlay { background: rgba(0, 0, 0, 0.65); } :root[data-theme="dark"] .cmdk-close { background: rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .cmdk-footer { background: rgba(255, 255, 255, 0.04); } :root[data-theme="dark"] .cmdk-footer kbd { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); } /*################################################################################ # SIDE PANEL ################################################################################*/ #side_panel { position: absolute; top: var(--gs-top-height); bottom: 0; width: var(--gs-side-width); background: var(--gs-glass-bg-panel); backdrop-filter: var(--gs-glass-blur); -webkit-backdrop-filter: var(--gs-glass-blur); border-right: 1px solid var(--gs-glass-border); box-shadow: var(--gs-shadow-md); z-index: 200; transition: background-color var(--gs-transition-slow), border-color var(--gs-transition-slow); } @supports not (backdrop-filter: blur(20px)) { #side_panel { background: var(--gs-bg-panel); } } #side_panel > ul { display: flex; list-style: none; margin: 0; padding: 8px; gap: 4px; background: var(--gs-bg-subtle); border-bottom: 1px solid var(--gs-border-color); } #side_panel > ul li { flex: 1; text-align: center; } #side_panel > ul li { flex: 1; text-align: center; } #side_panel > ul li button { display: block; width: 100%; padding: 8px 6px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gs-color-text-secondary); border-radius: var(--gs-radius-md); border: 1px solid transparent; transition: all var(--gs-transition-fast); background: transparent; cursor: pointer; } #side_panel > ul li button:hover { color: var(--gs-color-text); background: var(--gs-bg-hover); border-color: var(--gs-border-color); } #side_panel > ul li button[aria-selected="true"], #side_panel > ul li button.active { color: var(--gs-color-primary); background: var(--gs-bg-panel); border-color: var(--gs-border-color); font-weight: 600; box-shadow: var(--gs-shadow-sm); } #side_panel > ul li button:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } #side_panel_objects, #side_panel_events, #side_panel_places, #side_panel_history, #side_panel_places_markers, #side_panel_places_routes, #side_panel_places_zones { padding: 8px; } #side_panel_places { padding-left: 0; padding-right: 0; } #side_panel_places > ul { border: 1px solid var(--gs-border-color); margin: 8px 10px; padding: 4px; background: var(--gs-bg-subtle); border-radius: var(--gs-radius-lg); display: flex; gap: 4px; } #side_panel_places > ul li { border: 0; flex: 1; background: transparent; border-radius: 0; list-style: none; } #side_panel_places > ul li button { display: block; width: 100%; padding: 7px 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; border-radius: var(--gs-radius-md); color: var(--gs-color-text-secondary); background: transparent; transition: all var(--gs-transition-fast); text-align: center; border: 1px solid transparent; cursor: pointer; } #side_panel_places > ul li button:hover { color: var(--gs-color-text); background: rgba(0, 0, 0, 0.04); } #side_panel_places > ul li button[aria-selected="true"] { padding-top: 7px; padding-bottom: 7px; background: var(--gs-bg-panel); border-color: var(--gs-border-color); color: var(--gs-color-primary); font-weight: 600; box-shadow: var(--gs-shadow-sm); } #side_panel_places > ul li button:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } /*################################################################################ # BOTTOM PANEL ################################################################################*/ #bottom_panel { display: none; position: absolute; bottom: 12px; left: calc(var(--gs-side-width) + 12px); right: 12px; background: var(--gs-glass-bg-panel); backdrop-filter: var(--gs-glass-blur-strong); -webkit-backdrop-filter: var(--gs-glass-blur-strong); border-radius: var(--gs-radius-2xl); box-shadow: var(--gs-shadow-2xl); border: 1px solid var(--gs-glass-border); overflow: hidden; z-index: 300; transition: background-color var(--gs-transition-slow), border-color var(--gs-transition-slow); } @supports not (backdrop-filter: blur(20px)) { #bottom_panel { background: var(--gs-bg-panel); } } #bottom_panel .controls { position: absolute; right: 16px; top: 10px; z-index: 1; display: flex; gap: 4px; } #bottom_panel .controls button { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--gs-radius-md); color: var(--gs-color-text-secondary); background: transparent; transition: all var(--gs-transition-fast); cursor: pointer; padding: 0; } #bottom_panel .controls button:hover { background: var(--gs-bg-hover); color: var(--gs-color-text); } #bottom_panel .controls button:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } #bottom_panel .controls span.icon-close { display: table; width: 100%; height: 100%; background-size: 12px 12px; background-repeat: no-repeat; background-position: center center; } #bottom_panel .controls button[aria-pressed="true"] { background: rgba(43, 130, 212, 0.12); color: var(--gs-color-primary); } #bottom_panel_tabs > ul { margin: 8px 12px 0 12px; padding: 4px; display: flex; background: var(--gs-bg-subtle); border-radius: var(--gs-radius-lg); border: 1px solid var(--gs-border-color); gap: 4px; list-style: none; } #bottom_panel_tabs > ul li { float: none; list-style: none; flex: 1; text-align: center; border: none; background: transparent; border-radius: 0; } #bottom_panel_tabs > ul li button { display: block; width: 100%; padding: 7px 4px; color: var(--gs-color-text-secondary); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; transition: all var(--gs-transition-fast); border-radius: var(--gs-radius-md); border: 1px solid transparent; margin: 0; background: transparent; cursor: pointer; } #bottom_panel_tabs > ul li button:hover { color: var(--gs-color-text); background: rgba(0, 0, 0, 0.04); } #bottom_panel_tabs > ul li button[aria-selected="true"] { color: var(--gs-color-primary); background: var(--gs-bg-panel); border-color: var(--gs-border-color); font-weight: 600; box-shadow: var(--gs-shadow-sm); } #bottom_panel_tabs > ul li button:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } #bottom_panel_datalist, #bottom_panel_graph, #bottom_panel_msg { padding: 12px; background: var(--gs-bg-panel); } #bottom_panel_graph_plot { height: 100%; width: 100%; } .graph-controls { margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; } .graph-controls-left, .graph-controls-right { display: flex; align-items: center; gap: 8px; } .graph-label { line-height: 28px; margin-right: 6px; font-size: 12px; color: var(--gs-color-text-secondary); font-weight: 500; } /*################################################################################ # OBJECT LIST ################################################################################*/ .object-list-item { min-height: 34px; padding: 6px 8px; border-radius: var(--gs-radius-lg); border: 1px solid transparent; transition: background-color var(--gs-transition-fast), border-color var(--gs-transition-fast), transform var(--gs-transition-fast), box-shadow var(--gs-transition-fast); display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; } .object-list-item:hover { background-color: var(--gs-bg-hover); border-color: var(--gs-border-color); transform: translateY(-1px); box-shadow: var(--gs-shadow-xs); } .object-list-item.selected { background-color: rgba(43, 130, 212, 0.08); border: 1px solid rgba(43, 130, 212, 0.25); border-left: 3px solid var(--gs-color-primary); box-shadow: var(--gs-shadow-sm); } .object-list-item .left { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1; } .object-list-item .right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .object-list-item .name { font-weight: 600; font-size: 12px; color: var(--gs-color-text); min-width: 0; } .object-list-item .name .object-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .object-list-item .status { font-size: 11px; color: var(--gs-color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--gs-s-6) var(--gs-s-4); text-align: center; gap: var(--gs-s-3); color: var(--gs-color-text-secondary); } .empty-state.compact { padding: var(--gs-s-4) var(--gs-s-3); } .empty-state-icon { width: 40px; height: 40px; background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0.5; } .empty-state-title { font-size: 13px; font-weight: 500; line-height: 1.4; max-width: 260px; } .object-list-item .speed { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: var(--gs-radius-pill); font-size: 11px; font-weight: 600; background: rgba(43, 130, 212, 0.10); color: var(--gs-color-primary); border: 1px solid rgba(43, 130, 212, 0.20); } .object-list-item .messages { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: var(--gs-radius-pill); font-size: 10px; font-weight: 600; background: var(--gs-bg-subtle); color: var(--gs-color-text-secondary); border: 1px solid var(--gs-border-color); } .object-list-item .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .object-list-item .status-dot.moving { background: var(--gs-color-primary); box-shadow: 0 0 0 2px rgba(43, 130, 212, 0.20); } .object-list-item .status-dot.stopped { background: var(--gs-color-warning); box-shadow: 0 0 0 2px rgba(250, 180, 68, 0.20); } .object-list-item .status-dot.offline { background: var(--gs-color-text-muted); box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.20); } /*################################################################################ # MODERN VEHICLE MARKER ################################################################################*/ .vehicle-marker-div { line-height: 0; } .vehicle-marker-div .vehicle-marker-container { position: relative; width: 100%; height: 100%; } .vehicle-marker-bubble { position: relative; display: inline-flex; flex-direction: column; align-items: center; padding: 5px 8px; border-radius: var(--gs-radius-lg); font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: var(--gs-shadow-md); transition: transform var(--gs-transition-fast); min-width: 48px; text-align: center; } .vehicle-marker-bubble:hover { transform: scale(1.05); } .vehicle-marker-bubble::after { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid currentColor; } .vehicle-marker-bubble.status-moving { background: rgba(43, 130, 212, 0.92); color: rgba(43, 130, 212, 0.92); border: 1px solid rgba(43, 130, 212, 0.40); } .vehicle-marker-bubble.status-stopped { background: rgba(250, 180, 68, 0.92); color: rgba(250, 180, 68, 0.92); border: 1px solid rgba(250, 180, 68, 0.40); } .vehicle-marker-bubble.status-idle { background: rgba(255, 152, 0, 0.92); color: rgba(255, 152, 0, 0.92); border: 1px solid rgba(255, 152, 0, 0.40); } .vehicle-marker-bubble.status-offline { background: rgba(100, 116, 139, 0.92); color: rgba(100, 116, 139, 0.92); border: 1px solid rgba(100, 116, 139, 0.40); } .vehicle-marker-id { font-size: 10px; font-weight: 600; color: inherit; opacity: 0.85; } .vehicle-marker-speed { font-size: 12px; font-weight: 700; color: inherit; } .vehicle-marker-separator { width: 80%; height: 1px; background: rgba(255, 255, 255, 0.25); margin: 2px auto; } .vehicle-marker-direction { font-size: 9px; color: inherit; opacity: 0.70; border-bottom: 1px solid currentColor; } .leaflet-tooltip.vehicle-label { background: var(--gs-glass-bg-strong); backdrop-filter: var(--gs-glass-blur); -webkit-backdrop-filter: var(--gs-glass-blur); border: 1px solid var(--gs-glass-border-strong); border-radius: var(--gs-radius-md); box-shadow: var(--gs-shadow-md); color: var(--gs-color-text); font-size: 11px; font-weight: 500; padding: 4px 8px; white-space: nowrap; } .leaflet-marker-icon img, .leaflet-marker-shadow img { max-width: 100% !important; max-height: 100% !important; width: 100%; height: 100%; object-fit: contain; object-position: center; } .marker-cluster { width: 40px !important; height: 40px !important; border-radius: 50% !important; background-clip: padding-box; background: rgba(43, 130, 212, 0.25); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transition: transform var(--gs-transition-fast), box-shadow var(--gs-transition-fast); } .marker-cluster:hover { transform: scale(1.10); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); } .marker-cluster div { width: 30px; height: 30px; margin: 5px 0 0 5px; text-align: center; border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 30px; color: #ffffff; background: rgba(43, 130, 212, 0.92); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); } .marker-cluster img { display: none; } .marker-cluster span { position: relative; z-index: 2; } .marker-cluster.cluster-small div { background: rgba(43, 130, 212, 0.92); } .marker-cluster.cluster-medium div { background: rgba(250, 180, 68, 0.95); color: #1a1a1a; } .marker-cluster.cluster-large div { background: rgba(255, 78, 73, 0.95); } /*################################################################################ # NOTIFY / CONFIRM ################################################################################*/ #dialog_notify, #dialog_confirm { min-width: 280px; } #dialog_notify_text, #dialog_confirm_text { line-height: 20px; font-size: 14px; } .ui-pnotify .ui-pnotify-text .row { margin-bottom: 0; } .ui-pnotify .ui-pnotify-text .row2 { line-height: 18px; } .ui-pnotify .ui-pnotify-text .row2 div:last-child { overflow-wrap: break-word; word-wrap: break-word; word-break: break-all; hyphens: auto; } /*################################################################################ # MENU (Contextual) ################################################################################*/ .ui-menu { position: absolute; min-width: 200px; max-width: 260px; white-space: nowrap; z-index: 99999999; } .ui-menu .ui-menu-icon { top: 7px; } .menu, .menu ul { background: var(--gs-glass-bg-panel); backdrop-filter: var(--gs-glass-blur); -webkit-backdrop-filter: var(--gs-glass-blur); border: 1px solid var(--gs-glass-border-strong); border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-xl); padding: 6px 0; } @supports not (backdrop-filter: blur(20px)) { .menu, .menu ul { background: var(--gs-bg-panel); } } .menu li { border-top: none; } .menu li:first-child { border: none; } .menu li a:hover { background-color: transparent; } .menu.ui-menu .first-item { border-top: none; } .menu ul li a, .menu .ui-menu-icon { background: url(images/arrow-right.svg) left center no-repeat; background-size: 12px 12px; overflow: visible; } .menu.ui-menu .ui-menu-item a { background-repeat: no-repeat; background-position: 12px center; background-size: 14px 14px; padding: 8px 14px 8px 36px; margin: 0 6px; border-radius: var(--gs-radius-md); color: var(--gs-color-text); font-size: var(--gs-font-base); font-weight: 500; transition: background-color var(--gs-transition-fast), color var(--gs-transition-fast); } .menu.ui-menu .ui-menu-item a.ui-state-hover, .menu.ui-menu .ui-menu-item a.ui-state-active, .menu.ui-menu .ui-menu-item a:hover, .menu.ui-menu .ui-menu-item a.ui-state-focus { background-color: var(--gs-bg-hover); color: var(--gs-color-primary); margin: 0 6px; outline: none; } .menu.ui-menu .ui-menu-item a.icon-time, .menu.ui-menu .ui-menu-item a.icon-follow, .menu.ui-menu .ui-menu-item a.icon-street, .menu.ui-menu .ui-menu-item a.icon-share, .menu.ui-menu .ui-menu-item a.icon-create, .menu.ui-menu .ui-menu-item a.icon-edit, .menu.ui-menu .ui-menu-item a.icon-remove3 { background-repeat: no-repeat; background-position: 12px center; background-size: 14px 14px; } .menu.ui-menu .ui-menu-item a.icon-time { background-image: url(images/history.svg); } .menu.ui-menu .ui-menu-item a.icon-follow { background-image: url(images/follow.svg); } .menu.ui-menu .ui-menu-item a.icon-street { background-image: url(images/street-view.svg); } .menu.ui-menu .ui-menu-item a.icon-share { background-image: url(images/share.svg); } .menu.ui-menu .ui-menu-item a.icon-create { background-image: url(images/create.svg); } .menu.ui-menu .ui-menu-item a.icon-edit { background-image: url(images/edit.svg); } .menu.ui-menu .ui-menu-item a.icon-remove3 { background-image: url(images/remove3.svg); } .menu .menu-separator { border-top: 1px solid var(--gs-border-color); height: 0; margin: 4px 12px; pointer-events: none; background: none; } .menu .menu-separator + li { border-top: none; } .menu.ui-menu .ui-state-active, .menu.ui-menu .ui-state-focus, .menu.ui-menu .ui-state-hover { outline: none; box-shadow: none; } .menu .ui-menu-item-wrapper { padding: 0; } /*################################################################################ # DRAGBARS ################################################################################*/ #side_panel_objects_dragbar, #side_panel_events_dragbar, #side_panel_history_dragbar { margin: 6px -12px; height: 6px; background: var(--gs-bg-subtle); cursor: row-resize; border-radius: 3px; border-top: 1px solid var(--gs-border-color); border-bottom: 1px solid var(--gs-border-color); transition: background-color var(--gs-transition-fast); } #side_panel_objects_dragbar:hover, #side_panel_events_dragbar:hover, #side_panel_history_dragbar:hover { background-color: var(--gs-bg-hover); } #side_panel_objects_dragbar:focus-visible, #side_panel_events_dragbar:focus-visible, #side_panel_history_dragbar:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } #side_panel_dragbar { position: absolute; top: var(--gs-top-height); bottom: 0; left: var(--gs-side-width); width: 6px; background: var(--gs-bg-subtle); z-index: 200; cursor: col-resize; border: none; border-left: 1px solid var(--gs-border-color); border-right: 1px solid var(--gs-border-color); transition: background-color var(--gs-transition-fast); padding: 0; } #side_panel_dragbar:hover { background-color: var(--gs-color-primary); opacity: 0.20; } #side_panel_dragbar:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: -1px; } #bottom_panel_dragbar { position: absolute; bottom: 0; left: calc(var(--gs-side-width) + 5px); right: 0; height: 6px; background: var(--gs-bg-subtle); border: none; cursor: row-resize; transition: background-color var(--gs-transition-fast); padding: 0; } #bottom_panel_dragbar:hover { background-color: var(--gs-color-primary); opacity: 0.20; } #bottom_panel_dragbar:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: -1px; } /*################################################################################ # MAP ################################################################################*/ #map { position: absolute; top: var(--gs-top-height); left: calc(var(--gs-side-width) + 6px); right: 0; bottom: 0; background-color: var(--gs-bg-body); } .map-layer-control { position: absolute; top: calc(var(--gs-top-height) + 12px); right: 12px; background: var(--gs-glass-bg); backdrop-filter: var(--gs-glass-blur); -webkit-backdrop-filter: var(--gs-glass-blur); padding: 4px; border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-lg); border: 1px solid var(--gs-glass-border); z-index: 300; transition: background-color var(--gs-transition-slow), border-color var(--gs-transition-slow); } @supports not (backdrop-filter: blur(20px)) { .map-layer-control { background: var(--gs-bg-panel); } } .map-layer-control select { min-width: 100px; height: 30px; border-radius: var(--gs-radius-md); font-size: 12px; padding: 0 24px 0 10px; } .history-view-control { display: flex; position: absolute; width: auto; top: calc(var(--gs-top-height) + 12px); left: calc(var(--gs-side-width) + 12px); background: var(--gs-glass-bg); backdrop-filter: var(--gs-glass-blur); -webkit-backdrop-filter: var(--gs-glass-blur); padding: 4px; border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-lg); border: 1px solid var(--gs-glass-border); z-index: 300; visibility: hidden; gap: 4px; align-items: center; transition: background-color var(--gs-transition-slow), border-color var(--gs-transition-slow), visibility var(--gs-transition-slow); } @supports not (backdrop-filter: blur(20px)) { .history-view-control { background: var(--gs-bg-panel); } } .history-view-control button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--gs-radius-md); color: var(--gs-color-text-secondary); background: transparent; transition: all var(--gs-transition-fast); cursor: pointer; padding: 0; } .history-view-control button:hover { background: var(--gs-bg-hover); color: var(--gs-color-text); } .history-view-control button:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } .history-view-control button span { display: table; width: 100%; height: 100%; background-size: 14px 14px; background-repeat: no-repeat; background-position: center center; } .history-view-control span.icon-close { background-size: 12px 12px; } .history-view-control button span.disabled { opacity: 0.40; } .history-view-control button[aria-pressed="true"] { background: rgba(43, 130, 212, 0.12); color: var(--gs-color-primary); } .camera-control { display: none; position: absolute; bottom: 16px; right: 12px; min-width: 236px; max-width: 316px; height: 177px; background: var(--gs-glass-bg-panel); backdrop-filter: var(--gs-glass-blur); -webkit-backdrop-filter: var(--gs-glass-blur); padding: 4px; border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-lg); border: 1px solid var(--gs-glass-border); z-index: 300; opacity: 0.92; line-height: 177px; font-size: 20px; text-align: center; color: var(--gs-color-text-muted); border: none; cursor: pointer; } .camera-control img { width: 316px; height: 177px; } .camera-control:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } .street-view-control { display: none; position: absolute; bottom: 16px; right: 12px; width: 316px; height: 177px; background: var(--gs-glass-bg-panel); backdrop-filter: var(--gs-glass-blur); -webkit-backdrop-filter: var(--gs-glass-blur); padding: 4px; border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-lg); border: 1px solid var(--gs-glass-border); z-index: 300; opacity: 0.92; line-height: 177px; font-size: 20px; text-align: center; vertical-align: middle; color: var(--gs-color-text-muted); cursor: pointer; } .street-view-control img { width: 316px; height: 177px; } .street-view-control:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } .street-view-img-btn { display: block; width: 100%; height: 100%; border: none; background: transparent; padding: 0; cursor: pointer; } .street-view-img-btn:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; } .object-cluster-popup { overflow-y: auto; overflow-x: hidden; max-height: 200px; margin-top: 25px; } /*################################################################################ # LEAFLET CONTROLS — PREMIUM ################################################################################*/ .leaflet-control-zoom { border-radius: var(--gs-radius-lg) !important; box-shadow: var(--gs-shadow-lg) !important; border: 1px solid var(--gs-border-color) !important; overflow: hidden; } .leaflet-control-zoom a { width: 34px !important; height: 34px !important; background-color: var(--gs-glass-bg) !important; color: var(--gs-color-text-secondary) !important; border-color: var(--gs-border-color) !important; transition: background-color var(--gs-transition-fast), color var(--gs-transition-fast); line-height: 34px !important; font-size: 16px; display: flex !important; align-items: center; justify-content: center; } .leaflet-control-zoom a:hover { background-color: var(--gs-bg-hover) !important; color: var(--gs-color-primary) !important; } .leaflet-control-zoom a.leaflet-disabled { background-color: var(--gs-bg-disabled) !important; color: var(--gs-color-text-muted) !important; } .leaflet-bar { border-radius: var(--gs-radius-lg) !important; box-shadow: var(--gs-shadow-lg) !important; border: 1px solid var(--gs-border-color) !important; } .leaflet-bar a, .gs-map-control button { width: 34px !important; height: 34px !important; line-height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none; background: var(--gs-bg-panel); padding: 0; cursor: pointer; } .gs-map-control { display: flex; flex-direction: column; } .gs-map-control button { border-bottom: 1px solid var(--gs-border-color); transition: background-color var(--gs-transition-fast); } .gs-map-control button:first-child { border-radius: var(--gs-radius-md) var(--gs-radius-md) 0 0; } .gs-map-control button:last-child { border-radius: 0 0 var(--gs-radius-md) var(--gs-radius-md); border-bottom: none; } .gs-map-control button:hover { background: var(--gs-bg-hover); } .gs-map-control button:focus-visible { outline: 2px solid var(--gs-color-primary); outline-offset: 2px; z-index: 1; } .gs-map-control button[aria-pressed="true"] { background: rgba(43, 130, 212, 0.12); } .gs-map-control button[aria-pressed="true"] span { opacity: 1; } .leaflet-touch .gs-map-control button { width: 40px !important; height: 40px !important; } .leaflet-popup-content-wrapper { background: var(--gs-glass-bg-panel); backdrop-filter: var(--gs-glass-blur); border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-xl); border: 1px solid var(--gs-glass-border); color: var(--gs-color-text); } .leaflet-popup-tip { background: var(--gs-bg-panel); } .leaflet-popup-close-button { color: var(--gs-color-text-secondary) !important; font-size: 20px !important; width: 24px !important; height: 24px !important; top: 4px !important; right: 4px !important; } .leaflet-popup-close-button:hover { color: var(--gs-color-text) !important; } /* Modern GPS popup card - glassmorphism */ .gs-popup-leaflet .leaflet-popup-content-wrapper { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-radius: var(--gs-radius-2xl); padding: 0; overflow: hidden; box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35); border: 1px solid rgba(255, 255, 255, 0.45); } .gs-popup-leaflet .leaflet-popup-content { margin: 0; width: 290px !important; max-width: 92vw; font-family: var(--gs-font-family); color: var(--gs-color-text); } .gs-popup-leaflet .leaflet-popup-tip { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border-left: 1px solid rgba(255, 255, 255, 0.45); border-bottom: 1px solid rgba(255, 255, 255, 0.45); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28); } :root[data-theme="dark"] .gs-popup-leaflet .leaflet-popup-content-wrapper { background: rgba(22, 24, 31, 0.55); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.6), 0 12px 28px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08); } :root[data-theme="dark"] .gs-popup-leaflet .leaflet-popup-tip { background: rgba(22, 24, 31, 0.55); border-left: 1px solid rgba(255, 255, 255, 0.12); border-bottom: 1px solid rgba(255, 255, 255, 0.12); } @media (prefers-reduced-transparency: reduce) { .gs-popup-leaflet .leaflet-popup-content-wrapper, .gs-popup-leaflet .leaflet-popup-tip { backdrop-filter: none; -webkit-backdrop-filter: none; } } .gs-popup-card { padding: var(--gs-s-4); } .gs-popup-header { display: flex; align-items: center; justify-content: space-between; gap: var(--gs-s-2); margin-bottom: var(--gs-s-3); } .gs-popup-title { font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--gs-color-text); letter-spacing: -0.01em; } .gs-popup-status { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--gs-font-small); font-weight: 600; padding: 3px 10px; border-radius: var(--gs-radius-pill); } .gs-popup-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .gs-st-online { background: rgba(28, 160, 96, 0.14); color: #1ca060; } .gs-st-stopped { background: rgba(234, 88, 12, 0.14); color: #ea580c; } .gs-st-idle { background: rgba(202, 138, 4, 0.14); color: #ca8a04; } .gs-st-offline { background: rgba(100, 116, 139, 0.16); color: #64748b; } .gs-popup-address { display: flex; align-items: flex-start; gap: 8px; padding: var(--gs-s-2) var(--gs-s-3); margin-bottom: var(--gs-s-3); background: var(--gs-bg-subtle); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-lg); font-size: var(--gs-font-small); color: var(--gs-color-text-secondary); } .gs-popup-icon { flex-shrink: 0; line-height: 1; color: var(--gs-color-primary); } .gs-popup-address-text { line-height: 1.4; word-break: break-word; } .gs-popup-muted { color: var(--gs-color-text-muted); font-style: italic; } .gs-popup-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--gs-s-2); margin-bottom: var(--gs-s-3); } .gs-metric { display: flex; flex-direction: column; gap: 2px; padding: var(--gs-s-2) var(--gs-s-2); background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-lg); } .gs-metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gs-color-text-muted); font-weight: 600; } .gs-metric-value { font-size: 14px; font-weight: 700; color: var(--gs-color-text); } .gs-popup-details { border-top: 1px solid var(--gs-border-color); margin-top: var(--gs-s-1); padding-top: var(--gs-s-2); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .gs-detail-row { display: flex; justify-content: space-between; gap: 8px; font-size: var(--gs-font-small); padding: 3px 0; border-bottom: 1px dashed var(--gs-border-color); } .gs-detail-row span:first-child { color: var(--gs-color-text-muted); } .gs-detail-row span:last-child { font-weight: 600; color: var(--gs-color-text); text-align: right; word-break: break-word; } .gs-popup-toggle { margin-top: var(--gs-s-3); text-align: center; } .gs-popup-toggle-link { display: inline-block; font-size: var(--gs-font-small); font-weight: 600; color: var(--gs-color-primary); text-decoration: none; padding: 4px 12px; border-radius: var(--gs-radius-pill); background: rgba(43, 130, 212, 0.10); transition: background-color var(--gs-transition-fast); } .gs-popup-toggle-link:hover { background: rgba(43, 130, 212, 0.18); color: var(--gs-color-primary-hover); } @media (max-width: 480px) { .gs-popup-leaflet .leaflet-popup-content { width: 260px !important; } } .leaflet-control-attribution { background: var(--gs-glass-bg) !important; backdrop-filter: var(--gs-glass-blur) !important; border-radius: var(--gs-radius-md) !important; font-size: 10px !important; color: var(--gs-color-text-muted) !important; padding: 2px 6px !important; } .leaflet-control-attribution a { color: var(--gs-color-primary) !important; } .leaflet-control-scale-line { background: var(--gs-glass-bg) !important; backdrop-filter: var(--gs-glass-blur) !important; border-color: var(--gs-border-color) !important; color: var(--gs-color-text) !important; font-size: 10px !important; border-radius: var(--gs-radius-sm) !important; } /*################################################################################ # FOLLOW ################################################################################*/ #map_follow { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } #side_panel_follow { display: none; position: absolute; top: 75px; bottom: 0; left: 0; width: 280px; background-color: var(--gs-glass-bg-panel); backdrop-filter: var(--gs-glass-blur); opacity: 0.92; z-index: 8; } .object-follow-control { position: absolute; top: 10px; right: 10px; background: var(--gs-glass-bg); backdrop-filter: var(--gs-glass-blur); padding: 2px 2px 2px 5px; border-radius: var(--gs-radius-lg); box-shadow: var(--gs-shadow-lg); border: 1px solid var(--gs-glass-border); z-index: 300; } /*################################################################################ # DATALIST ################################################################################*/ .datalist-item-list { display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; overflow-x: auto; } .data-item-text { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; font-size: 20px; text-align: center; vertical-align: middle; color: var(--gs-color-text-muted); } .datalist-item { display: flex; align-items: center; width: 280px; min-width: 280px; margin-right: 15px; padding: 8px 10px; border-bottom: 1px solid var(--gs-border-color); gap: 10px; transition: background-color var(--gs-transition-fast); } .datalist-item:hover { background-color: var(--gs-bg-hover); } .datalist-item.odd { background-color: var(--gs-bg-subtle); } .datalist-item.odd:hover { background-color: var(--gs-bg-hover); } .datalist-item-icon { width: 20px; height: 20px; background-size: 16px 16px; background-repeat: no-repeat; background-position: center center; opacity: 0.6; flex-shrink: 0; } .datalist-item-icon.icon-odometer { background-image: url(images/odometer.svg); } .datalist-item-icon.icon-engine-hours { background-image: url(images/engine-hours.svg); } .datalist-item-icon.icon-status { background-image: url(images/status.svg); } .datalist-item-icon.icon-model { background-image: url(images/model.svg); } .datalist-item-icon.icon-vin { background-image: url(images/vin.svg); } .datalist-item-icon.icon-plate-number { background-image: url(images/plate-number.svg); } .datalist-item-icon.icon-sim { background-image: url(images/sim.svg); } .datalist-item-icon.icon-user { background-image: url(images/user.svg); } .datalist-item-icon.icon-trailer { background-image: url(images/trailer.svg); } .datalist-item-icon.icon-default-custom-fields { background-image: url(images/default-custom-fields.svg); } .datalist-item-name { font-size: 12px; color: var(--gs-color-text-secondary); font-weight: 500; flex: 1; min-width: 0; } .datalist-item-value { font-size: 12px; color: var(--gs-color-text); font-weight: 600; text-align: right; word-break: break-word; } /*################################################################################ # DASHBOARD ################################################################################*/ .dashboard-container { border-radius: var(--gs-radius-lg); overflow: hidden; } .dashboard-stat-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 16px; background: var(--gs-bg-panel); border-radius: var(--gs-radius-xl); border: 1px solid var(--gs-border-color); box-shadow: var(--gs-shadow-sm); text-align: center; min-height: 80px; } .dashboard-stat-tile .stat-value { font-size: 28px; font-weight: 700; color: var(--gs-color-text); line-height: 1.2; } .dashboard-stat-tile .stat-label { font-size: 11px; font-weight: 500; color: var(--gs-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } .dashboard-stat-tile .stat-icon { font-size: 20px; margin-bottom: 8px; opacity: 0.6; } /*################################################################################ # DIALOGS ################################################################################*/ .ui-widget-overlay { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999 !important; } /* Apply z-index to .ui-dialog directly (NOT .ui-front) — jQuery UI 1.13.3 adds ui-front to BOTH overlay and dialog wrapper, so a .ui-front z-index rule gives them equal z-index and the overlay (appended later in DOM) wins stacking. */ .ui-dialog { background: var(--gs-bg-panel) !important; backdrop-filter: none !important; border-radius: var(--gs-radius-xl) !important; border: 1px solid var(--gs-border-color) !important; box-shadow: var(--gs-shadow-2xl) !important; padding: 0; min-width: 400px; max-width: 90vw; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10000 !important; } .ui-dialog .ui-dialog-titlebar { background: var(--gs-bg-subtle) !important; background-image: none !important; border: none !important; border-bottom: 1px solid var(--gs-border-color) !important; padding: var(--gs-s-4) var(--gs-s-5) !important; display: flex !important; align-items: center; justify-content: space-between; border-radius: var(--gs-radius-xl) var(--gs-radius-xl) 0 0; } .ui-dialog .ui-dialog-title { font-size: 17px !important; font-weight: 600 !important; color: var(--gs-color-text) !important; flex: 1; letter-spacing: -0.2px; } .ui-dialog .ui-dialog-titlebar-close { background: transparent; border: none; color: var(--gs-color-text-muted); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--gs-radius-md); transition: background var(--gs-transition-fast), color var(--gs-transition-fast); position: absolute; right: var(--gs-s-3); top: var(--gs-s-3); margin: 0; padding: 0; } .ui-dialog .ui-dialog-titlebar-close:hover { background: var(--gs-bg-hover); color: var(--gs-color-text); } .ui-dialog .ui-dialog-titlebar-close .ui-icon { filter: invert(0.6); } .ui-dialog .ui-dialog-content { background: transparent; border: none; padding: var(--gs-s-4); overflow: auto; max-height: 70vh; color: var(--gs-color-text); } .ui-dialog .ui-dialog-content .ui-jqgrid, .ui-dialog .ui-dialog-content .ui-jqgrid-view, .ui-dialog .ui-dialog-content .ui-jqgrid-hdiv, .ui-dialog .ui-dialog-content .ui-jqgrid-bdiv, .ui-dialog .ui-dialog-content .ui-jqgrid-pager { width: 100% !important; } .ui-dialog .ui-dialog-content .ui-jqgrid .ui-jqgrid-btable, .ui-dialog .ui-dialog-content .ui-jqgrid .ui-jqgrid-htable { width: 100% !important; table-layout: auto !important; } .ui-dialog .ui-dialog-buttonpane { background: transparent; border: none; border-top: 1px solid var(--gs-border-color); padding: var(--gs-s-4) var(--gs-s-5); margin: 0; display: flex; justify-content: flex-end; gap: var(--gs-s-3); border-radius: 0 0 var(--gs-radius-xl) var(--gs-radius-xl); } .ui-dialog .ui-dialog-buttonpane .btn { min-width: 80px; } .ui-dialog .ui-resizable-handle { opacity: 0.3; z-index: 10001 !important; } .ui-dialog .ui-resizable-se { background: none; width: 16px; height: 16px; right: 4px; bottom: 4px; } /* Notify/Confirm dialogs: distinct primary-color titlebar */ .dialog-notify-titlebar .ui-dialog-titlebar { background: var(--gs-color-primary) !important; border-bottom: none !important; } .dialog-notify-titlebar .ui-dialog-title { color: var(--gs-color-primary-on) !important; } .dialog-notify-titlebar .ui-dialog-titlebar-close .ui-icon { filter: invert(1); } .dialog-notify-titlebar .ui-dialog-buttonpane { background: var(--gs-bg-panel); } .dialog-billing-titlebar .ui-dialog-titlebar { background: var(--gs-color-primary) !important; } .dialog-billing-titlebar .ui-dialog-titlebar .ui-dialog-title { color: var(--gs-color-primary-on) !important; } .dialog-billing-titlebar .ui-dialog-titlebar-close .ui-icon { filter: invert(1); } .dialog-billing-titlebar .ui-dialog-buttonpane { background: var(--gs-bg-panel); } /*################################################################################ # SETTINGS DIALOGS ################################################################################*/ #settings_main_sms .controls-block, #settings_main_user_interface .controls-block, #settings_main_my_account .controls-block { margin: -15px -15px 10px -15px; padding: 4px 15px 7px; background: var(--gs-bg-subtle); height: 20px; } #settings_main_user_interface, #settings_main_my_account { height: 490px; } #settings_main_object_list, #settings_main_object_group_list, #settings_main_object_driver_list, #settings_main_object_passenger_list, #settings_main_object_trailer_list, #settings_main_objects_groups_drivers .ui-tabs-nav { margin: 0 -16px; } #settings_object_accuracy { height: 410px; } /*################################################################################ # TABS — modal dialogs (segmented control / pill style) ################################################################################*/ .ui-dialog .ui-tabs-nav { background: var(--gs-bg-subtle); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-lg); padding: 4px; margin: 0 0 var(--gs-s-4) 0; display: flex; gap: 4px; flex-wrap: wrap; } .ui-dialog .ui-tabs-nav li { background: transparent; border: none; margin: 0; padding: 0; list-style: none; position: relative; } .ui-dialog .ui-tabs-nav li a { display: block; padding: 7px 14px; color: var(--gs-color-text-secondary) !important; font-size: 12px; font-weight: 500; border-radius: var(--gs-radius-md); border: 1px solid transparent; transition: color var(--gs-transition-fast), background var(--gs-transition-fast), border-color var(--gs-transition-fast), box-shadow var(--gs-transition-fast); white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; text-decoration: none; text-align: center; } .ui-dialog .ui-tabs-nav li a:hover { color: var(--gs-color-text) !important; background: rgba(0, 0, 0, 0.04); } .ui-dialog .ui-tabs-nav li.ui-tabs-active { background: transparent; } .ui-dialog .ui-tabs-nav li.ui-tabs-active a { color: var(--gs-color-primary) !important; font-weight: 600; background: var(--gs-bg-panel) !important; border-color: var(--gs-border-color); box-shadow: var(--gs-shadow-sm); } .ui-tabs-anchor { white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; } .ui-tabs-panel { background: transparent; border: none; padding: var(--gs-s-4); } .ui-tabs .ui-tabs-nav li.save-btn { float: right; margin-left: auto; } /*################################################################################ # CHAT ################################################################################*/ .chat-conversation { display: flex; flex-direction: column; gap: var(--gs-s-3); max-height: 400px; overflow-y: auto; padding: var(--gs-s-4); } .chat-msg { max-width: 80%; display: flex; flex-direction: column; gap: 2px; } .chat-msg-user { align-self: flex-end; } .chat-msg-manager { align-self: flex-start; } .chat-msg-text { padding: var(--gs-s-3) var(--gs-s-4); border-radius: var(--gs-radius-lg); font-size: 13px; line-height: 1.4; } .chat-msg-user .chat-msg-text { background: var(--gs-color-primary); color: var(--gs-color-primary-on); border-bottom-right-radius: var(--gs-radius-sm); } .chat-msg-manager .chat-msg-text { background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-bottom-left-radius: var(--gs-radius-sm); color: var(--gs-color-text); } .chat-msg-dt { font-size: 10px; color: var(--gs-color-text-muted); padding: 0 var(--gs-s-2); } .chat-msg-user .chat-msg-dt { text-align: right; } .chat-msg-dt-manager { text-align: left; } .chat-msg-dt-client { text-align: left; } .chat-input-area { display: flex; gap: var(--gs-s-3); padding: var(--gs-s-4); border-top: 1px solid var(--gs-border-color); background: var(--gs-bg-subtle); border-radius: 0 0 var(--gs-radius-lg) var(--gs-radius-lg); } .chat-input-area textarea { flex: 1; resize: none; } /*################################################################################ # BILLING ################################################################################*/ #billing_plan_purchase_list { width: 100%; height: 388px; font-size: 12px; overflow-y: scroll; } #billing_plan_purchase_list .row { display: flex; align-items: center; border-bottom: 1px solid var(--gs-border-color); margin-bottom: 0; padding: 10px 0; } #billing_plan_purchase_list .row.header { font-weight: 600; color: var(--gs-color-text-muted); background: var(--gs-bg-subtle); } #billing_plan_purchase_list .row.even { background: var(--gs-bg-subtle); } #billing_plan_purchase_list .row > div { flex: 1; text-align: center; } #billing_plan_purchase_list div.name { text-align: left; } #billing_plan_purchase_list i.arrow { width: 10px; height: 10px; display: block; float: left; margin-left: 8px; background: url(images/arrow-right.svg) center center no-repeat; background-size: 10px 10px; opacity: 0.5; } #billing_plan_purchase_list i.purchase { width: 16px; height: 16px; margin: 0 auto; display: block; background: url(images/cart.svg) center center no-repeat; background-size: 16px 16px; opacity: 0.6; } /*################################################################################ # IMAGE GALLERY ################################################################################*/ .dialog-image-gallery .ui-dialog-content { padding: 0; } #dialog_image_gallery_images { display: flex; flex-wrap: wrap; gap: var(--gs-s-2); padding: var(--gs-s-4); justify-content: center; } .gallery-img-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: var(--gs-radius-md); cursor: pointer; opacity: 0.7; transition: opacity var(--gs-transition-fast), transform var(--gs-transition-fast); border: 2px solid transparent; } .gallery-img-thumb:hover { opacity: 1; transform: scale(1.05); } .gallery-img-thumb.active { border-color: var(--gs-color-primary); opacity: 1; } #dialog_image_gallery_preview { padding: var(--gs-s-4); text-align: center; background: var(--gs-bg-panel); } #dialog_image_gallery_preview img { max-width: 100%; max-height: 400px; border-radius: var(--gs-radius-lg); } /*################################################################################ # OBJECT CONTROL ################################################################################*/ .object-control-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gs-s-3); } .object-control-item { background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-lg); padding: var(--gs-s-4); display: flex; flex-direction: column; gap: var(--gs-s-2); } .object-control-item .oci-label { font-size: 11px; font-weight: 500; color: var(--gs-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; } .object-control-item .oci-value { font-size: 14px; font-weight: 600; color: var(--gs-color-text); } /*################################################################################ # REPORTS ################################################################################*/ .report-filters { display: flex; flex-wrap: wrap; gap: var(--gs-s-4); padding: var(--gs-s-4); background: var(--gs-bg-panel); border-radius: var(--gs-radius-lg); margin-bottom: var(--gs-s-4); border: 1px solid var(--gs-border-color); } .report-filters .gs-field { flex: 1; min-width: 150px; } .report-results { background: var(--gs-bg-panel); border-radius: var(--gs-radius-lg); border: 1px solid var(--gs-border-color); overflow: hidden; } .report-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--gs-s-3); padding: var(--gs-s-4); background: var(--gs-bg-subtle); border-bottom: 1px solid var(--gs-border-color); } .report-summary-item { text-align: center; padding: var(--gs-s-3); } .report-summary-item .rsi-value { font-size: 24px; font-weight: 700; color: var(--gs-color-text); } .report-summary-item .rsi-label { font-size: 11px; color: var(--gs-color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; } /*################################################################################ # HISTORY DETAIL ROWS ################################################################################*/ .history-detail-table { width: 100%; border-collapse: collapse; } .history-detail-table tr { border-bottom: 1px solid var(--gs-border-color); } .history-detail-table tr:last-child { border-bottom: none; } .history-detail-table td { padding: var(--gs-s-3) var(--gs-s-4); vertical-align: top; } .history-detail-table td:first-child { font-size: 11px; font-weight: 500; color: var(--gs-color-text-muted); text-transform: uppercase; width: 140px; } .history-detail-table td:last-child { color: var(--gs-color-text); } /*################################################################################ # LOGO & INFO ################################################################################*/ .logo { border: 0; width: 250px; height: 56px; } .logo_small { border: 0; width: 32px; height: 32px; } .favicon { border: 0; width: 32px; height: 32px; } .info { padding-bottom: 15px; height: 35px; display: table-cell; vertical-align: middle; } .info2 { height: 22px; display: table-cell; vertical-align: middle; } .subinfo { color: var(--gs-color-text-muted); line-height: 12px; } /*################################################################################ # CPANEL ################################################################################*/ body#cpanel { background: var(--gs-color-bg); } #cpanel h1.title { margin: 0; color: var(--gs-color-primary); display: table; float: left; font-size: 24px; font-weight: 600; } #cpanel h1.title span { color: var(--gs-color-text-muted); font-weight: normal; font-size: 22px; } #cpanel .version { font-size: 10px; color: var(--gs-color-text-muted); } #cpanel_manage_server .cpanel-title { margin-bottom: 12px; } #cpanel_user_list, #cpanel_object_list, #cpanel_unused_object_list, #cpanel_billing_plan_list, #cpanel_manage_server { margin: 15px; padding: 15px; background: var(--gs-glass-bg-dialog); backdrop-filter: var(--gs-glass-blur); border-radius: var(--gs-radius-xl); border: 1px solid var(--gs-border-color); border-top: 3px solid var(--gs-color-primary); } #dialog_user_edit_tabs { height: 555px; } #dialog_user_edit { padding: 0; } #cpanel_user_list .inputbox-search, #cpanel_object_list .inputbox-search, #cpanel_unused_object_list .inputbox-search, #cpanel_billing_plan_list .inputbox-search { width: 300px; margin-left: 3px; } #cpanel .ms-save { position: absolute; right: 0; top: 2px; } #cpanel #dialog_user_edit_account .controls, #cpanel #dialog_user_edit_contact_info .controls { position: absolute; right: 15px; top: 4px; } #cpanel #cpanel_manage_server .ui-tabs-nav { background: var(--gs-bg-subtle); padding: 10px 15px; border-bottom: none; margin: 0 -15px; } #cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li { border: none; } #cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li.ui-tabs-active a { background-color: var(--gs-color-primary); color: var(--gs-color-primary-on); padding: 5px 15px; border-radius: var(--gs-radius-md); } #cpanel #cpanel_manage_server .ui-tabs .ui-tabs-nav li a { padding: 5px 15px; margin-right: 5px; font-size: 12px; background-color: var(--gs-bg-panel); border-radius: var(--gs-radius-md); border: 1px solid var(--gs-border-color); } #cpanel_manage_server { position: absolute; top: 36px; bottom: 0; right: 0; left: 0; overflow: hidden; } .cpanel-tabs-content { position: absolute; top: 50px; bottom: 45px; right: 0; left: 0; overflow-y: auto; margin-left: -15px; } #cpanel_manage_server .ui-img-container { display: flex; height: 160px; background-color: var(--gs-bg-subtle); border: 1px solid var(--gs-border-color); justify-content: center; align-items: center; } #cpanel_manage_server .logo { border: 0; width: auto; height: auto; max-width: 215px; padding: 5px; } #cpanel_manage_server .login-background { border: 0; width: auto; height: auto; max-width: 215px; max-height: 150px; padding: 5px; } #dialog_language_properties .row2 { overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } /*################################################################################ # TOP PANEL (CPANEL VARIANT) ################################################################################*/ #top_panel .select-view, #top_panel .select-language { margin: 1px 0; padding: 5px 10px; } #top_panel .select-language select.lang-select { appearance: none; -webkit-appearance: none; background-color: var(--gs-bg-input); border: 1px solid var(--gs-border-color); color: var(--gs-color-text); cursor: pointer; background-image: url(images/arrow-bottom.svg); background-repeat: no-repeat; background-size: 12px 12px; } #top_panel .select-language select.lang-select:hover { border-color: var(--gs-border-color-strong); background-color: var(--gs-bg-input-hover); } #top_panel .select-language select.lang-select:focus { outline: none; border-color: var(--gs-color-primary); box-shadow: var(--gs-focus-ring); } #top_panel .map-btn a { background: var(--gs-color-primary); } #top_panel .map-btn a:hover { opacity: 0.9; } #top_panel .select-view { width: 180px; } #top_panel .user-btn img, #top_panel .user-list-btn img, #top_panel .object-list-btn img, #top_panel .billing-plan-list-btn img, #top_panel .unused-object-list-btn img { float: left; margin-right: 5px; } #top_panel .user-btn span, #top_panel .user-list-btn span, #top_panel .object-list-btn span, #top_panel .billing-plan-list-btn span, #top_panel .unused-object-list-btn span { display: block; float: right; margin-top: 1px; } /*################################################################################ # JQGRID FULL ################################################################################*/ .ui-jqgrid { font-size: 12px; max-width: 100%; } .ui-jqgrid .ui-jqgrid-view { font-size: 11px; } .ui-jqgrid .loading { background: var(--gs-bg-panel); font-weight: normal; border-radius: var(--gs-radius-md); padding: 4px 8px; } .ui-jqgrid .ui-jqgrid-bdiv { position: relative; margin: 0; padding: 0; overflow: auto; text-align: left; overflow-y: scroll; overflow-x: auto; background: var(--gs-bg-panel); } .ui-jqgrid tr.ui-row-ltr td { text-align: left; border-right-width: 0; border-right-color: inherit; border-right-style: solid; border-color: var(--gs-border-color); } .ui-jqgrid .ui-jqgrid-pager { border-left: 0 none !important; border-right: 0 none !important; border-bottom: 0 none !important; position: relative; white-space: nowrap; overflow: hidden; background: var(--gs-bg-subtle); border-top: 1px solid var(--gs-border-color); margin: 3px -15px -15px -15px !important; padding: 3px 15px 0 !important; height: 25px; font-size: 11px; } .ui-jqgrid .ui-pg-table td { font-weight: normal; vertical-align: middle; padding: 0; } .ui-jqgrid .ui-pg-button { border-left: 1px hidden; border-right: 1px hidden; border-top: 0; border-bottom: 0; height: 19px !important; } .ui-jqgrid .ui-state-disabled:hover { padding: 0; } .ui-jqgrid .ui-jqgrid-titlebar { margin: 0 0 10px 0; padding: 0; background: transparent; border: none; } .ui-jqgrid .ui-jqgrid-titlebar .row4 { display: flex; align-items: center; flex-wrap: nowrap; gap: 6px; } .ui-jqgrid .ui-jqgrid-titlebar .row4 > a { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .ui-jqgrid .ui-jqgrid-titlebar .row4 .inputbox-search { flex: 1 1 auto; min-width: 0; } .ui-jqgrid .ui-jqgrid-titlebar .panel-button { vertical-align: middle; } .ui-jqgrid .ui-jqgrid-titlebar a { margin: 0; padding: 0; text-decoration: none; } .ui-jqgrid .ui-jqgrid-pager { text-align: center; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-table { margin: 0 auto; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-div, .ui-jqgrid .ui-jqgrid-pager .ui-pg-button { float: none !important; display: inline-block; vertical-align: middle; } .ui-jqgrid .ui-pg-button span { float: none !important; display: inline-block; margin: 0 1px; vertical-align: middle; } .ui-jqgrid .ui-jqgrid-htable th#side_panel_objects_object_list_grid_show .ui-jqgrid-sortable, .ui-jqgrid .ui-jqgrid-htable th#side_panel_objects_object_list_grid_follow .ui-jqgrid-sortable { display: block; text-align: center; line-height: 24px; height: 24px; vertical-align: middle; } .ui-jqgrid .ui-jqgrid-htable th#side_panel_objects_object_list_grid_show .ui-jqgrid-sortable > a, .ui-jqgrid .ui-jqgrid-htable th#side_panel_objects_object_list_grid_follow .ui-jqgrid-sortable > a { display: inline-block; height: auto; width: auto; line-height: 1; } .ui-jqgrid .ui-jqgrid-htable th#side_panel_objects_object_list_grid_show .ui-jqgrid-sortable > a img, .ui-jqgrid .ui-jqgrid-htable th#side_panel_objects_object_list_grid_follow .ui-jqgrid-sortable > a img { display: inline-block; width: 14px !important; height: 14px !important; max-width: 14px; margin: 0 auto; object-fit: contain; vertical-align: middle; } #side_panel_objects_object_list_grid_show .ui-icon-asc, #side_panel_objects_object_list_grid_show .ui-icon-desc, #side_panel_objects_object_list_grid_follow .ui-icon-asc, #side_panel_objects_object_list_grid_follow .ui-icon-desc { position: relative !important; float: none !important; display: inline-block !important; margin: 0 1px !important; vertical-align: middle; } .ui-jqgrid .ui-jqgrid-btable td img { display: inline-block; vertical-align: middle; max-width: none; object-fit: contain; margin: 0; padding: 0; } .ui-jqgrid .ui-jqgrid-btable td input[type="checkbox"] { display: inline-block; vertical-align: middle; margin: 0; } #side_panel_objects_object_list_grid_show, #side_panel_objects_object_list_grid_follow { width: 32px !important; min-width: 32px !important; box-sizing: border-box; vertical-align: middle; } #side_panel_objects_object_list_grid_show > div, #side_panel_objects_object_list_grid_follow > div { overflow: visible !important; height: 24px !important; min-height: 24px; padding: 0 !important; display: flex; align-items: center; justify-content: center; } .ui-jqgrid-htable #side_panel_objects_object_list_grid_show .ui-jqgrid-sortable, .ui-jqgrid-htable #side_panel_objects_object_list_grid_follow .ui-jqgrid-sortable { height: 24px; line-height: 24px; } .ui-jqgrid-btable td[aria-describedby="side_panel_objects_object_list_grid_show"], .ui-jqgrid-btable td[aria-describedby="side_panel_objects_object_list_grid_follow"] { vertical-align: middle; text-align: center; padding: 3px; line-height: 1; } .ui-jqgrid .ui-jqgrid-htable th#side_panel_objects_object_list_grid_show, .ui-jqgrid .ui-jqgrid-htable th#side_panel_objects_object_list_grid_follow { height: 26px !important; padding: 0 !important; vertical-align: middle; } #side_panel_objects_object_list_grid .ui-jqgrid-btable { table-layout: fixed; } .ui-th-ltr, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr { border-left: 1px solid var(--gs-border-color); padding-top: 0; } .ui-th-ltr:first-child, .ui-jqgrid .ui-jqgrid-htable th.ui-th-ltr:first-child { border-left: none; } .ui-jqgrid .ui-icon-asc, .ui-jqgrid .ui-icon-desc { margin-left: 7px; margin-top: 7px; height: 5px; width: 10px; filter: invert(0.5); } .ui-jqgrid .ui-pg-input { font-size: 11px; height: 18px; margin: 2px 0; text-align: center; width: 50px; padding: 2px 4px; background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-sm); color: var(--gs-color-text); } .ui-jqgrid .ui-pg-selbox { display: block; font-size: 11px; height: 18px; line-height: 18px; margin: 0; padding: 2px 4px; background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-sm); color: var(--gs-color-text); } .ui-jqgrid .ui-separator { height: 0; border: none; } .ui-jqgrid .ui-pg-table { padding: 0; } .ui-jqgrid tr.ui-row-ltr td span { display: inline-block; height: 17px; } .ui-jqgrid tr.ui-row-ltr td span.status { color: var(--gs-color-text-muted); font-size: 11px; } .ui-jqgrid .ui-jqgrid-btable { table-layout: fixed; outline-style: none; background: var(--gs-bg-panel); } .ui-jqgrid .ui-state-hover { background: var(--gs-bg-hover) !important; } .ui-jqgrid th.ui-state-hover { background: none; } .ui-jqgrid .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { background: var(--gs-bg-subtle); } .ui-jqgrid .ui-jqgrid-pager .ms-choice { margin-top: -6px; } .ui-jqgrid .ui-jqgrid-resize { height: auto !important; } .ui-jqgrid .ui-search-toolbar input { background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-sm); padding: 2px 4px; font-size: 11px; } .ui-jqgrid .ui-search-toolbar select { background: var(--gs-bg-panel); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-sm); padding: 2px 4px; font-size: 11px; } .ui-jqgrid-btable a img { border-radius: var(--gs-radius-sm); } .ui-jqgrid-btable img { border-radius: var(--gs-radius-sm); margin: 2px; } /* Constrain all tags inside jqGrid body table. SVGs are 512x512 (Adobe export); without these rules they render at intrinsic size. */ .ui-jqgrid-btable img, .ui-jqgrid-btable a img { width: 14px; height: 14px; max-width: 14px; display: inline-block; vertical-align: middle; object-fit: contain; } .ui-jqgrid-btable td[aria-describedby$="_modify"] img, .ui-jqgrid-btable td[aria-describedby$="_modify"] a img { padding: 0 2px; margin: 0; } /* Modern jqGrid table styling — header, rows, hover, modify & active columns */ .ui-jqgrid .ui-jqgrid-hdiv { background: var(--gs-bg-subtle); border-bottom: 1px solid var(--gs-border-color); } .ui-jqgrid .ui-jqgrid-htable th { font-weight: 600; color: var(--gs-color-text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 10px !important; background: transparent; border-bottom: none; text-align: left; vertical-align: middle; height: auto; } .ui-jqgrid .ui-jqgrid-htable th div { overflow: hidden; text-overflow: ellipsis; } .ui-jqgrid .ui-jqgrid-htable th[id$="_cb"], .ui-jqgrid .ui-jqgrid-htable th[id$="_active"], .ui-jqgrid .ui-jqgrid-htable th[id$="_modify"] { text-align: center; } .ui-jqgrid-btable tr.jqgrow td { padding: 10px 10px !important; border-bottom: 1px solid var(--gs-border-color); transition: background var(--gs-transition-fast); vertical-align: middle; } .ui-jqgrid-btable tr.jqgrow:hover td { background: var(--gs-bg-subtle); } .ui-jqgrid-btable td { overflow: hidden; } /* Ellipsis only on text columns, not on icon columns */ .ui-jqgrid-btable td:not([aria-describedby$="_modify"]):not([aria-describedby$="_cb"]):not([aria-describedby$="_active"]):not([aria-describedby$="_object_expire_dt"]) { text-overflow: ellipsis; } /* Modify column: horizontal action icons (4 × 18px = 72px fits in 75px column) */ .ui-jqgrid-btable td[aria-describedby$="_modify"] { vertical-align: middle; text-align: center; white-space: nowrap; padding: 4px 2px; overflow: visible; } .ui-jqgrid-btable td[aria-describedby$="_modify"] a { display: inline-block; padding: 4px 2px; border-radius: var(--gs-radius-sm); transition: background var(--gs-transition-fast); text-decoration: none; line-height: 1; margin: 0; } .ui-jqgrid-btable td[aria-describedby$="_modify"] a:hover { background: var(--gs-bg-hover); } .ui-jqgrid-btable td[aria-describedby$="_modify"] a:last-child:hover { background: rgba(201, 54, 50, 0.12); } .ui-jqgrid-btable td[aria-describedby$="_modify"] a img { width: 14px !important; height: 14px !important; max-width: none; display: inline-block; margin: 0; padding: 0; object-fit: contain; vertical-align: middle; } .ui-jqgrid-btable td[aria-describedby$="_active"] { vertical-align: middle; text-align: center; } .ui-jqgrid-btable td[aria-describedby$="_active"] img { width: 18px; height: 18px; } .ui-jqgrid .ui-jqgrid-htable th[id$="_cb"], .ui-jqgrid-btable td[aria-describedby$="_cb"] { padding: 10px 4px !important; text-align: center; vertical-align: middle; } .ui-jqgrid-btable td[aria-describedby$="_cb"] input[type="checkbox"] { margin: 0; vertical-align: middle; } /* Compact padding for side_panel grids (340px wide) — overrides 10px default */ #side_panel .ui-jqgrid .ui-jqgrid-htable th { padding: 4px 6px !important; } #side_panel .ui-jqgrid-btable tr.jqgrow td { padding: 4px 6px !important; } /* Pager button refinement */ .ui-pg-button { transition: opacity var(--gs-transition-fast); } .ui-pg-button:hover { opacity: 0.85; } .ui-pg-div span.ui-icon { display: block; } .ui-jqgrid .ui-jqgrid-pager { background: var(--gs-bg-subtle); border-top: 1px solid var(--gs-border-color); padding: 8px 12px; } .ui-jqgrid .ui-jqgrid-pager .ui-pg-button { margin: 0 2px; } .ui-jqgrid .tree-wrap-ltr { margin-left: 0; } #side_panel .ui-jqgrid .ui-jqgrid-pager, #bottom_panel .ui-jqgrid .ui-jqgrid-pager { background: var(--gs-bg-subtle); } #dialog_image_gallery .ui-jqgrid .ui-jqgrid-pager { background: var(--gs-bg-panel); } #cpanel .ui-jqgrid tr.ui-row-ltr td { padding: 3px; } #cpanel_user_list .ui-jqgrid .ui-jqgrid-title, #cpanel_object_list .ui-jqgrid .ui-jqgrid-title, #cpanel_unused_object_list .ui-jqgrid .ui-jqgrid-title, #cpanel_billing_plan_list .ui-jqgrid .ui-jqgrid-title { float: right; margin: auto; font-size: 14px; font-weight: 600; color: var(--gs-color-text); } #cpanel_user_list .ui-jqgrid .ui-jqgrid-titlebar, #cpanel_object_list .ui-jqgrid .ui-jqgrid-titlebar, #cpanel_unused_object_list .ui-jqgrid .ui-jqgrid-titlebar, #cpanel_billing_plan_list .ui-jqgrid .ui-jqgrid-titlebar { background: transparent; border: none; padding: 8px 15px; margin-bottom: 0; } /*################################################################################ # JQGRID PAGER ################################################################################*/ .ui-pg-div .ui-icon-plus { background: var(--gs-color-primary) url(images/plus-white.svg) center center no-repeat; padding: 6px; background-size: 10px 10px; border-radius: var(--gs-radius-sm); } .ui-pg-div .ui-icon-import { background: url(images/import.svg) center center no-repeat; background-size: auto 14px; width: 24px; } .ui-pg-div .ui-icon-export { background: url(images/export.svg) center center no-repeat; background-size: auto 14px; width: 24px; } .ui-pg-div .ui-icon-action { background: url(images/action2.svg) center center no-repeat; background-size: auto 14px; width: 24px; } .ui-pg-div .ui-icon-delete-all { background: url(images/remove.svg) center center no-repeat; background-size: 10px 10px; width: 24px; } :root[data-theme="dark"] .ui-pg-div .ui-icon-import, :root[data-theme="dark"] .ui-pg-div .ui-icon-export, :root[data-theme="dark"] .ui-pg-div .ui-icon-action, :root[data-theme="dark"] .ui-pg-div .ui-icon-delete-all { filter: brightness(0) invert(1); } .ui-jqgrid .ui-jqgrid-pager .ms-choice { margin-top: -4px; } #cpanel #cpanel_user_list .ui-pg-div .ui-icon-plus, #cpanel #cpanel_object_list .ui-pg-div .ui-icon-plus, #cpanel #cpanel_unused_object_list .ui-pg-div .ui-icon-plus, #cpanel #cpanel_billing_plan_list .ui-pg-div .ui-icon-plus, #cpanel #dialog_user_edit .ui-pg-div .ui-icon-plus, #dialog_settings .ui-pg-div .ui-icon-plus, #dialog_settings_object_edit .ui-pg-div .ui-icon-plus, #dialog_share_position .ui-pg-div .ui-icon-plus, #dialog_reports .ui-pg-div .ui-icon-plus, #dialog_tasks .ui-pg-div .ui-icon-plus, #dialog_cmd .ui-pg-div .ui-icon-plus, #dialog_maintenance .ui-pg-div .ui-icon-plus, #dialog_expenses .ui-pg-div .ui-icon-plus, #dialog_places_groups .ui-pg-div .ui-icon-plus, #dialog_billing .ui-pg-div .ui-icon-plus { margin: -4px 0px -5px -15px; } #dialog_billing .ui-pg-div .ui-icon-plus { background-color: #9cc602; } /*################################################################################ # CONTEXTUAL MENU (right-click) ################################################################################*/ .context-menu-list { background: var(--gs-glass-bg-dialog); backdrop-filter: var(--gs-glass-blur-dialog); border-radius: var(--gs-radius-lg); border: 1px solid var(--gs-glass-border-dialog); box-shadow: var(--gs-shadow-lg); min-width: 180px; padding: var(--gs-s-2); z-index: 10001 !important; } .context-menu-item { padding: var(--gs-s-2) var(--gs-s-4); border-radius: var(--gs-radius-md); color: var(--gs-color-text); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: var(--gs-s-3); transition: background var(--gs-transition-fast); } .context-menu-item:hover { background: var(--gs-bg-hover); } .context-menu-item.disabled { opacity: 0.4; pointer-events: none; } .context-menu-separator { height: 1px; background: var(--gs-border-color); margin: var(--gs-s-2) 0; } /*################################################################################ # LOGIN PAGE ################################################################################*/ body#login { background-image: url(../img/login-background.jpg?v=1); background-position: center center; background-size: cover; background-color: var(--gs-color-bg); display: table; overflow: auto; width: 100%; min-height: 100vh; } #login .wrapper { display: table-cell; vertical-align: middle; } #login .wrapper .inner-wrapper { width: 450px; max-width: calc(100vw - 32px); padding: 24px; margin: 50px auto; background: var(--gs-glass-bg-dialog); backdrop-filter: var(--gs-glass-blur-dialog); -webkit-backdrop-filter: var(--gs-glass-blur-dialog); border: 1px solid var(--gs-glass-border-dialog); border-radius: var(--gs-radius-xl); box-shadow: var(--gs-shadow-xl); } @supports not (backdrop-filter: blur(1px)) { #login .wrapper .inner-wrapper { background: var(--gs-bg-panel); } } #login .wrapper .inner-wrapper .content { width: 100%; overflow: hidden; } #login .wrapper .inner-wrapper .content .content-block { min-height: auto; } #login .logo-block { float: left; margin-bottom: 16px; } #login .logo { margin-bottom: 20px; max-width: 100%; height: auto; } #login .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } #login .login-instruction { margin: 0 0 20px; color: var(--gs-color-text-secondary); font-size: 14px; font-weight: 400; line-height: 1.45; } #login .registration-closed { padding: 15px; background: var(--gs-color-warning); color: var(--gs-color-warning-on); font-weight: bold; margin-bottom: 10px; border-radius: var(--gs-radius-md); } #login .server-select .ms-choice { background-image: url(images/server.svg); background-position: 15px center; background-repeat: no-repeat; background-size: 16px 16px; height: 48px; } #login .server-select .ms-choice span { top: 12px; padding-left: 51px; } #login .server-select .ms-choice div { top: 14px; } #login .server-select .ms-drop { margin-top: 24px; } #login .field-group { display: flex; flex-direction: column; gap: 6px; } #login .field-label { font-size: 12px; font-weight: 600; color: var(--gs-color-text); padding-left: 2px; margin-bottom: 2px; } #login .field-error { display: none; font-size: 12px; color: var(--gs-color-danger); line-height: 1.4; padding: 4px 6px; background: rgba(255, 78, 73, 0.08); border: 1px solid rgba(255, 78, 73, 0.18); border-radius: var(--gs-radius-md); } #login .form-error { display: none; font-size: 13px; color: var(--gs-color-danger); line-height: 1.5; padding: 10px 12px; background: rgba(255, 78, 73, 0.08); border: 1px solid rgba(255, 78, 73, 0.18); border-radius: var(--gs-radius-md); margin-bottom: 14px; } #login .form-success { display: none; font-size: 13px; color: var(--gs-color-secondary); line-height: 1.5; padding: 10px 12px; background: rgba(156, 198, 2, 0.10); border: 1px solid rgba(156, 198, 2, 0.22); border-radius: var(--gs-radius-md); margin-bottom: 14px; } #login .form-error a { color: var(--gs-color-danger); text-decoration: underline; font-weight: 600; } #login .form-error a:hover { color: var(--gs-color-primary); } #login .form-success a { color: var(--gs-color-secondary); text-decoration: underline; font-weight: 600; } #login .form-success a:hover { color: var(--gs-color-primary); } #login .form-error:empty, #login .form-success:empty { display: none; } #login input.inputbox { height: 48px; background-color: var(--gs-bg-input); border: 2px solid var(--gs-border-color-strong); border-radius: var(--gs-radius-md); width: 100%; padding-left: 50px; padding-right: 52px; color: var(--gs-color-text); font-size: var(--gs-font-base); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); transition: background-color var(--gs-transition-fast), border-color var(--gs-transition-fast), box-shadow var(--gs-transition-fast); } #login input.inputbox.icon-user { padding-right: 16px; } #login input.inputbox.input-error { border-color: var(--gs-color-danger); background-color: rgba(255, 78, 73, 0.04); } #login input.inputbox.input-error:focus { border-color: var(--gs-color-danger); box-shadow: 0 0 0 3px rgba(255, 78, 73, 0.18), 0 0 0 1px rgba(255, 78, 73, 0.35); } #login input.inputbox:hover { background-color: var(--gs-bg-input-hover); border-color: var(--gs-border-color-strong); } #login input.inputbox:focus { background-color: var(--gs-bg-input-hover); border-color: var(--gs-color-primary); box-shadow: var(--gs-focus-ring); outline: none; } #login input.inputbox::placeholder { color: var(--gs-color-text-muted); } :root[data-theme="dark"] #login input.inputbox { background-color: var(--gs-bg-input); border-color: var(--gs-border-color-strong); color: var(--gs-color-text); } :root[data-theme="dark"] #login input.inputbox:hover { background-color: var(--gs-bg-input-hover); } #login .icon { background-position: 15px center; background-repeat: no-repeat; background-size: 16px 16px; opacity: 0.6; } /* Standalone icon element (for future markup changes) */ #login .row3 > .icon:not(input), #login .row3 .icon-standalone { float: left; width: 48px; height: 48px; position: absolute; left: 0; top: 0; pointer-events: none; } .icon.icon-user { background-image: url(images/user.svg); } .icon.icon-email { background-image: url(images/email.svg); } .icon.icon-password { background-image: url(images/password.svg); } .icon.icon-code { background-image: url(images/shield.svg); } #login .wrapper .content-block input.button { background: var(--gs-color-primary); color: var(--gs-color-primary-on); border: none; border-radius: var(--gs-radius-md); padding: 5px; height: 50px; width: 100%; font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color var(--gs-transition-fast), transform var(--gs-transition-fast); } #login .wrapper .content-block input.button:disabled { opacity: 0.85; cursor: not-allowed; transform: none; } #login .wrapper .content-block input.button.button-loading { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23ffffff' stroke-width='3' opacity='0.25'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='1s' repeatCount='indefinite'/%3E%3C/svg%3E"); background-position: calc(100% - 16px) center; background-repeat: no-repeat; background-size: 18px 18px; padding-right: 42px; } @media (prefers-reduced-motion: reduce) { #login .wrapper .content-block input.button.button-loading { background-image: none; padding-right: 5px; } } #login .wrapper .content-block input.button:hover { background: var(--gs-color-primary-hover); transform: translateY(-1px); } #login .wrapper .content-block input.button:active { transform: translateY(0); } #login .field-group .input-wrapper { position: relative; } #login .content-block .reveal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: none; border-radius: var(--gs-radius-md); background: url(images/eye-crossed.svg) center center no-repeat; background-size: 20px 20px; cursor: pointer; opacity: 0.6; transition: opacity var(--gs-transition-fast), background-color var(--gs-transition-fast), box-shadow var(--gs-transition-fast); z-index: 2; } #login .content-block .reveal:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.04); } #login .content-block .reveal:active { background-color: rgba(0, 0, 0, 0.08); } #login .content-block .reveal:focus-visible { outline: none; box-shadow: var(--gs-focus-ring); } #login .content-block .reveal.hide { background: url(images/eye.svg) center center no-repeat; background-size: 20px 20px; } #login .content-block .security-code { position: absolute; top: 15px; right: 10px; } #login .wrapper .content-block .submit-btn { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 12px; } #login .wrapper .content-block .submit-btn .remember-block { display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 4px 0; } #login .submit-btn .remember-block input { width: 18px; height: 18px; margin: 0; accent-color: var(--gs-color-primary); cursor: pointer; } #login .submit-btn .remember-block .remember-label { font-size: 13px; color: var(--gs-color-text-secondary); cursor: pointer; user-select: none; } #login .submit-btn .remember-help { font-size: 12px; color: var(--gs-color-text-muted); line-height: 1.4; padding-left: 26px; margin-top: -4px; } #login .recover-register-block { text-align: center; padding: 0; margin: 28px 0 20px; list-style: none; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; } #login .recover-register-block li { display: inline-block; list-style: none; } #login .recover-register-block li a { font-weight: 600; color: var(--gs-color-text-secondary); text-decoration: none; transition: color var(--gs-transition-fast); } #login .recover-register-block li a:hover { color: var(--gs-color-primary); } #login .recover-register-block li.separator { color: var(--gs-color-text-muted); } #login .footer { min-height: 25px; padding-top: 10px; border-top: 1px solid var(--gs-border-color); display: flex; justify-content: space-between; align-items: center; } #login .footer .mobile-v { padding-left: 20px; color: var(--gs-color-text-secondary); background-image: url(images/mobile.svg); background-position: left center; background-size: 16px 16px; background-repeat: no-repeat; text-decoration: none; transition: color var(--gs-transition-fast); } #login .footer .mobile-v:hover { color: var(--gs-color-primary); } #login .footer.text { border: none; padding-top: 8px; margin-top: 8px; color: var(--gs-color-text-muted); font-size: 12px; text-align: center; } #login .footer .language-select { display: flex; align-items: center; } #login .footer select.native-select { background-color: var(--gs-bg-input); border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-md); color: var(--gs-color-text); padding: 6px 28px 6px 10px; font-size: 13px; line-height: 1.4; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url(images/arrow-bottom.svg); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px 12px; min-width: 120px; } #login .footer select.native-select:hover { border-color: var(--gs-border-color-strong); background-color: var(--gs-bg-input-hover); } #login .footer select.native-select:focus { outline: none; border-color: var(--gs-color-primary); box-shadow: var(--gs-focus-ring); } #login .footer select.select { background-color: transparent; border: 1px solid var(--gs-border-color); border-radius: var(--gs-radius-md); color: var(--gs-color-text); padding: 4px 8px; font-size: 12px; cursor: pointer; } .row3 { margin-bottom: 10px; display: block; width: 100%; position: relative; line-height: 12px; } #login .row3 { margin-bottom: 14px; } .row3 div { display: inline-block; vertical-align: middle; font-size: 11px; } :root[data-theme="dark"] #login .field-error, :root[data-theme="dark"] #login .form-error { background: rgba(255, 78, 73, 0.10); border-color: rgba(255, 78, 73, 0.25); } :root[data-theme="dark"] #login input.inputbox.input-error { background-color: rgba(255, 78, 73, 0.08); border-color: var(--gs-color-danger); } :root[data-theme="dark"] #login .form-error a { color: #ff8a84; } :root[data-theme="dark"] #login .form-error a:hover { color: var(--gs-color-primary-hover); } :root[data-theme="dark"] #login .form-success { background: rgba(156, 198, 2, 0.12); border-color: rgba(156, 198, 2, 0.28); } :root[data-theme="dark"] #login .form-success a { color: #bfe04d; } :root[data-theme="dark"] #login .form-success a:hover { color: var(--gs-color-primary-hover); } :root[data-theme="dark"] #login .content-block .reveal:hover { background-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] #login .content-block .reveal:active { background-color: rgba(255, 255, 255, 0.10); } /*################################################################################ # LOGIN RESPONSIVE ################################################################################*/ @media (max-width: 480px) { #login .wrapper .inner-wrapper { width: 100%; max-width: calc(100vw - 24px); padding: 20px 16px; margin: 24px auto; border-radius: var(--gs-radius-lg); } #login .logo { margin-bottom: 12px; } #login .login-instruction { font-size: 12px; margin-bottom: 12px; } #login .row3 { margin-bottom: 12px; } #login input.inputbox { height: 44px; padding-left: 44px; padding-right: 48px; font-size: 16px; } #login input.inputbox.icon-user { padding-right: 12px; } #login .icon { background-position: 12px center; background-size: 18px 18px; } #login .wrapper .content-block input.button { height: 48px; font-size: 16px; } #login .content-block .reveal { right: 2px; } #login .recover-register-block { margin: 20px 0 16px; } #login .recover-register-block li a { font-size: 12px; } #login .footer { flex-direction: column; align-items: center; gap: 8px; padding-top: 12px; } #login .footer .float-left, #login .footer .float-right { float: none; } } @media (min-width: 481px) and (max-width: 640px) { #login .wrapper .inner-wrapper { width: 100%; max-width: calc(100vw - 40px); margin: 32px auto; } } /*################################################################################ # RESPONSIVE ################################################################################*/ @media (max-width: 1200px) { #top_panel .tp-segmented-item .btn-label { display: none; } #top_panel .tp-segmented-item { padding: 0 8px; } #top_panel .tp-menu-label { display: none; } #top_panel .tp-cmdk-label { display: none; } #top_panel .tp-cmdk-trigger { min-width: auto; padding: 0 10px; } #top_panel .tp-avatar-name { display: none; } } @media (max-width: 1050px) { #top_panel .select-language { display: none; } } @media (max-width: 1000px) { #bottom_panel_graph_label { display: none; } } @media (max-width: 950px) { #top_panel .tp-brand-help { display: none; } #top_panel .tp-cmdk-kbd { display: none; } } @media (max-width: 850px) { #top_panel .tp-avatar-wrap { display: none; } } @media (max-width: 800px) { .map-layer-control { display: none; } } @media (max-width: 700px) { #top_panel .tp-zone-left { padding: 0 2px; gap: 4px; } #top_panel .tp-zone-right { padding: 0 2px; gap: 4px; } #top_panel .tp-segmented-item { padding: 0 6px; } } /*################################################################################ # DARK THEME COMPREHENSIVE ################################################################################*/ :root[data-theme="dark"] .dashboard-stat-tile { background: var(--gs-bg-panel); border-color: var(--gs-border-color); } :root[data-theme="dark"] .datalist-item { border-color: var(--gs-border-color); } :root[data-theme="dark"] .datalist-item.odd { background-color: var(--gs-bg-subtle); } :root[data-theme="dark"] .ui-widget-overlay { background: rgba(0, 0, 0, 0.7); } :root[data-theme="dark"] .ui-dialog { background: var(--gs-glass-bg-dialog); } :root[data-theme="dark"] .ui-dialog .ui-dialog-titlebar { border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-dialog .ui-dialog-buttonpane { border-color: var(--gs-border-color); } :root[data-theme="dark"] #billing_plan_purchase_list .row { border-color: var(--gs-border-color); } :root[data-theme="dark"] #billing_plan_purchase_list .row.header { background: var(--gs-bg-subtle); } :root[data-theme="dark"] #billing_plan_purchase_list .row.even { background: var(--gs-bg-subtle); } :root[data-theme="dark"] .ui-tabs-nav { border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-tabs-panel { background: transparent; } :root[data-theme="dark"] .ui-dialog .ui-tabs-nav li a:hover { background: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .chat-input-area { background: var(--gs-bg-subtle); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-jqgrid .ui-jqgrid-hdiv { background: var(--gs-bg-subtle); } :root[data-theme="dark"] .ui-jqgrid .ui-jqgrid-btable { background: var(--gs-bg-panel); } :root[data-theme="dark"] .ui-jqgrid .ui-jqgrid-pager { background: var(--gs-bg-subtle); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-jqgrid tr.ui-row-ltr td { border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-jqgrid .ui-pg-input, :root[data-theme="dark"] .ui-jqgrid .ui-pg-selbox { background: var(--gs-bg-panel); border-color: var(--gs-border-color); color: var(--gs-color-text); } :root[data-theme="dark"] .ui-jqgrid .ui-search-toolbar input, :root[data-theme="dark"] .ui-jqgrid .ui-search-toolbar select { background: var(--gs-bg-panel); border-color: var(--gs-border-color); color: var(--gs-color-text); } :root[data-theme="dark"] #cpanel_user_list, :root[data-theme="dark"] #cpanel_object_list, :root[data-theme="dark"] #cpanel_unused_object_list, :root[data-theme="dark"] #cpanel_billing_plan_list, :root[data-theme="dark"] #cpanel_manage_server { background: var(--gs-glass-bg-dialog); border-color: var(--gs-border-color); } :root[data-theme="dark"] #cpanel_manage_server .ui-tabs-nav { background: var(--gs-bg-subtle); } :root[data-theme="dark"] #cpanel_manage_server .ui-img-container { background-color: var(--gs-bg-subtle); border-color: var(--gs-border-color); } :root[data-theme="dark"] .report-filters { background: var(--gs-bg-panel); border-color: var(--gs-border-color); } :root[data-theme="dark"] .report-results { background: var(--gs-bg-panel); border-color: var(--gs-border-color); } :root[data-theme="dark"] .report-summary { background: var(--gs-bg-subtle); border-color: var(--gs-border-color); } :root[data-theme="dark"] .history-detail-table tr { border-color: var(--gs-border-color); } :root[data-theme="dark"] #settings_main_sms .controls-block, :root[data-theme="dark"] #settings_main_user_interface .controls-block, :root[data-theme="dark"] #settings_main_my_account .controls-block { background: var(--gs-bg-subtle); } :root[data-theme="dark"] #login .wrapper .inner-wrapper { background: var(--gs-glass-bg-dialog); border-color: var(--gs-glass-border-dialog); } :root[data-theme="dark"] #login input.inputbox { background-color: #1e293b; border-color: #475569; color: #e2e8f0; } :root[data-theme="dark"] #login .recover-register-block li a { color: var(--gs-color-text-secondary); } :root[data-theme="dark"] #login .footer { border-color: var(--gs-border-color); } :root[data-theme="dark"] #login .footer .mobile-v { color: var(--gs-color-text-secondary); } :root[data-theme="dark"] #login .icon { opacity: 0.7; } :root[data-theme="dark"] .login-error { background: rgba(220, 53, 69, 0.15); border-color: rgba(220, 53, 69, 0.3); } :root[data-theme="dark"] .object-control-item { background: var(--gs-bg-panel); border-color: var(--gs-border-color); } /*################################################################################ # DARK THEME — jQUERY UI WIDGET OVERRIDES # theme/jquery-ui.css ships with fixed light colors; neutralize them in dark mode. ################################################################################*/ :root[data-theme="dark"] .ui-widget-content, :root[data-theme="dark"] .ui-widget-content .ui-widget-content { background: var(--gs-bg-panel); color: var(--gs-color-text); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-widget-header, :root[data-theme="dark"] .ui-widget-content .ui-widget-header { background: var(--gs-bg-subtle); color: var(--gs-color-text); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-state-default, :root[data-theme="dark"] .ui-widget-content .ui-state-default, :root[data-theme="dark"] .ui-widget-header .ui-state-default { background: var(--gs-bg-subtle); color: var(--gs-color-text); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-state-hover, :root[data-theme="dark"] .ui-widget-content .ui-state-hover, :root[data-theme="dark"] .ui-widget-header .ui-state-hover, :root[data-theme="dark"] .ui-state-focus, :root[data-theme="dark"] .ui-widget-content .ui-state-focus, :root[data-theme="dark"] .ui-widget-header .ui-state-focus { background: var(--gs-bg-hover); color: var(--gs-color-text); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-state-active, :root[data-theme="dark"] .ui-widget-content .ui-state-active, :root[data-theme="dark"] .ui-widget-header .ui-state-active { background: var(--gs-bg-panel); color: var(--gs-color-primary); border-color: var(--gs-color-primary); } :root[data-theme="dark"] .ui-state-highlight, :root[data-theme="dark"] .ui-widget-content .ui-state-highlight, :root[data-theme="dark"] .ui-widget-header .ui-state-highlight { background: var(--gs-bg-hover); color: var(--gs-color-text); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-datepicker { background: var(--gs-bg-panel); border-color: var(--gs-border-color); box-shadow: var(--gs-shadow-xl); } :root[data-theme="dark"] .ui-datepicker .ui-datepicker-header { background: var(--gs-bg-subtle); color: var(--gs-color-text); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-datepicker th, :root[data-theme="dark"] .ui-datepicker td span, :root[data-theme="dark"] .ui-datepicker td a { color: var(--gs-color-text); } :root[data-theme="dark"] .ui-datepicker td a.ui-state-hover { background: var(--gs-bg-hover); } :root[data-theme="dark"] .ui-datepicker td a.ui-state-active { background: var(--gs-color-primary); color: #fff; } :root[data-theme="dark"] .ui-menu { background: var(--gs-bg-panel); border-color: var(--gs-border-color); box-shadow: var(--gs-shadow-xl); } :root[data-theme="dark"] .ui-menu .ui-menu-item a, :root[data-theme="dark"] .ui-menu .ui-menu-item a:link, :root[data-theme="dark"] .ui-menu .ui-menu-item a:visited { color: var(--gs-color-text); } :root[data-theme="dark"] .ui-menu .ui-menu-item a.ui-state-hover, :root[data-theme="dark"] .ui-menu .ui-menu-item a.ui-state-active, :root[data-theme="dark"] .ui-menu .ui-menu-item a.ui-state-focus { background: var(--gs-bg-hover); color: var(--gs-color-text); } :root[data-theme="dark"] .ui-autocomplete { background: var(--gs-bg-panel); border-color: var(--gs-border-color); box-shadow: var(--gs-shadow-xl); } :root[data-theme="dark"] .ui-autocomplete .ui-menu-item { color: var(--gs-color-text); } :root[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-hover, :root[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-active, :root[data-theme="dark"] .ui-autocomplete .ui-menu-item.ui-state-focus { background: var(--gs-bg-hover); color: var(--gs-color-text); } :root[data-theme="dark"] .ui-button, :root[data-theme="dark"] button.ui-button, :root[data-theme="dark"] input.ui-button { background: var(--gs-bg-subtle); color: var(--gs-color-text); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-button.ui-state-hover, :root[data-theme="dark"] .ui-button.ui-state-focus { background: var(--gs-bg-hover); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-button.ui-state-active { background: var(--gs-color-primary); color: #fff; border-color: var(--gs-color-primary); } :root[data-theme="dark"] .ui-tooltip { background: var(--gs-bg-panel); color: var(--gs-color-text); border-color: var(--gs-border-color); box-shadow: var(--gs-shadow-lg); } :root[data-theme="dark"] .ui-progressbar { background: var(--gs-bg-subtle); border-color: var(--gs-border-color); } :root[data-theme="dark"] .ui-progressbar .ui-progressbar-value { background: var(--gs-color-primary); }