/*
Brand recolor (blue -> emerald) + top-bar restyle. Linked last (see header.php)
so it wins over the bundled theme CSS without needing to touch/rebuild all.css -
the file actually served in production (ASSET_MODE defaults to 'production',
which serves only all.css, not the individual style.css/custom.css this app
ships - those two have drifted out of sync with what's really live).

To change the brand color: edit the 4 variables below, nothing else in this
file. --brand-primary-rgb must stay the same color as --brand-primary, just
written as an unquoted "r, g, b" triplet, since CSS can't derive one from the
other - it feeds the rgba(...) alpha-blended rules further down.
*/
:root {
	--brand-primary: #0f9d78;
	--brand-primary-rgb: 15, 157, 120;
	--brand-primary-dark: #0c7d61;
	--brand-gradient-start: #14b88a;
}

.top-bar, nav.navbar.top-bar {
	background: linear-gradient(135deg, var(--brand-gradient-start) 0%, var(--brand-primary) 100%) !important;
	border-bottom: none !important;
	box-shadow: 0 2px 12px rgba(var(--brand-primary-rgb), 0.25);
}
/*
Mobile (<=767px): all.css's own "@media (max-width: 767px) .top-bar
.navbar-nav { background-color: #489ee7; }" repaints the icon strip on
the right (notifications/chat/avatar) solid blue, on top of the
gradient above - the .top-bar override doesn't reach this nested,
more specific selector. Let the parent gradient show through instead.
*/
@media only screen and (max-width: 767px) {
	.top-bar .navbar-nav {
		background-color: transparent !important;
	}
}
.top-bar .top-elements > li > a {
	border-radius: 10px;
	transition: background-color 0.15s ease-in-out;
}
.top-bar .top-elements > li > a:hover, .top-bar .top-elements > li > a:focus {
	background-color: rgba(255, 255, 255, 0.15) !important;
}
.top-bar .avatar-holder img {
	border: 2px solid rgba(255, 255, 255, 0.65);
	border-radius: 50%;
}
.top-bar .dropdown-menu {
	border-radius: 12px;
	border: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
	overflow: hidden;
	margin-top: 12px;
	padding: 6px;
}
.top-bar .dropdown-menu li > a {
	border-radius: 8px;
}
.btn-primary {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary {
	background-color: var(--brand-primary-dark) !important;
	border-color: var(--brand-primary-dark) !important;
}
.menu-parent li.active {
	border-left-color: var(--brand-primary) !important;
}
.pagination strong, .pagination .active a, .pagination .active span {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
	color: #fff !important;
}
/*
Remaining loose blue accents (no category/semantic meaning of their own -
unlike the 4 dashboard KPI colors or the red/green alert colors, which
stay as-is since the color there communicates something specific).
The theme (style.css/all.css/theme-black.css, the last for dark mode)
hardcodes #489ee7 across ~60 unrelated selectors with !important in
several spots, so every rule below also needs !important to reliably win,
in both light and dark mode.
*/
.badge.bg-primary, .bg-primary, .primarybg-info, .hexagon.info,
.dropdown-menu.btn-bgcolor, .btn-grid.active, .btn-file-upload,
.select2-container-multi .select2-choices .select2-search-choice,
.select2-results .select2-result-selectable.select2-highlighted,
.datepicker .datepicker-days table tbody tr .active,
.datepicker .datepicker-days table tbody tr .selected,
.nav-wizard > li.active > a, .nav-wizard > li.active > a:hover, .nav-wizard > li.active > a:focus,
.nav-tabs.nav-justified > li.active > a, .nav-tabs.nav-justified > li.active > a:hover, .nav-tabs.nav-justified > li.active > a:focus,
.pagination-top a:hover, .pagination.alternate a:hover, .dataTables_paginate .ui-button:hover,
.quick-actions a:hover, .piluku-preloader, .loader:after,
.register .register-summary .add-payment .select-payment.active,
.input-group-addon.bg, .btn-file-upload,
.spinner > div {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
}
/*
The "new item" pencil button (receivings/sales register item-form, e.g.
receivings/receiving.php's #new-item) and its wider sibling variant sit inside
.register-items-form and hardcode the old blue directly on the bare
.input-group-addon (no .bg class) - a separate rule from the one above,
confirmed present in the live all.css bundle, not just the drifted style.css.
*/
.register .register-items-form .item-form .input-group .input-group-addon,
.register .register-items-form .item-form .input-group .input-group-addon.grid-buttons {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
}
/*
"Agregar Pago" / "Completar venta" button (register-summary's
add-payment-form, e.g. register.php) - same #489ee7/rgb(72,158,231) but a
different, more specific selector than .input-group-addon.bg above, so it
isn't caught by that rule.
*/
.register .register-summary .add-payment-form.input-group .input-group-addon {
	background-color: var(--brand-primary) !important;
}
/*
Old bootstrap-era datepicker markup (.datepicker table tr td.active/.selected,
same for the month/year picker's span.active) hardcodes rgb(0,136,204)/#0088cc
as a solid background plus its own vendor-prefixed gradient - the
".datepicker-days table tbody tr .active/.selected" rule above targets a
different, newer markup variant and doesn't reach this one. The gradient
background-image has to be nulled out or it paints over the solid color.
*/
.datepicker table tr td.active, .datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover,
.datepicker table tr td.selected, .datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
	background-color: var(--brand-primary) !important;
	background-image: none !important;
	filter: none !important;
}
/*
.editable-click (x-editable inline-edit fields, e.g. some settings/profile
forms) underlines its clickable text with the same old rgb(0,136,204).
*/
.editable-click, a.editable-click, a.editable-click:hover {
	border-bottom-color: var(--brand-primary) !important;
}
.text-primary, .primary-info,
.dropdown-menu:after, .top-bar .top-elements .dropdown .dropdown-menu:after,
.piluku-tabs > li a:hover, .piluku-tabs > li a:focus, .piluku-tabs > li a:active,
.piluku-tabs.nav-justified li a:hover, .piluku-tabs.nav-justified li a:focus,
.nav.nav-wizard > li > a:hover, .nav-wizard > li > a,
.pagination-top a, .pagination.alternate a, .dataTables_paginate .ui-button,
.piluku-dropdown .dropdown-menu li.active, .piluku-dropdown .dropdown-menu li.active a,
.piluku-dropdown .dropdown-menu li a:hover,
.table_buttons > .dropdown-toggle.active,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.item-suggestions .details .name:hover,
.customer-badge .details .name:hover, .customer-badge .details .btn-edit,
.register .register-right .customer-badge .details .btn-edit,
.register .register-summary .item-tier span, .register .register-summary .select-sales-person span,
.register .register-summary .item-tiers a:hover, .register .register-summary .select-sales-persons a:hover {
	color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
}
.dropdown-menu, .top-bar .top-elements .dropdown .dropdown-menu {
	border-top: 2px solid var(--brand-primary) !important;
}
.left-bar .menu-parent > li:hover,
.left-bar .menu-parent > li.active {
	border-left-color: var(--brand-primary) !important;
}
.btn-info {
	background-color: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important;
	color: #fff !important;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
	background-color: var(--brand-primary-dark) !important;
	border-color: var(--brand-primary-dark) !important;
}
.progress-bar {
	background-color: var(--brand-primary) !important;
}
.quick_action_icon {
	background: rgba(var(--brand-primary-rgb), 0.12) !important;
	color: var(--brand-primary) !important;
}
a, .text-primary {
	color: var(--brand-primary);
}
a:hover:not(.btn), a:focus:not(.btn) {
	color: var(--brand-primary-dark) !important;
}
/*
Button-styled anchors (<a class="btn btn-primary">, common throughout
the manage/list toolbars) must keep white text on hover - the generic
a:hover rule above would otherwise repaint their label the same dark
green as the darkened hover background, making the text disappear.
*/
a.btn-primary:hover, a.btn-primary:focus,
a.btn-success:hover, a.btn-success:focus,
a.btn-info:hover, a.btn-info:focus,
a.btn-danger:hover, a.btn-danger:focus,
a.btn-red:hover, a.btn-red:focus,
a.btn-green:hover, a.btn-green:focus,
a.btn-warning:hover, a.btn-warning:focus {
	color: #fff !important;
}
/*
The Month/Week chart toggle (see home.php's .dashboard_chart_toggle,
aliased to .piluku-tabs for the existing click-handler JS): its hover and
active states are exactly the two states the theme's rules above target
with !important, so they need their own !important here too, in both
light and dark mode (dark mode's theme-black.css forces
.piluku-tabs>li.active a to blue with !important).
*/
.dashboard_chart_toggle > li > a:hover,
.dashboard_chart_toggle > li > a:focus,
.dashboard_chart_toggle > li > a:active {
	background-color: #f3f4f6 !important;
	color: var(--brand-primary) !important;
}
.dashboard_chart_toggle > li > a,
.dashboard_chart_toggle > li.active > a,
.dashboard_chart_toggle > li.active > a:hover,
.dashboard_chart_toggle > li.active > a:focus {
	border-radius: 8px !important;
}
.dashboard_chart_toggle > li.active > a,
.dashboard_chart_toggle > li.active > a:hover,
.dashboard_chart_toggle > li.active > a:focus {
	background-color: #fff !important;
	color: #1f2937 !important;
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
/*
.flatBlue/.flatBluec: the last literal #489ee7 holdouts (dashboard KPI
"sales" icon elsewhere, e.g. ai_assistant/index.php's "Requests" metric).
*/
.flatBlue {
	background-color: var(--brand-primary) !important;
}
.flatBluec {
	color: var(--brand-primary) !important;
}
/*
The breadcrumb sits directly on the green top-bar, so it needs to stay
white regardless of theme/dark-mode text colors - green-on-green (from
the .text-primary rule above, or dark mode's own muted text color) was
unreadable.
*/
.navbar-breadcrumb, .navbar-breadcrumb > a, .navbar-breadcrumb > a.current {
	color: rgba(255, 255, 255, 0.9) !important;
}
.navbar-breadcrumb > a.current {
	color: #fff !important;
	font-weight: 600;
}
.navbar-breadcrumb > a:hover {
	color: #fff !important;
}
/*
dashboard_section_title (home.php's welcome heading) hardcoded a
light-mode-only dark gray, invisible against dark mode's near-black page
background. Originally a server-side ($is_dark_mode) conditional when this
lived inline in header.php - converted to a plain body.dark-mode selector
(same pattern already used throughout this file) so this stylesheet needs
no PHP of its own.
*/
.dashboard_section_title {
	color: #374151 !important;
}
body.dark-mode .dashboard_section_title {
	color: #d7dce5 !important;
}
/*
Mensajes (messages/messages.php, sent_messages.php, single-message.php):
the inbox list rows and message detail pane hardcode a white background
with black text (all.css .mail_holder/.mail_brief_holder rules) with no
dark-mode counterpart at all in theme-black.css, so they stayed a bright
white card no matter the theme. Also recolors the old blue accents
(sender name, back arrow, unread border) to match the emerald rebrand.
*/
.mail_holder .mail_body .mail_list .mails_holder li a .right .name,
.mail_holder .mail_body .mail_brief_holder .heading_block .back {
	color: var(--brand-primary) !important;
}
.mail_holder .mail_body .mail_brief_holder .heading_block h1 {
	border-left-color: var(--brand-primary) !important;
}
body.dark-mode .mail_holder .mail_body .mail_list .mails_holder li a {
	background: #242526 !important;
	border-bottom-color: #3a3b3c !important;
}
body.dark-mode .mail_holder .mail_body .mail_list .mails_holder li a .message_list_block.unread {
	background: #1e272f !important;
}
body.dark-mode .mail_holder .mail_body .mail_list .mails_holder li a .message_list_block.active,
body.dark-mode .mail_holder .mail_body .mail_list .mails_holder li a .message_list_block:hover {
	background-color: #18191a !important;
}
body.dark-mode .mail_holder .mail_body .mail_list .mails_holder li a .right h4 {
	color: #abafb4 !important;
}
body.dark-mode .mail_holder .mail_body .mail_brief_holder {
	background: #242526 !important;
	border-color: #3a3b3c !important;
}
body.dark-mode .mail_holder .mail_body .mail_brief_holder .heading_block {
	border-bottom-color: #3a3b3c !important;
}
body.dark-mode .mail_holder .mail_body .mail_brief_holder .heading_block h1,
body.dark-mode .mail_holder .mail_body .mail_brief_holder .mail_brief_body {
	color: #e4e6eb !important;
}
/*
Language switcher dropdown (.language-drop): all.css hovers the <li>
itself with a near-white #f6f7fa, separate from the <a> inside it that
theme-black.css already darkens via its .neat_drop a:hover rule. Since
theme-black.css never targets .language-drop li:hover specifically, the
light li background still shows through around the anchor in dark mode.
*/
body.dark-mode .top-bar .top-elements .dropdown .dropdown-menu.language-drop li:hover {
	background-color: #393a3b !important;
}
body.dark-mode .mail_holder .mail_body .mail_list_block .none {
	color: #abafb4 !important;
}
body.dark-mode .alert-warning {
	background-color: #3a2f12 !important;
	border-color: #5c4a1a !important;
	color: #f0c674 !important;
}
/*
Mensajes Enviados (sent_messages.php) uses a second, unrelated set of
classes (.message-box/.left-list/.message-body) for the same kind of
list row, also hardcoded to a white card with black/blue text and no
dark-mode counterpart - same fix as the .mail_holder block above.
*/
.message-body .text-left > h1 {
	color: var(--brand-primary) !important;
}
body.dark-mode .message-box {
	background-color: #242526 !important;
	border-color: #3a3b3c !important;
}
body.dark-mode .message-wrapper {
	border-bottom-color: #3a3b3c !important;
}
body.dark-mode .message-box .left-list {
	background-color: #242526 !important;
}
body.dark-mode .message-box .left-list .active-message,
body.dark-mode .message-box .left-list .selected-message {
	background-color: #18191a !important;
}
body.dark-mode .message-body .text-left .time,
body.dark-mode .message-body .text-left > p {
	color: #abafb4 !important;
}
/*
The sidebar logo badge (.admin-logo) hardcodes the old theme's blue
(#489ee7) in all.css with no per-brand override and no dark-mode
variant. Recolor it to the emerald rebrand accent used everywhere
else. Per-location colors (set inline via $location_color in header.php)
already use !important and still win over this.
*/
.left-bar .admin-logo,
.side-bar .admin-logo {
	background-color: var(--brand-primary) !important;
}
/*
Register cart item name (register.php's item list) and the customer-facing
pole/second-screen display's item name (span.item_name) both hardcode
#438AF7 in all.css with no override anywhere else.
*/
.register .register-items .register-items-holder .register-item-content .register-item-name {
	color: var(--brand-primary) !important;
}
span.item_name {
	color: var(--brand-primary) !important;
}
/*
Text fallback for the sidebar logo when no branding logo image file
exists yet (see header.php's $branding_logo_path check) - styled to
read like a wordmark instead of plain body text.
*/
.admin-logo .logo-holder .logo-text {
	display: inline-block;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 8px 0;
}
/*
all.css only sets a fixed width:100px on .admin-logo .logo-holder .logo
with no height cap or object-fit, so an uploaded logo with different
proportions than the old fixed 100x60 asset renders tiny (constrained
by its own aspect ratio inside that width) or overflows. Scale
whatever image is uploaded to fill the available badge space instead.
*/
.left-bar .admin-logo .logo-holder .logo,
.side-bar .admin-logo .logo-holder .logo {
	width: auto;
	height: auto;
	max-width: 150px;
	max-height: 44px;
	object-fit: contain;
	vertical-align: middle;
}
/*
all.css only actually collapses .left-bar to 90px wide inside this same
screen-width range (see its "collapse to minibar function" block) - the
.mini-bar class alone (set whenever always_minimize_menu is on) doesn't
narrow the sidebar outside it, so this override must match that range
or a wide uploaded logo gets shrunk to icon-size on full-width screens.
*/
@media only screen and (min-width: 802px) and (max-width: 1366px) {
	.wrapper.mini-bar .left-bar .admin-logo .logo-holder .logo {
		max-width: 66px;
		max-height: 50px;
	}
}
/*
Sidebar nav "pill": the stock active state is a border-left-color with
no matching border-left-width anywhere in the theme, so it never
actually renders (the only visible cue was a near-invisible background
tint). Replace it with an inset rounded pill in the brand color -
ties the sidebar to the rounded-card language used everywhere else
in this rebrand instead of looking like the stock theme.
*/
.left-bar .menu-parent > li,
.side-bar .menu-parent > li {
	margin: 3px 10px;
	border-bottom: none !important;
}
.left-bar .menu-parent > li > a,
.side-bar .menu-parent > li > a {
	width: 100%;
	box-sizing: border-box;
	border-radius: 10px;
}
.left-bar .menu-parent > li.has_sub_menu > a,
.side-bar .menu-parent > li.has_sub_menu > a {
	padding-right: 36px;
}
.left-bar .menu-parent > li:hover,
.side-bar .menu-parent > li:hover {
	background-color: rgba(var(--brand-primary-rgb), 0.12) !important;
	border-radius: 10px;
}
.left-bar .menu-parent > li.active,
.side-bar .menu-parent > li.active {
	background-color: var(--brand-primary) !important;
	border-radius: 10px;
}
.left-bar .menu-parent > li.active > a,
.side-bar .menu-parent > li.active > a,
.left-bar .menu-parent > li.active > a i,
.side-bar .menu-parent > li.active > a i,
.left-bar .menu-parent > li.active > a span.text,
.side-bar .menu-parent > li.active > a span.text {
	color: #fff !important;
}
/*
Submenu items (e.g. under "Inventario") get a smaller pill, inset
further. all.css bakes in its own 40px+20px indent (for the old
vertical connector-line/dot tree, hidden below) plus the general
20px/20px link padding, which left almost no room for the label
once the pill's own margin narrows the row - override all of it
with tighter, explicit values instead of layering on top.
*/
.left-bar .menu-parent > li ul > li,
.side-bar .menu-parent > li ul > li {
	margin: 2px 8px 2px 14px;
	padding-left: 0 !important;
	border-radius: 8px;
	overflow: hidden;
}
.left-bar .menu-parent > li ul > li:before,
.side-bar .menu-parent > li ul > li:before,
.left-bar .menu-parent > li ul > li:after,
.side-bar .menu-parent > li ul > li:after {
	display: none;
}
.left-bar .menu-parent > li ul > li a,
.side-bar .menu-parent > li ul > li a {
	width: 100%;
	box-sizing: border-box;
	border-radius: 8px;
	padding-left: 12px !important;
	padding-right: 12px !important;
}
.left-bar .menu-parent > li ul > li a i,
.side-bar .menu-parent > li ul > li a i {
	padding-right: 10px;
}
.left-bar .menu-parent > li ul > li:hover,
.side-bar .menu-parent > li ul > li:hover {
	background-color: rgba(var(--brand-primary-rgb), 0.12) !important;
}
.left-bar .menu-parent > li ul > li.active_submenu_link,
.side-bar .menu-parent > li ul > li.active_submenu_link {
	background-color: var(--brand-primary) !important;
}
.left-bar .menu-parent > li ul > li.active_submenu_link a,
.side-bar .menu-parent > li ul > li.active_submenu_link a,
.left-bar .menu-parent > li ul > li.active_submenu_link a i,
.side-bar .menu-parent > li ul > li.active_submenu_link a i {
	color: #fff !important;
}
/* Collapsed icon-only sidebar (same real collapse range as the logo fix above) */
@media only screen and (min-width: 802px) and (max-width: 1366px) {
	.wrapper.mini-bar .left-bar .menu-parent > li {
		margin: 3px 8px;
	}
	.wrapper.mini-bar .left-bar .menu-parent > li > a {
		width: auto;
		border-radius: 10px;
	}
}
/*
Report KPI cards (.info-seven, used across reports/outputs/* - summary,
tabular, graphical, layaway_statements, profit_and_loss_summary, etc) set
their own label text to white in all.css so it reads on their colored
(green/red/orange/brand) backgrounds - but theme-black.css's dark-mode
reskin has a blanket "p { color: #7a88af !important }" that wins over it,
washing the labels ("Total parcial", "Totales"...) out to near-invisible
against the green card. Restore white specifically for these.
*/
body.dark-mode .info-seven p {
	color: #fff !important;
}
/*
.dark-info-primary (the large rotated watermark icon on primarybg-info cards)
hardcodes the pre-rebrand blue (#1a78c8) in all.css - primarybg-info's own
background is var(--brand-primary) now, so the icon no longer matches
(and won't match a custom brand_primary_color either). The other 3 variants
(dark-info-green/red/orange) are a fixed darker shade of their own fixed-color
card, so match that pattern with the one dynamic shade already computed for
this purpose. Not dark-mode-specific - the mismatch exists in light mode too.
*/
.info-seven .logo-seven i.dark-info-primary {
	color: var(--brand-primary-dark) !important;
}

/*
Selectize (all screens): the theme paints the matched text of a suggestion with a #dddddd block that,
in dark mode, hides the letters behind it ("█LTERN█DOR"). Use a translucent brand color instead.
*/
body .selectize-dropdown [data-selectable] .highlight {
	background: rgba(var(--brand-primary-rgb), 0.3) !important;
	color: inherit !important;
	border-radius: 2px;
}

/* Dropdowns rendered on <body> (dropdownParent: 'body') must stay above panels and modals */
body > .selectize-dropdown {
	z-index: 2050 !important;
}

/* Configuración > "Barra superior fija": the top bar stays at the top while the page scrolls */
.wrapper.sticky-top-bar .content > .top-bar {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 1030;
}
/* .wrapper had overflow:hidden, which disables sticky; clip keeps the same clipping without creating a scroll container */
.wrapper.sticky-top-bar {
	overflow: clip;
}