/*
 * SPS — Skyocean Pharmacy Systems
 * Brand surface styling. Developed by Skyocean International.
 *
 * A scoped override file (PLAN L34): upstream's bootstrap and ospos.css are never
 * edited, so a merge brings their changes cleanly and only this file needs
 * re-checking. Loaded after the compiled bundle so it wins on specificity ties.
 *
 * Palette — final, Seba 2026-08-26:
 *   --sps-primary   #004573  deep Skyocean blue. Navbar, primary buttons, active
 *                            states, receipt and report headers. Passes WCAG AA
 *                            for white text.
 *   --sps-secondary #96d4f4  light blue. Secondary controls, highlights, info
 *                            states, search fields. Does NOT carry white text —
 *                            always pair with --sps-ink.
 *   --sps-ink       #08070e  near-black, body text
 *   --sps-surface   #202026  dark surface
 *   --sps-light     #f5f5f5  light background
 *   --sps-accent    #00ffb2  mint. Success states and badges ONLY — at full
 *                            saturation it is fatiguing over an eight-hour shift.
 */

:root {
    --sps-primary:      #004573;
    --sps-primary-dark: #003356;
    --sps-secondary:    #96d4f4;
    --sps-ink:          #08070e;
    --sps-surface:      #202026;
    --sps-light:        #f5f5f5;
    --sps-accent:       #00ffb2;
}

/* ---- navbar / top bar -------------------------------------------------- */
.navbar-default,
.navbar-inverse,
#menubar,
.topbar {
    background-color: var(--sps-primary);
    border-color: var(--sps-primary-dark);
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a,
#menubar a,
.topbar a {
    color: #fff;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: var(--sps-primary-dark);
    color: #fff;
}

/* ---- primary actions --------------------------------------------------- */
.btn-primary,
.btn-info {
    background-color: var(--sps-primary);
    border-color: var(--sps-primary-dark);
    color: #fff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover,    .btn-info:focus,    .btn-info:active {
    background-color: var(--sps-primary-dark);
    border-color: var(--sps-primary-dark);
    color: #fff;
}

/* Secondary controls carry dark text: #96d4f4 does not meet contrast for white. */
.btn-default,
.btn-secondary {
    background-color: var(--sps-secondary);
    border-color: #7bc2e8;
    color: var(--sps-ink);
}

.btn-default:hover, .btn-default:focus,
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #7bc2e8;
    color: var(--sps-ink);
}

/* ---- success / badges: the only place mint appears --------------------- */
.btn-success,
.label-success,
.badge-success,
.alert-success {
    background-color: var(--sps-accent);
    border-color: #00d896;
    color: var(--sps-ink);
}

.alert-success { color: var(--sps-ink); }

/* ---- informational surfaces -------------------------------------------- */
.alert-info,
.panel-info > .panel-heading {
    background-color: var(--sps-secondary);
    border-color: #7bc2e8;
    color: var(--sps-ink);
}

.panel-primary > .panel-heading,
.table > thead > tr > th {
    background-color: var(--sps-primary);
    border-color: var(--sps-primary-dark);
    color: #fff;
}

/* ---- links ------------------------------------------------------------- */
a       { color: var(--sps-primary); }
a:hover,
a:focus { color: var(--sps-primary-dark); }

/* ---- module tiles on the home screen ----------------------------------- */
.module_item a       { color: var(--sps-primary); }
.module_item a:hover { color: var(--sps-primary-dark); }

/* ---- search / form focus ----------------------------------------------- */
.form-control:focus {
    border-color: var(--sps-secondary);
    box-shadow: 0 0 0 2px rgba(150, 212, 244, 0.45);
}

/* ---- footer attribution ------------------------------------------------ */
#sps-footer {
    color: #6b6b73;
    font-size: 11px;
    text-align: center;
    padding: 10px 0 16px;
}

#sps-footer strong { color: var(--sps-primary); }

/* ---- printed documents: headers carry the brand, body stays black ------ */
#receipt_wrapper #company_name,
#page-wrap #header {
    color: var(--sps-primary);
}

@media print {
    /* Ink is expensive and thermal paper is monochrome — print the brand colour
       only on the heading, never as a filled area. */
    #receipt_wrapper #company_name,
    #page-wrap #header { color: #000; }
    #sps-footer { display: none; }
}

/* ---- login screen ------------------------------------------------------
 * Bootstrap 5 here, not 3 — different class names, so these are separate from
 * the rules above. The login screen is the first thing a pharmacy owner sees.
 */
.btn-primary,
#login-form .btn,
.box-login .btn {
    background-color: var(--sps-primary);
    border-color: var(--sps-primary-dark);
    color: #fff;
}

#login-form .btn:hover,
.box-login .btn:hover {
    background-color: var(--sps-primary-dark);
    border-color: var(--sps-primary-dark);
}

/* The stock mark is coloured by .text-primary; ours is a supplied image, but
   keep this so a fresh install with no company_logo still shows brand colour. */
.box-logo .logo.text-primary { color: var(--sps-primary); }

#form-heading { color: var(--sps-primary); }

.container-login .form-control:focus {
    border-color: var(--sps-secondary);
    box-shadow: 0 0 0 2px rgba(150, 212, 244, 0.45);
}