/*
 * Dark theme for topSite - added 2026-08-28.
 * Loaded after app.css/style.css in layouts/app.blade.php so it wins the cascade. Overrides
 * the stock Bootstrap 3 look this app ships with, rather than rewriting the compiled
 * app.css build - keeps this easy to drop (one <link>) if it ever needs reverting.
 */

:root {
	--bg-page:        #0e1014;
	--bg-panel:        #161a21;
	--bg-panel-head:   #1d2230;
	--bg-input:        #11141a;
	--border-subtle:   #262c38;
	--text-primary:    #e7e9ee;
	--text-muted:      #9aa1b1;
	--accent:          #e0a940;
	--accent-hover:    #f2be5a;
	--accent-dark:     #8a6420;
	--danger:          #e2574c;
	--danger-bg:       #2a1518;
	--success:         #4fbf7a;
	--success-bg:      #12241a;
	--warning:         #e2b93b;
	--warning-bg:      #2a2312;
	--info:            #4a9fd8;
}

html, body {
	background: var(--bg-page);
	color: var(--text-primary);
}

body {
	font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

a {
	color: var(--accent);
}
a:hover, a:focus {
	color: var(--accent-hover);
}

/* ---- Navbar ---- */

.navbar-default {
	background: #0a0c10;
	border-color: var(--border-subtle);
	box-shadow: 0 1px 0 rgba(224, 169, 64, 0.15);
}
.navbar-default .navbar-brand {
	color: var(--accent);
	font-weight: 600;
	letter-spacing: 0.5px;
}
.navbar-default .navbar-brand:hover {
	color: var(--accent-hover);
}
.navbar-default .navbar-nav > li > a {
	color: var(--text-primary);
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	color: var(--accent);
	background: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu {
	background: var(--bg-panel);
	border: 1px solid var(--border-subtle);
}
/* Bootstrap's default navbar gives the toggle itself a light grey background the moment its
   dropdown opens (.navbar-nav>.open>a), which the rest of this file didn't touch - that's
   what caused the "bright box, dark menu" mismatch. */
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	background: var(--bg-panel-head);
	color: var(--accent);
}
.dropdown.open .dropdown-toggle,
.btn-group.open .dropdown-toggle {
	background: var(--bg-panel-head);
	color: var(--text-primary);
	box-shadow: none;
}
.dropdown-menu {
	background: var(--bg-panel);
	border: 1px solid var(--border-subtle);
	box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.dropdown-menu > li > a {
	color: var(--text-primary);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background: var(--bg-panel-head);
	color: var(--accent);
}
.navbar-toggle .icon-bar {
	background: var(--text-primary);
}

/* ---- Panels / cards ---- */

.panel {
	background: var(--bg-panel);
	border: 1px solid var(--border-subtle);
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.panel-default > .panel-heading {
	background: var(--bg-panel-head);
	color: var(--text-primary);
	border-bottom: 1px solid var(--border-subtle);
	border-radius: 6px 6px 0 0;
	font-weight: 600;
}
.panel-body {
	color: var(--text-primary);
}
.panel-body a {
	color: var(--accent);
}
.panel-footer {
	background: var(--bg-panel-head);
	color: var(--text-muted);
	border-top: 1px solid var(--border-subtle);
}

.panel-success > .panel-heading {
	background: var(--success-bg);
	color: var(--success);
	border-color: var(--border-subtle);
}
.panel-danger > .panel-heading {
	background: var(--danger-bg);
	color: var(--danger);
	border-color: var(--border-subtle);
}
.panel-warning > .panel-heading {
	background: var(--warning-bg);
	color: var(--warning);
	border-color: var(--border-subtle);
}
.panel-success, .panel-danger, .panel-warning {
	border-color: var(--border-subtle);
}

.mall-category-heading {
	color: var(--accent);
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: 1px;
}

/* ---- Tables ---- */

.pure-table, table.pure-table {
	background: transparent;
	color: var(--text-primary);
	border: 1px solid var(--border-subtle);
}
.pure-table td, .pure-table th {
	border-color: var(--border-subtle);
}
.pure-table thead {
	background: var(--bg-panel-head);
	color: var(--accent);
}
.pure-table tbody tr:hover {
	background: rgba(224, 169, 64, 0.06);
}

/* ---- Forms ---- */

input, select, textarea,
.form-control {
	background: var(--bg-input);
	color: var(--text-primary);
	border: 1px solid var(--border-subtle);
	border-radius: 4px;
	padding: 6px 10px;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
	background: var(--bg-input);
	color: var(--text-primary);
	border-color: var(--accent);
	outline: none;
	box-shadow: 0 0 0 2px rgba(224, 169, 64, 0.2);
}
input::placeholder, textarea::placeholder {
	color: var(--text-muted);
}
label {
	color: var(--text-muted);
}
select:active, select:hover {
	background: var(--bg-input);
	color: var(--text-primary);
}
select option {
	background: var(--bg-input);
	color: var(--text-primary);
}

/* ---- Buttons ---- */

.btn-primary {
	background: var(--accent);
	border-color: var(--accent-dark);
	color: #14100a;
	font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus {
	background: var(--accent-hover);
	border-color: var(--accent);
	color: #14100a;
}
.btn-default {
	background: var(--bg-panel-head);
	border-color: var(--border-subtle);
	color: var(--text-primary);
}
.btn-default:hover {
	background: var(--border-subtle);
	color: var(--text-primary);
}

/* ---- Alerts / flash messages ---- */

.alert-success {
	background: var(--success-bg);
	border-color: var(--border-subtle);
	color: var(--success);
}
.alert-danger {
	background: var(--danger-bg);
	border-color: var(--border-subtle);
	color: var(--danger);
}
.alert-warning {
	background: var(--warning-bg);
	border-color: var(--border-subtle);
	color: var(--warning);
}

/* ---- Misc ---- */

.badge {
	background: var(--accent);
	color: #14100a;
}

/* ---- Modals ---- */

.modal-content {
	background: var(--bg-panel);
	color: var(--text-primary);
	border: 1px solid var(--border-subtle);
}
.modal-header {
	background: var(--bg-panel-head);
	border-bottom: 1px solid var(--border-subtle);
	border-radius: 5px 5px 0 0;
}
.modal-footer {
	border-top: 1px solid var(--border-subtle);
}
.modal-backdrop {
	background: #000;
}
.modal-backdrop.in {
	opacity: 0.7;
}

/* ---- Lists / breadcrumbs / labels ---- */

.list-group-item {
	background: var(--bg-panel);
	color: var(--text-primary);
	border-color: var(--border-subtle);
}
.breadcrumb {
	background: var(--bg-panel-head);
	color: var(--text-muted);
}
.breadcrumb > li + li::before {
	color: var(--text-muted);
}
.breadcrumb > .active {
	color: var(--text-primary);
}
.well {
	background: var(--bg-panel);
	border-color: var(--border-subtle);
	color: var(--text-primary);
}
.list-unstyled li {
	color: var(--text-primary);
}
.text-danger {
	color: var(--danger) !important;
}
.text-success {
	color: var(--success) !important;
}
.close {
	color: var(--text-primary);
	opacity: 0.7;
	text-shadow: none;
}
.close:hover {
	color: var(--text-primary);
	opacity: 1;
}

.pagination > li > a, .pagination > li > span {
	background: var(--bg-panel);
	border-color: var(--border-subtle);
	color: var(--text-primary);
}
.pagination > li > a:hover {
	background: var(--bg-panel-head);
	color: var(--accent);
}
.pagination > .active > a, .pagination > .active > span {
	background: var(--accent);
	border-color: var(--accent);
	color: #14100a;
}

footer, .footer-bottom {
	background: #0a0c10;
	color: var(--text-muted);
	border-top: 1px solid var(--border-subtle);
}
.footer-bottom p, .footer-bottom a {
	color: var(--text-muted);
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
::-webkit-scrollbar-track {
	background: var(--bg-page);
}
::-webkit-scrollbar-thumb {
	background: var(--border-subtle);
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background: var(--accent-dark);
}