/**
 * ElAshry Studios — Brand Override Stylesheet
 * North Coast Branch | Summer 2026
 *
 * Loaded AFTER the Bootswatch/Bootstrap bundle and all OSPOS source CSS,
 * so every rule here wins via cascade without !important overuse.
 *
 * Brand palette
 *   Primary Blue  : #051CA8
 *   On-Blue Text  : #FFFFFF
 *   Light Accent  : #EEF1FF  (selected rows, hover, highlights)
 */

/* ============================================================
   TOPBAR  (thin info bar above the main navbar)
   Original: background #182735 (dark navy)  →  #051CA8
   ============================================================ */
.topbar {
    background: #051CA8;
    color: #FFFFFF;
}

.topbar a {
    color: #FFFFFF;
}

.topbar a:hover,
.topbar a:focus {
    color: #EEF1FF;
    text-decoration: underline;
}

/* Branch label inside topbar */
.topbar .branch-label {
    font-size: 11px;
    color: #EEF1FF;
    opacity: 0.9;
    letter-spacing: 0.03em;
}

/* ============================================================
   MAIN NAVBAR
   Bootstrap 3 Flatly: .navbar-default has its own bg.
   We keep the existing white/light navbar and only override
   active states and the brand link colour to match our blue.
   ============================================================ */
.navbar-default {
    background-color: #051CA8;
    border-color: #0317c7;
}

.navbar-default .navbar-brand {
    color: #FFFFFF;
}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #EEF1FF;
}

/* Nav items — default */
.navbar-default .navbar-nav > li > a {
    color: #FFFFFF;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #051CA8;
    background-color: #EEF1FF;
}

/* Active nav item */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #051CA8;
    background-color: #EEF1FF;
}

/* Mobile toggle button */
.navbar-default .navbar-toggle {
    border-color: #EEF1FF;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #FFFFFF;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #0317c7;
}

/* Collapse divider */
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #0317c7;
}

/* ============================================================
   PRIMARY BUTTONS  (.btn-primary)
   Flatly default: #2c3e50  →  #051CA8
   ============================================================ */
.btn-primary {
    color: #FFFFFF;
    background-color: #051CA8;
    border-color: #051CA8;
}

.btn-primary:hover {
    color: #FFFFFF;
    background-color: #0317c7;
    border-color: #0214b0;
}

.btn-primary:focus,
.btn-primary.focus {
    color: #FFFFFF;
    background-color: #0317c7;
    border-color: #000a55;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #FFFFFF;
    background-color: #0214b0;
    border-color: #0214b0;
    background-image: none;
}

.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus {
    color: #FFFFFF;
    background-color: #01107a;
    border-color: #000a55;
}

.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus {
    background-color: #051CA8;
    border-color: #051CA8;
}

.btn-primary .badge {
    color: #051CA8;
    background-color: #FFFFFF;
}

/* ============================================================
   LINKS
   Flatly default link colour: #18bc9c (teal)  →  #051CA8
   ============================================================ */
a {
    color: #051CA8;
}

a:hover,
a:focus {
    color: #0317c7;
}

/* Keep topbar links white (already overridden above) */

/* ============================================================
   FOCUS OUTLINES
   ============================================================ */
.form-control:focus {
    border-color: #051CA8;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
                0 0 8px rgba(5, 28, 168, 0.5);
}

a:focus,
button:focus,
.btn:focus,
input:focus,
select:focus,
textarea:focus {
    outline-color: #051CA8;
}

/* ============================================================
   SELECTED / ACTIVE TABS
   Bootstrap 3 nav-tabs active state
   ============================================================ */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #051CA8;
    border-bottom-color: transparent;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    color: #FFFFFF;
    background-color: #051CA8;
}

/* ============================================================
   TABLE ROWS — SELECTED & HOVER
   ============================================================ */
.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > thead > tr.active > td,
.table > tfoot > tr.active > td {
    background-color: #EEF1FF;
}

.table-hover > tbody > tr:hover {
    background-color: #EEF1FF;
}

.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
    background-color: #dce2fc;
}

/* bootstrap-table selected row */
.bootstrap-table .table > tbody > tr.selected {
    background-color: #EEF1FF;
}

/* ============================================================
   RECEIPT — Company name heading
   ============================================================ */
#company_name {
    color: #051CA8;
}

#sale_receipt {
    color: #051CA8;
    font-weight: bold;
}

/* ============================================================
   INVOICE HEADER STRIP
   Original: background #222  →  #051CA8
   ============================================================ */
#header {
    background: #051CA8;
    color: #FFFFFF;
}

/* ============================================================
   TEXT / UTILITY CLASSES
   ============================================================ */
.text-primary {
    color: #051CA8;
}

a.text-primary:hover,
a.text-primary:focus {
    color: #0317c7;
}

.bg-primary {
    background-color: #051CA8;
    color: #FFFFFF;
}

/* ============================================================
   LOGIN PAGE — Logo drop-shadow removal
   The Flatly theme adds a white outline drop-shadow for the
   default OSPOS SVG icon on dark backgrounds.  The ElAshry
   Studios PNG is a clean blue-on-white stamp — that filter
   causes a ghosting halo.  Remove it here instead of editing
   the original login.css.
   ============================================================ */
img.logo {
    filter: none;
}

/* ============================================================
   LOGIN PAGE — Meta theme-color equivalent (CSS)
   The <meta name="theme-color"> in the HTML head is set to
   #051CA8 (edited in login.php).  This rule covers any
   vendor-prefixed equivalent in the stylesheet layer.
   ============================================================ */

/* ============================================================
   FILTER BUTTONS / ACTIVE FILTER PILLS
   ============================================================ */
#filters .btn.active,
.btn-group > .btn.active {
    background-color: #EEF1FF;
    color: #051CA8;
    border-color: #051CA8;
}

/* ============================================================
   PANEL HEADINGS (Bootstrap 3 card-equivalent)
   ============================================================ */
.panel-primary > .panel-heading {
    background-color: #051CA8;
    border-color: #051CA8;
    color: #FFFFFF;
}

.panel-primary {
    border-color: #051CA8;
}

/* ============================================================
   LABELS & BADGES
   ============================================================ */
.label-primary {
    background-color: #051CA8;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: #0317c7;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #051CA8;
    border-color: #051CA8;
    color: #FFFFFF;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background-color: #EEF1FF;
    color: #051CA8;
}

/* ============================================================
   DROPDOWN ACTIVE ITEMS
   ============================================================ */
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #EEF1FF;
    color: #051CA8;
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress-bar {
    background-color: #051CA8;
}

/* ============================================================
   MODAL HEADERS
   ============================================================ */
.modal-header.bg-primary,
.dialog-header {
    background-color: #051CA8;
    color: #FFFFFF;
}

/* BootstrapDialog library primary type */
.bootstrap-dialog.type-primary .modal-header {
    background-color: #051CA8;
}

/* ============================================================
   MISC — responsive visibility of branch label on mobile
   ============================================================ */
@media (max-width: 767px) {
    .topbar .branch-label {
        display: none; /* hide branch label on very small screens to avoid clutter */
    }
}