/* ========================================================================== HospitalityPOS theme — brand palette + light/dark mode Loaded after Bootstrap on all app pages (main app = Bootstrap 3, login = BS5). Dark mode is toggled by adding class `hpos-dark` to . ========================================================================== */ :root { --hpos-dark: #020617; --hpos-green-dark: #14532D; --hpos-green: #22C55E; --hpos-green-hover: #16A34A; --hpos-mid: #4ADE80; --hpos-light: #BBF7D0; --hpos-white: #F8FAFC; /* Light mode roles (default) */ --hpos-bg: #F8FAFC; --hpos-surface: #FFFFFF; --hpos-surface-2: #F1F5F9; --hpos-text: #0F172A; --hpos-muted: #64748B; --hpos-border: #E2E8F0; --hpos-primary: #16A34A; /* slightly deeper green for contrast on light */ --hpos-primary-ink: #FFFFFF; --hpos-topbar-bg: #14532D; --hpos-topbar-ink: #F8FAFC; --hpos-navbar-bg: #14532D; --hpos-navbar-ink: #DCFCE7; --hpos-navbar-active-bg: #22C55E; --hpos-navbar-active-ink: #052e16; } html.hpos-dark { --hpos-bg: #020617; --hpos-surface: #0B1220; --hpos-surface-2: #111C2E; --hpos-text: #F8FAFC; --hpos-muted: #94A3B8; --hpos-border: #1E293B; --hpos-primary: #22C55E; --hpos-primary-ink: #052e16; --hpos-topbar-bg: #050d1c; --hpos-topbar-ink: #F8FAFC; --hpos-navbar-bg: #0B1220; --hpos-navbar-ink: #CBD5E1; --hpos-navbar-active-bg: #22C55E; --hpos-navbar-active-ink: #052e16; } /* ---- Base surfaces ---------------------------------------------------- */ body { background-color: var(--hpos-bg); color: var(--hpos-text); } .wrapper { color: var(--hpos-text); } /* ---- Brand lockup in the navbar -------------------------------------- */ .hpos-brand { display: flex !important; align-items: center; gap: 10px; padding-top: 8px !important; padding-bottom: 8px !important; } .hpos-brand-logo { height: 34px; width: auto; display: block; } .hpos-brand-text { font-weight: 700; font-size: 18px; letter-spacing: .2px; line-height: 1; color: var(--hpos-navbar-ink); } .hpos-brand-text .hpos-accent { color: var(--hpos-mid); } .hpos-brand-sub { display: block; font-size: 10px; font-weight: 500; letter-spacing: .3px; color: rgba(220, 252, 231, .7); margin-top: 2px; } /* ---- Top bar --------------------------------------------------------- */ .topbar { background: var(--hpos-topbar-bg) !important; color: var(--hpos-topbar-ink) !important; } .topbar a { color: var(--hpos-topbar-ink); } .topbar a:hover { color: var(--hpos-mid); } /* ---- Module navbar (Bootstrap 3 .navbar-default) --------------------- */ .navbar-default { background: var(--hpos-navbar-bg) !important; border-color: transparent !important; } .navbar-default .navbar-nav > li > a { color: var(--hpos-navbar-ink) !important; border-radius: 8px; margin: 6px 2px; transition: background-color .15s ease, color .15s ease; } .navbar-default .navbar-nav > li > a:hover { background-color: rgba(34, 197, 94, .18) !important; color: #fff !important; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background-color: var(--hpos-navbar-active-bg) !important; color: var(--hpos-navbar-active-ink) !important; } .navbar .menu-icon img { filter: none; } html.hpos-dark .navbar .menu-icon img { filter: brightness(0) invert(1) opacity(.85); } .navbar-default .navbar-nav > .active > a img { filter: none !important; } /* ---- Theme toggle button --------------------------------------------- */ .hpos-theme-toggle { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.30); color: var(--hpos-topbar-ink); border-radius: 999px; padding: 2px 10px; line-height: 1.4; font-size: 12px; font-weight: 600; cursor: pointer; vertical-align: middle; margin-left: 12px; } .hpos-theme-toggle:hover { background: rgba(74,222,128,.28); border-color: var(--hpos-mid); color: #fff; } .hpos-theme-toggle #hpos-theme-ico { font-size: 13px; line-height: 1; } /* ---- Primary color across components ---------------------------------- */ .btn-primary { background-color: var(--hpos-primary) !important; border-color: var(--hpos-primary) !important; color: var(--hpos-primary-ink) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-color: var(--hpos-green-hover) !important; border-color: var(--hpos-green-hover) !important; color: #fff !important; } .btn-success { background-color: var(--hpos-green) !important; border-color: var(--hpos-green) !important; } .btn-success:hover { background-color: var(--hpos-green-hover) !important; border-color: var(--hpos-green-hover) !important; } a, a:focus { color: var(--hpos-primary); } a:hover { color: var(--hpos-green-hover); } .label-primary, .badge-primary { background-color: var(--hpos-primary) !important; } .progress-bar { background-color: var(--hpos-primary) !important; } .panel-primary > .panel-heading { background-color: var(--hpos-green-dark) !important; border-color: var(--hpos-green-dark) !important; } .text-primary { color: var(--hpos-primary) !important; } .bg-primary { background-color: var(--hpos-primary) !important; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { background-color: var(--hpos-primary) !important; color: #fff !important; } #page_title { color: var(--hpos-text); } #page_title, #page_subtitle { border-color: var(--hpos-border); } /* ========================================================================== DARK MODE component coverage (Bootstrap 3 surfaces) ========================================================================== */ html.hpos-dark .panel, html.hpos-dark .well, html.hpos-dark .modal-content, html.hpos-dark .dropdown-menu, html.hpos-dark .list-group-item, html.hpos-dark .popover, html.hpos-dark .card { background-color: var(--hpos-surface) !important; color: var(--hpos-text) !important; border-color: var(--hpos-border) !important; } html.hpos-dark .panel-default > .panel-heading, html.hpos-dark .modal-header, html.hpos-dark .modal-footer, html.hpos-dark .nav-tabs { background-color: var(--hpos-surface-2) !important; color: var(--hpos-text) !important; border-color: var(--hpos-border) !important; } html.hpos-dark .modal-title, html.hpos-dark h1, html.hpos-dark h2, html.hpos-dark h3, html.hpos-dark h4, html.hpos-dark h5, html.hpos-dark label, html.hpos-dark .control-label { color: var(--hpos-text) !important; } /* Tables (incl. DataTables) */ html.hpos-dark .table { color: var(--hpos-text); } html.hpos-dark .table > thead > tr > th, html.hpos-dark .table > tbody > tr > td, html.hpos-dark .table > tbody > tr > th, html.hpos-dark .table > tfoot > tr > td { border-color: var(--hpos-border) !important; } html.hpos-dark .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255,255,255,.03); } html.hpos-dark .table-hover > tbody > tr:hover { background-color: rgba(34,197,94,.10); } html.hpos-dark .dataTables_wrapper, html.hpos-dark .dataTables_info, html.hpos-dark .dataTables_length, html.hpos-dark .dataTables_filter { color: var(--hpos-muted); } /* Forms */ html.hpos-dark .form-control, html.hpos-dark .input-group-addon, html.hpos-dark select, html.hpos-dark textarea { background-color: var(--hpos-surface-2) !important; color: var(--hpos-text) !important; border-color: var(--hpos-border) !important; } html.hpos-dark .form-control::placeholder { color: var(--hpos-muted); } html.hpos-dark .form-control:focus { border-color: var(--hpos-green) !important; box-shadow: 0 0 0 .15rem rgba(34,197,94,.25); } /* Buttons that were white-on-light in ospos.css */ html.hpos-dark button.btn.dropdown-toggle.btn-sm, html.hpos-dark .bootstrap-tagsinput { background-color: var(--hpos-surface-2) !important; color: var(--hpos-text) !important; border-color: var(--hpos-border) !important; } html.hpos-dark .btn-default { background-color: var(--hpos-surface-2) !important; color: var(--hpos-text) !important; border-color: var(--hpos-border) !important; } html.hpos-dark .btn-default:hover { background-color: #1c2b45 !important; } /* Dropdown items, links, muted, borders */ html.hpos-dark .dropdown-menu > li > a { color: var(--hpos-text); } html.hpos-dark .dropdown-menu > li > a:hover { background-color: rgba(34,197,94,.15); color: #fff; } html.hpos-dark .text-muted, html.hpos-dark #footer { color: var(--hpos-muted) !important; } html.hpos-dark hr, html.hpos-dark .modal-header, html.hpos-dark .modal-footer { border-color: var(--hpos-border) !important; } html.hpos-dark .close { color: var(--hpos-text); opacity: .8; } html.hpos-dark a { color: var(--hpos-mid); } html.hpos-dark a:hover { color: var(--hpos-light); } /* Nav tabs active in dark */ html.hpos-dark .nav-tabs > li > a { color: var(--hpos-muted); } html.hpos-dark .nav-tabs > li.active > a, html.hpos-dark .nav-tabs > li.active > a:hover, html.hpos-dark .nav-tabs > li.active > a:focus { background-color: var(--hpos-surface) !important; color: var(--hpos-text) !important; border-color: var(--hpos-border) var(--hpos-border) transparent !important; } /* Module home page tiles */ html.hpos-dark .module_item a { color: var(--hpos-text); } /* ========================================================================== LOGIN page (Bootstrap 5) — uses same variables ========================================================================== */ .container-login .btn-primary { background-color: var(--hpos-green) !important; border-color: var(--hpos-green) !important; color:#052e16 !important; } .container-login .btn-primary:hover { background-color: var(--hpos-green-hover) !important; border-color: var(--hpos-green-hover) !important; color:#fff !important; } html.hpos-dark body.bg-secondary-subtle { background-color: var(--hpos-dark) !important; } html.hpos-dark .container-login.bg-body { background-color: var(--hpos-surface) !important; color: var(--hpos-text); } html.hpos-dark .container-login .form-control { background-color: var(--hpos-surface-2) !important; color: var(--hpos-text) !important; border-color: var(--hpos-border) !important; } html.hpos-dark .container-login .form-floating label { color: var(--hpos-muted); } html.hpos-dark .container-login .border-end { border-color: var(--hpos-border) !important; }