/*
 * PureXdrop brand palette override.
 * Loaded after bootstrap.min.css / default-css.css / styles.css / responsive.css
 * on every layout, so it wins the cascade without needing !important almost
 * anywhere.
 *
 * Hydration Blue is the dominant structural color (sidebar, buttons, links,
 * pagination, focus states) - Red is a true accent, used only for small
 * high-attention elements (badge-primary) plus the sidebar's own
 * already-existing active-item highlight (styles.css, untouched here), so
 * it doesn't compete with Bootstrap's own danger/red for errors and deletes.
 * An earlier version made --primary-color red, which cascaded into far more
 * of the UI than intended (via existing var(--primary-color) usages in
 * styles.css) and read as overwhelming - keep red usage small and
 * deliberate rather than driving it off the base variable.
 */

:root {
    --primary-color: #37608F; /* Hydration Blue - dominant structural color */
    --px-red: #FF3033;        /* PureX Red - accent only */
    --px-blue: #37608F;
    --px-dark: #050505;
    --px-red-hover: #e02528;
    --px-blue-hover: #2b4d73;
}

/* Buttons */
.btn-primary {
    color: #fff;
    background-color: var(--px-blue);
    border-color: var(--px-blue);
}
.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--px-blue-hover);
    border-color: var(--px-blue-hover);
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--px-blue-hover);
    border-color: var(--px-blue-hover);
}
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 0.2rem rgba(55, 96, 143, 0.4);
}

.btn-outline-primary {
    color: var(--px-blue);
    border-color: var(--px-blue);
}
.btn-outline-primary:hover {
    color: #fff;
    background: var(--px-blue);
    border-color: var(--px-blue);
}
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--px-blue);
    border-color: var(--px-blue);
}

/* Any button-styled link in the topbar's icon/action row - explicit fix
   for styles.css's ".notification-area a { color: var(--primary-color) }",
   which (being class+element, higher specificity than .btn-primary alone)
   otherwise wins and recolors button text to match the button's own
   background, making the label invisible. */
.notification-area a.btn {
    color: #fff;
}
.notification-area a.btn-outline-primary,
.notification-area a.btn-outline-secondary,
.notification-area a.btn-outline-info,
.notification-area a.btn-outline-danger,
.notification-area a.btn-outline-success,
.notification-area a.btn-outline-warning {
    color: inherit;
}

/* Text / background / border utilities (Bootstrap defaults). Badges/pills
   are small, so this is where the red accent actually shows up, without
   turning large button/nav surfaces red. */
.text-primary { color: var(--px-blue) !important; }
.bg-primary { background-color: var(--px-blue) !important; }
.border-primary { border-color: var(--px-blue) !important; }
.badge-primary { color: #fff; background-color: var(--px-red); }

/* Form focus / selection */
.form-control:focus,
.custom-select:focus {
    border-color: var(--px-blue);
    box-shadow: 0 0 0 0.2rem rgba(55, 96, 143, 0.25);
}
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--px-blue);
    border-color: var(--px-blue);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(55, 96, 143, 0.25);
}

/* Pagination */
.page-link {
    color: var(--px-blue);
}
.page-item.active .page-link {
    background-color: var(--px-blue);
    border-color: var(--px-blue);
}
.dataTables_paginate .page-item.active .page-link {
    background-color: var(--px-blue);
    border-color: var(--px-blue);
}

/* Nav / dropdown active states */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active {
    color: #fff;
    background-color: var(--px-blue);
}
.dropdown-item.active,
.dropdown-item:active {
    color: #fff;
    background-color: var(--px-blue);
}

/* select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--px-blue);
    color: #fff;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--px-blue);
}

/* Preloader spinner */
.loader {
    border-top-color: var(--px-blue) !important;
}

/* Customer quick-info strip (invoice create/edit) */
.customer-quick-info .btn-ledger {
    color: #fff;
    background-color: var(--px-blue);
    border-color: var(--px-blue);
}
.customer-quick-info .btn-ledger:hover {
    background-color: var(--px-blue-hover);
    border-color: var(--px-blue-hover);
    color: #fff;
}
.customer-quick-info .stat-pill {
    color: var(--px-dark);
    background-color: #fff;
    border-color: #dfe3e8;
}
.customer-quick-info .stat-pill i {
    color: var(--px-blue);
}

/* "Tag Other Brand" widget (invoice create/edit line items). The row sits
   in the narrow first table column alongside the product name/description,
   so its three children (brand select, qty, remove button) were shrinking
   to equal, tiny flex widths with no explicit sizing — the select ended up
   only ~78px wide, clipping brand names like "Gourmet"/"Nestle". Give the
   select the space and keep qty/remove compact instead. */
.bottle-brand-tags .brand-tag-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}
.bottle-brand-tags .brand-tag-select {
    flex: 1 1 auto;
    min-width: 130px;
    width: auto;
    height: 40px;
}
.bottle-brand-tags .brand-tag-qty {
    flex: 0 0 60px;
    width: 60px;
    min-width: 60px;
    height: 40px;
}
.bottle-brand-tags .btn-remove-brand-tag {
    flex: 0 0 auto;
}