/* Custom modern dark theme layered on top of sb-admin.css / Bootstrap 4. Visual-only overrides — no markup/behavior assumptions beyond existing classes. */ :root { --brand-primary: #14b8a6; --brand-primary-dark: #0f9488; --brand-primary-tint: rgba(20, 184, 166, 0.16); --brand-primary-text: var(--brand-primary); --hover-text: #fff; --brand-success: #34c471; --brand-danger: #f0596a; --brand-warning: #f0ad4e; --brand-secondary: #8b95a7; --surface: #1b2434; --surface-alt: #232e42; --surface-muted: #121826; --border-soft: rgba(255, 255, 255, 0.08); --input-bg: #303f5e; --input-border: rgba(255, 255, 255, 0.28); --text-main: #e7ebf3; --text-muted: #9aa5b8; --radius: 0.6rem; --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.25); --shadow-hover: 0 8px 22px rgba(0, 0, 0, 0.35); } /* Light mode — same variable set, retheme the whole app by swapping these. Toggled via data-theme="light" on (see lib.php/header_menu.php). Dark (:root above) stays the default; light is opt-in via the bottom-left toggle button and remembered per-browser in localStorage. */ :root[data-theme="light"] { --brand-primary-text: #0c8a7e; --brand-primary-tint: rgba(12, 138, 126, 0.16); --hover-text: #0c1420; --surface: #ffffff; --surface-alt: #f3f5f9; --surface-muted: #eef1f6; --border-soft: rgba(0, 0, 0, 0.1); --input-bg: #ffffff; --input-border: rgba(0, 0, 0, 0.22); --text-main: #1c2433; --text-muted: #5b6474; --shadow-soft: 0 2px 8px rgba(20, 30, 50, 0.08); --shadow-hover: 0 8px 20px rgba(20, 30, 50, 0.14); } /* Legacy inline light backgrounds hardcoded on POS/transaction screens (transaksi_penjualan.php dkk, report_*.php summary rows). These pages set background-color directly via style="" which would otherwise leave the new dark theme's light text unreadable (light text on their old light panels). Force them onto the dark surface palette, case-insensitively, regardless of exact hex casing/spacing used across files. */ #wrapper[style*="F5F9FC" i] { background-color: var(--surface-muted) !important; /* A few POS screens also set an inline font-size:large on #wrapper, which inherits down into the sidebar/icons/buttons and makes that page's menu look bigger than every other page. Force the same baseline everywhere. */ font-size: 1rem !important; } /* Legacy inline color:black labels (POS recap fields) — invisible against the dark theme's dark panels. */ [style*="color:black" i], [style*="color: black" i], [style*="color:#000" i], [style*="color: #000" i] { color: var(--text-main) !important; } /* Defensive baseline so sidebar/navbar sizing can't drift per-page from stray inline font-size overrides on an ancestor. */ .sidebar, .navbar { font-size: 1rem; } [style*="background-color:#cae7eb" i], [style*="background-color: #cae7eb" i], [style*="background-color:#bed1d0" i], [style*="background-color: #bed1d0" i], [style*="background-color:#bdd1f2" i], [style*="background-color: #bdd1f2" i], [style*="background-color:#ffffff" i], [style*="background-color: #ffffff" i], [style*="background:#fff" i], [style*="background: #fff" i], [style*="background-color:yellow" i], [style*="background-color: yellow" i] { background-color: var(--surface) !important; color: var(--text-main) !important; } [style*="background-color:#cae7eb" i] *, [style*="background-color: #cae7eb" i] *, [style*="background-color:#bed1d0" i] *, [style*="background-color: #bed1d0" i] *, [style*="background-color:#bdd1f2" i] *, [style*="background-color: #bdd1f2" i] *, [style*="background-color:#ffffff" i] *, [style*="background-color: #ffffff" i] *, [style*="background:#fff" i] *, [style*="background: #fff" i] *, [style*="background-color:yellow" i] *, [style*="background-color: yellow" i] * { color: inherit; } /* Bright highlight inputs on the cashier screen (total/payment/change) — keep dark, readable text on top of the bright color */ [style*="background-color:#ebe834" i], [style*="background-color:#c0f097" i], [style*="background-color:#03fc77" i] { color: #14201b !important; font-weight: 700; } body { background-color: var(--surface-muted); color: var(--text-main); } /* Navbar */ .navbar.bg-dark { background: var(--surface) !important; border-bottom: 1px solid var(--border-soft); box-shadow: var(--shadow-soft); } .navbar.bg-dark .navbar-brand, .navbar.bg-dark #sidebarToggle, .navbar.bg-dark .nav-link { color: var(--text-main) !important; } .navbar.bg-dark .navbar-brand { color: var(--brand-primary-text) !important; } .navbar-brand { font-weight: 700; letter-spacing: 0.02em; } /* Sidebar */ .sidebar { background: var(--surface) !important; border-right: 1px solid var(--border-soft); box-shadow: var(--shadow-soft); } .sidebar .nav-item .nav-link { color: var(--text-muted); border-radius: 0.4rem; margin: 0.1rem 0.5rem; transition: background-color 0.15s ease, color 0.15s ease; } .sidebar .nav-item .nav-link:hover, .sidebar .nav-item .nav-link:focus { background-color: var(--brand-primary-tint); color: var(--hover-text); } .sidebar .nav-item.active .nav-link, .sidebar .nav-item .nav-link.active { background-color: var(--brand-primary); color: #0c1420; font-weight: 600; } .sidebar .dropdown-menu { background-color: var(--surface-alt); border-radius: var(--radius); border: 1px solid var(--border-soft); box-shadow: var(--shadow-hover); } .sidebar .dropdown-menu .dropdown-item { color: var(--text-main); } .sidebar .dropdown-menu .dropdown-item:hover, .sidebar .dropdown-menu .dropdown-item:focus { background-color: var(--brand-primary-tint); color: var(--hover-text); } .sidebar .dropdown-header { font-weight: 600; color: var(--text-muted); } .sidebar hr.sidebar-divider { border-color: var(--border-soft) !important; } /* User dropdown in navbar */ .navbar .dropdown-menu { background-color: var(--surface-alt); border: 1px solid var(--border-soft); } .navbar .dropdown-menu .dropdown-item { color: var(--text-main); } .navbar .dropdown-menu .dropdown-item:hover { background-color: var(--brand-primary-tint); color: var(--hover-text); } /* Cards */ .card { background-color: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); box-shadow: var(--shadow-soft); color: var(--text-main); } .card-header { background-color: var(--surface-alt); border-bottom: 1px solid var(--border-soft); border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); font-weight: 600; color: var(--text-main); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } /* Buttons */ .btn { border-radius: 0.45rem; font-weight: 500; transition: transform 0.05s ease, box-shadow 0.15s ease, filter 0.15s ease; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(1px); } .btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); color: #0c1420; } .btn-primary:hover { background-color: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: #fff; } .btn-success { background-color: var(--brand-success); border-color: var(--brand-success); color: #0c1420; } .btn-danger { background-color: var(--brand-danger); border-color: var(--brand-danger); } .btn-secondary, .btn-outline-secondary { border-radius: 0.45rem; } /* Forms — inputs must read as clearly "fillable" against any dark panel behind them, so they get their own (lighter) tone + a visible border, never the same color as a surrounding card/card-header/panel. */ .form-control, .custom-select, select.form-control { background-color: var(--input-bg); border-radius: 0.45rem; border: 1px solid var(--input-border); color: var(--text-main); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } .form-control:focus, .custom-select:focus { background-color: var(--input-bg); border-color: var(--brand-primary); color: var(--text-main); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 0.15rem var(--brand-primary-tint); } .form-control::placeholder { color: var(--text-muted); } /* Bootstrap's own [readonly]/[disabled] rule is more specific than a plain .form-control and would otherwise win, showing a light box until the field is focused (e.g. the read-only recap fields on the cashier screen). Kept visibly muted/flatter than editable fields so read-only vs. editable is also obvious at a glance. */ .form-control[readonly], .form-control[disabled], fieldset[disabled] .form-control { background-color: var(--surface-alt) !important; border-color: var(--border-soft) !important; color: var(--text-muted) !important; box-shadow: none !important; opacity: 1; } /* bootstrap-select ("selectpicker" searchable dropdowns) — still rendered with Bootstrap's light btn-light/btn-default + white popup by default; bring it in line with the rest of the form controls. */ .bootstrap-select > .dropdown-toggle { background-color: var(--input-bg) !important; border: 1px solid var(--input-border) !important; color: var(--text-main) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25) !important; } .bootstrap-select > .dropdown-toggle:focus, .bootstrap-select.open > .dropdown-toggle { border-color: var(--brand-primary) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 0.15rem var(--brand-primary-tint) !important; } .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { color: var(--text-main); } .bootstrap-select > .dropdown-toggle .caret, .bootstrap-select > .dropdown-toggle::after { color: var(--text-muted); } .bootstrap-select .dropdown-menu, .bs-container .dropdown-menu { background-color: var(--surface-alt); border: 1px solid var(--border-soft); box-shadow: var(--shadow-hover); } .bootstrap-select .dropdown-menu .bs-searchbox .form-control, .bs-container .dropdown-menu .bs-searchbox .form-control { background-color: var(--input-bg); color: var(--text-main); } .bootstrap-select .dropdown-menu li a.dropdown-item, .bs-container .dropdown-menu li a.dropdown-item { color: var(--text-main); } .bootstrap-select .dropdown-menu li a.dropdown-item:hover, .bootstrap-select .dropdown-menu li a.dropdown-item:focus, .bs-container .dropdown-menu li a.dropdown-item:hover, .bs-container .dropdown-menu li a.dropdown-item:focus { background-color: var(--brand-primary-tint); color: var(--hover-text); } .bootstrap-select .dropdown-menu li.selected a.dropdown-item, .bootstrap-select .dropdown-menu li.active a.dropdown-item, .bs-container .dropdown-menu li.selected a.dropdown-item, .bs-container .dropdown-menu li.active a.dropdown-item { background-color: var(--brand-primary); color: #0c1420; } .bootstrap-select .no-results { background-color: transparent; color: var(--text-muted); } /* Neutralize the browser's autofill highlight (yellow/white) so fields stay on the input color instead of flashing light until interacted with. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text-main); -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset; box-shadow: 0 0 0 1000px var(--input-bg) inset; transition: background-color 5000s ease-in-out 0s; } label { color: var(--text-main); } /* Filter bars (date range / search rows added across pages) */ .filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 0.9rem; padding: 0.15rem 0 0.65rem 0; } .filter-bar .filter-group { display: flex; flex-direction: column; gap: 0.2rem; } .filter-bar label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0; } .filter-bar .form-control { min-height: 38px; } /* bootstrap-select's toggle button doesn't inherit .form-control's height the same way a plain input does — pin it to the same 38px everywhere (not just inside .filter-bar) so it never looks shorter/clipped next to sibling inputs (e.g. the SKU picker in terima_transfer.php's table). */ .bootstrap-select > .dropdown-toggle { min-height: 38px; display: flex; align-items: center; } @media (max-width: 576px) { .filter-bar { flex-direction: column; align-items: stretch; } .filter-bar .filter-group, .filter-bar .btn { width: 100%; } } /* Tables */ table.dataTable { border-collapse: separate !important; border-spacing: 0; color: var(--text-main); background-color: var(--surface); } table.dataTable thead th { background-color: var(--surface-alt); color: var(--text-main); border-bottom: 2px solid var(--border-soft) !important; font-weight: 600; white-space: nowrap; } table.dataTable tbody td { border-color: var(--border-soft) !important; } table.dataTable tbody tr { background-color: var(--surface); } table.dataTable tbody tr:hover { background-color: var(--brand-primary-tint) !important; } table.table-bordered td, table.table-bordered th { border-color: var(--border-soft); } /* DataTables controls (search box / length / pagination) */ .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background-color: var(--input-bg); color: var(--text-main); border-radius: 0.45rem; border: 1px solid var(--input-border); } .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info { color: var(--text-muted); } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 0.4rem !important; margin-left: 2px; color: var(--text-main) !important; border-color: transparent !important; background: transparent !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--brand-primary-tint) !important; color: var(--hover-text) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #0c1420 !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { color: var(--text-muted) !important; } /* Status badges — opt-in via */ .badge-status-success, .badge-status-lunas { background-color: rgba(52, 196, 113, 0.16); color: var(--brand-success); } .badge-status-warning, .badge-status-belum-lunas { background-color: rgba(240, 173, 78, 0.16); color: var(--brand-warning); } .badge-status-danger { background-color: rgba(240, 89, 106, 0.16); color: var(--brand-danger); } .badge { font-weight: 600; padding: 0.35em 0.65em; border-radius: 0.4rem; } /* Action column links (plain text links only — real .btn-styled action buttons must keep their own button coloring, otherwise a teal text color here on top of a teal .btn-primary background makes the label invisible until :hover). */ td a[href^="edit"]:not(.btn), td a[href*="edit_"]:not(.btn) { color: var(--brand-primary-text); text-decoration: none; font-weight: 500; } td a[href^="edit"]:not(.btn):hover, td a[href*="edit_"]:not(.btn):hover { text-decoration: underline; color: var(--hover-text); } td label[onclick*="delete" i], td a[onclick*="delete" i] { color: var(--brand-danger) !important; cursor: pointer; font-weight: 500; } /* Breadcrumb */ .breadcrumb { background-color: transparent; padding-left: 0; color: var(--text-muted); } .breadcrumb-item.active { color: var(--text-muted); } .breadcrumb-item a { color: var(--brand-primary-text); } /* Modals (Bootstrap 4 default is light — keep readable on dark theme) */ .modal-content { background-color: var(--surface); color: var(--text-main); } .modal-header, .modal-footer { border-color: var(--border-soft); } /* Text-muted helpers used across pages */ .text-muted { color: var(--text-muted) !important; } /* Report summary tables (laba rugi, dsb) — replace ad-hoc inline colors */ .report-section-row { background-color: var(--surface-alt) !important; } .report-section-row td { color: var(--text-main) !important; } .report-negative-row { background-color: rgba(240, 89, 106, 0.12) !important; } .report-negative-row td { color: var(--brand-danger) !important; } .report-total-row td { color: var(--brand-primary) !important; font-weight: 700; } /* Visual gap between "POS" and "POS Online" standalone sidebar links so a misclick between the two is less likely (they're easy to mix up). */ .sidebar .nav-item[data-menu-code="pos_online"] { margin-top: 1.25rem; padding-top: 0.75rem; border-top: 1px solid var(--border-soft); } /* Light/dark theme toggle button, fixed bottom-left of the viewport. */ .theme-toggle-btn { position: fixed; left: 1rem; bottom: 1rem; z-index: 1050; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--surface-alt); border: 1px solid var(--border-soft); color: var(--text-main); box-shadow: var(--shadow-hover); cursor: pointer; font-size: 1.1rem; transition: background-color 0.15s ease, transform 0.1s ease; } .theme-toggle-btn:hover { background-color: var(--brand-primary-tint); color: var(--hover-text); } .theme-toggle-btn:active { transform: translateY(1px); } .theme-toggle-btn .fa-sun { display: none; } :root[data-theme="light"] .theme-toggle-btn .fa-moon { display: none; } :root[data-theme="light"] .theme-toggle-btn .fa-sun { display: inline; }