/* =====================================================================
   Theme variables — POS primary palette
   ---------------------------------------------------------------------
   Single source of truth for the app's brand colours. Loaded AFTER
   style.css so these rules win over the legacy hard-coded blues
   (#428BCA / #5BC0DE). Change a value in :root to re-skin the app.
   ===================================================================== */

/* App font — Roboto, self-hosted (no external dependency, works offline) */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/roboto-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2');
}

:root {
    /* Typography */
    --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

    /* Brand / primary */
    --primary:          #0F766E; /* teal — buttons, active nav, table headers */
    --primary-hover:    #0D5C56; /* hover / pressed */
    --primary-active:   #0A4A45; /* active / darker border */
    --primary-light:    #14B8A6; /* light accent (replaces old #5BC0DE) */
    --primary-contrast: #FFFFFF; /* text/icon colour on primary backgrounds */

    /* Status colours — kept distinct from primary for clear POS feedback */
    --success: #16A34A; /* payment complete, in stock */
    --danger:  #DC2626; /* void, delete, out of stock */
    --warning: #F59E0B; /* low stock, pending */
    --info:    #14B8A6; /* informational accents */

    /* Surfaces & text */
    --bg:        #F8FAFC; /* app canvas */
    --surface:   #FFFFFF; /* cards, panels */
    --text:      #1E293B; /* primary text */
    --text-muted:#64748B; /* secondary text */
    --border:    #DBDEE0; /* dividers / borders */
}

/* =====================================================================
   Re-point legacy primary (#428BCA) usages to var(--primary)
   ===================================================================== */

/* Bootstrap primary button */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary-active);
    color: var(--primary-contrast);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--primary-hover);
    border-color: var(--primary-active);
    color: var(--primary-contrast);
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary-active);
    opacity: .65;
}

/* Light-accent button (old #5BC0DE info) */
.btn-info {
    background-color: var(--primary-light);
    border-color: var(--primary-light);
    color: var(--primary-contrast);
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    background-color: var(--primary);
    border-color: var(--primary);
}

/* Table primary header rows */
.table > thead:first-child > tr:first-child > th,
.table > thead:first-child > tr:first-child > td,
.table-striped thead tr.primary:nth-child(odd) th {
    background-color: var(--primary);
    color: var(--primary-contrast);
    border-color: var(--primary-active);
}

/* Active main-menu items */
.nav.main-menu > li.active > a,
#sidebar-left.minified .sidebar-nav > ul > li.active > a .text {
    background: var(--primary);
    border-color: var(--primary);
}
.nav.main-menu > li > ul > li.active > a,
.nav.main-menu > li > ul > li > ul > li.active > a,
.nav.main-menu > li > ul > li > ul > li > ul > li.active > a,
#sidebar-left.minified .sidebar-nav > ul > li.active > li > a {
    background: var(--primary-light);
    border-color: var(--primary-light);
}

/* Active tab dropdown item */
.nav-tabs .dropdown-menu > li.active > a {
    background: var(--primary);
    color: var(--primary-contrast);
}

/* Section legends */
legend.scheduler-border {
    color: var(--primary);
}

/* Utility colour classes */
.blue       { color: var(--primary) !important; }
.lightBlue  { color: var(--primary-light) !important; }
.bblue      { background: var(--primary) !important; }
.blightBlue { background: var(--primary-light) !important; }

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

/* Bootstrap contextual primary helpers */
.text-primary  { color: var(--primary) !important; }
.bg-primary    { background-color: var(--primary) !important; color: var(--primary-contrast); }
.label-primary { background-color: var(--primary); }
.panel-primary { border-color: var(--primary); }
.panel-primary > .panel-heading {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast);
}
.progress-bar { background-color: var(--primary); }
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span {
    background-color: var(--primary);
    border-color: var(--primary);
}
.pagination > li > a,
.pagination > li > span { color: var(--primary); }

/* =====================================================================
   Global modern input styling — one consistent control style app-wide.
   Loaded after style.css so these win over `.form-control{border-radius:0
   !important}`. Geometry matches the Products → Add page so every form
   looks the same. Tune --input-* here to restyle inputs everywhere.
   ===================================================================== */
:root {
    --input-radius: 9px;
    --input-height: 40px;
    --input-bg:     #FFFFFF;
}

.form-control,
input[type="text"].form-control,
input[type="number"].form-control,
input[type="email"].form-control,
input[type="password"].form-control,
input[type="tel"].form-control,
input[type="date"].form-control,
input[type="search"].form-control,
select.form-control,
textarea.form-control {
    border-radius: var(--input-radius) !important;
    border: 1px solid var(--border);
    background-color: var(--input-bg);
    box-shadow: none;
    min-height: var(--input-height);
    color: var(--text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea.form-control { min-height: 88px; resize: vertical; }
.form-control::placeholder { color: var(--text-muted); opacity: .8; }
.form-control:hover { border-color: #C3C9CE; }

/* Form focus state */
.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(15,118,110,.14);
}

/* ── Input groups: keep the addon/button seams clean while rounding the
   outer corners (Bootstrap's first/last-child radii are otherwise killed
   by the legacy square rule). ── */
.input-group > .form-control:first-child,
.input-group > .input-group-addon:first-child,
.input-group > .input-group-btn:first-child > .btn {
    border-top-left-radius: var(--input-radius) !important;
    border-bottom-left-radius: var(--input-radius) !important;
}
.input-group > .form-control:last-child,
.input-group > .input-group-addon:last-child,
.input-group > .input-group-btn:last-child > .btn {
    border-top-right-radius: var(--input-radius) !important;
    border-bottom-right-radius: var(--input-radius) !important;
}
.input-group > .form-control:not(:first-child):not(:last-child),
.input-group > .input-group-addon:not(:first-child):not(:last-child),
.input-group > .input-group-btn:not(:first-child):not(:last-child) > .btn {
    border-radius: 0 !important;
}
.input-group-addon {
    border: 1px solid var(--border);
    background-color: var(--bg);
    color: var(--text-muted);
}

/* ── Select2 v3 containers → match the native control geometry ── */
.select2-container.form-control {
    border: none !important; padding: 0 !important; box-shadow: none !important;
    height: auto !important; min-height: 0 !important; background: transparent !important;
}
.select2-container .select2-choice,
.select2-container .select2-choices {
    border: 1px solid var(--border) !important;
    border-radius: var(--input-radius) !important;
    background: var(--input-bg) !important; background-image: none !important;
    box-shadow: none !important; min-height: var(--input-height) !important; color: var(--text);
}
.select2-container .select2-choice {
    height: var(--input-height) !important; line-height: calc(var(--input-height) - 2px) !important;
    padding: 0 26px 0 12px !important;
}
.select2-container .select2-choice .select2-arrow {
    border-left: none !important; background: transparent !important; background-image: none !important;
}
.select2-container.select2-container-active .select2-choice,
.select2-container.select2-container-active .select2-choices,
.select2-dropdown-open .select2-choice {
    border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(15,118,110,.14) !important;
}

/* Loading / progress animation accent (old #5BC0DE keyframe target) */
.progress-striped .progress-bar,
.bar { background-color: var(--primary-light); }

/* =====================================================================
   Typography — apply Roboto app-wide (overrides legacy 'Ubuntu')
   ===================================================================== */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-sans);
}

/* Form controls don't inherit font by default — set explicitly */
input, button, select, textarea,
.form-control, .btn {
    font-family: var(--font-sans);
}

/* NOTE: icon fonts (.fa / .glyphicon) set their own font-family and are
   intentionally left untouched so glyphs keep rendering. */

/* Aligned digits for money / numeric columns */
.text-right, .money, td.text-right, th.text-right {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}