/* === CSS Variables for Modern Theme (GitHub Dark) === */ :root { /* ===== ФОНЫ ===== */ --bg-darkest: #0d1117; --bg-dark: #0d1117; --ui-bg: #0d1117; --bg-card: #161b22; --bg-card-hover: #1c2128; --bg-elevated: #21262d; --ui-surface: #161b22; --ui-surface-2: #0d1117; /* ===== ГРАНИЦЫ ===== */ --border-default: #30363d; --ui-border: #30363d; /* ===== АКЦЕНТ — Зелёный ===== */ /* Один базовый зелёный (как в sidebar) */ --ui-accent: #2ea043; --ui-accent-hover: var(--ui-accent); --ui-green: var(--ui-accent); --ui-on-accent: #fff; /* Совместимость со старым именованием */ --accent-primary: var(--ui-accent); --accent-primary-hover: var(--ui-accent); --accent-primary-light: rgba(46, 160, 67, 0.14); --ui-green-text: var(--ui-on-accent); --ui-green-bg: rgba(46, 160, 67, 0.14); --ui-green-border: rgba(46, 160, 67, 0.35); /* ===== ТЕКСТ ===== */ --text-primary: #c9d1d9; --ui-text: #c9d1d9; --text-secondary: #8b949e; --ui-muted: #8b949e; --text-muted: #6e7681; /* ===== DANGER ===== */ --ui-danger: #f85149; --ui-danger-bg: rgba(248, 81, 73, 0.16); --ui-danger-border: rgba(248, 81, 73, 0.30); /* ===== RADIUS ===== */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* ===== TRANSITIONS ===== */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; /* ===== SHADOWS ===== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.55); /* Help native form controls match dark UI */ color-scheme: dark; } /* ============================================ Light Theme (CSS-only via shortcuts toggle) - Toggle adds `.is-light` on `.theme-toggle-btn` - We hook into it with `:has()` and override variables ============================================ */ html:has(.theme-toggle-btn.is-light) { /* ===== ФОНЫ ===== */ /* Soft Slate Light UI (no “white sheet”) */ --bg-darkest: #cfdbe7; /* app background */ --bg-dark: #d7e2ee; /* subtle surface tint */ --ui-bg: #cfdbe7; --bg-card: #e3ecf5; /* cards / table surface */ --bg-card-hover: #eef3f8; --bg-elevated: #d7e2ee; /* inputs/toolbars */ --ui-surface: #d7e2ee; /* content wrapper */ --ui-surface-2: #cfdbe7; /* ===== ГРАНИЦЫ ===== */ --border-default: #b7c6d6; --ui-border: #b7c6d6; /* ===== АКЦЕНТ — Зелёный ===== */ --ui-accent: #2da44e; --ui-on-accent: #f8fafc; /* off-white for less glare */ --accent-primary: #2da44e; --accent-primary-light: rgba(45, 164, 78, 0.16); --ui-green-bg: rgba(45, 164, 78, 0.16); --ui-green-border: rgba(45, 164, 78, 0.35); /* ===== ТЕКСТ ===== */ --text-primary: #24292f; --ui-text: #24292f; --text-secondary: #57606a; --ui-muted: #656d76; --text-muted: #848d97; /* ===== DANGER ===== */ --ui-danger: #cf222e; --ui-danger-bg: rgba(207, 34, 46, 0.15); --ui-danger-border: rgba(207, 34, 46, 0.30); /* ===== SHADOWS (lighter for light UI) ===== */ --shadow-sm: 0 1px 3px rgba(31, 35, 40, 0.12), 0 1px 2px rgba(31, 35, 40, 0.08); --shadow-md: 0 3px 6px rgba(31, 35, 40, 0.10), 0 2px 4px rgba(31, 35, 40, 0.06); --shadow-lg: 0 10px 25px rgba(31, 35, 40, 0.10), 0 4px 10px rgba(31, 35, 40, 0.05); color-scheme: light; } /* Light theme: override local navbar hover vars */ html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper { --nav-hover-bg: rgba(45, 164, 78, 0.12); --nav-hover-color: #1f883d; } /* Light theme: navbar/menu wrapper should not look like a white sheet */ html:has(.theme-toggle-btn.is-light) .navbar, html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper { background: var(--bg-dark) !important; border-bottom: 1px solid var(--ui-border) !important; } /* Light theme: License button (days left) must have dark text */ html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn { border: 1px solid var(--ui-border) !important; background: var(--bg-elevated) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-success { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-success:hover { background: rgba(45, 164, 78, 0.22) !important; border-color: rgba(45, 164, 78, 0.45) !important; } html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-warning { background: rgba(154, 103, 0, 0.14) !important; border-color: rgba(154, 103, 0, 0.32) !important; color: #7a4b00 !important; } html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-danger { background: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; color: var(--ui-danger) !important; } /* Light theme: header container should feel like one panel */ html:has(.theme-toggle-btn.is-light) .page-header-tab > .col-12.pl-0.pr-0 { background: var(--bg-dark) !important; } /* Light theme: sidebar gets a tinted surface (less “white sheet”) */ html:has(.theme-toggle-btn.is-light) .sidebar { background: var(--ui-surface) !important; border-right: 1px solid var(--ui-border) !important; } /* Light theme: content wrapper slightly tinted */ html:has(.theme-toggle-btn.is-light) .content-wrapper { background-color: var(--ui-surface) !important; background-image: /* slightly stronger green glow */ radial-gradient(900px 620px at 18% 12%, rgba(45, 164, 78, 0.14) 0%, transparent 64%), radial-gradient(1100px 760px at 84% 18%, rgba(45, 164, 78, 0.10) 0%, transparent 66%), radial-gradient(1200px 900px at 32% 110%, rgba(45, 164, 78, 0.07) 0%, transparent 68%), /* small highlight near header/toolbars */ radial-gradient(520px 260px at 72% 10%, rgba(45, 164, 78, 0.10) 0%, transparent 70%), linear-gradient(180deg, var(--ui-surface) 0%, var(--ui-bg) 100%); background-size: auto, auto, auto, auto, auto; background-position: 0 0, 0 0, 0 0, 0 0; background-attachment: fixed; } /* Light theme: Layout page (layout.css is dark by default) */ html:has(.theme-toggle-btn.is-light) #layoutPanel .card, html:has(.theme-toggle-btn.is-light) #layoutPanel .card-body, html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-tabs-content { background: var(--ui-bg) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header { background: var(--bg-dark) !important; border-bottom: 1px solid var(--ui-border) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-unassigned { background: var(--bg-card) !important; border: 1px solid var(--ui-border) !important; } /* Light theme: make Layout feel like a distinct canvas (not a white sheet) */ html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-tabs-content { background: var(--ui-bg) !important; /* canvas backdrop */ } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-grid-wrap { background: var(--ui-bg) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--shadow-sm) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-tabs .nav-link { background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-tabs .nav-link:hover { background: var(--bg-card-hover) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-tabs .nav-link.active { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } /* Light theme: layout furniture "Room" item text/icon should be dark */ html:has(.theme-toggle-btn.is-light) #layoutPanel .furniture-item .mdi.mdi-home, html:has(.theme-toggle-btn.is-light) #layoutPanel .furniture-item .area-name.text-uppercase, html:has(.theme-toggle-btn.is-light) #layoutPanel .furniture-object.room .mdi.mdi-home, html:has(.theme-toggle-btn.is-light) #layoutPanel .furniture-object.room .area-name.text-uppercase { color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-grid { /* Replace dark layout.css hardcoded visuals with light canvas */ background-color: var(--bg-darkest) !important; background-image: radial-gradient(rgba(31, 35, 40, 0.10) 8%, transparent 9%), radial-gradient(rgba(31, 35, 40, 0.10) 8%, transparent 9%) !important; background-size: 30px 30px !important; background-position: 0 0, 30px 30px !important; border: 1px solid rgba(31, 35, 40, 0.18) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-grid .grid-cell { border-color: rgba(31, 35, 40, 0.18) !important; background: rgba(31, 35, 40, 0.05) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-grid .grid-cell.draging-from { border-color: rgba(31, 35, 40, 0.45) !important; background: rgba(31, 35, 40, 0.08) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-grid .grid-cell.draging-to { border-color: rgba(45, 164, 78, 0.45) !important; background: rgba(45, 164, 78, 0.12) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-grid .grid-cell:hover { background: rgba(45, 164, 78, 0.08) !important; border-color: rgba(45, 164, 78, 0.25) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel .pc-layout-box { background: linear-gradient(135deg, var(--status-bg, rgba(31, 35, 40, 0.10)) 0%, var(--bg-elevated) 100%) !important; border: 1px solid rgba(31, 35, 40, 0.18) !important; box-shadow: var(--shadow-sm) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel .pc-layout-box:hover { box-shadow: var(--shadow-md) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel .pc-layout-box .pc-name, html:has(.theme-toggle-btn.is-light) #layoutPanel .pc-layout-box .name { color: var(--ui-text) !important; } /* Light theme: keep selection outline consistent with dark theme (purple border) */ html:has(.theme-toggle-btn.is-light) #layoutPanel .pc-layout-box.box-selected { border: 3px solid purple !important; } /* Light theme: nav-header buttons should not stay dark */ html:has(.theme-toggle-btn.is-light) #layoutPanel .mdi-button { background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel .mdi-button:hover { background: var(--bg-card-hover) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header .layout-controls .nav-dropdown-btn:not(.btn-success-style):not(.btn-warning-style):not(.btn-danger-style):not(.btn-info-style) { background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header .layout-controls .nav-dropdown-btn:not(.btn-success-style):not(.btn-warning-style):not(.btn-danger-style):not(.btn-info-style):hover { background: var(--bg-card-hover) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } /* Light theme: Layout side panels (PCs / furniture) should match light palette */ html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-unassigned-panel, html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-second-layout-panel, html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-furniture-panel { background: var(--bg-card) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--shadow-lg) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-unassigned-panel .panel-header, html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-second-layout-panel .panel-header, html:has(.theme-toggle-btn.is-light) #layoutPanel .furniture-panel .panel-header { background: var(--bg-dark) !important; border-bottom: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-unassigned-panel .panel-actions button { background: var(--ui-green-bg) !important; border: 1px solid var(--ui-green-border) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-unassigned-panel .panel-actions button:hover { background: rgba(45, 164, 78, 0.20) !important; border-color: rgba(45, 164, 78, 0.45) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-unassigned-panel .panel-actions button:disabled { opacity: 0.45; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-unassigned-panel .pc-layout-box.mini .name { color: var(--ui-text) !important; text-shadow: none !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #pc-layout-unassigned-panel .pc-layout-box.mini.selected { outline: 2px solid rgba(45, 164, 78, 0.55) !important; box-shadow: none !important; } /* Light theme: Layout "Room objects" keeps its own colored chips (layout.css), so don't override backgrounds here */ /* Light theme: furniture objects outline should be dark and readable */ html:has(.theme-toggle-btn.is-light) #layoutPanel .furniture-object.room { border-color: rgba(31, 35, 40, 0.35) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel .furniture-object.room.editable { border-color: rgba(31, 35, 40, 0.55) !important; } /* Light theme: Layout header controls should be light too */ html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header #nav-right-menu .nav-action-btn, html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header #nav-right-menu .nav-dropdown-btn, html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header #room-nav .nav-prev, html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header #room-nav .nav-next, html:has(.theme-toggle-btn.is-light) #layoutPanel .btn-add-room { background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header #nav-right-menu .nav-action-btn:hover, html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header #nav-right-menu .nav-dropdown-btn:hover, html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header #room-nav .nav-prev:hover, html:has(.theme-toggle-btn.is-light) #layoutPanel #nav-header #room-nav .nav-next:hover, html:has(.theme-toggle-btn.is-light) #layoutPanel .btn-add-room:hover { background: var(--bg-card-hover) !important; border-color: var(--ui-green-border) !important; color: #1f883d !important; } /* Light theme: Layout dropdown menus (layout.htm uses dropdown-menu-dark) */ html:has(.theme-toggle-btn.is-light) #layoutPanel .dropdown-menu.dropdown-menu-dark { background: var(--bg-card) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--shadow-lg) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel .dropdown-menu.dropdown-menu-dark .dropdown-item { color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #layoutPanel .dropdown-menu.dropdown-menu-dark .dropdown-item:hover, html:has(.theme-toggle-btn.is-light) #layoutPanel .dropdown-menu.dropdown-menu-dark .dropdown-item:focus { background: var(--ui-green-bg) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) .page-header-tab .nav-tabs.tab-transparent { background: transparent !important; border-bottom: 0 !important; box-shadow: none !important; } /* Light theme: links should be visible */ html:has(.theme-toggle-btn.is-light) a { color: var(--ui-accent) !important; } html:has(.theme-toggle-btn.is-light) a:hover { color: #1f883d !important; } /* Light theme: dropdown should not stay dark */ html:has(.theme-toggle-btn.is-light) .dropdown-menu.navbar-dropdown { background: var(--bg-card) !important; box-shadow: 0 8px 24px rgba(31, 35, 40, 0.12) !important; } /* Light theme: cards should stand out from page background */ html:has(.theme-toggle-btn.is-light) .container-scroller .card { background-color: var(--bg-card) !important; box-shadow: var(--shadow-md) !important; } html:has(.theme-toggle-btn.is-light) .container-scroller .card > .card-header, html:has(.theme-toggle-btn.is-light) .container-scroller .card > .card-footer { background-color: var(--bg-dark) !important; } /* Light theme: tab-content surface should have a bit more depth */ html:has(.theme-toggle-btn.is-light) .container-scroller .tab-content:not(.tab-transparent-content) { background-color: var(--bg-card) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--shadow-md) !important; } /* Light theme: user dropdown hover background */ html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper #user_dropdown:hover { background: var(--nav-hover-bg) !important; } /* Light theme: page header tabs hover should be subtle (no “odd block” effect) */ html:has(.theme-toggle-btn.is-light) .page-header-tab .nav-tabs.tab-transparent .nav-item .nav-link:hover { /* soft green-tinted hover (not plain white) */ background: rgba(45, 164, 78, 0.10) !important; border-color: rgba(45, 164, 78, 0.22) !important; color: var(--ui-text) !important; } /* Light theme: active tab must stay active even on hover */ html:has(.theme-toggle-btn.is-light) .page-header-tab .nav-tabs.tab-transparent .nav-item .nav-link.active:hover { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } /* Light theme: Shop tabs hover */ html:has(.theme-toggle-btn.is-light) #shopPanel #store-tabs.nav.nav-tabs .nav-link:hover, html:has(.theme-toggle-btn.is-light) #shopPanel #subgroup-tabs.nav.nav-tabs .nav-link:hover, html:has(.theme-toggle-btn.is-light) #shopPanel #cart-tabs.nav.nav-tabs .nav-link:hover { background: var(--bg-elevated) !important; } /* Light theme: make active tabs feel “selected” */ html:has(.theme-toggle-btn.is-light) .page-header-tab .nav-tabs.tab-transparent .nav-item .nav-link.active, html:has(.theme-toggle-btn.is-light) #shopPanel #store-tabs.nav.nav-tabs .nav-link.active, html:has(.theme-toggle-btn.is-light) #shopPanel #subgroup-tabs.nav.nav-tabs .nav-link.active, html:has(.theme-toggle-btn.is-light) #shopPanel #cart-tabs.nav.nav-tabs .nav-link.active { color: #1f883d !important; } /* Light theme: overlays should still dim the page */ html:has(.theme-toggle-btn.is-light) .ui-widget-overlay { background: rgba(31, 35, 40, 0.35) !important; opacity: 1 !important; } /* Light theme: tables should be readable and softly striped */ html:has(.theme-toggle-btn.is-light) .container-scroller .table, html:has(.theme-toggle-btn.is-light) .container-scroller .jsgrid .jsgrid-table { color: var(--ui-text) !important; background-color: var(--bg-card) !important; } /* Light theme: table container should not blend with page */ html:has(.theme-toggle-btn.is-light) .container-scroller table thead th, html:has(.theme-toggle-btn.is-light) .container-scroller .table thead th { background-color: var(--bg-dark) !important; color: var(--ui-text) !important; } /* Light theme: table header gets a subtle blue separator */ html:has(.theme-toggle-btn.is-light) .container-scroller .table thead th { box-shadow: inset 0 -1px 0 rgba(9, 105, 218, 0.18) !important; } html:has(.theme-toggle-btn.is-light) .container-scroller .table th, html:has(.theme-toggle-btn.is-light) .container-scroller .table td { color: var(--ui-text) !important; } /* Light theme: keep text readable on contextual rows */ html:has(.theme-toggle-btn.is-light) .table-success, html:has(.theme-toggle-btn.is-light) .table-success > th, html:has(.theme-toggle-btn.is-light) .table-success > td, html:has(.theme-toggle-btn.is-light) .table-info, html:has(.theme-toggle-btn.is-light) .table-info > th, html:has(.theme-toggle-btn.is-light) .table-info > td, html:has(.theme-toggle-btn.is-light) .table-warning, html:has(.theme-toggle-btn.is-light) .table-warning > th, html:has(.theme-toggle-btn.is-light) .table-warning > td, html:has(.theme-toggle-btn.is-light) .table-danger, html:has(.theme-toggle-btn.is-light) .table-danger > th, html:has(.theme-toggle-btn.is-light) .table-danger > td { color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(odd), html:has(.theme-toggle-btn.is-light) .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(odd) > th, html:has(.theme-toggle-btn.is-light) .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(odd) > td { background-color: var(--bg-dark) !important; } html:has(.theme-toggle-btn.is-light) .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(even) > th, html:has(.theme-toggle-btn.is-light) .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(even) > td { background-color: var(--bg-card) !important; } /* Light theme: pagination hover */ html:has(.theme-toggle-btn.is-light) .container-scroller .pagination.pagination-separated .page-link:hover { background: var(--bg-elevated) !important; border-color: var(--ui-border) !important; } /* Light theme: search input separator should follow light border */ html:has(.theme-toggle-btn.is-light) #search-member-group .form-control { border-left: 1px solid var(--ui-border) !important; } /* Light theme: improve hover contrast where dark theme uses white alpha */ html:has(.theme-toggle-btn.is-light) .sidebar .nav .nav-item:hover > .nav-link, html:has(.theme-toggle-btn.is-light) .sidebar .nav .nav-item .nav-link:hover, html:has(.theme-toggle-btn.is-light) .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link[aria-expanded="true"], html:has(.theme-toggle-btn.is-light) .sidebar .nav:not(.sub-menu) > .nav-item:active > .nav-link, html:has(.theme-toggle-btn.is-light) .sidebar .nav:not(.sub-menu) > .nav-item:focus > .nav-link, html:has(.theme-toggle-btn.is-light) .sidebar .nav .nav-item .nav-link[aria-expanded="true"], html:has(.theme-toggle-btn.is-light) .sidebar .nav.sub-menu .nav-item .nav-link:hover { background: rgba(31, 35, 40, 0.05) !important; } /* Light theme: avoid forced white text on active sub-menu link */ html:has(.theme-toggle-btn.is-light) .sidebar .nav.sub-menu .nav-item .nav-link.active { color: var(--ui-text) !important; } /* Light theme: ensure all text elements use dark text */ html:has(.theme-toggle-btn.is-light) body, html:has(.theme-toggle-btn.is-light) .container-scroller, html:has(.theme-toggle-btn.is-light) .content-wrapper, html:has(.theme-toggle-btn.is-light) .main-panel, html:has(.theme-toggle-btn.is-light) .page-body-wrapper { color: var(--ui-text) !important; } /* Light theme: card titles/headings must be dark (some base styles force white) */ html:has(.theme-toggle-btn.is-light) .card .card-title, html:has(.theme-toggle-btn.is-light) .card .card-title .lang, html:has(.theme-toggle-btn.is-light) .card .card-title #total_nums { color: var(--ui-text) !important; } /* Light theme: main surfaces should not look like a pure white sheet */ html:has(.theme-toggle-btn.is-light) body, html:has(.theme-toggle-btn.is-light) html, html:has(.theme-toggle-btn.is-light) .container-scroller, html:has(.theme-toggle-btn.is-light) .page-body-wrapper, html:has(.theme-toggle-btn.is-light) .main-panel { background-color: var(--ui-bg) !important; } /* Light theme: buttons and inputs should have proper text color */ html:has(.theme-toggle-btn.is-light) .btn, html:has(.theme-toggle-btn.is-light) .form-control, html:has(.theme-toggle-btn.is-light) input, html:has(.theme-toggle-btn.is-light) select, html:has(.theme-toggle-btn.is-light) textarea { color: var(--ui-text) !important; } /* Light theme: PC status icons (main.htm inline styles are dark-theme oriented) */ html:has(.theme-toggle-btn.is-light) #computersPanel .pc-status-offline { color: var(--ui-text) !important; } /* Light theme: Boot status icons (boot.htm inline styles are dark-theme oriented) */ html:has(.theme-toggle-btn.is-light) #bootPanel #boot_pcs_offline { color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #bootPanel #boot_pcs_disabled { color: var(--ui-muted) !important; } /* Light theme: inputs/selects should use tinted surfaces (avoid white fields) */ html:has(.theme-toggle-btn.is-light) .form-control, html:has(.theme-toggle-btn.is-light) input.form-control, html:has(.theme-toggle-btn.is-light) select.form-control, html:has(.theme-toggle-btn.is-light) textarea.form-control, html:has(.theme-toggle-btn.is-light) input, html:has(.theme-toggle-btn.is-light) select, html:has(.theme-toggle-btn.is-light) textarea { background-color: var(--bg-elevated) !important; border-color: var(--ui-border) !important; } html:has(.theme-toggle-btn.is-light) .form-control::placeholder, html:has(.theme-toggle-btn.is-light) input::placeholder, html:has(.theme-toggle-btn.is-light) textarea::placeholder { color: var(--ui-muted) !important; } html:has(.theme-toggle-btn.is-light) .form-control:focus, html:has(.theme-toggle-btn.is-light) input:focus, html:has(.theme-toggle-btn.is-light) select:focus, html:has(.theme-toggle-btn.is-light) textarea:focus { border-color: rgba(45, 164, 78, 0.45) !important; box-shadow: none !important; outline: none; } html:has(.theme-toggle-btn.is-light) .input-group-text, html:has(.theme-toggle-btn.is-light) .input-group-addon { background-color: var(--bg-card) !important; color: var(--ui-muted) !important; border-color: var(--ui-border) !important; } /* Light theme: tab links proper colors */ html:has(.theme-toggle-btn.is-light) .page-header-tab .nav-tabs.tab-transparent .nav-item .nav-link { color: var(--ui-muted) !important; } html:has(.theme-toggle-btn.is-light) .page-header-tab .nav-tabs.tab-transparent .nav-item .nav-link.active { color: var(--ui-text) !important; } /* Light theme: pagination text */ html:has(.theme-toggle-btn.is-light) .pagination .page-link { color: var(--ui-text) !important; } /* Light theme: dropdown items */ html:has(.theme-toggle-btn.is-light) .dropdown-item { color: var(--ui-text) !important; } /* Light theme: badges need solid backgrounds and dark text for contrast */ html:has(.theme-toggle-btn.is-light) .container-scroller span.badge, html:has(.theme-toggle-btn.is-light) .container-scroller label.badge { background-color: #6e7781 !important; color: white !important; border-color: #57606a !important; } /* Light theme: badge variants with proper solid colors */ html:has(.theme-toggle-btn.is-light) .container-scroller span.badge.badge-success, html:has(.theme-toggle-btn.is-light) .container-scroller label.badge.badge-success, html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Online, html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Write, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Online, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Write { background-color: #1a7f37 !important; border-color: #2da44e !important; color: white !important; } html:has(.theme-toggle-btn.is-light) .container-scroller span.badge.badge-danger, html:has(.theme-toggle-btn.is-light) .container-scroller label.badge.badge-danger, html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Maintenance, html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Maintence, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Maintenance, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Maintence { background-color: #a40e26 !important; border-color: #cf222e !important; color: white !important; } html:has(.theme-toggle-btn.is-light) .container-scroller span.badge.badge-warning, html:has(.theme-toggle-btn.is-light) .container-scroller label.badge.badge-warning, html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Standby, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Standby { background-color: #9a6700 !important; border-color: #bf8700 !important; color: white !important; } html:has(.theme-toggle-btn.is-light) .container-scroller span.badge.badge-info, html:has(.theme-toggle-btn.is-light) .container-scroller label.badge.badge-info, html:has(.theme-toggle-btn.is-light) .container-scroller span.badge.bg-info, html:has(.theme-toggle-btn.is-light) .container-scroller label.badge.bg-info, html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Disconnected, html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Disconected, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Disconnected, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Disconected { background-color: #0969da !important; border-color: #218bff !important; color: white !important; } html:has(.theme-toggle-btn.is-light) .container-scroller span.badge.badge-primary, html:has(.theme-toggle-btn.is-light) .container-scroller label.badge.badge-primary { background-color: #1a7f37 !important; border-color: #2da44e !important; color: white !important; } html:has(.theme-toggle-btn.is-light) .container-scroller span.badge.badge-secondary, html:has(.theme-toggle-btn.is-light) .container-scroller label.badge.badge-secondary, html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Offline, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Offline, html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Paused, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Paused { background-color: #57606a !important; border-color: #6e7781 !important; color: white !important; } html:has(.theme-toggle-btn.is-light) .container-scroller span.badge.badge-light, html:has(.theme-toggle-btn.is-light) .container-scroller label.badge.badge-light { background-color: #6e7781 !important; border-color: #848d97 !important; color: white !important; } html:has(.theme-toggle-btn.is-light) #pcLayoutPanel .badge.badge-pc-Booking, html:has(.theme-toggle-btn.is-light) #consolesLayoutPanel .badge.badge-pc-Booking { background-color: #8250df !important; border-color: #a371f7 !important; color: white !important; } /* Light theme: Boot panel badges */ html:has(.theme-toggle-btn.is-light) #bootPanel .badge[class^="badge-pc-"], html:has(.theme-toggle-btn.is-light) #bootPanel .badge[class*=" badge-pc-"] { background-color: #6e7781 !important; border-color: #57606a !important; color: white !important; } html:has(.theme-toggle-btn.is-light) #bootPanel .badge.badge-pc-Online, html:has(.theme-toggle-btn.is-light) #bootPanel .badge.badge-pc-Write { background-color: #1a7f37 !important; border-color: #2da44e !important; } html:has(.theme-toggle-btn.is-light) #bootPanel .badge.badge-pc-Offline, html:has(.theme-toggle-btn.is-light) #bootPanel .badge.badge-pc-Enable { background-color: #57606a !important; border-color: #6e7781 !important; } html:has(.theme-toggle-btn.is-light) #bootPanel .badge.badge-pc-Disable { background-color: #a40e26 !important; border-color: #cf222e !important; } /* Light theme: Order status badges */ html:has(.theme-toggle-btn.is-light) #shopPanel span.badge[class*="badge-order-"], html:has(.theme-toggle-btn.is-light) #posPanel span.badge[class*="badge-order-"], html:has(.theme-toggle-btn.is-light) #memberOrderPanel span.badge[class*="badge-order-"] { background-color: #6e7781 !important; border-color: #57606a !important; color: white !important; } html:has(.theme-toggle-btn.is-light) #shopPanel span.badge.badge-order-paid, html:has(.theme-toggle-btn.is-light) #posPanel span.badge.badge-order-paid, html:has(.theme-toggle-btn.is-light) #memberOrderPanel span.badge.badge-order-paid { background-color: #1a7f37 !important; border-color: #2da44e !important; } html:has(.theme-toggle-btn.is-light) #shopPanel span.badge.badge-order-cancelled, html:has(.theme-toggle-btn.is-light) #posPanel span.badge.badge-order-cancelled, html:has(.theme-toggle-btn.is-light) #memberOrderPanel span.badge.badge-order-cancelled { background-color: #a40e26 !important; border-color: #cf222e !important; } html:has(.theme-toggle-btn.is-light) #shopPanel span.badge.badge-order-in-process, html:has(.theme-toggle-btn.is-light) #posPanel span.badge.badge-order-in-process, html:has(.theme-toggle-btn.is-light) #memberOrderPanel span.badge.badge-order-in-process { background-color: #0969da !important; border-color: #218bff !important; } html:has(.theme-toggle-btn.is-light) #shopPanel span.badge.badge-order-pending, html:has(.theme-toggle-btn.is-light) #posPanel span.badge.badge-order-pending, html:has(.theme-toggle-btn.is-light) #memberOrderPanel span.badge.badge-order-pending { background-color: #9a6700 !important; border-color: #bf8700 !important; } html:has(.theme-toggle-btn.is-light) #shopPanel span.badge.badge-order-partial-refund, html:has(.theme-toggle-btn.is-light) #posPanel span.badge.badge-order-partial-refund, html:has(.theme-toggle-btn.is-light) #memberOrderPanel span.badge.badge-order-partial-refund { background-color: #8250df !important; border-color: #a371f7 !important; } /* Light theme: Sidebar badges (notifications) */ html:has(.theme-toggle-btn.is-light) .sidebar .nav .nav-item .nav-link .badge { background: #cf222e !important; color: white !important; } html:has(.theme-toggle-btn.is-light) #side-menu span.badge.member-badge, html:has(.theme-toggle-btn.is-light) #side-menu span.badge.shop-badge { background-color: #cf222e !important; color: white !important; } /* Light theme: colored buttons keep white text */ html:has(.theme-toggle-btn.is-light) .btn-danger, html:has(.theme-toggle-btn.is-light) .btn-success, html:has(.theme-toggle-btn.is-light) .btn-primary { color: white !important; } /* Light theme: neutral buttons (info/warning) must keep dark text */ html:has(.theme-toggle-btn.is-light) .btn-info, html:has(.theme-toggle-btn.is-light) .btn-warning { color: var(--ui-text) !important; } /* Light theme: toolbar icon buttons should never be white */ html:has(.theme-toggle-btn.is-light) .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon i, html:has(.theme-toggle-btn.is-light) .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon .mdi, html:has(.theme-toggle-btn.is-light) .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon .fa { color: var(--ui-text) !important; } /* Light theme: icon buttons get colored feedback on hover */ html:has(.theme-toggle-btn.is-light) .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon:hover i, html:has(.theme-toggle-btn.is-light) .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon:hover .mdi, html:has(.theme-toggle-btn.is-light) .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon:hover .fa { color: #1f883d !important; } /* Analysis (Customer) — Light theme fixes (override inline dark styles) */ html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel { color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .text-white { color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .text-muted { color: var(--ui-muted) !important; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel h6.mt-1, html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel h2.mt-1 { color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .card { background-color: var(--bg-card) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .card > .card-header, html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .card > .card-footer { background-color: var(--bg-elevated) !important; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .card > .card-header { border-top-left-radius: inherit; border-top-right-radius: inherit; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .card > .card-footer { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .card-header h4 { color: var(--ui-muted) !important; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .time_range a { color: var(--ui-muted) !important; } html:has(.theme-toggle-btn.is-light) #customerAnalysisPanel .time_range a.active { color: var(--ui-accent) !important; } .ellipsiss{overflow: hidden; text-overflow: ellipsis;white-space: nowrap;} .width-50{width: 50px !important;} .width-80{width: 80px !important;} .width-100{width:100px !important;} .width-120{width: 120px !important;} .width-150{width:150px !important;} .width-180{width:180px !important;} .width-200{width:200px !important;} .contextmenu-item-header { font-weight:bold !important; background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; margin:0 0 8px 0; border-top:none; border-bottom:1px solid var(--border-default); } .context-menu-list { margin-top:0 !important; padding-top:0 !important; background-color: var(--bg-card) !important; border: 1px solid var(--border-default) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-lg) !important; } .context-menu-item { background-color: var(--bg-card) !important; color: var(--text-secondary) !important; transition: all var(--transition-fast); } .context-menu-item:hover { background-color: var(--accent-primary-light) !important; color: var(--accent-primary) !important; } .context-menu-item.context-menu-disabled { color: var(--text-muted) !important; } .context-menu-visible { color: var(--text-secondary) !important; } .context-menu-separator { border-bottom: 1px solid var(--border-default) !important; } .pcs_status { display: none; font-weight: bold; } .pcs_status_sep { margin-left:10px; margin-right:10px; } .cover { position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; overflow: hidden; display: none; background: rgba(0, 0, 0, 0); /* backdrop-filter: blur(2px); */ } html:has(.theme-toggle-btn.is-light) .cover { background: rgba(31, 35, 40, 0.30); } .cover div { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Loading: no “card/plaque”, just a clean spinner */ .cover .cover-font { width: auto; height: auto; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; box-shadow: none; color: var(--ui-text); } .cover .cover-font i { display: none; } /* Fallback spinner (always works) */ .cover .cover-font::before { content: ""; width: 56px; height: 56px; border-radius: 999px; border: 4px solid rgba(255, 255, 255, 0.16); border-top-color: var(--ui-accent); border-right-color: rgba(46, 160, 67, 0.10); animation: cover-spin 0.9s linear infinite; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35)); } html:has(.theme-toggle-btn.is-light) .cover .cover-font::before { border-color: rgba(31, 35, 40, 0.14); border-top-color: var(--ui-accent); border-right-color: rgba(45, 164, 78, 0.10); filter: drop-shadow(0 6px 14px rgba(31, 35, 40, 0.12)); } /* Modern spinner: segmented ring (looks “cooler”) */ @supports (background: conic-gradient(from 0deg, #000, #fff)) { .cover .cover-font::before { border: 0; background: conic-gradient( from 0deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.10) 12%, var(--ui-accent) 12%, var(--ui-accent) 28%, rgba(255, 255, 255, 0.10) 28%, rgba(255, 255, 255, 0.10) 62%, var(--ui-accent) 62%, var(--ui-accent) 76%, rgba(255, 255, 255, 0.10) 76%, rgba(255, 255, 255, 0.10) 100% ); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(closest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); } html:has(.theme-toggle-btn.is-light) .cover .cover-font::before { background: conic-gradient( from 0deg, rgba(31, 35, 40, 0.12) 0%, rgba(31, 35, 40, 0.12) 12%, var(--ui-accent) 12%, var(--ui-accent) 28%, rgba(31, 35, 40, 0.12) 28%, rgba(31, 35, 40, 0.12) 62%, var(--ui-accent) 62%, var(--ui-accent) 76%, rgba(31, 35, 40, 0.12) 76%, rgba(31, 35, 40, 0.12) 100% ); } } @keyframes cover-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } input.form-control:disabled, input.form-control:read-only { background-color: var(--bg-elevated) !important; color: var(--text-muted) !important; border-color: var(--border-default) !important; } .col-form-label, .control-label { padding-top: calc(0.475rem + 1px); padding-bottom: calc(0.475rem + 1px); } .btn-default { color: var(--text-primary); background-color: var(--bg-elevated); border-color: var(--border-default); transition: all var(--transition-fast); } .btn-default:not(:disabled):not(.disabled):active { color: var(--text-primary); background-color: var(--bg-card); border-color: var(--border-default); } .btn-default:disabled { color: var(--text-muted); background-color: var(--bg-elevated); border-color: var(--border-default); opacity: 0.6; } .btn-default:focus { box-shadow: 0 0 0 3px var(--accent-primary-light); } .btn-default:hover { color: var(--accent-primary); background-color: var(--accent-primary-light); border-color: var(--accent-primary); } /* Primary action buttons - Green accent on hover */ .btn-info { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } .btn-info:hover { background-color: rgba(46, 160, 67, 0.18) !important; border-color: rgba(46, 160, 67, 0.42) !important; color: var(--ui-text) !important; } .btn-info:focus { box-shadow: 0 0 0 3px var(--accent-primary-light) !important; } .btn-info:active { background-color: rgba(46, 160, 67, 0.22) !important; border-color: rgba(46, 160, 67, 0.50) !important; color: var(--ui-text) !important; } .btn-info:disabled, .btn-info.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } .btn-info:disabled:hover, .btn-info.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } /* Store (Products) action buttons — make archive/sync match Edit/Restock (btn-info) */ #storeProductsPanel button.btn.btn-xs.btn-warning[title="Move to archive"], #storeProductsPanel button.btn.btn-xs.btn-success[title="Sync to Square"] { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } #storeProductsPanel button.btn.btn-xs.btn-warning[title="Move to archive"]:hover, #storeProductsPanel button.btn.btn-xs.btn-success[title="Sync to Square"]:hover { background-color: rgba(46, 160, 67, 0.18) !important; border-color: rgba(46, 160, 67, 0.42) !important; color: var(--ui-text) !important; } #storeProductsPanel button.btn.btn-xs.btn-warning[title="Move to archive"]:focus, #storeProductsPanel button.btn.btn-xs.btn-success[title="Sync to Square"]:focus { box-shadow: 0 0 0 3px var(--accent-primary-light) !important; } #storeProductsPanel button.btn.btn-xs.btn-warning[title="Move to archive"]:active, #storeProductsPanel button.btn.btn-xs.btn-success[title="Sync to Square"]:active { background-color: rgba(46, 160, 67, 0.22) !important; border-color: rgba(46, 160, 67, 0.50) !important; color: var(--ui-text) !important; } #storeProductsPanel button.btn.btn-xs.btn-warning[title="Move to archive"]:disabled, #storeProductsPanel button.btn.btn-xs.btn-warning[title="Move to archive"].disabled, #storeProductsPanel button.btn.btn-xs.btn-success[title="Sync to Square"]:disabled, #storeProductsPanel button.btn.btn-xs.btn-success[title="Sync to Square"].disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #storeProductsPanel button.btn.btn-xs.btn-warning[title="Move to archive"]:disabled:hover, #storeProductsPanel button.btn.btn-xs.btn-warning[title="Move to archive"].disabled:hover, #storeProductsPanel button.btn.btn-xs.btn-success[title="Sync to Square"]:disabled:hover, #storeProductsPanel button.btn.btn-xs.btn-success[title="Sync to Square"].disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } /* Store (Products) action buttons — Delete should match neutral style but red on hover */ #storeProductsPanel button.btn.btn-xs.btn-danger[title="Delete"], #storeProductGroupPanel button.btn.btn-xs.btn-danger { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } #storeProductsPanel button.btn.btn-xs.btn-danger[title="Delete"]:hover, #storeProductGroupPanel button.btn.btn-xs.btn-danger:hover { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; color: var(--ui-text) !important; } #storeProductsPanel button.btn.btn-xs.btn-danger[title="Delete"]:focus, #storeProductGroupPanel button.btn.btn-xs.btn-danger:focus { box-shadow: 0 0 0 3px var(--ui-danger-bg) !important; } #storeProductsPanel button.btn.btn-xs.btn-danger[title="Delete"]:active, #storeProductGroupPanel button.btn.btn-xs.btn-danger:active { background-color: rgba(248, 81, 73, 0.22) !important; border-color: rgba(248, 81, 73, 0.45) !important; color: var(--ui-text) !important; } #storeProductsPanel button.btn.btn-xs.btn-danger[title="Delete"]:disabled, #storeProductsPanel button.btn.btn-xs.btn-danger[title="Delete"].disabled, #storeProductGroupPanel button.btn.btn-xs.btn-danger:disabled, #storeProductGroupPanel button.btn.btn-xs.btn-danger.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #storeProductsPanel button.btn.btn-xs.btn-danger[title="Delete"]:disabled:hover, #storeProductsPanel button.btn.btn-xs.btn-danger[title="Delete"].disabled:hover, #storeProductGroupPanel button.btn.btn-xs.btn-danger:disabled:hover, #storeProductGroupPanel button.btn.btn-xs.btn-danger.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } /* POS — unify button styling with the same design system */ #posPanel .btn.btn-success { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } #posPanel .btn.btn-success:hover { background-color: rgba(46, 160, 67, 0.18) !important; border-color: rgba(46, 160, 67, 0.42) !important; color: var(--ui-text) !important; } #posPanel .btn.btn-success:active { background-color: rgba(46, 160, 67, 0.22) !important; border-color: rgba(46, 160, 67, 0.50) !important; color: var(--ui-text) !important; } #posPanel .btn.btn-success:focus { box-shadow: 0 0 0 3px var(--accent-primary-light) !important; } #posPanel .btn.btn-success:disabled, #posPanel .btn.btn-success.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #posPanel .btn.btn-success:disabled:hover, #posPanel .btn.btn-success.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } #posPanel .btn.btn-danger { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } #posPanel .btn.btn-danger:hover { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; color: var(--ui-text) !important; } #posPanel .btn.btn-danger:active { background-color: rgba(248, 81, 73, 0.22) !important; border-color: rgba(248, 81, 73, 0.45) !important; color: var(--ui-text) !important; } #posPanel .btn.btn-danger:focus { box-shadow: 0 0 0 3px var(--ui-danger-bg) !important; } #posPanel .btn.btn-danger:disabled, #posPanel .btn.btn-danger.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #posPanel .btn.btn-danger:disabled:hover, #posPanel .btn.btn-danger.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } /* POS — inner centered tabs (Guest / PC / Member) */ #posPanel .nav.nav-tabs.d-flex.justify-content-center { background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-md) !important; padding: 6px !important; gap: 6px !important; } #posPanel .nav.nav-tabs.d-flex.justify-content-center .nav-link { border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; color: var(--ui-muted) !important; padding: 8px 14px !important; font-weight: 500 !important; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important; } #posPanel .nav.nav-tabs.d-flex.justify-content-center .nav-link:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--ui-text) !important; } #posPanel .nav.nav-tabs.d-flex.justify-content-center .nav-link.active { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } #posPanel .nav.nav-tabs.d-flex.justify-content-center .nav-link:focus { outline: none !important; box-shadow: none !important; } /* POS — layout panels (make left area full-height, redesign right column) */ #posPanel > .row.flex-grow-1 { min-height: calc(100vh - 63px - 5rem); margin-left: 0 !important; margin-right: 0 !important; background: var(--bg-card-hover) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; } #posPanel > .row.flex-grow-1 > .card.col-md-8.h-100 { height: calc(100vh - 63px - 5rem) !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px !important; } /* POS — Shop tab container (override inline dark background; unify with design system) */ #posPanel .d-flex.mt-3.px-3.py-2 { background: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; } html:has(.theme-toggle-btn.is-light) #posPanel .d-flex.mt-3.px-3.py-2 { background: var(--bg-card) !important; } #posPanel .d-flex.mt-3.px-3.py-2 .input-group .input-group-text { background: var(--bg-elevated) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; } #posPanel .d-flex.mt-3.px-3.py-2 .input-group .input-group-text i { color: inherit !important; } /* POS — Shop: left groups list (mr-2 dropdown c-pointer overflow-auto) */ #posPanel .d-flex.mt-3.px-3.py-2 .mr-2.dropdown.c-pointer.overflow-auto { background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-md) !important; padding: 6px !important; } html:has(.theme-toggle-btn.is-light) #posPanel .d-flex.mt-3.px-3.py-2 .mr-2.dropdown.c-pointer.overflow-auto { background: var(--bg-card) !important; } #posPanel .d-flex.mt-3.px-3.py-2 .mr-2.dropdown.c-pointer.overflow-auto .dropdown-item { display: block; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ui-muted) !important; background: transparent !important; border: 1px solid transparent !important; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important; } #posPanel .d-flex.mt-3.px-3.py-2 .mr-2.dropdown.c-pointer.overflow-auto .dropdown-item:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #posPanel .d-flex.mt-3.px-3.py-2 .mr-2.dropdown.c-pointer.overflow-auto .dropdown-item:hover { background: rgba(45, 164, 78, 0.08) !important; border-color: rgba(45, 164, 78, 0.20) !important; } #posPanel .d-flex.mt-3.px-3.py-2 .mr-2.dropdown.c-pointer.overflow-auto .dropdown-item-active, #posPanel .d-flex.mt-3.px-3.py-2 .mr-2.dropdown.c-pointer.overflow-auto .dropdown-item.dropdown-item-active { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } /* POS — Shop: product cards (stock-item) */ #posPanel .d-flex.mt-3.px-3.py-2 .stock-item { background-color: var(--bg-card) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; color: var(--ui-text) !important; transition: background var(--transition-normal), border-color var(--transition-fast), transform var(--transition-fast); } #posPanel .d-flex.mt-3.px-3.py-2 .stock-item-normal:hover { background-color: var(--bg-card-hover) !important; border-color: var(--ui-green-border) !important; transform: translateY(-2px); } #posPanel .d-flex.mt-3.px-3.py-2 .stock-item-disable { background-color: var(--bg-elevated) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; cursor: not-allowed; box-shadow: none !important; opacity: 0.75; } #posPanel .d-flex.mt-3.px-3.py-2 .stock-item-disable img { filter: grayscale(100%); opacity: 0.65; } #posPanel .d-flex.mt-3.px-3.py-2 .stock-item .price_stock .price { color: var(--ui-text) !important; } #posPanel .d-flex.mt-3.px-3.py-2 .stock-item .price_stock .stock { color: var(--ui-muted) !important; } #posPanel .d-flex.mt-3.px-3.py-2 .stock-item-disable .stock { color: var(--ui-danger) !important; } #posPanel .d-flex.mt-3.px-3.py-2 .stock-item .product-qty { background: var(--ui-accent) !important; color: var(--ui-on-accent) !important; } #posPanel > .row.flex-grow-1 > .col-md-4.pt-2.text-white.d-flex.flex-column.align-content-between { background: transparent !important; border: 0 !important; border-left: 1px solid var(--ui-border) !important; border-radius: 0 !important; box-shadow: none !important; padding: 10px !important; } #posPanel > .row.flex-grow-1 > .col-md-4.pt-2.text-white.d-flex.flex-column.align-content-between > div:first-child { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 10px !important; padding: 6px !important; background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-md) !important; } #posPanel > .row.flex-grow-1 > .col-md-4.pt-2.text-white.d-flex.flex-column.align-content-between > div:first-child .btn.mr-2 { margin-right: 0 !important; } #posPanel > .row.flex-grow-1 > .col-md-4.pt-2.text-white.d-flex.flex-column.align-content-between .table { margin-bottom: 0 !important; } /* POS (Light theme): these icons must not stay white due to `.text-white` */ html:has(.theme-toggle-btn.is-light) #posPanel .mdi.mdi-coin, html:has(.theme-toggle-btn.is-light) #posPanel .mdi.mdi-keyboard-return, html:has(.theme-toggle-btn.is-light) #posPanel .mdi.mdi-desktop-classic, html:has(.theme-toggle-btn.is-light) #posPanel .mdi.mdi-account { color: var(--ui-accent) !important; } /* Games — License pool: unify action buttons */ #gamesPanel #games-tab-pane-license-pool .btn.btn-success { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } #gamesPanel #games-tab-pane-license-pool .btn.btn-success:hover { background-color: rgba(46, 160, 67, 0.18) !important; border-color: rgba(46, 160, 67, 0.42) !important; color: var(--ui-text) !important; } #gamesPanel #games-tab-pane-license-pool .btn.btn-success:active { background-color: rgba(46, 160, 67, 0.22) !important; border-color: rgba(46, 160, 67, 0.50) !important; color: var(--ui-text) !important; } #gamesPanel #games-tab-pane-license-pool .btn.btn-success:focus { box-shadow: 0 0 0 3px var(--accent-primary-light) !important; } #gamesPanel #games-tab-pane-license-pool .btn.btn-success:disabled, #gamesPanel #games-tab-pane-license-pool .btn.btn-success.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #gamesPanel #games-tab-pane-license-pool .btn.btn-success:disabled:hover, #gamesPanel #games-tab-pane-license-pool .btn.btn-success.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } #gamesPanel #games-tab-pane-license-pool .btn.btn-danger { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } #gamesPanel #games-tab-pane-license-pool .btn.btn-danger:hover { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; color: var(--ui-text) !important; } #gamesPanel #games-tab-pane-license-pool .btn.btn-danger:active { background-color: rgba(248, 81, 73, 0.22) !important; border-color: rgba(248, 81, 73, 0.45) !important; color: var(--ui-text) !important; } #gamesPanel #games-tab-pane-license-pool .btn.btn-danger:focus { box-shadow: 0 0 0 3px var(--ui-danger-bg) !important; } #gamesPanel #games-tab-pane-license-pool .btn.btn-danger:disabled, #gamesPanel #games-tab-pane-license-pool .btn.btn-danger.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #gamesPanel #games-tab-pane-license-pool .btn.btn-danger:disabled:hover, #gamesPanel #games-tab-pane-license-pool .btn.btn-danger.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } /* Settings — unify button styling across all settings pages */ #settingsPanel .btn.btn-success, #settingsPanel .btn.btn-warning, #settingsPanel .btn.btn-primary, #productsPanel .btn.btn-success, #productsPanel .btn.btn-warning, #productsPanel .btn.btn-primary, #employeePanel .btn.btn-success, #employeePanel .btn.btn-warning, #employeePanel .btn.btn-primary, #centerNewsPanel .btn.btn-success, #centerNewsPanel .btn.btn-warning, #centerNewsPanel .btn.btn-primary, #promoCodePanel .btn.btn-success, #promoCodePanel .btn.btn-warning, #promoCodePanel .btn.btn-primary, #subcafesPanel .btn.btn-success, #subcafesPanel .btn.btn-warning, #subcafesPanel .btn.btn-primary, #regionSettingsPanel .btn.btn-success, #regionSettingsPanel .btn.btn-warning, #regionSettingsPanel .btn.btn-primary, #licensesPanel .btn.btn-success, #licensesPanel .btn.btn-warning, #licensesPanel .btn.btn-primary, #idcGamesPanel .btn.btn-success, #idcGamesPanel .btn.btn-warning, #idcGamesPanel .btn.btn-primary, #licenseInfo .btn.btn-success, #licenseInfo .btn.btn-warning, #licenseInfo .btn.btn-primary, #settingsPricePanel .btn.btn-success, #settingsPricePanel .btn.btn-warning, #settingsPricePanel .btn.btn-primary { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } /* Settings Price (PC time): sticky left column (PC/member groups) */ #settingsPricePanel .pc-member-group { background: var(--bg-elevated) !important; /* override inline #27293d */ color: var(--ui-text) !important; border-right: 1px solid var(--ui-border) !important; text-align: left !important; /* table is centered inline */ vertical-align: middle !important; font-weight: 600; padding: 8px 12px !important; min-width: 200px; max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #settingsPricePanel tr.table-active .pc-member-group { background: var(--ui-green-bg) !important; border-right-color: var(--ui-green-border) !important; color: var(--ui-text) !important; font-weight: 700; } /* Settings (Center settings page) — left menu + content layout */ #settingsPanel #settings-menu .card, #settingsPanel #settings-content .card { background-color: var(--bg-card) !important; border: 1px solid var(--ui-border) !important; box-shadow: var(--shadow-sm) !important; } #settingsPanel #settings-menu .card-body, #settingsPanel #settings-content .card-body { padding: 18px 18px !important; } /* Left menu list */ #settingsPanel .settings-menus { max-width: none !important; /* override inline max-width */ } #settingsPanel .settings-menus p { margin: 0 0 10px 0 !important; /* override huge inline spacing */ } #settingsPanel .settings-menus p:last-child { margin-bottom: 0 !important; } #settingsPanel .settings-menus p a { display: block; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-secondary) !important; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); border: 1px solid transparent; } #settingsPanel .settings-menus p a:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary) !important; } #settingsPanel .settings-menus p.active a { background: var(--ui-green-bg); border-color: var(--ui-green-border); color: var(--text-primary) !important; } /* Light theme: Settings menu text must not be white */ html:has(.theme-toggle-btn.is-light) #settingsPanel .settings-menus p a { color: var(--ui-muted) !important; } html:has(.theme-toggle-btn.is-light) #settingsPanel .settings-menus p a:hover { background: rgba(45, 164, 78, 0.08) !important; border-color: rgba(45, 164, 78, 0.20) !important; color: var(--ui-text) !important; } html:has(.theme-toggle-btn.is-light) #settingsPanel .settings-menus p.active a { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } /* Settings content: scroll INSIDE card-body (keep card frame/radius static) */ #settingsPanel #settings-content { overflow: visible !important; max-height: none !important; } #settingsPanel #settings-content > .card { overflow: hidden !important; /* keep rounded corners */ max-height: 80vh; } #settingsPanel #settings-content > .card > .card-body { overflow: auto !important; max-height: 80vh; } /* Settings left menu: match the same height + scroll behavior as content card */ #settingsPanel #settings-menu .card { overflow: hidden !important; /* keep rounded corners */ max-height: 80vh; } #settingsPanel #settings-menu .card > .card-body { overflow: auto !important; max-height: 80vh; } #settingsPanel .btn.btn-success:hover, #settingsPanel .btn.btn-warning:hover, #settingsPanel .btn.btn-primary:hover, #productsPanel .btn.btn-success:hover, #productsPanel .btn.btn-warning:hover, #productsPanel .btn.btn-primary:hover, #employeePanel .btn.btn-success:hover, #employeePanel .btn.btn-warning:hover, #employeePanel .btn.btn-primary:hover, #centerNewsPanel .btn.btn-success:hover, #centerNewsPanel .btn.btn-warning:hover, #centerNewsPanel .btn.btn-primary:hover, #promoCodePanel .btn.btn-success:hover, #promoCodePanel .btn.btn-warning:hover, #promoCodePanel .btn.btn-primary:hover, #subcafesPanel .btn.btn-success:hover, #subcafesPanel .btn.btn-warning:hover, #subcafesPanel .btn.btn-primary:hover, #regionSettingsPanel .btn.btn-success:hover, #regionSettingsPanel .btn.btn-warning:hover, #regionSettingsPanel .btn.btn-primary:hover, #licensesPanel .btn.btn-success:hover, #licensesPanel .btn.btn-warning:hover, #licensesPanel .btn.btn-primary:hover, #idcGamesPanel .btn.btn-success:hover, #idcGamesPanel .btn.btn-warning:hover, #idcGamesPanel .btn.btn-primary:hover, #licenseInfo .btn.btn-success:hover, #licenseInfo .btn.btn-warning:hover, #licenseInfo .btn.btn-primary:hover, #settingsPricePanel .btn.btn-success:hover, #settingsPricePanel .btn.btn-warning:hover, #settingsPricePanel .btn.btn-primary:hover { background-color: rgba(46, 160, 67, 0.18) !important; border-color: rgba(46, 160, 67, 0.42) !important; color: var(--ui-text) !important; } #settingsPanel .btn.btn-success:active, #settingsPanel .btn.btn-warning:active, #settingsPanel .btn.btn-primary:active, #productsPanel .btn.btn-success:active, #productsPanel .btn.btn-warning:active, #productsPanel .btn.btn-primary:active, #employeePanel .btn.btn-success:active, #employeePanel .btn.btn-warning:active, #employeePanel .btn.btn-primary:active, #centerNewsPanel .btn.btn-success:active, #centerNewsPanel .btn.btn-warning:active, #centerNewsPanel .btn.btn-primary:active, #promoCodePanel .btn.btn-success:active, #promoCodePanel .btn.btn-warning:active, #promoCodePanel .btn.btn-primary:active, #subcafesPanel .btn.btn-success:active, #subcafesPanel .btn.btn-warning:active, #subcafesPanel .btn.btn-primary:active, #regionSettingsPanel .btn.btn-success:active, #regionSettingsPanel .btn.btn-warning:active, #regionSettingsPanel .btn.btn-primary:active, #licensesPanel .btn.btn-success:active, #licensesPanel .btn.btn-warning:active, #licensesPanel .btn.btn-primary:active, #idcGamesPanel .btn.btn-success:active, #idcGamesPanel .btn.btn-warning:active, #idcGamesPanel .btn.btn-primary:active, #licenseInfo .btn.btn-success:active, #licenseInfo .btn.btn-warning:active, #licenseInfo .btn.btn-primary:active, #settingsPricePanel .btn.btn-success:active, #settingsPricePanel .btn.btn-warning:active, #settingsPricePanel .btn.btn-primary:active { background-color: rgba(46, 160, 67, 0.22) !important; border-color: rgba(46, 160, 67, 0.50) !important; color: var(--ui-text) !important; } #settingsPanel .btn.btn-success:focus, #settingsPanel .btn.btn-warning:focus, #settingsPanel .btn.btn-primary:focus, #productsPanel .btn.btn-success:focus, #productsPanel .btn.btn-warning:focus, #productsPanel .btn.btn-primary:focus, #employeePanel .btn.btn-success:focus, #employeePanel .btn.btn-warning:focus, #employeePanel .btn.btn-primary:focus, #centerNewsPanel .btn.btn-success:focus, #centerNewsPanel .btn.btn-warning:focus, #centerNewsPanel .btn.btn-primary:focus, #promoCodePanel .btn.btn-success:focus, #promoCodePanel .btn.btn-warning:focus, #promoCodePanel .btn.btn-primary:focus, #subcafesPanel .btn.btn-success:focus, #subcafesPanel .btn.btn-warning:focus, #subcafesPanel .btn.btn-primary:focus, #regionSettingsPanel .btn.btn-success:focus, #regionSettingsPanel .btn.btn-warning:focus, #regionSettingsPanel .btn.btn-primary:focus, #licensesPanel .btn.btn-success:focus, #licensesPanel .btn.btn-warning:focus, #licensesPanel .btn.btn-primary:focus, #idcGamesPanel .btn.btn-success:focus, #idcGamesPanel .btn.btn-warning:focus, #idcGamesPanel .btn.btn-primary:focus, #licenseInfo .btn.btn-success:focus, #licenseInfo .btn.btn-warning:focus, #licenseInfo .btn.btn-primary:focus, #settingsPricePanel .btn.btn-success:focus, #settingsPricePanel .btn.btn-warning:focus, #settingsPricePanel .btn.btn-primary:focus { box-shadow: 0 0 0 3px var(--accent-primary-light) !important; } #settingsPanel .btn.btn-success:disabled, #settingsPanel .btn.btn-success.disabled, #settingsPanel .btn.btn-warning:disabled, #settingsPanel .btn.btn-warning.disabled, #settingsPanel .btn.btn-primary:disabled, #settingsPanel .btn.btn-primary.disabled, #productsPanel .btn.btn-success:disabled, #productsPanel .btn.btn-success.disabled, #productsPanel .btn.btn-warning:disabled, #productsPanel .btn.btn-warning.disabled, #productsPanel .btn.btn-primary:disabled, #productsPanel .btn.btn-primary.disabled, #employeePanel .btn.btn-success:disabled, #employeePanel .btn.btn-success.disabled, #employeePanel .btn.btn-warning:disabled, #employeePanel .btn.btn-warning.disabled, #employeePanel .btn.btn-primary:disabled, #employeePanel .btn.btn-primary.disabled, #centerNewsPanel .btn.btn-success:disabled, #centerNewsPanel .btn.btn-success.disabled, #centerNewsPanel .btn.btn-warning:disabled, #centerNewsPanel .btn.btn-warning.disabled, #centerNewsPanel .btn.btn-primary:disabled, #centerNewsPanel .btn.btn-primary.disabled, #promoCodePanel .btn.btn-success:disabled, #promoCodePanel .btn.btn-success.disabled, #promoCodePanel .btn.btn-warning:disabled, #promoCodePanel .btn.btn-warning.disabled, #promoCodePanel .btn.btn-primary:disabled, #promoCodePanel .btn.btn-primary.disabled, #subcafesPanel .btn.btn-success:disabled, #subcafesPanel .btn.btn-success.disabled, #subcafesPanel .btn.btn-warning:disabled, #subcafesPanel .btn.btn-warning.disabled, #subcafesPanel .btn.btn-primary:disabled, #subcafesPanel .btn.btn-primary.disabled, #regionSettingsPanel .btn.btn-success:disabled, #regionSettingsPanel .btn.btn-success.disabled, #regionSettingsPanel .btn.btn-warning:disabled, #regionSettingsPanel .btn.btn-warning.disabled, #regionSettingsPanel .btn.btn-primary:disabled, #regionSettingsPanel .btn.btn-primary.disabled, #licensesPanel .btn.btn-success:disabled, #licensesPanel .btn.btn-success.disabled, #licensesPanel .btn.btn-warning:disabled, #licensesPanel .btn.btn-warning.disabled, #licensesPanel .btn.btn-primary:disabled, #licensesPanel .btn.btn-primary.disabled, #idcGamesPanel .btn.btn-success:disabled, #idcGamesPanel .btn.btn-success.disabled, #idcGamesPanel .btn.btn-warning:disabled, #idcGamesPanel .btn.btn-warning.disabled, #idcGamesPanel .btn.btn-primary:disabled, #idcGamesPanel .btn.btn-primary.disabled, #licenseInfo .btn.btn-success:disabled, #licenseInfo .btn.btn-success.disabled, #licenseInfo .btn.btn-warning:disabled, #licenseInfo .btn.btn-warning.disabled, #licenseInfo .btn.btn-primary:disabled, #licenseInfo .btn.btn-primary.disabled, #settingsPricePanel .btn.btn-success:disabled, #settingsPricePanel .btn.btn-success.disabled, #settingsPricePanel .btn.btn-warning:disabled, #settingsPricePanel .btn.btn-warning.disabled, #settingsPricePanel .btn.btn-primary:disabled, #settingsPricePanel .btn.btn-primary.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #settingsPanel .btn.btn-success:disabled:hover, #settingsPanel .btn.btn-success.disabled:hover, #settingsPanel .btn.btn-warning:disabled:hover, #settingsPanel .btn.btn-warning.disabled:hover, #settingsPanel .btn.btn-primary:disabled:hover, #settingsPanel .btn.btn-primary.disabled:hover, #productsPanel .btn.btn-success:disabled:hover, #productsPanel .btn.btn-success.disabled:hover, #productsPanel .btn.btn-warning:disabled:hover, #productsPanel .btn.btn-warning.disabled:hover, #productsPanel .btn.btn-primary:disabled:hover, #productsPanel .btn.btn-primary.disabled:hover, #employeePanel .btn.btn-success:disabled:hover, #employeePanel .btn.btn-success.disabled:hover, #employeePanel .btn.btn-warning:disabled:hover, #employeePanel .btn.btn-warning.disabled:hover, #employeePanel .btn.btn-primary:disabled:hover, #employeePanel .btn.btn-primary.disabled:hover, #centerNewsPanel .btn.btn-success:disabled:hover, #centerNewsPanel .btn.btn-success.disabled:hover, #centerNewsPanel .btn.btn-warning:disabled:hover, #centerNewsPanel .btn.btn-warning.disabled:hover, #centerNewsPanel .btn.btn-primary:disabled:hover, #centerNewsPanel .btn.btn-primary.disabled:hover, #promoCodePanel .btn.btn-success:disabled:hover, #promoCodePanel .btn.btn-success.disabled:hover, #promoCodePanel .btn.btn-warning:disabled:hover, #promoCodePanel .btn.btn-warning.disabled:hover, #promoCodePanel .btn.btn-primary:disabled:hover, #promoCodePanel .btn.btn-primary.disabled:hover, #subcafesPanel .btn.btn-success:disabled:hover, #subcafesPanel .btn.btn-success.disabled:hover, #subcafesPanel .btn.btn-warning:disabled:hover, #subcafesPanel .btn.btn-warning.disabled:hover, #subcafesPanel .btn.btn-primary:disabled:hover, #subcafesPanel .btn.btn-primary.disabled:hover, #regionSettingsPanel .btn.btn-success:disabled:hover, #regionSettingsPanel .btn.btn-success.disabled:hover, #regionSettingsPanel .btn.btn-warning:disabled:hover, #regionSettingsPanel .btn.btn-warning.disabled:hover, #regionSettingsPanel .btn.btn-primary:disabled:hover, #regionSettingsPanel .btn.btn-primary.disabled:hover, #licensesPanel .btn.btn-success:disabled:hover, #licensesPanel .btn.btn-success.disabled:hover, #licensesPanel .btn.btn-warning:disabled:hover, #licensesPanel .btn.btn-warning.disabled:hover, #licensesPanel .btn.btn-primary:disabled:hover, #licensesPanel .btn.btn-primary.disabled:hover, #idcGamesPanel .btn.btn-success:disabled:hover, #idcGamesPanel .btn.btn-success.disabled:hover, #idcGamesPanel .btn.btn-warning:disabled:hover, #idcGamesPanel .btn.btn-warning.disabled:hover, #idcGamesPanel .btn.btn-primary:disabled:hover, #idcGamesPanel .btn.btn-primary.disabled:hover, #licenseInfo .btn.btn-success:disabled:hover, #licenseInfo .btn.btn-success.disabled:hover, #licenseInfo .btn.btn-warning:disabled:hover, #licenseInfo .btn.btn-warning.disabled:hover, #licenseInfo .btn.btn-primary:disabled:hover, #licenseInfo .btn.btn-primary.disabled:hover, #settingsPricePanel .btn.btn-success:disabled:hover, #settingsPricePanel .btn.btn-success.disabled:hover, #settingsPricePanel .btn.btn-warning:disabled:hover, #settingsPricePanel .btn.btn-warning.disabled:hover, #settingsPricePanel .btn.btn-primary:disabled:hover, #settingsPricePanel .btn.btn-primary.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } #settingsPanel .btn.btn-danger, #productsPanel .btn.btn-danger, #employeePanel .btn.btn-danger, #centerNewsPanel .btn.btn-danger, #promoCodePanel .btn.btn-danger, #subcafesPanel .btn.btn-danger, #regionSettingsPanel .btn.btn-danger, #licensesPanel .btn.btn-danger, #idcGamesPanel .btn.btn-danger, #licenseInfo .btn.btn-danger, #settingsPricePanel .btn.btn-danger { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } #settingsPanel .btn.btn-danger:hover, #productsPanel .btn.btn-danger:hover, #employeePanel .btn.btn-danger:hover, #centerNewsPanel .btn.btn-danger:hover, #promoCodePanel .btn.btn-danger:hover, #subcafesPanel .btn.btn-danger:hover, #regionSettingsPanel .btn.btn-danger:hover, #licensesPanel .btn.btn-danger:hover, #idcGamesPanel .btn.btn-danger:hover, #licenseInfo .btn.btn-danger:hover, #settingsPricePanel .btn.btn-danger:hover { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; color: var(--ui-text) !important; } #settingsPanel .btn.btn-danger:active, #productsPanel .btn.btn-danger:active, #employeePanel .btn.btn-danger:active, #centerNewsPanel .btn.btn-danger:active, #promoCodePanel .btn.btn-danger:active, #subcafesPanel .btn.btn-danger:active, #regionSettingsPanel .btn.btn-danger:active, #licensesPanel .btn.btn-danger:active, #idcGamesPanel .btn.btn-danger:active, #licenseInfo .btn.btn-danger:active, #settingsPricePanel .btn.btn-danger:active { background-color: rgba(248, 81, 73, 0.22) !important; border-color: rgba(248, 81, 73, 0.45) !important; color: var(--ui-text) !important; } #settingsPanel .btn.btn-danger:focus, #productsPanel .btn.btn-danger:focus, #employeePanel .btn.btn-danger:focus, #centerNewsPanel .btn.btn-danger:focus, #promoCodePanel .btn.btn-danger:focus, #subcafesPanel .btn.btn-danger:focus, #regionSettingsPanel .btn.btn-danger:focus, #licensesPanel .btn.btn-danger:focus, #idcGamesPanel .btn.btn-danger:focus, #licenseInfo .btn.btn-danger:focus, #settingsPricePanel .btn.btn-danger:focus { box-shadow: 0 0 0 3px var(--ui-danger-bg) !important; } #settingsPanel .btn.btn-danger:disabled, #settingsPanel .btn.btn-danger.disabled, #productsPanel .btn.btn-danger:disabled, #productsPanel .btn.btn-danger.disabled, #employeePanel .btn.btn-danger:disabled, #employeePanel .btn.btn-danger.disabled, #centerNewsPanel .btn.btn-danger:disabled, #centerNewsPanel .btn.btn-danger.disabled, #promoCodePanel .btn.btn-danger:disabled, #promoCodePanel .btn.btn-danger.disabled, #subcafesPanel .btn.btn-danger:disabled, #subcafesPanel .btn.btn-danger.disabled, #regionSettingsPanel .btn.btn-danger:disabled, #regionSettingsPanel .btn.btn-danger.disabled, #licensesPanel .btn.btn-danger:disabled, #licensesPanel .btn.btn-danger.disabled, #idcGamesPanel .btn.btn-danger:disabled, #idcGamesPanel .btn.btn-danger.disabled, #licenseInfo .btn.btn-danger:disabled, #licenseInfo .btn.btn-danger.disabled, #settingsPricePanel .btn.btn-danger:disabled, #settingsPricePanel .btn.btn-danger.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #settingsPanel .btn.btn-danger:disabled:hover, #settingsPanel .btn.btn-danger.disabled:hover, #productsPanel .btn.btn-danger:disabled:hover, #productsPanel .btn.btn-danger.disabled:hover, #employeePanel .btn.btn-danger:disabled:hover, #employeePanel .btn.btn-danger.disabled:hover, #centerNewsPanel .btn.btn-danger:disabled:hover, #centerNewsPanel .btn.btn-danger.disabled:hover, #promoCodePanel .btn.btn-danger:disabled:hover, #promoCodePanel .btn.btn-danger.disabled:hover, #subcafesPanel .btn.btn-danger:disabled:hover, #subcafesPanel .btn.btn-danger.disabled:hover, #regionSettingsPanel .btn.btn-danger:disabled:hover, #regionSettingsPanel .btn.btn-danger.disabled:hover, #licensesPanel .btn.btn-danger:disabled:hover, #licensesPanel .btn.btn-danger.disabled:hover, #idcGamesPanel .btn.btn-danger:disabled:hover, #idcGamesPanel .btn.btn-danger.disabled:hover, #licenseInfo .btn.btn-danger:disabled:hover, #licenseInfo .btn.btn-danger.disabled:hover, #settingsPricePanel .btn.btn-danger:disabled:hover, #settingsPricePanel .btn.btn-danger.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } /* Shop — unify button styling */ #shopPanel .btn.btn-success, #shopPanel .btn.btn-warning, #shopPanel .btn.btn-primary { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } #shopPanel .btn.btn-success:hover, #shopPanel .btn.btn-warning:hover, #shopPanel .btn.btn-primary:hover { background-color: rgba(46, 160, 67, 0.18) !important; border-color: rgba(46, 160, 67, 0.42) !important; color: var(--ui-text) !important; } #shopPanel .btn.btn-success:active, #shopPanel .btn.btn-warning:active, #shopPanel .btn.btn-primary:active { background-color: rgba(46, 160, 67, 0.22) !important; border-color: rgba(46, 160, 67, 0.50) !important; color: var(--ui-text) !important; } #shopPanel .btn.btn-success:focus, #shopPanel .btn.btn-warning:focus, #shopPanel .btn.btn-primary:focus { box-shadow: 0 0 0 3px var(--accent-primary-light) !important; } #shopPanel .btn.btn-success:disabled, #shopPanel .btn.btn-success.disabled, #shopPanel .btn.btn-warning:disabled, #shopPanel .btn.btn-warning.disabled, #shopPanel .btn.btn-primary:disabled, #shopPanel .btn.btn-primary.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #shopPanel .btn.btn-success:disabled:hover, #shopPanel .btn.btn-success.disabled:hover, #shopPanel .btn.btn-warning:disabled:hover, #shopPanel .btn.btn-warning.disabled:hover, #shopPanel .btn.btn-primary:disabled:hover, #shopPanel .btn.btn-primary.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } #shopPanel .btn.btn-danger { background-color: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--text-primary) !important; transition: all var(--transition-fast); } #shopPanel .btn.btn-danger:hover { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; color: var(--ui-text) !important; } #shopPanel .btn.btn-danger:active { background-color: rgba(248, 81, 73, 0.22) !important; border-color: rgba(248, 81, 73, 0.45) !important; color: var(--ui-text) !important; } #shopPanel .btn.btn-danger:focus { box-shadow: 0 0 0 3px var(--ui-danger-bg) !important; } #shopPanel .btn.btn-danger:disabled, #shopPanel .btn.btn-danger.disabled { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; cursor: not-allowed; opacity: 0.6; } #shopPanel .btn.btn-danger:disabled:hover, #shopPanel .btn.btn-danger.disabled:hover { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--text-muted) !important; } /* Shop — product cards (stock-item) unify with palette */ #shopPanel .stock-item { background-color: var(--bg-card) !important; border: 0 !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; color: var(--ui-text) !important; transition: background var(--transition-normal), border-color var(--transition-fast), transform var(--transition-fast); } #shopPanel .stock-item-normal:hover { background-color: var(--bg-card-hover) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-2px); } #shopPanel .stock-item-disable { background-color: var(--bg-elevated) !important; border: 0 !important; color: var(--text-muted) !important; cursor: not-allowed; box-shadow: none !important; } #shopPanel .stock-item-disable:hover { background-color: var(--bg-elevated) !important; border-color: var(--ui-border) !important; transform: none; } #shopPanel .stock-item .price_stock .price { color: var(--ui-text) !important; } #shopPanel .stock-item .price_stock .stock { color: var(--ui-muted) !important; } #shopPanel .stock-item-disable .stock { color: var(--ui-danger) !important; } /* Shop — group tabs (store/subgroup) like pill toolbar */ #shopPanel #store-tabs.nav.nav-tabs, #shopPanel #subgroup-tabs.nav.nav-tabs { background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-md) !important; padding: 6px !important; gap: 6px !important; } #shopPanel #store-tabs.nav.nav-tabs .nav-link, #shopPanel #subgroup-tabs.nav.nav-tabs .nav-link { border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; color: var(--ui-muted) !important; padding: 8px 14px !important; font-weight: 500 !important; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important; } #shopPanel #store-tabs.nav.nav-tabs .nav-link:hover, #shopPanel #subgroup-tabs.nav.nav-tabs .nav-link:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--ui-text) !important; } #shopPanel #store-tabs.nav.nav-tabs .nav-link.active, #shopPanel #subgroup-tabs.nav.nav-tabs .nav-link.active, #shopPanel #store-tabs .nav-item.active > .nav-link, #shopPanel #subgroup-tabs .nav-item.active > .nav-link { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } /* Shop — cart tabs (Current order / Orders #...) */ #shopPanel #cart-tabs.nav.nav-tabs { background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-md) !important; padding: 6px !important; gap: 6px !important; } #shopPanel #cart-tabs.nav.nav-tabs .nav-link { border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; color: var(--ui-muted) !important; padding: 8px 14px !important; font-weight: 500 !important; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important; } #shopPanel #cart-tabs.nav.nav-tabs .nav-link:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--ui-text) !important; } #shopPanel #cart-tabs.nav.nav-tabs .nav-link.active, #shopPanel #cart-tabs .nav-item.active > .nav-link { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } /* Shop — align cart tabs with store tabs (Products header offset) */ @media (min-width: 768px) { #shopPanel .shop-cart #cart-tabs { margin-top: 32px !important; } } /* Shop — tabs/content spacing */ #shopPanel #pills-tabContent { margin-top: 12px !important; padding-top: 12px !important; } #shopPanel .shop-cart > .card-body > .tab-content { margin-top: 12px !important; } #shopPanel #cart-current-orders { padding-top: 12px !important; } /* Shop — scroll shadows for product grid (smooth top/bottom fade) */ #shopPanel #pills-tabContent { /* keep solid base */ background-color: var(--bg-card) !important; /* 2x local fades + 2x scroll shadows */ background-image: linear-gradient(var(--bg-card), rgba(22, 27, 34, 0)), linear-gradient(rgba(22, 27, 34, 0), var(--bg-card)), linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45)); background-position: top, bottom, top, bottom; background-repeat: no-repeat; background-size: 100% 18px, 100% 18px, 100% 10px, 100% 10px; background-attachment: local, local, scroll, scroll; } /* Shop — table header should follow global table header style */ #shopPanel .table thead th { color: var(--ui-text) !important; } /* Shop — order forms (cart / open order / new order) */ #shopPanel #form-shop-order, #shopPanel #form-shop-order-open, #shopPanel #form-shop-order-new { color: var(--ui-text) !important; } #shopPanel #form-shop-order .table, #shopPanel #form-shop-order-open .table, #shopPanel #form-shop-order-new .table { margin-bottom: 0 !important; } /* Shop — cart tables: disable striped zebra (keep clean separators) */ #shopPanel #form-shop-order .table.table-striped tbody tr:nth-of-type(odd), #shopPanel #form-shop-order .table.table-striped tbody tr:nth-of-type(even), #shopPanel #form-shop-order-open .table.table-striped tbody tr:nth-of-type(odd), #shopPanel #form-shop-order-open .table.table-striped tbody tr:nth-of-type(even), #shopPanel #form-shop-order-new .table.table-striped tbody tr:nth-of-type(odd), #shopPanel #form-shop-order-new .table.table-striped tbody tr:nth-of-type(even) { background-color: transparent !important; } #shopPanel #form-shop-order .table.table-striped tbody tr > th, #shopPanel #form-shop-order .table.table-striped tbody tr > td, #shopPanel #form-shop-order-open .table.table-striped tbody tr > th, #shopPanel #form-shop-order-open .table.table-striped tbody tr > td, #shopPanel #form-shop-order-new .table.table-striped tbody tr > th, #shopPanel #form-shop-order-new .table.table-striped tbody tr > td { background-color: transparent !important; } /* Shop — cart tables: header (thead) design */ #shopPanel #form-shop-order .table thead th, #shopPanel #form-shop-order-open .table thead th, #shopPanel #form-shop-order-new .table thead th { background-color: var(--bg-elevated) !important; color: var(--ui-text) !important; border-bottom: 1px solid var(--ui-border) !important; } /* Qty control (minus / input / plus) */ #shopPanel #form-shop-order .btn.btn-xs, #shopPanel #form-shop-order .btn.btn-xs.btn-info, #shopPanel #form-shop-order .btn.btn-xs.btn-danger { width: 28px !important; height: 28px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; } #shopPanel #form-shop-order .btn.btn-xs i, #shopPanel #form-shop-order .btn.btn-xs .mdi, #shopPanel #form-shop-order .btn.btn-xs .fa { margin: 0 !important; line-height: 1 !important; } #shopPanel #form-shop-order .new-order-item-qty.form-control { height: 28px !important; padding: 0 !important; text-align: center !important; border-radius: 8px !important; border: 1px solid var(--ui-border) !important; background: var(--bg-elevated) !important; color: var(--ui-text) !important; box-shadow: none !important; } /* Footer toggles + inputs: make it a clean toolbar row (override inline margins) */ #shopPanel #form-shop-order tfoot th { background: var(--bg-elevated) !important; border-top: 1px solid var(--ui-border) !important; padding: 10px 10px 12px 10px !important; } #shopPanel #form-shop-order tfoot .d-flex.align-items-center { gap: 8px 10px !important; flex-wrap: wrap !important; } #shopPanel #form-shop-order tfoot .form-check.form-check-inline { margin: 0 !important; display: inline-flex !important; align-items: center !important; } #shopPanel #form-shop-order tfoot .form-inline { margin: 0 !important; } /* Action buttons under cart table */ #shopPanel #neworder-items + div { display: flex !important; justify-content: flex-end !important; gap: 8px 10px !important; margin: 12px 0 0 0 !important; } /* POS — icon-only buttons: center the icon (fix visual offset) */ #posPanel button.btn.btn-sm > i:only-child, #posPanel button.btn.btn-xs > i:only-child { margin: 0 !important; line-height: 1 !important; } #posPanel button.btn.btn-sm, #posPanel button.btn.btn-xs { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .btn-default:disabled:hover, .btn-default.disabled:hover { color: var(--text-muted); background-color: var(--bg-elevated); border-color: var(--border-default); } /* ============================================ PC / Console status badges (pill, translucent) Used by: .badge-pc-Online / Offline / Disconnected / Booking / Standby Maintenance is derived from row state (data-pc_enabled="0") ============================================ */ #pcLayoutPanel .badge[class^="badge-pc-"], #pcLayoutPanel .badge[class*=" badge-pc-"], #consolesLayoutPanel .badge[class^="badge-pc-"], #consolesLayoutPanel .badge[class*=" badge-pc-"] { display: block !important; padding: 0 8px !important; height: 22px !important; border-radius: var(--radius-sm) !important; border: 1px solid var(--ui-border) !important; background-color: rgba(22, 27, 34, 0.70) !important; color: var(--ui-on-accent) !important; font-weight: 500 !important; font-size: 10px !important; line-height: 20px !important; /* vertical centering */ letter-spacing: 0 !important; white-space: nowrap !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; } #pcLayoutPanel .badge.badge-pc-Online, #pcLayoutPanel .badge.badge-pc-Write, #consolesLayoutPanel .badge.badge-pc-Online, #consolesLayoutPanel .badge.badge-pc-Write { background-color: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } #pcLayoutPanel .badge.badge-pc-Offline, #consolesLayoutPanel .badge.badge-pc-Offline { background-color: rgba(139, 148, 158, 0.14) !important; border-color: rgba(139, 148, 158, 0.35) !important; } #pcLayoutPanel .badge.badge-pc-Disconnected, #pcLayoutPanel .badge.badge-pc-Disconected, #consolesLayoutPanel .badge.badge-pc-Disconnected, #consolesLayoutPanel .badge.badge-pc-Disconected { background-color: rgba(88, 166, 255, 0.16) !important; border-color: rgba(88, 166, 255, 0.42) !important; } #pcLayoutPanel .badge.badge-pc-Booking, #consolesLayoutPanel .badge.badge-pc-Booking { background-color: rgba(147, 112, 219, 0.16) !important; border-color: rgba(147, 112, 219, 0.40) !important; } #pcLayoutPanel .badge.badge-pc-Standby, #consolesLayoutPanel .badge.badge-pc-Standby { background-color: rgba(242, 161, 0, 0.14) !important; border-color: rgba(242, 161, 0, 0.38) !important; } #pcLayoutPanel .badge.badge-pc-Paused, #consolesLayoutPanel .badge.badge-pc-Paused { background-color: rgba(139, 148, 158, 0.14) !important; border-color: rgba(139, 148, 158, 0.35) !important; color: var(--ui-text) !important; } /* Optional: if any page uses a "Maintenance" status class directly */ #pcLayoutPanel .badge.badge-pc-Maintenance, #pcLayoutPanel .badge.badge-pc-Maintence, #consolesLayoutPanel .badge.badge-pc-Maintenance, #consolesLayoutPanel .badge.badge-pc-Maintence { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; } /* Maintenance: pc_enabled == 0 (table pcs/consoles) */ #computersPanel #pcLayoutPanel .table tr[data-pc_enabled="0"] .statusTd .badge[class^="badge-pc-"], #computersPanel #pcLayoutPanel .table tr[data-pc_enabled="0"] .statusTd .badge[class*=" badge-pc-"], #computersPanel #consolesLayoutPanel .table tr[data-pc_enabled="0"] .statusTd .badge[class^="badge-pc-"], #computersPanel #consolesLayoutPanel .table tr[data-pc_enabled="0"] .statusTd .badge[class*=" badge-pc-"] { background-color: rgba(248, 81, 73, 0.22) !important; border-color: rgba(248, 81, 73, 0.45) !important; color: var(--ui-on-accent) !important; } /* ============================================ Boot page status badges (boot.htm / boot-pc.htm) ============================================ */ #bootPanel .badge[class^="badge-pc-"], #bootPanel .badge[class*=" badge-pc-"] { display: inline-block !important; padding: 0 8px !important; height: 22px !important; line-height: 20px !important; width: 62px !important; max-width: 62px !important; border-radius: var(--radius-sm) !important; border: 1px solid var(--ui-border) !important; background-color: rgba(22, 27, 34, 0.70) !important; color: var(--ui-on-accent) !important; font-weight: 500 !important; font-size: 11px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-align: center !important; box-sizing: border-box !important; vertical-align: middle !important; } #bootPanel .badge.badge-pc-Online, #bootPanel .badge.badge-pc-Write { background-color: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } #bootPanel .badge.badge-pc-Offline, #bootPanel .badge.badge-pc-Enable { background-color: rgba(139, 148, 158, 0.14) !important; border-color: rgba(139, 148, 158, 0.35) !important; } #bootPanel .badge.badge-pc-Disable { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; } /* ============================================ Generic badges (admin UI) Note: apply only to span/label to avoid breaking div.badge blocks in tables. ============================================ */ .container-scroller span.badge, .container-scroller label.badge { display: inline-block; padding: 0 8px !important; height: 22px !important; line-height: 20px !important; border-radius: var(--radius-sm) !important; border: 1px solid var(--ui-border) !important; background-color: rgba(22, 27, 34, 0.70) !important; color: var(--ui-on-accent) !important; font-weight: 500 !important; font-size: 11px !important; white-space: nowrap; vertical-align: middle; box-sizing: border-box; } .container-scroller span.badge.badge-pill, .container-scroller label.badge.badge-pill { border-radius: var(--radius-sm) !important; } /* Bootstrap-ish variants */ .container-scroller span.badge.badge-success, .container-scroller label.badge.badge-success { background-color: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } .container-scroller span.badge.badge-danger, .container-scroller label.badge.badge-danger { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; } .container-scroller span.badge.badge-warning, .container-scroller label.badge.badge-warning { background-color: rgba(242, 161, 0, 0.14) !important; border-color: rgba(242, 161, 0, 0.38) !important; } .container-scroller span.badge.badge-info, .container-scroller label.badge.badge-info, .container-scroller span.badge.bg-info, .container-scroller label.badge.bg-info { background-color: rgba(88, 166, 255, 0.16) !important; border-color: rgba(88, 166, 255, 0.42) !important; } .container-scroller span.badge.badge-primary, .container-scroller label.badge.badge-primary { background-color: rgba(46, 160, 67, 0.18) !important; border-color: rgba(46, 160, 67, 0.42) !important; } .container-scroller span.badge.badge-secondary, .container-scroller label.badge.badge-secondary { background-color: rgba(139, 148, 158, 0.14) !important; border-color: rgba(139, 148, 158, 0.35) !important; } .container-scroller span.badge.badge-light, .container-scroller label.badge.badge-light { background-color: rgba(139, 148, 158, 0.10) !important; border-color: rgba(139, 148, 158, 0.28) !important; } /* Order status badges (Shop / POS / Member orders) */ #shopPanel span.badge[class*="badge-order-"], #posPanel span.badge[class*="badge-order-"], #memberOrderPanel span.badge[class*="badge-order-"] { border: 1px solid var(--ui-border) !important; border-radius: var(--radius-sm) !important; height: 22px !important; line-height: 20px !important; padding: 0 8px !important; color: var(--ui-on-accent) !important; background-color: rgba(22, 27, 34, 0.70) !important; } #shopPanel span.badge.badge-order-paid, #posPanel span.badge.badge-order-paid, #memberOrderPanel span.badge.badge-order-paid { background-color: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } #shopPanel span.badge.badge-order-cancelled, #posPanel span.badge.badge-order-cancelled, #memberOrderPanel span.badge.badge-order-cancelled { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; } #shopPanel span.badge.badge-order-in-process, #posPanel span.badge.badge-order-in-process, #memberOrderPanel span.badge.badge-order-in-process { background-color: rgba(88, 166, 255, 0.16) !important; border-color: rgba(88, 166, 255, 0.42) !important; } #shopPanel span.badge.badge-order-pending, #posPanel span.badge.badge-order-pending, #memberOrderPanel span.badge.badge-order-pending { background-color: rgba(139, 148, 158, 0.14) !important; border-color: rgba(139, 148, 158, 0.35) !important; } #shopPanel span.badge.badge-order-partial-refund, #posPanel span.badge.badge-order-partial-refund, #memberOrderPanel span.badge.badge-order-partial-refund { background-color: rgba(242, 161, 0, 0.14) !important; border-color: rgba(242, 161, 0, 0.38) !important; } /* Legacy order status pills (not using .badge) */ #shopPanel .order-status-td span, #posPanel .order-status-td span { border: 1px solid var(--ui-border) !important; border-radius: var(--radius-sm) !important; height: 22px !important; line-height: 20px !important; padding: 0 8px !important; box-sizing: border-box !important; } #shopPanel #orderlist-items .table-row .order-status-1 span, #posPanel .order-status-1 span { background-color: rgba(242, 161, 0, 0.14) !important; border-color: rgba(242, 161, 0, 0.38) !important; } #shopPanel #orderlist-items .table-row .order-status-2 span, #posPanel .order-status-2 span { background-color: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } #shopPanel #orderlist-items .table-row .order-status-3 span, #posPanel .order-status-3 span { background-color: rgba(139, 148, 158, 0.14) !important; border-color: rgba(139, 148, 158, 0.35) !important; } /* Sidebar counters */ #side-menu span.badge.member-badge, #side-menu span.badge.shop-badge { min-width: 18px !important; height: 18px !important; line-height: 16px !important; padding: 0 6px !important; border-radius: var(--radius-sm) !important; background-color: var(--ui-danger) !important; border: 1px solid rgba(248, 81, 73, 0.55) !important; color: var(--ui-on-accent) !important; font-weight: 500 !important; font-size: 11px !important; text-align: center !important; } .context-menu-root { z-index: 1050 !important; } .modal-body .form-group { margin-bottom: 0.5rem !important; display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .input-group-addon { padding-top: calc(0.875rem + 1px); padding-bottom: calc(0.875rem + 1px); padding-left:3px; } /* Input groups — unified style across admin UI */ .container-scroller .input-group-text, .container-scroller .input-group-addon { background-color: var(--bg-elevated) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; height: 38px !important; display: inline-flex !important; align-items: center !important; } .container-scroller .input-group-prepend, .container-scroller .input-group-append { height: 38px !important; } .container-scroller .input-group > .form-control, .container-scroller .input-group > select.form-control { border-color: var(--ui-border) !important; } .container-scroller .input-group-prepend .btn, .container-scroller .input-group-append .btn, .container-scroller .input-group-prepend button, .container-scroller .input-group-append button { background-color: var(--bg-elevated) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; height: 38px !important; transition: all var(--transition-fast); } .container-scroller .input-group-prepend .btn:hover, .container-scroller .input-group-append .btn:hover, .container-scroller .input-group-prepend button:hover, .container-scroller .input-group-append button:hover { background-color: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } .container-scroller .input-group:focus-within .input-group-text, .container-scroller .input-group:focus-within .input-group-addon, .container-scroller .input-group:focus-within .form-control, .container-scroller .input-group:focus-within .btn, .container-scroller .input-group:focus-within button { border-color: var(--ui-green-border) !important; } table thead th { text-transform: uppercase; } table thead th a, .dropdown-item a { color: var(--ui-muted); } /* Tables — header (thead) should not blend with background */ .container-scroller table thead th, .container-scroller .table thead th { background-color: var(--bg-elevated) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } .container-scroller table thead th a, .container-scroller .table thead th a { color: inherit !important; } /* Tables — add outer container frame (match light theme) */ /* Tables — neutralize grid/borders from theme-dark.css (remove blue seams) */ .container-scroller .table, .container-scroller .jsgrid .jsgrid-table { color: var(--text-secondary) !important; } .container-scroller .table th, .container-scroller .table td, .container-scroller .jsgrid .jsgrid-table th, .container-scroller .jsgrid .jsgrid-table td { border-top: 1px solid var(--ui-border) !important; border-bottom: 1px solid var(--ui-border) !important; } .container-scroller .table thead th, .container-scroller .jsgrid .jsgrid-table thead th { border-bottom: 1px solid var(--ui-border) !important; } .container-scroller .table tbody + tbody, .container-scroller .jsgrid .jsgrid-table tbody + tbody { border-top: 1px solid var(--ui-border) !important; } .container-scroller .table-bordered, .container-scroller .jsgrid .jsgrid-table.table-bordered, .container-scroller .jsgrid .table-bordered.jsgrid-table { border-color: var(--ui-border) !important; } .container-scroller .table-bordered th, .container-scroller .table-bordered td, .container-scroller .jsgrid .jsgrid-table.table-bordered th, .container-scroller .jsgrid .jsgrid-table.table-bordered td { border-color: var(--ui-border) !important; } /* Tables — unify striped + hover across admin UI (override theme-dark.css blue tint) */ .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(odd) { background-color: rgba(0, 0, 0, 0.14) !important; } .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(odd) > th, .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(odd) > td { background-color: rgba(0, 0, 0, 0.14) !important; } .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(even) > th, .container-scroller .table.table-striped tbody tr:not([class*="table-"]):nth-of-type(even) > td { background-color: transparent !important; } .container-scroller .table.table-hover tbody tr:not([class*="table-"]):hover { color: var(--ui-text) !important; background-color: var(--ui-green-bg) !important; } .container-scroller .table.table-hover tbody tr:not([class*="table-"]):hover > th, .container-scroller .table.table-hover tbody tr:not([class*="table-"]):hover > td { color: inherit !important; background-color: var(--ui-green-bg) !important; } /* Tables (global): some pages are outside .container-scroller — force consistent hover (no blue) */ .table.table-hover tbody tr:not([class*="table-"]):hover, .table-hover tbody tr:not([class*="table-"]):hover { color: var(--ui-text) !important; background-color: var(--ui-green-bg) !important; } .table.table-hover tbody tr:not([class*="table-"]):hover > th, .table.table-hover tbody tr:not([class*="table-"]):hover > td, .table-hover tbody tr:not([class*="table-"]):hover > th, .table-hover tbody tr:not([class*="table-"]):hover > td { color: inherit !important; background-color: var(--ui-green-bg) !important; } /* Bookings: hover highlight should be lighter (semi-transparent) */ html:has(.theme-toggle-btn.is-light) #bookings .table-hover > tbody > tr:hover > * { background-color: rgba(45, 164, 78, 0.06) !important; } /* Tables (Shop/POS): some pages use .table-row and/or have more specific hover rules */ #shopPanel .table-hover tbody tr.table-row:hover, #shopPanel .table-hover tbody tr.table-row:hover > th, #shopPanel .table-hover tbody tr.table-row:hover > td, #shopPanel #orderlist-items .table-row:hover, #shopPanel #orderlist-items .table-row:hover > th, #shopPanel #orderlist-items .table-row:hover > td, #posPanel .table-hover tbody tr.table-row:hover, #posPanel .table-hover tbody tr.table-row:hover > th, #posPanel .table-hover tbody tr.table-row:hover > td { color: var(--ui-text) !important; background-color: var(--ui-green-bg) !important; } /* jsGrid: also override hover tint */ .jsgrid .jsgrid-row:hover > td, .jsgrid .jsgrid-alt-row:hover > td { background-color: var(--ui-green-bg) !important; } /* Pagination — unified + centered (override theme-dark.css) */ .container-scroller .pagination.pagination-separated { justify-content: center !important; gap: 6px !important; } .container-scroller .pagination.pagination-separated.justify-content-end, .container-scroller .pagination.pagination-separated.justify-content-start { justify-content: center !important; } .container-scroller .pagination.pagination-separated .page-item { margin: 0 !important; } .container-scroller .pagination.pagination-separated .page-link { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 10px !important; background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .container-scroller .pagination.pagination-separated .page-link:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } .container-scroller .pagination.pagination-separated .page-item.active .page-link { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } .container-scroller .pagination.pagination-separated .page-item.disabled .page-link, .container-scroller .pagination.pagination-separated .page-link.disabled { opacity: 0.6; cursor: not-allowed; } /* Tabs — unified tab-content surface (no border) */ .container-scroller .tab-content:not(.tab-transparent-content) { background: var(--bg-card) !important; border: 0 !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; padding: 12px !important; text-align: left !important; } #membersPanel table tbody tr.memberItem.selected { background-color: rgba(46, 160, 67, 0.10) !important; } #membersPanel table tbody tr.memberItem.selected:hover { background-color: rgba(46, 160, 67, 0.10) !important; } table.table-sm th , table.table-sm td { line-height: 1; padding: 0.3rem !important; } .dropdown-item:hover, .dropdown-item:focus { color: var(--ui-text); text-decoration: none; background-color: var(--ui-green-bg); } .hidden { display: none; } *::-webkit-scrollbar { width:0px; height:0px; } .table-responsive::-webkit-scrollbar { width:8px !important; height:8px !important; } .table-responsive::-webkit-scrollbar-track { background: var(--bg-dark); } .table-responsive::-webkit-scrollbar-thumb { background: var(--bg-elevated) !important; border-radius: 4px !important; } .table-responsive::-webkit-scrollbar-thumb:hover { background: var(--border-default) !important; } .table-responsive::-webkit-scrollbar-corner { background-color: transparent; } /* pc and boot page scrollbar */ body.show-scrollbar::-webkit-scrollbar { width: 8px; } body.show-scrollbar::-webkit-scrollbar-track { background: var(--bg-dark); } body.show-scrollbar::-webkit-scrollbar-thumb { background: var(--bg-elevated) !important; border-radius: 4px !important; } body.show-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--border-default) !important; } .form-control { padding: 0.5rem 0.75rem !important; height: 38px !important; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); background-color: var(--bg-elevated) !important; color: var(--text-primary) !important; border-color: var(--border-default) !important; } .form-control:focus { background-color: var(--bg-elevated) !important; border-color: var(--accent-primary) !important; box-shadow: none !important; outline: none; } .form-control::-webkit-input-placeholder { color: var(--text-muted) !important; } .input-group-append, .input-group-prepend { height:36px; } .input-group-append button:hover { background-color: var(--ui-green-bg); } /* Search input in main toolbar (background like elevated inputs: #21262d) */ #search-member-group .input-group-text, #search-member-group .form-control { background-color: var(--bg-elevated) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; height: 40px !important; /* input has inline height:40px */ } #search-member-group .input-group-prepend { height: 40px !important; } #search-member-group .input-group-text { border-right: 0 !important; /* separator line is drawn on input (see below) */ padding: 0 12px !important; display: inline-flex !important; align-items: center !important; } #search-member-group .form-control { /* Draw a crisp separator line that can't be overlapped by prepend */ border-left: 1px solid rgba(48, 54, 61, 0.95) !important; } #search-member-group .form-control::placeholder { color: var(--ui-muted) !important; } #search-member-group:focus-within .input-group-text, #search-member-group:focus-within .form-control { border-color: rgba(46, 160, 67, 0.45) !important; } .modal-header { padding: 15px 35px 15px 35px !important; } .modal-body { padding:15px 35px 15px 35px !important; } #tabs .dropdown-item { padding: 0 !important; } #tabs .dropdown-item a { display: block; clear: both; white-space: nowrap; padding:.65rem 1.5rem; width:100%; height:100%;} #tabs .dropdown-item a:hover { text-decoration: none; } .nav-tabs.tab-transparent .nav-item .nav-link { font-weight: normal; font-size:0.813rem; } @media print { @page { size: auto !important; } * { color: black !important; background: white !important; border: 0px !important; white-space: normal !important; word-break: break-all !important; padding: 0 !important; } body { min-width: 0px !important; } } #pcs-status-item { display: none !important; } @media (min-width: 768px) { #pcs-status-item { display: flex !important; } } body,html { background-color: var(--bg-darkest); } .container-scroller { opacity: 0; } /* Content area background should match sidebar */ .content-wrapper { background-color: var(--ui-surface) !important; /* Subtle green glow gradients (not a flat green fill) */ background-image: radial-gradient(900px 620px at 18% 12%, rgba(46, 160, 67, 0.16) 0%, transparent 62%), radial-gradient(1100px 760px at 84% 18%, rgba(46, 160, 67, 0.10) 0%, transparent 64%), radial-gradient(1200px 900px at 32% 110%, rgba(46, 160, 67, 0.08) 0%, transparent 66%), linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.12) 38%, rgba(0, 0, 0, 0.42) 100%); background-size: auto, auto, auto, auto; background-position: 0 0, 0 0, 0 0, 0 0; background-attachment: fixed; } /* ============================================ Cards (Bootstrap) — unify with current palette Scope: Admin UI only (index.htm wrapper) ============================================ */ .container-scroller .card { background-color: var(--bg-card-hover) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-sm) !important; color: var(--ui-text) !important; } .container-scroller .card > .card-header, .container-scroller .card > .card-footer { background-color: var(--bg-elevated) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } .container-scroller .card > .card-body { background-color: transparent !important; color: inherit !important; } /* Exception: PC layout has its own isolated design system (layout.css) */ #layoutPanel .card { background-color: var(--bg-darkest) !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; } #layoutPanel .card > .card-body { background-color: var(--bg-darkest) !important; } .modal.fade { background-color: transparent; } /* Modal overrides (theme-dark.css) */ .modal-backdrop.show { opacity: 0.65 !important; } .modal .modal-dialog { background-color: transparent !important; border: 0 !important; } .modal .modal-content { background-color: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-lg) !important; color: var(--ui-text) !important; box-shadow: var(--shadow-lg) !important; background-clip: padding-box !important; outline: 0 !important; } .modal .modal-header { background-color: var(--ui-surface) !important; border-bottom: 1px solid var(--ui-border) !important; border-top-left-radius: inherit; border-top-right-radius: inherit; } .modal .modal-body { background-color: var(--ui-surface) !important; color: var(--ui-text) !important; } .modal .modal-footer { background-color: var(--ui-surface) !important; border-top: 1px solid var(--ui-border) !important; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .modal .modal-title { color: var(--ui-text) !important; } .modal-header .close, .modal-header button.close { color: var(--ui-muted) !important; opacity: 1 !important; text-shadow: none !important; } .modal-header .close:hover, .modal-header .close:focus, .modal-header button.close:hover, .modal-header button.close:focus { color: var(--ui-accent) !important; opacity: 1 !important; } .modal-header .close span { color: inherit !important; } .modal-header .btn-close, .modal-header button.btn-close { opacity: 1 !important; } .modal .form-control { background-color: var(--bg-elevated) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; } .modal .form-control:focus { border-color: var(--ui-accent) !important; box-shadow: none !important; outline: none; } .modal .form-control::-webkit-input-placeholder { color: var(--ui-muted) !important; } .modal .input-group-addon, .modal .input-group-text { background-color: var(--ui-surface) !important; color: var(--ui-muted) !important; border-color: var(--ui-border) !important; } .modal .input-group-append .btn, .modal .input-group-prepend .btn, .modal .input-group-append button, .modal .input-group-prepend button { color: var(--ui-text) !important; background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; transition: all var(--transition-fast); } .modal .input-group-append .btn:hover, .modal .input-group-prepend .btn:hover, .modal .input-group-append button:hover, .modal .input-group-prepend button:hover { color: var(--ui-accent) !important; background-color: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } .modal .input-group-append .btn:disabled, .modal .input-group-prepend .btn:disabled, .modal .input-group-append button:disabled, .modal .input-group-prepend button:disabled { color: var(--ui-muted) !important; background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; cursor: not-allowed; opacity: 0.6; } .modal .input-group-append .btn:disabled:hover, .modal .input-group-prepend .btn:disabled:hover, .modal .input-group-append button:disabled:hover, .modal .input-group-prepend button:disabled:hover { color: var(--ui-muted) !important; background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; } .modal .btn-default { color: var(--ui-text) !important; background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; transition: all var(--transition-fast); } .modal .btn-default:hover { color: var(--ui-accent) !important; background-color: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } .modal .btn[data-dismiss="modal"]:hover, .modal .btn[data-bs-dismiss="modal"]:hover { color: var(--ui-on-accent) !important; background-color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; } .modal .btn[data-dismiss="modal"]:focus, .modal .btn[data-bs-dismiss="modal"]:focus { box-shadow: none !important; } .modal .btn[data-dismiss="modal"]:active, .modal .btn[data-bs-dismiss="modal"]:active { color: var(--ui-on-accent) !important; background-color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; } .modal .btn-default:disabled, .modal .btn-default.disabled { color: var(--ui-muted) !important; background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; cursor: not-allowed; opacity: 0.6; } .modal .btn-default:disabled:hover, .modal .btn-default.disabled:hover { color: var(--ui-muted) !important; background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; } .modal .btn-info { background-color: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; transition: all var(--transition-fast); } .modal .btn-info:hover { background-color: rgba(46, 160, 67, 0.18) !important; border-color: rgba(46, 160, 67, 0.42) !important; color: var(--ui-text) !important; } .modal .btn-info:focus { box-shadow: none !important; } .modal .btn-info:active { background-color: rgba(46, 160, 67, 0.22) !important; border-color: rgba(46, 160, 67, 0.50) !important; color: var(--ui-text) !important; } .modal .btn-info:disabled, .modal .btn-info.disabled { background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; cursor: not-allowed; opacity: 0.6; } .modal .btn-info:disabled:hover, .modal .btn-info.disabled:hover { background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; } .modal .btn-primary, .modal .btn-success { background-color: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; transition: all var(--transition-fast); } .modal .btn-primary:hover, .modal .btn-success:hover { background-color: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; color: var(--ui-on-accent) !important; } .modal .btn-primary:focus, .modal .btn-success:focus { box-shadow: none !important; } .modal .btn-primary:active, .modal .btn-success:active { background-color: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; color: var(--ui-on-accent) !important; } .modal .btn-primary:disabled, .modal .btn-success:disabled, .modal .btn-primary.disabled, .modal .btn-success.disabled { background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; cursor: not-allowed; opacity: 0.6; } .modal .btn-primary:disabled:hover, .modal .btn-success:disabled:hover, .modal .btn-primary.disabled:hover, .modal .btn-success.disabled:hover { background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; } .myModalPcPostpaid .modal-header, .myModalPosPostpaid .modal-header { align-items: center !important; } .myModalPcPostpaid .modal-title, .myModalPosPostpaid .modal-title { flex: 1 1 auto; text-align: left !important; margin: 0 !important; } .myModalPcPostpaid .modal-body, .myModalPosPostpaid .modal-body { padding: 15px 35px 15px 35px !important; } .myModalPcPostpaid .modal-body .message, .myModalPosPostpaid .modal-body .message { width: 100%; text-align: left !important; margin-bottom: 0 !important; } .myModalPcPostpaid .modal-footer .btn, .myModalPosPostpaid .modal-footer .btn { min-width: 120px; } .myModalPcAddtime .modal-body { padding: 15px 35px 15px 35px !important; } .myModalPcAddtime .input-group { border-radius: var(--radius-md); } .myModalPcAddtime .input-group .form-control { height: 38px !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .myModalPcAddtime .input-group .input-group-append .input-group-text { height: 38px; border-left: 0 !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; padding: 0 12px; transition: all var(--transition-fast); } .myModalPcAddtime .input-group:focus-within .form-control, .myModalPcAddtime .input-group:focus-within .input-group-text { border-color: var(--ui-accent-hover) !important; } .myModalPcAddtime .input-group-text { background-color: var(--ui-surface) !important; color: var(--ui-muted) !important; border-color: var(--ui-border) !important; user-select: none; } .myModalPcAddtime #submit-cus-time, .myModalPcAddtime #submit-cus-money { min-width: 44px; display: flex; align-items: center; justify-content: center; } .myModalPcAddtime #submit-cus-time:hover, .myModalPcAddtime #submit-cus-money:hover { background-color: var(--ui-green-bg) !important; color: var(--ui-on-accent) !important; border-color: var(--ui-green-border) !important; } .myModalPcAddtime .btn-time, .myModalPcAddtime .btn-money, .myModalPcAddtime .btn-light.btn-time, .myModalPcAddtime .btn-light.btn-money { background-color: var(--ui-surface) !important; color: var(--ui-text) !important; border: 1px solid var(--ui-border) !important; transition: all var(--transition-fast); height: 38px; } .myModalPcAddtime .btn-time:hover, .myModalPcAddtime .btn-money:hover { background-color: var(--ui-green-bg) !important; color: var(--ui-on-accent) !important; border-color: var(--ui-green-border) !important; } .myModalPcAddtime .btn-time:focus, .myModalPcAddtime .btn-money:focus { box-shadow: none !important; outline: none; } .myModalPcAddtime .modal-footer .btn { min-width: 120px; } /* Checkbox / radio accent (override theme-dark blue) */ input[type="checkbox"], input[type="radio"], .form-check-input { accent-color: var(--ui-accent-hover); } .form-check .form-check-label input[type="checkbox"] + .input-helper:before { border-color: var(--ui-border) !important; } .form-check .form-check-label input[type="checkbox"]:checked + .input-helper:before { background: var(--ui-accent-hover) !important; border-width: 0 !important; } .form-check .form-check-label input[type="checkbox"]:checked + .input-helper:after { color: var(--ui-on-accent) !important; } .form-check label input[type="checkbox"] + .input-helper:before { border-color: var(--ui-border) !important; } .form-check label input[type="checkbox"]:checked + .input-helper:before { background: var(--ui-accent-hover) !important; border-width: 0 !important; } .form-check label input[type="checkbox"]:checked + .input-helper:after { color: var(--ui-on-accent) !important; } .custom-control-label::before { background-color: var(--ui-surface) !important; border-color: var(--ui-border) !important; } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: none !important; border-color: var(--ui-accent-hover) !important; } .custom-control-input:not(:disabled):active ~ .custom-control-label::before { background-color: var(--ui-green-bg) !important; border-color: var(--ui-accent-hover) !important; } .custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before { background-color: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; } .form-check .form-check-label input[type="radio"] + .input-helper:before { border-color: var(--ui-border) !important; } .form-check .form-check-label input[type="radio"]:checked + .input-helper:before { background: var(--ui-accent-hover) !important; border-width: 0 !important; } .form-check .form-check-label input[type="radio"]:checked + .input-helper:after { background: var(--ui-on-accent) !important; } .form-check label input[type="radio"] + .input-helper:before { border-color: var(--ui-border) !important; } .form-check label input[type="radio"]:checked + .input-helper:before { background: var(--ui-accent-hover) !important; border-width: 0 !important; } .form-check label input[type="radio"]:checked + .input-helper:after { background: var(--ui-on-accent) !important; } /* Checkbox (custom) — checkbox-wrapper-4 */ .checkbox-wrapper-4 * { box-sizing: border-box; } .checkbox-wrapper-4 .cbx { -webkit-user-select: none; user-select: none; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); overflow: hidden; transition: all var(--transition-fast); display: inline-block; color: var(--ui-text); } .checkbox-wrapper-4 .cbx:not(:last-child) { margin-right: 6px; } .checkbox-wrapper-4 .cbx:hover { background: var(--ui-green-bg); } .checkbox-wrapper-4 .cbx span { float: left; vertical-align: middle; transform: translate3d(0, 0, 0); } .checkbox-wrapper-4 .cbx span:first-child { position: relative; width: 18px; height: 18px; border-radius: 4px; transform: scale(1); border: 1px solid var(--ui-border); transition: all var(--transition-fast); background: var(--bg-elevated); box-shadow: var(--shadow-sm); } .checkbox-wrapper-4 .cbx span:first-child svg { position: absolute; top: 3px; left: 2px; fill: none; stroke: var(--ui-on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16px; stroke-dashoffset: 16px; transition: all var(--transition-normal); transition-delay: 0.1s; transform: translate3d(0, 0, 0); } .checkbox-wrapper-4 .cbx span:last-child { padding-left: 8px; line-height: 18px; } .checkbox-wrapper-4 .cbx:hover span:first-child { border-color: var(--ui-green-border); } .checkbox-wrapper-4 .inp-cbx { position: absolute; visibility: hidden; } .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child { background: var(--ui-accent); border-color: var(--ui-accent); animation: wave-4 0.4s ease; } .checkbox-wrapper-4 .inp-cbx:checked + .cbx span:first-child svg { stroke-dashoffset: 0; } .checkbox-wrapper-4 .inline-svg { position: absolute; width: 0; height: 0; pointer-events: none; user-select: none; } @media screen and (max-width: 640px) { .checkbox-wrapper-4 .cbx { width: 100%; display: inline-block; } } @-webkit-keyframes wave-4 { 50% { transform: scale(0.9); } } @keyframes wave-4 { 50% { transform: scale(0.9); } } /* Font Awesome checkbox icons — replace fa-square-o/fa-check-square-o with unified checkbox look */ .container-scroller .fa.fa-square-o:before, .container-scroller .fa.fa-check-square-o:before { content: "" !important; } .container-scroller .fa.fa-square-o, .container-scroller .fa.fa-check-square-o { position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.15em !important; height: 1.15em !important; line-height: 1 !important; vertical-align: middle !important; border-radius: 0.25em !important; border: 1px solid var(--ui-border) !important; background: var(--bg-elevated) !important; box-shadow: var(--shadow-sm) !important; cursor: pointer !important; } .container-scroller .fa.fa-square-o:hover { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } .container-scroller .fa.fa-check-square-o { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; animation: fa-checkbox-wave 0.35s ease; } .container-scroller .fa.fa-check-square-o:after { content: "" !important; width: 0.35em; height: 0.60em; border-right: 2px solid var(--ui-on-accent); border-bottom: 2px solid var(--ui-on-accent); transform: rotate(45deg); margin-top: -0.05em; animation: fa-checkbox-check 0.25s ease 0.05s both; } .container-scroller .fa.fa-check-square-o:hover { border-color: var(--ui-green-border) !important; } @-webkit-keyframes fa-checkbox-wave { 50% { transform: scale(0.92); } } @keyframes fa-checkbox-wave { 50% { transform: scale(0.92); } } @-webkit-keyframes fa-checkbox-check { from { opacity: 0; transform: rotate(45deg) scale(0.6); } to { opacity: 1; transform: rotate(45deg) scale(1); } } @keyframes fa-checkbox-check { from { opacity: 0; transform: rotate(45deg) scale(0.6); } to { opacity: 1; transform: rotate(45deg) scale(1); } } .form-control:disabled { color: var(--text-muted) !important; } .red-dot { width:8px; height:8px; background-color: var(--ui-danger); border-radius: 4px; margin-left:6px; display: inline-block; } ul.navbar-nav > li.nav-item > div.shortcuts > a:hover { text-decoration: none; } /* ============================================ Top Navbar — Optimized ============================================ */ .navbar .navbar-menu-wrapper { --nav-hover-bg: rgba(56, 180, 100, 0.18); --nav-hover-color: #5fe882; --nav-transition: 150ms ease; --nav-left-align-offset: 50px; display: flex !important; align-items: center !important; justify-content: flex-end !important; background-color: var(--ui-surface) !important; border-left: 0 !important; /* make wrapper monolithic */ height: 63px !important; /* match theme navbar height */ padding: 0 16px !important; gap: 16px !important; } .navbar .navbar-menu-wrapper > .navbar-nav:not(.navbar-nav-right) { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 12px 0 0 !important; border-right: 0 !important; /* remove inner separator line */ color: var(--ui-muted) !important; font: 500 0.875rem/1 inherit !important; white-space: nowrap !important; margin-right: auto !important; /* keep cafe name at the left edge of menu-wrapper */ margin-left: var(--nav-left-align-offset) !important; } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right { display: flex !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; flex: 1 1 auto !important; /* allow left+right alignment inside the same row */ } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > li, .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > .nav-item { display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 28px !important; padding: 0 12px !important; margin: 0 !important; font: 600 0.75rem/1 inherit !important; border-radius: 6px !important; white-space: nowrap !important; margin-right: auto !important; /* move license button to the left (next to cafe name) */ } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-success { background: var(--ui-green-bg) !important; border: 1px solid var(--ui-green-border) !important; color: var(--ui-green-text) !important; } .navbar .navbar-menu-wrapper .navbar-nav.navbar-nav-right > a.btn.btn-success:hover { background: rgba(46, 160, 67, 0.18) !important; border-color: rgba(46, 160, 67, 0.45) !important; } .navbar .navbar-menu-wrapper .shortcuts { display: flex !important; align-items: center !important; gap: 4px !important; padding: 4px !important; background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; border-radius: 10px !important; } /* Light theme: keep shortcuts block styled like dark theme */ html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .shortcuts { background: #21262d !important; border-color: #30363d !important; } html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .shortcuts > a { color: #8b949e !important; } html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .shortcuts > a:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(48, 54, 61, 0.9) !important; } html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .shortcuts > a:hover i, html:has(.theme-toggle-btn.is-light) .navbar .navbar-menu-wrapper .shortcuts > a:hover .mdi { color: #c9d1d9 !important; } .navbar .navbar-menu-wrapper .shortcuts > a { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 8px !important; background: transparent !important; border: none !important; color: var(--ui-muted) !important; text-decoration: none !important; transition: background var(--nav-transition), color var(--nav-transition) !important; } .navbar .navbar-menu-wrapper .shortcuts > a:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(48, 54, 61, 0.9) !important; } .navbar .navbar-menu-wrapper .shortcuts > a:hover i, .navbar .navbar-menu-wrapper .shortcuts > a:hover .mdi { color: var(--ui-text) !important; } .navbar .navbar-menu-wrapper .shortcuts > a > i { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; font-size: 20px !important; line-height: 1 !important; color: inherit !important; margin: 0 !important; padding: 0 !important; } .navbar .navbar-menu-wrapper .shortcuts > a > img { display: block !important; width: 22px !important; height: 22px !important; object-fit: contain !important; } /* Theme toggle button (shortcuts) */ /* ============================================ Theme Toggle Button — Sun/Moon Switch ============================================ */ .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 28px; padding: 0; border-radius: 14px; background: linear-gradient(135deg, #1a1f26 0%, #0d1117 100%); border: 1px solid var(--ui-border); cursor: pointer; overflow: hidden; transition: background 0.4s ease, border-color 0.3s ease; } /* Track background stars (dark mode) */ .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 8px 8px, rgba(255,255,255,0.15) 1px, transparent 1px), radial-gradient(circle at 20px 18px, rgba(255,255,255,0.10) 1px, transparent 1px), radial-gradient(circle at 38px 6px, rgba(255,255,255,0.12) 1px, transparent 1px), radial-gradient(circle at 44px 20px, rgba(255,255,255,0.08) 1px, transparent 1px); opacity: 1; transition: opacity 0.4s ease; } /* Thumb (moon/sun) */ .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #e8e8e8 0%, #c9d1d9 100%); box-shadow: inset -4px -3px 0 0 #8b949e, 0 2px 6px rgba(0, 0, 0, 0.3); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, box-shadow 0.4s ease; } /* Hover effect */ .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn:hover { border-color: rgba(46, 160, 67, 0.45); } .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn:hover::after { transform: scale(1.05); } /* Focus */ .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(46, 160, 67, 0.25); } /* Active press */ .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn:active::after { transform: scale(0.95); } /* ===== Light mode state ===== */ .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn.is-light { background: linear-gradient(135deg, #87ceeb 0%, #b0e0f6 100%); border-color: rgba(135, 206, 235, 0.5); } /* Hide stars in light mode */ .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn.is-light::before { opacity: 0; } /* Sun appearance */ .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn.is-light::after { transform: translateX(24px); background: linear-gradient(135deg, #ffd93d 0%, #ff9500 100%); box-shadow: 0 0 0 3px rgba(255, 217, 61, 0.25), 0 0 12px 2px rgba(255, 149, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15); } .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn.is-light:hover::after { transform: translateX(24px) scale(1.05); } .navbar .navbar-menu-wrapper .shortcuts .theme-toggle-btn.is-light:active::after { transform: translateX(24px) scale(0.95); } .navbar .navbar-menu-wrapper #user_dropdown { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; padding: 2px !important; margin-left: 8px !important; border-radius: 50% !important; background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; transition: background var(--nav-transition), border-color var(--nav-transition) !important; } .navbar .navbar-menu-wrapper #user_dropdown:hover { background: rgba(95, 232, 130, 0.15) !important; border-color: var(--nav-hover-color) !important; } .navbar .navbar-menu-wrapper #user_dropdown:focus { box-shadow: none !important; outline: none !important; } .navbar .navbar-menu-wrapper #user_dropdown img { display: block !important; border-radius: 50% !important; } .navbar .navbar-menu-wrapper #user_dropdown.dropdown-toggle::after { display: none !important; } /* Dropdown menu */ .dropdown-menu.navbar-dropdown { background: #1c2128 !important; border: 1px solid var(--ui-border) !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; padding: 8px !important; min-width: 200px !important; margin-top: 8px !important; } .dropdown-menu.navbar-dropdown .dropdown-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; color: var(--ui-text) !important; font-size: 0.875rem !important; border-radius: 8px !important; margin: 2px 0 !important; transition: background var(--nav-transition), color var(--nav-transition) !important; } .dropdown-menu.navbar-dropdown .dropdown-item i { color: var(--ui-muted) !important; font-size: 18px !important; width: 20px !important; text-align: center !important; transition: color var(--nav-transition) !important; } .dropdown-menu.navbar-dropdown .dropdown-item:hover { background: var(--nav-hover-bg) !important; color: var(--nav-hover-color) !important; } .dropdown-menu.navbar-dropdown .dropdown-item:hover i { color: var(--nav-hover-color) !important; } .dropdown-menu.navbar-dropdown .dropdown-item:active { background: rgba(56, 180, 100, 0.28) !important; } @media (max-width: 991.98px) { .navbar .navbar-menu-wrapper { padding: 0 12px !important; gap: 10px !important; } .navbar .navbar-menu-wrapper .shortcuts > a { width: 32px !important; height: 32px !important; } .navbar .navbar-menu-wrapper .shortcuts > a > i { font-size: 18px !important; } .navbar .navbar-menu-wrapper .shortcuts > a > img { width: 18px !important; height: 18px !important; } } #manual-div { display: inline-block; } #manual-div i { font-size:25px; color: var(--ui-muted); cursor: pointer; } #manual-div div { border:1px solid var(--ui-border); border-radius: 8px; display: inline-block; padding: 4px; opacity: 0; transition: all 1s ease-in-out; visibility: hidden; } #manual-div div img { height: 22px; } #manual-div:hover div { opacity: 1; transition: all 1s ease-in-out; visibility: visible; } #shift-status-table th { text-align:left; padding-left:10px; } #shift-status-table td:first-child { text-align:left; } #shift-status-table td:last-child { text-align:right; } #shift-shop-sales-table th, #shift-shop-sales-table td { text-align:center; padding-left:10px; } #shift-shop-sales-table th:first-child, #shift-shop-sales-table td:first-child { text-align:left; } .row { margin-left: 0px; margin-right: 0px;} [v-cloak] { display: none !important; } .sweet-alert p { color: var(--text-secondary) !important; } .sweet-alert { background-color: var(--ui-surface) !important; border: 1px solid var(--ui-border); border-radius: var(--radius-lg) !important; } .sweet-alert button { color: var(--ui-text) !important; background-color: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; transition: all var(--transition-fast); } .sweet-alert button:hover { color: var(--ui-on-accent) !important; background-color: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; } .sweet-alert button.cancel { color: var(--ui-text) !important; background-color: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; } .sweet-alert button.cancel:hover { color: var(--ui-on-accent) !important; background-color: var(--ui-danger) !important; border-color: var(--ui-danger) !important; } .sweet-alert h2 { color: var(--ui-text) !important; } .sweet-alert .sa-icon.sa-success::before, .sweet-alert .sa-icon.sa-success::after { background: inherit !important; } .sweet-alert .sa-icon.sa-success .sa-fix { background: inherit !important; } .sweet-alert .sa-icon.sa-success .sa-line { background-color: var(--accent-primary) !important; } label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; margin-bottom: 0px; cursor: inherit; } .table-layout-fixed { table-layout: fixed; } .c-pointer { cursor: pointer !important; } .popover .popover-header { color: var(--ui-text) } /* override autocomplate css */ .ui-autocomplete.ui-widget-content{ background-image: none; background-color: var(--ui-surface); border-color: var(--ui-border); border-width: 1px; border-radius: 5px; padding: 6px; box-shadow: var(--shadow-sm); } .ui-autocomplete.ui-widget-content .ui-menu-item.ui-state-focus{ border: none; font-weight: normal; color: var(--ui-on-accent); background-color: var(--ui-accent-hover); background-image: none; } .ui-autocomplete.ui-widget-content .ui-menu-item{ background-color: var(--ui-surface); color: var(--ui-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* jQuery UI dialog overrides */ .ui-widget-overlay { background: var(--ui-bg) !important; opacity: 0.65 !important; } .ui-dialog { background-color: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; color: var(--ui-text) !important; padding: 0 !important; } .ui-dialog .ui-dialog-titlebar { background-color: var(--ui-surface) !important; border: 0 !important; border-bottom: 1px solid var(--ui-border) !important; border-top-left-radius: inherit; border-top-right-radius: inherit; } .ui-dialog .ui-dialog-title { color: var(--ui-text) !important; } .ui-dialog .ui-dialog-titlebar-close { border-radius: var(--radius-sm) !important; } .ui-dialog .ui-dialog-titlebar-close:hover { background-color: var(--ui-danger-bg) !important; border-color: var(--ui-danger-border) !important; } .ui-dialog .ui-dialog-content { background-color: var(--ui-surface) !important; color: var(--ui-text) !important; } .ui-dialog .ui-dialog-buttonpane { background-color: var(--ui-surface) !important; border-top: 1px solid var(--ui-border) !important; } .ui-dialog .ui-dialog-buttonpane button { color: var(--ui-text) !important; background-color: var(--ui-surface) !important; border: 1px solid var(--ui-border) !important; transition: all var(--transition-fast); } .ui-dialog .ui-dialog-buttonpane button:hover { color: var(--ui-on-accent) !important; background-color: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; } .ui-dialog .ui-dialog-buttonpane button:focus { box-shadow: none !important; outline: none; } /* toast */ #toast-container .opacity-1{ opacity:1 !important; } #toast-container { pointer-events: none; } #toast-container > div, #toast-container > .toast { pointer-events: auto; } #toast-container > div.toast, #toast-container > .toast { background: var(--bg-card) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg) !important; color: var(--ui-text) !important; padding: 14px 16px !important; opacity: 1 !important; } #toast-container > div.toast .toast-title, #toast-container > .toast .toast-title { color: var(--ui-text) !important; font-weight: 700; margin-bottom: 4px; } #toast-container > div.toast .toast-message, #toast-container > .toast .toast-message { color: var(--ui-muted) !important; line-height: 1.35; } #toast-container > div.toast .toast-close-button, #toast-container > .toast .toast-close-button { color: var(--ui-muted) !important; opacity: 1 !important; text-shadow: none !important; } #toast-container > div.toast .toast-close-button:hover, #toast-container > .toast .toast-close-button:hover { color: var(--ui-text) !important; } /* Update toast actions (Later / Refresh) */ #toast-container > div.toast button.btn, #toast-container > .toast button.btn { border-radius: var(--radius-sm) !important; padding: 6px 10px !important; font-weight: 600; line-height: 1; border: 1px solid var(--ui-border) !important; background: var(--bg-elevated) !important; color: var(--ui-text) !important; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } #toast-container > div.toast button.btn:hover, #toast-container > .toast button.btn:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } #toast-container > div.toast button.btn.clear, #toast-container > .toast button.btn.clear { background: transparent !important; color: var(--ui-muted) !important; border-color: transparent !important; } #toast-container > div.toast button.btn.clear:hover, #toast-container > .toast button.btn.clear:hover { background: rgba(255, 255, 255, 0.04) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } #toast-container > div.toast button.btn.btn-info, #toast-container > .toast button.btn.btn-info { background: var(--ui-accent) !important; border-color: var(--ui-accent) !important; color: var(--ui-on-accent) !important; } #toast-container > div.toast button.btn.btn-info:hover, #toast-container > .toast button.btn.btn-info:hover { background: var(--ui-accent-hover) !important; border-color: var(--ui-accent-hover) !important; color: var(--ui-on-accent) !important; } .adult-only::before { content: "\01F51E"; font: bold 36px/1 'Arial Black', sans-serif; display: inline-block; } /* 改变时钟颜色*/ input[type="time"]::-webkit-calendar-picker-indicator,input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(80%); } .custom-tabs .nav-tabs { border: none; } .custom-tabs .nav-tabs .nav-link { font-weight: 500; border: none; padding: 8px 20px; background: none; } .custom-tabs .nav-tabs .nav-link.active { border-bottom: 2px solid #23af47; font-weight: 600; } .custom-tabs .nav-tabs .nav-link:hover { border: none; border-bottom: 2px solid #23af47; } .products-container .stock-item { float: left; margin: 10px 10px 10px 0; font-size: 12px; background-color: var(--bg-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; color: var(--text-secondary); cursor: pointer; box-shadow: var(--shadow-sm); position: relative; transition: all var(--transition-normal); } .products-container .stock-item:hover { border-color: var(--accent-primary); transform: translateY(-2px); } .products-container .stock-item .header-icons { position: absolute; top:0; width:100%; display: flex; align-items: center; justify-content: right; padding: 2px; } .products-container .stock-item .header-icons .adult-only::before { font: bold 31px / 1 'Arial Black', sans-serif; } .products-container .stock-item .product-qty { background: var(--accent-primary); width: 30px; height: 30px; color: white; border-radius: 50%; line-height: 30px; text-align: center; font-weight: 600; } .products-container .stock-item-disable { background-color: var(--bg-elevated); color: var(--text-muted); cursor: default; } .products-container .stock-item-disable:hover { border-color: var(--border-default); transform: none; } .products-container .stock-item-disable img { filter: grayscale(100%); /* 将图片转换为灰度 */ opacity: 0.6; } .products-container .stock-item-disable .stock { color: var(--ui-danger); } .products-container .stock-item img { width: 120px; display: block; opacity: 0.8; } .products-container .stock-item .price_stock { position: relative; display: block; width:100%; height:20px; padding:5px 10px 10px 10px; } .products-container .stock-item .price_stock .price { color: var(--accent-primary); font-weight: bold; } .products-container .stock-item .name { position: relative; display: block; width:100%; border:0 solid red; text-align:left; margin:0; padding:5px 10px 10px 10px; } .products-container .stock-item-normal:hover { background-color: var(--bg-card-hover); } .products-container .dropdown-item-active { color: var(--accent-primary); background-color: var(--accent-primary-light); } .products-container .dropdown-item { padding: 5px 8px; font-size: 0.813rem; } /* ============================================ Sidebar — Redesign (shortcuts style) ============================================ */ .sidebar { background: var(--ui-surface) !important; border-right: 1px solid var(--ui-border) !important; } .sidebar .nav { padding: 8px !important; } /* Profile section */ .sidebar .nav .nav-item.nav-profile { background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-md) !important; margin-bottom: 12px !important; padding: 8px !important; } .sidebar .nav .nav-item.nav-profile .nav-link { padding: 0 !important; background: transparent !important; border-radius: 0 !important; } .sidebar .nav .nav-item.nav-profile .profile-name .name { color: var(--ui-text) !important; } .sidebar .nav .nav-item.nav-profile .profile-name .designation { color: var(--ui-muted) !important; } /* Nav items - Default state */ .sidebar .nav .nav-item { margin: 2px 0 !important; border-radius: var(--radius-sm) !important; background: transparent !important; } .sidebar .nav .nav-item .nav-link { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: var(--radius-sm) !important; background: transparent !important; color: var(--ui-muted) !important; transition: background var(--transition-fast), color var(--transition-fast) !important; } .sidebar .nav .nav-item .nav-link .menu-icon { font-size: 20px !important; width: 24px !important; text-align: center !important; color: inherit !important; margin-right: 0 !important; } .sidebar .nav .nav-item .nav-link .menu-title { color: inherit !important; font-size: 0.875rem !important; font-weight: 500 !important; } /* Nav items - Hover state */ .sidebar .nav .nav-item:hover > .nav-link, .sidebar .nav .nav-item .nav-link:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--ui-text) !important; border-radius: var(--radius-sm) !important; } .sidebar .nav .nav-item:hover > .nav-link .menu-icon, .sidebar .nav .nav-item .nav-link:hover .menu-icon { color: var(--ui-text) !important; } /* Nav items - Active state */ .sidebar .nav .nav-item.active { background: transparent !important; } .sidebar .nav .nav-item.active > .nav-link { background: rgba(46, 160, 67, 0.16) !important; color: var(--ui-text) !important; border-radius: var(--radius-sm) !important; } .sidebar .nav .nav-item.active > .nav-link .menu-icon { color: var(--ui-accent) !important; } .sidebar .nav .nav-item.active > .nav-link .menu-title { color: var(--ui-text) !important; } /* Badge styling */ .sidebar .nav .nav-item .nav-link .badge { background: var(--ui-danger) !important; color: #fff !important; font-size: 10px !important; padding: 2px 6px !important; border-radius: 10px !important; margin-left: auto !important; } /* Red dot indicator */ .sidebar .nav .nav-item .nav-link .red-dot { margin-left: auto !important; } /* Remove old radius styles */ .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link { border-radius: var(--radius-sm) !important; } .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link[aria-expanded="true"], .sidebar .nav:not(.sub-menu) > .nav-item:active > .nav-link, .sidebar .nav:not(.sub-menu) > .nav-item:focus > .nav-link, .sidebar .nav .nav-item .nav-link[aria-expanded="true"] { border-radius: var(--radius-sm) !important; background: rgba(255, 255, 255, 0.04) !important; } /* Sub-menu styling */ .sidebar .nav.sub-menu { background: transparent !important; padding-left: 36px !important; } .sidebar .nav.sub-menu .nav-item::before { display: none !important; } .sidebar .nav.sub-menu .nav-item .nav-link { color: var(--ui-muted) !important; padding: 8px 12px !important; border-radius: var(--radius-sm) !important; } .sidebar .nav.sub-menu .nav-item .nav-link:hover { background: rgba(255, 255, 255, 0.04) !important; color: var(--ui-text) !important; } .sidebar .nav.sub-menu .nav-item .nav-link.active { background: transparent !important; color: #fff !important; } /* Mobile sidebar offcanvas */ @media screen and (max-width: 991px) { .sidebar-offcanvas { background: var(--ui-surface) !important; } } /* ============================================ Sidebar Icon-Only Mode (collapsed) ============================================ */ @media (min-width: 992px) { /* Keep consistent inner gutters so icons are perfectly centered */ body.sidebar-icon-only .sidebar .nav { padding: 10px 8px 14px !important; margin-bottom: 14px !important; /* theme sets 60px; can hide last icon */ } /* Each item occupies full row; the link is the "icon button" */ body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item { margin: 4px 0 !important; } body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link { height: 44px !important; padding: 0 !important; /* override theme padding-left: .5rem */ display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; border-radius: 12px !important; position: relative !important; /* anchor for notification badges */ } /* Notifications (badge / red-dot): do not shift icon in collapsed mode */ body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .badge, body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .red-dot { position: absolute !important; top: 6px !important; right: 6px !important; margin-left: 0 !important; } body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .badge { min-width: 18px !important; height: 18px !important; line-height: 16px !important; padding: 0 5px !important; border-radius: 999px !important; } body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link .red-dot { width: 8px !important; height: 8px !important; border-radius: 4px !important; } /* Icon itself (MDI) */ body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link i.menu-icon { margin: 0 !important; width: 22px !important; height: 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; line-height: 1 !important; } /* Profile item: only avatar, centered and same rhythm */ body.sidebar-icon-only .sidebar .nav .nav-item.nav-profile { margin: 8px 0 10px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } body.sidebar-icon-only .sidebar .nav .nav-item.nav-profile .nav-link { height: 56px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(48, 54, 61, 0.7) !important; } body.sidebar-icon-only .sidebar .nav .nav-item.nav-profile .profile-image { width: auto !important; } body.sidebar-icon-only .sidebar .nav .nav-item.nav-profile .profile-image img { width: 36px !important; height: 36px !important; } /* Active / hover in collapsed mode: match GitHub-dark accent */ body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link { background: rgba(46, 160, 67, 0.16) !important; color: var(--ui-text) !important; } body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item.active > .nav-link i.menu-icon { color: var(--ui-accent) !important; } body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link { background: rgba(255, 255, 255, 0.04) !important; color: var(--ui-text) !important; } body.sidebar-icon-only .sidebar .nav:not(.sub-menu) > .nav-item:hover > .nav-link i.menu-icon { color: var(--ui-text) !important; } } /* ============================================ Navbar Brand Wrapper — Logo area ============================================ */ .navbar.fixed-top { border-bottom: none !important; } .navbar .navbar-brand-wrapper { background: var(--ui-surface) !important; border-bottom: none !important; border-right: 1px solid var(--ui-border) !important; height: 63px !important; /* match navbar/menu-wrapper */ } .navbar .navbar-brand-wrapper .navbar-toggler { color: var(--ui-muted) !important; transition: color var(--transition-fast) !important; } .navbar .navbar-brand-wrapper .navbar-toggler:hover { color: var(--ui-text) !important; background: rgba(46, 160, 67, 0.10) !important; border-color: rgba(46, 160, 67, 0.30) !important; } /* Light theme: make logo/wiki images readable on light surfaces */ html:has(.theme-toggle-btn.is-light) .navbar .navbar-brand-wrapper .navbar-brand.brand-logo img, html:has(.theme-toggle-btn.is-light) .navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini img { filter: drop-shadow(0 1px 0 rgba(31, 35, 40, 0.55)) drop-shadow(0 0 6px rgba(31, 35, 40, 0.18)); } /* Align minimize button with sidebar icons in collapsed mode */ @media (min-width: 992px) { body.sidebar-icon-only .navbar .navbar-brand-wrapper { /* center like sidebar icon buttons */ padding: 0 8px !important; justify-content: center !important; } /* hide logos so they don't push the toggler */ body.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-brand { display: none !important; } body.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-toggler { width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid rgba(48, 54, 61, 0.7) !important; color: var(--ui-muted) !important; } body.sidebar-icon-only .navbar .navbar-brand-wrapper .navbar-toggler .mdi { font-size: 18px !important; line-height: 1 !important; } } /* ============================================ Page Header Tabs — Unified Style ============================================ */ .page-header-tab { background: transparent !important; border: 0 !important; border-bottom: 0 !important; padding: 6px 0 !important; margin-bottom: 0 !important; } .page-header-tab .row { align-items: center !important; } /* Make the whole header a single connected panel */ .page-header-tab > .col-12.pl-0.pr-0 { background: var(--bg-elevated) !important; border-radius: var(--radius-md) !important; box-shadow: var(--shadow-sm) !important; padding: 6px 10px !important; } /* Tab container */ .page-header-tab .nav-tabs.tab-transparent { border-bottom: none !important; display: inline-flex !important; flex-wrap: wrap !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: var(--radius-md) !important; box-shadow: none !important; } /* Tab links — default */ .page-header-tab .nav-tabs.tab-transparent .nav-item .nav-link { background: transparent !important; color: var(--ui-muted) !important; border: 1px solid transparent !important; border-radius: calc(var(--radius-md) - 2px) !important; padding: 8px 14px !important; font-size: 0.875rem !important; font-weight: 500 !important; position: relative !important; transition: color var(--transition-fast), background var(--transition-fast) !important; } /* Hover */ .page-header-tab .nav-tabs.tab-transparent .nav-item .nav-link:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, 0.04) !important; } /* Active */ .page-header-tab .nav-tabs.tab-transparent .nav-item .nav-link.active { color: var(--ui-text) !important; background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } /* Controls (buttons/inputs) in right toolbar area */ .page-header-tab .btn { background-color: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-text) !important; transition: all var(--transition-fast) !important; } .page-header-tab .btn:hover { background-color: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; color: var(--ui-text) !important; } .page-header-tab .btn:focus { box-shadow: none !important; outline: none !important; } .page-header-tab .form-control, .page-header-tab select.form-control { background-color: var(--bg-elevated) !important; color: var(--ui-text) !important; border-color: var(--ui-border) !important; height: 38px !important; } .page-header-tab .form-control:focus, .page-header-tab select.form-control:focus { border-color: var(--ui-green-border) !important; box-shadow: none !important; outline: none !important; } .page-header-tab .form-control::placeholder { color: var(--ui-muted) !important; } /* Page-header right side blocks — make them look like toolbar panel */ .justify-content-end1 { justify-content: flex-end !important; } .page-header-tab .d-flex.justify-content-end1, .page-header-tab .d-flex.justify-content-end, .page-header-tab .text-md-right.d-md-block, .page-header-tab .text-md-right.d-none.d-md-block { display: flex !important; align-items: center !important; justify-content: flex-end !important; } .page-header-tab .d-flex.justify-content-end1 > .d-inline-flex, .page-header-tab .d-flex.justify-content-end > .d-inline-flex, .page-header-tab .text-md-right > .d-inline-flex { gap: 8px 10px !important; align-items: center !important; flex-wrap: wrap !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: var(--radius-md) !important; box-shadow: none !important; } /* Keep inline forms consistent in header areas */ .page-header-tab .d-flex.justify-content-end1 .form-inline, .page-header-tab .d-flex.justify-content-end .form-inline, .page-header-tab .text-md-right .form-inline { display: inline-flex !important; align-items: center !important; gap: 8px 10px !important; margin: 0 !important; } /* Normalize legacy spacing inside header right blocks (Members/PCS/etc) */ .page-header-tab .d-flex.justify-content-end1 > .d-inline-flex > div, .page-header-tab .d-flex.justify-content-end > .d-inline-flex > div, .page-header-tab .text-md-right > .d-inline-flex > div { margin: 0 !important; padding-right: 0 !important; } /* Icon buttons inside header panels */ .page-header-tab .d-flex.justify-content-end1 > .d-inline-flex .btn.btn-icon, .page-header-tab .d-flex.justify-content-end > .d-inline-flex .btn.btn-icon, .page-header-tab .text-md-right > .d-inline-flex .btn.btn-icon { width: 38px !important; height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; } .page-header-tab .d-flex.justify-content-end1 > .d-inline-flex .btn.btn-icon i, .page-header-tab .d-flex.justify-content-end > .d-inline-flex .btn.btn-icon i, .page-header-tab .text-md-right > .d-inline-flex .btn.btn-icon i, .page-header-tab .d-flex.justify-content-end1 > .d-inline-flex .btn.btn-icon .mdi, .page-header-tab .d-flex.justify-content-end > .d-inline-flex .btn.btn-icon .mdi, .page-header-tab .text-md-right > .d-inline-flex .btn.btn-icon .mdi, .page-header-tab .d-flex.justify-content-end1 > .d-inline-flex .btn.btn-icon .fa, .page-header-tab .d-flex.justify-content-end > .d-inline-flex .btn.btn-icon .fa, .page-header-tab .text-md-right > .d-inline-flex .btn.btn-icon .fa { font-size: 18px !important; line-height: 1 !important; margin: 0 !important; } /* Members-style search group: remove extra gaps and make it a single pill */ .page-header-tab .text-md-right .input-group { border-radius: 10px !important; overflow: hidden; } .page-header-tab .text-md-right .input-group .mr-2 { margin-right: 0 !important; } .page-header-tab .text-md-right .input-group > .input-group-prepend > .form-control, .page-header-tab .text-md-right .input-group > .input-group-prepend > select.form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } .page-header-tab .text-md-right .input-group > .form-control { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; } @media (max-width: 576px) { .page-header-tab .nav-tabs.tab-transparent .nav-item .nav-link { padding: 8px 10px !important; font-size: 0.8125rem !important; } } /* Main toolbar (d-flex justify-content-end flex-wrap) — make spacing consistent */ .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap { gap: 8px 10px !important; /* row-gap column-gap */ align-items: center !important; } .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap > div { margin: 0 !important; /* override mb-3 rhythm inside flex-wrap */ padding-right: 0 !important; /* override pr-1 spacing; we use gap instead */ } .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn { margin-right: 0 !important; /* override mr-2; we use gap instead */ } /* Boot page uses #boot_toolbar (keep spacing consistent with #toolbar) */ .page-header-tab #boot_toolbar { display: flex !important; flex-wrap: wrap !important; gap: 8px 10px !important; align-items: center !important; } .page-header-tab #boot_toolbar > div { margin: 0 !important; /* override mb-3 */ padding-right: 0 !important; /* override pr-1 */ } .page-header-tab #boot_toolbar .btn { margin-right: 0 !important; /* override mr-2 */ } .page-header-tab #boot_toolbar .input-group { border-radius: 10px !important; overflow: hidden; } /* Main toolbar — visual design (panel + consistent controls) */ .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap { padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: var(--radius-md) !important; box-shadow: none !important; } /* Light theme: toolbar should be a distinct tinted panel (not floating on white) */ html:has(.theme-toggle-btn.is-light) .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; } /* Buttons: consistent square icon buttons */ .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon { width: 38px !important; height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; } .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon i, .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon .mdi, .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap .btn.btn-icon .fa { font-size: 18px !important; line-height: 1 !important; margin: 0 !important; } /* Nav tabs — "nav-transparent" (used in Settings/Products/etc) */ .nav-tabs.nav-transparent { border-bottom: 0 !important; display: inline-flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 0 !important; background: transparent !important; } .nav-tabs.nav-transparent .nav-link { background: transparent !important; color: var(--ui-muted) !important; border: 1px solid transparent !important; border-radius: calc(var(--radius-md) - 2px) !important; padding: 8px 14px !important; font-size: 0.875rem !important; font-weight: 500 !important; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast) !important; } .nav-tabs.nav-transparent .nav-link:hover { color: var(--ui-text) !important; background: rgba(255, 255, 255, 0.04) !important; } .nav-tabs.nav-transparent .nav-link.active, .nav-tabs.nav-transparent .nav-link.active { color: var(--ui-text) !important; background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } /* Light theme: nav-transparent hover should not look white */ html:has(.theme-toggle-btn.is-light) .nav-tabs.nav-transparent .nav-link:hover { background: rgba(45, 164, 78, 0.10) !important; border-color: rgba(45, 164, 78, 0.22) !important; } html:has(.theme-toggle-btn.is-light) .nav-tabs.nav-transparent .nav-link.active:hover, html:has(.theme-toggle-btn.is-light) .nav-tabs.nav-transparent .nav-link.active:hover { background: var(--ui-green-bg) !important; border-color: var(--ui-green-border) !important; } /* Select + search: align to same height and style */ .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap select.form-control { height: 38px !important; border-radius: 10px !important; } .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap #search-member-group { width: 170px !important; } /* Boot search input group: match toolbar inputs */ .page-header-tab #boot_toolbar .input-group-text, .page-header-tab #boot_toolbar .form-control { height: 38px !important; background-color: var(--bg-card) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } /* Boot header right column (fix flex layout in .justify-content-end1) */ #bootPanel .page-header-tab .col-12.col-sm-6.d-flex.justify-content-end1.align-items-center, #bootPanel .page-header-tab .col-12.col-sm-6.mb-xs-4.mb-xl-0.pt-2.pb-2.d-flex.justify-content-end1.align-items-center { flex-wrap: wrap !important; justify-content: flex-end !important; gap: 8px 10px !important; } /* Boot: status label should not behave like grid column */ #bootPanel .page-header-tab #image_status { width: auto !important; max-width: 320px; flex: 1 1 220px !important; margin-right: 0 !important; } /* Boot: toolbar should not carry bootstrap spacing */ #bootPanel .page-header-tab #boot_toolbar { flex: 0 1 auto !important; } #bootPanel .page-header-tab #boot_toolbar .pr-1, #bootPanel .page-header-tab #boot_toolbar .mb-3, #bootPanel .page-header-tab #boot_toolbar .mb-xl-0, #bootPanel .page-header-tab #boot_toolbar .mr-3, #bootPanel .page-header-tab #boot_toolbar .mr-2 { margin: 0 !important; padding: 0 !important; } /* Boot: align server status icon with controls */ #bootPanel .page-header-tab #ccboot_server_status { margin: 0 !important; } .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap #search-member-group .input-group-text, .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap #search-member-group .form-control { height: 38px !important; background-color: var(--bg-card) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; } .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap #search-member-group .input-group-text { border-right: 0 !important; padding: 0 10px !important; } .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap #search-member-group .form-control { border-left: 1px solid rgba(48, 54, 61, 0.95) !important; padding: 0 12px !important; font-size: 12px !important; } .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap #search-member-group:focus-within .input-group-text, .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap #search-member-group:focus-within .form-control { border-color: var(--ui-green-border) !important; } @media (max-width: 991.98px) { .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap { padding: 6px !important; } .page-header-tab #toolbar.d-flex.justify-content-end.flex-wrap #search-member-group { width: 150px !important; } } /* Page-header right action area (e.g. Games toolbar) */ .page-header-tab .buttons.d-flex.justify-content-end { gap: 8px 10px !important; align-items: center !important; flex-wrap: wrap !important; } .page-header-tab .buttons.d-flex.justify-content-end .d-inline-flex { gap: 8px 10px !important; align-items: center !important; flex-wrap: wrap !important; padding: 6px !important; background: var(--bg-elevated) !important; border: 1px solid var(--ui-border) !important; border-radius: var(--radius-md) !important; } .page-header-tab .buttons.d-flex.justify-content-end .d-inline-flex > div { margin: 0 !important; padding-right: 0 !important; } .page-header-tab .buttons.d-flex.justify-content-end .btn { margin-right: 0 !important; } /* Match icon button sizing with main toolbar */ .page-header-tab .buttons.d-flex.justify-content-end .btn.btn-icon { width: 38px !important; height: 38px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 10px !important; } .page-header-tab .buttons.d-flex.justify-content-end .btn.btn-icon i, .page-header-tab .buttons.d-flex.justify-content-end .btn.btn-icon .mdi, .page-header-tab .buttons.d-flex.justify-content-end .btn.btn-icon .fa { font-size: 18px !important; line-height: 1 !important; margin: 0 !important; } /* Games toolbar: search input group + status icon alignment */ #gamesPanel .page-header-tab .buttons.d-flex.justify-content-end .d-inline-flex { flex-wrap: nowrap !important; /* keep all icons in one row */ max-width: 100% !important; overflow-x: auto; overflow-y: hidden; } #gamesPanel .page-header-tab .buttons .input-group { align-items: stretch !important; } #gamesPanel .page-header-tab .buttons .input-group-text { display: inline-flex !important; align-items: center !important; justify-content: center !important; height: 38px !important; width: 38px !important; padding: 0 !important; background-color: var(--bg-card) !important; border-color: var(--ui-border) !important; color: var(--ui-muted) !important; border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } #gamesPanel .page-header-tab .buttons .input-group-text .mdi { font-size: 18px !important; line-height: 1 !important; color: var(--ui-text) !important; } #gamesPanel .page-header-tab .buttons .input-group .form-control { height: 38px !important; background-color: var(--bg-card) !important; border-color: var(--ui-border) !important; color: var(--ui-text) !important; border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; } #gamesPanel .page-header-tab .buttons .input-group:focus-within .input-group-text, #gamesPanel .page-header-tab .buttons .input-group:focus-within .form-control { border-color: var(--ui-green-border) !important; } #gamesPanel #games-icafecloud-server-status { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; margin: 0 !important; /* override mr-2 / other */ border-radius: 10px !important; background: var(--bg-card) !important; border: 1px solid var(--ui-border) !important; color: var(--ui-muted) !important; }