/*
 * SYC-POS brand layer.
 *
 * Loaded LAST, on purpose: it overrides the stock theme rather than editing it,
 * so a theme file can still be replaced wholesale without losing the branding.
 * Every colour here was sampled from the SYC IT Solutions logo itself
 * (#103860 and #105878 are the two most common pixels in its banner gradient,
 * #D8F0F8 the palest) - nothing is invented.
 *
 * One rule kept throughout: the SEMANTIC colours are left alone. Cash stays
 * green, Cancel stays red, warnings stay amber. A cashier reads those by colour
 * a hundred times a day and repainting them to match a brand would cost more
 * than it looks worth.
 */
:root {
  --syc-navy:        #0B2A45;
  --syc-navy-2:      #0E3557;
  --syc-blue:        #103860;
  --syc-blue-mid:    #105878;
  --syc-blue-light:  #1B7FA8;
  --syc-cyan:        #56C5E8;
  --syc-cyan-pale:   #D8F0F8;
  --syc-grey:        #6E6E6E;
  --syc-ink:         #2C3A47;
  --syc-line:        #E3E9EF;
  --syc-canvas:      #F4F7FA;
}

/* ============================================================ login ====== */
.login-page {
  background: linear-gradient(155deg, var(--syc-navy) 0%, var(--syc-blue) 55%, var(--syc-blue-mid) 100%) !important;
  min-height: 100vh;
}
.login-page .form-inner {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(6, 22, 38, .38);
  padding: 42px 38px 34px;
}
/* The mark carries a cyan outer glow drawn for a dark ground; on white that
   glow reads as a grubby rectangle around the logo. Give it the ground it was
   designed for instead of retouching the artwork. */
.login-page .logo {
  margin: -42px -38px 28px;
  padding: 30px 20px 26px;
  background: linear-gradient(140deg, var(--syc-navy), var(--syc-blue));
  border-radius: 14px 14px 0 0;
}
.syc-login-logo {
  width: 200px;
  max-width: 80%;
  height: auto;
  display: inline-block;
}
.login-page .btn-primary,
.login-page .btn-primary:focus {
  background: linear-gradient(135deg, var(--syc-blue) 0%, var(--syc-blue-mid) 100%);
  border: 0;
  border-radius: 8px;
  padding: 11px 0;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 4px 14px rgba(16, 56, 96, .30);
}
.login-page .btn-primary:hover { filter: brightness(1.12); }
.login-page .forgot-pass { color: var(--syc-blue-mid); }
.login-page .forgot-pass:hover { color: var(--syc-blue); }
.login-page .copyrights p { color: rgba(216, 240, 248, .72); }
.login-page .copyrights .external { color: var(--syc-cyan); font-weight: 600; }
.login-page .input-material:focus { border-color: var(--syc-blue-mid); }
.login-page .label-material.active { color: var(--syc-blue-mid); }

/* ============================================================ sidebar ==== */
/* Same reason as the login card: the mark's glow needs a dark ground, and the
   sidebar brand strip is white in the stock theme. */
.side-navbar .brand-big,
.side-navbar .brand-small {
  display: block;
  background: linear-gradient(140deg, var(--syc-navy), var(--syc-blue));
  padding: 14px 10px;
  margin: 0;
}
.side-navbar .brand-big img { width: 130px; height: auto; }
.side-navbar .brand-small img { max-height: 38px; width: auto; }
.side-navbar .brand-big h1,
.side-navbar .brand-small h1 { color: #fff; font-size: 20px; margin: 0; }

nav.side-navbar {
  background: linear-gradient(180deg, var(--syc-navy) 0%, var(--syc-navy-2) 45%, var(--syc-blue) 100%) !important;
  border-right: 0;
  box-shadow: 2px 0 12px rgba(11, 42, 69, .18);
}
nav.side-navbar .side-menu > li > a,
nav.side-navbar .side-menu a {
  color: rgba(216, 240, 248, .82) !important;
  border: 0 !important;
  font-weight: 500;
}
nav.side-navbar .side-menu a:hover,
nav.side-navbar .side-menu a:focus {
  color: #ffffff !important;
  background: rgba(86, 197, 232, .12) !important;
}
nav.side-navbar .side-menu a[aria-expanded="true"],
nav.side-navbar .side-menu li.active > a {
  color: #ffffff !important;
  background: rgba(86, 197, 232, .18) !important;
  box-shadow: inset 3px 0 0 var(--syc-cyan);
}
nav.side-navbar .side-menu i { color: var(--syc-cyan) !important; }
nav.side-navbar .side-menu .collapse a,
nav.side-navbar .side-menu ul li a {
  color: rgba(216, 240, 248, .66) !important;
  font-size: .86em;
}
nav.side-navbar .side-menu ul { background: rgba(0, 0, 0, .16) !important; }
nav.side-navbar .sidenav-heading { color: rgba(216, 240, 248, .45) !important; }

/* ============================================================ chrome ===== */
body { background: var(--syc-canvas); }
.page { background: var(--syc-canvas); }

.btn-primary,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--syc-blue) !important;
  border-color: var(--syc-blue) !important;
  color: #fff !important;
  box-shadow: none;
}
.btn-primary:hover { background: var(--syc-blue-mid) !important; border-color: var(--syc-blue-mid) !important; }
.btn-outline-primary { color: var(--syc-blue) !important; border-color: var(--syc-blue) !important; }
.btn-outline-primary:hover { background: var(--syc-blue) !important; color: #fff !important; }

a { color: var(--syc-blue-mid); }
a:hover { color: var(--syc-blue); }

.card, .panel, .box {
  border: 1px solid var(--syc-line);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(16, 56, 96, .05);
}
.card-header { background: #fff; border-bottom: 1px solid var(--syc-line); font-weight: 600; color: var(--syc-ink); }

table thead th {
  background: #EDF3F8 !important;
  color: var(--syc-blue) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--syc-line) !important;
}
table.table tbody tr:hover { background: rgba(86, 197, 232, .07); }

.form-control:focus {
  border-color: var(--syc-blue-mid);
  box-shadow: 0 0 0 .15rem rgba(16, 88, 120, .15);
}

.page-item.active .page-link { background: var(--syc-blue); border-color: var(--syc-blue); }
.page-link { color: var(--syc-blue-mid); }

.nav-tabs .nav-link.active { color: var(--syc-blue); border-bottom-color: var(--syc-blue); }
.dropdown-item:active, .dropdown-item.active { background: var(--syc-blue); }

/* ============================================================ POS ======== */
/* The till is the screen someone stares at all day. Keep it calm and keep the
   payment buttons reading by colour, not by label alone. */
body.pos-page { background: var(--syc-canvas); }
body.pos-page .card, body.pos-page .well { border-radius: 10px; }

body.pos-page #lims_productcodeSearch {
  border: 2px solid var(--syc-blue-mid) !important;
  border-radius: 8px;
  font-size: 1.05em;
  padding: 10px 14px;
  background: #fff;
}
body.pos-page #lims_productcodeSearch:focus {
  border-color: var(--syc-cyan) !important;
  box-shadow: 0 0 0 .18rem rgba(86, 197, 232, .28) !important;
}

body.pos-page table.order-list thead th {
  background: var(--syc-blue) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}

/* the grand-total strip: the one number the customer asks about */
body.pos-page .grand-total-area,
body.pos-page .well.grand-total,
body.pos-page #grand-total {
  color: var(--syc-blue) !important;
  font-weight: 700;
}

/* category / brand / featured filters - brand them, they are navigation */
body.pos-page #category-filter { background: var(--syc-blue) !important; border-color: var(--syc-blue) !important; }
body.pos-page #brand-filter    { background: var(--syc-blue-mid) !important; border-color: var(--syc-blue-mid) !important; }
body.pos-page #featured-filter { background: var(--syc-blue-light) !important; border-color: var(--syc-blue-light) !important; }

/* payment row: sizes and shape only. The colours stay as they are, because a
   cashier hits Cash and Cancel by colour and position, not by reading. */
body.pos-page .payment-btn,
body.pos-page #draft-btn,
body.pos-page #cancel-btn {
  border-radius: 8px;
  font-weight: 600;
  padding: 9px 14px;
}

/* ============================================================ misc ======= */
.brand-small img, .navbar-brand img { max-height: 40px; width: auto; }
.alert-warning { border-left: 4px solid #d39e00; }
.alert-danger  { border-left: 4px solid #dc3545; }
.alert-success { border-left: 4px solid #28a745; }

/* ---------- the bits the first pass missed ----------
   The stock theme paints its accent onto .btn-link and onto the bootstrap-select
   toggles, not only onto .btn-primary, so the top row of the till stayed purple
   while everything around it had changed. Found by looking at the screen, not by
   reading the stylesheet. */
.btn-link,
.btn-link:hover,
.btn-link:focus { color: var(--syc-blue-mid) !important; }

.bootstrap-select > .btn.dropdown-toggle,
.bootstrap-select > .btn.dropdown-toggle:focus,
.dropdown-toggle.btn-link {
  color: var(--syc-blue-mid) !important;
  border-color: var(--syc-line) !important;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a {
  background: rgba(86, 197, 232, .14) !important;
  color: var(--syc-blue) !important;
}

/* the small square actions in the POS header row */
body.pos-page .btn-custom,
body.pos-page .btn.btn-secondary,
body.pos-page .btn-group > .btn.btn-outline-secondary {
  border-color: var(--syc-line) !important;
  color: var(--syc-blue-mid) !important;
}

/* anything still carrying the old accent as an inline-ish utility */
.text-primary { color: var(--syc-blue) !important; }
.bg-primary   { background-color: var(--syc-blue) !important; }
.border-primary { border-color: var(--syc-blue) !important; }
.badge-primary { background-color: var(--syc-blue) !important; }

/* the header bar above the page */
nav.navbar { background: #ffffff; border-bottom: 1px solid var(--syc-line); }
nav.navbar a, nav.navbar .nav-link { color: var(--syc-ink) !important; }
nav.navbar i { color: var(--syc-blue-mid) !important; }

/* ==========================================================================
   DARK MODE
   --------------------------------------------------------------------------
   The stock dark mode is 33 selectors and it does not reach the till. Looked at
   on the real screen: the warehouse and customer names were dark text on a dark
   field and could not be read at all, the totals row was barely visible, and
   "Grand Total" sat on a pale lavender bar left over from the light theme -
   in the middle of a dark screen. A cashier could not see who they were selling
   to, or what the total was.

   Written against a deep navy rather than black: it is the brand ground, and on
   a till that is lit for ten hours straight, black with white text is harsher
   than it looks in a screenshot. The one thing deliberately made brightest on
   the screen is the grand total, because that is the number the customer asks
   for and the cashier reads out.
   ========================================================================== */
body.dark-mode {
  --syc-d-bg:     #0B2A45;   /* the ground */
  --syc-d-panel:  #11364F;   /* cards, table rows */
  --syc-d-panel2: #16425F;   /* raised: headers, hover */
  --syc-d-line:   #1E4A66;   /* borders */
  --syc-d-text:   #E8F1F7;   /* primary text */
  --syc-d-dim:    #9FB3C4;   /* labels, secondary */
  background-color: var(--syc-d-bg) !important;
  color: var(--syc-d-text) !important;
}

/* ---- surfaces ---- */
body.dark-mode .page,
body.dark-mode .content-inner { background: var(--syc-d-bg) !important; }
body.dark-mode .card,
body.dark-mode .panel,
body.dark-mode .box,
body.dark-mode .well,
body.dark-mode .modal-content {
  background: var(--syc-d-panel) !important;
  border-color: var(--syc-d-line) !important;
  color: var(--syc-d-text) !important;
}
body.dark-mode .card-header,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  background: var(--syc-d-panel2) !important;
  border-color: var(--syc-d-line) !important;
  color: var(--syc-d-text) !important;
}
body.dark-mode .modal-header .close { color: var(--syc-d-text) !important; opacity: .8; }

/* ---- text: the part the stock theme missed ---- */
body.dark-mode,
body.dark-mode p, body.dark-mode span, body.dark-mode label,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6,
body.dark-mode td, body.dark-mode th, body.dark-mode strong, body.dark-mode b {
  color: var(--syc-d-text);
}
body.dark-mode .text-muted,
body.dark-mode small,
body.dark-mode .form-group > label { color: var(--syc-d-dim) !important; }
body.dark-mode a { color: var(--syc-cyan); }
body.dark-mode a:hover { color: #8FDCF5; }

/* ---- tables ---- */
body.dark-mode table { color: var(--syc-d-text) !important; }
body.dark-mode table thead th {
  background: var(--syc-d-panel2) !important;
  color: var(--syc-d-text) !important;
  border-bottom-color: var(--syc-d-line) !important;
}
body.dark-mode table td,
body.dark-mode table th { border-color: var(--syc-d-line) !important; }
body.dark-mode .table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255,.028); }
body.dark-mode table.table tbody tr:hover { background: rgba(86,197,232,.10) !important; }

/* ---- inputs: unreadable in the stock dark mode ---- */
body.dark-mode .form-control,
body.dark-mode input[type=text],
body.dark-mode input[type=number],
body.dark-mode input[type=date],
body.dark-mode input[type=password],
body.dark-mode textarea,
body.dark-mode select {
  background: #0E3149 !important;
  border-color: var(--syc-d-line) !important;
  color: var(--syc-d-text) !important;
}
body.dark-mode .form-control::placeholder { color: #7F94A6 !important; }
body.dark-mode .form-control:focus {
  border-color: var(--syc-cyan) !important;
  box-shadow: 0 0 0 .15rem rgba(86,197,232,.22) !important;
}
/* the bootstrap-select toggles carry the warehouse / biller / customer names */
body.dark-mode .bootstrap-select > .btn.dropdown-toggle,
body.dark-mode .btn-link,
body.dark-mode .dropdown-toggle.btn-link {
  background: #0E3149 !important;
  color: var(--syc-d-text) !important;
  border-color: var(--syc-d-line) !important;
}
body.dark-mode .dropdown-menu {
  background: var(--syc-d-panel2) !important;
  border-color: var(--syc-d-line) !important;
}
body.dark-mode .dropdown-menu li a,
body.dark-mode .dropdown-item { color: var(--syc-d-text) !important; }
body.dark-mode .dropdown-menu li a:hover,
body.dark-mode .dropdown-item:hover { background: rgba(86,197,232,.16) !important; }

/* ---- top bar; the sidebar keeps its gradient, it already suits a dark screen */
body.dark-mode nav.navbar { background: var(--syc-d-panel) !important; border-bottom-color: var(--syc-d-line) !important; }
body.dark-mode nav.navbar a, body.dark-mode nav.navbar .nav-link { color: var(--syc-d-text) !important; }
body.dark-mode nav.navbar i { color: var(--syc-cyan) !important; }

/* ========================== the till, specifically ======================== */
body.pos-page.dark-mode { background: var(--syc-d-bg) !important; }

/* the scan box is where the eye goes first */
body.pos-page.dark-mode #lims_productcodeSearch {
  background: #0E3149 !important;
  border: 2px solid var(--syc-blue-light) !important;
  color: var(--syc-d-text) !important;
}
body.pos-page.dark-mode #lims_productcodeSearch:focus {
  border-color: var(--syc-cyan) !important;
  box-shadow: 0 0 0 .2rem rgba(86,197,232,.30) !important;
}

/* the cart */
body.pos-page.dark-mode table.order-list thead th {
  background: var(--syc-blue-mid) !important;
  color: #fff !important;
}
body.pos-page.dark-mode table.order-list tbody tr { background: var(--syc-d-panel) !important; }
body.pos-page.dark-mode table.order-list tbody tr:nth-child(odd) { background: #0F3049 !important; }
body.pos-page.dark-mode table.order-list td,
body.pos-page.dark-mode table.order-list td * { color: var(--syc-d-text) !important; }

/* the totals block - every figure here was washed out */
body.pos-page.dark-mode .well,
body.pos-page.dark-mode .totals,
body.pos-page.dark-mode .table-total,
body.pos-page.dark-mode #totals {
  background: var(--syc-d-panel) !important;
  color: var(--syc-d-text) !important;
  border-color: var(--syc-d-line) !important;
}

/* GRAND TOTAL: the brightest thing on the screen, on purpose.
   In the stock dark mode this was purple text on a pale lavender bar. */
body.pos-page.dark-mode .grand-total-area,
body.pos-page.dark-mode .well.grand-total,
body.pos-page.dark-mode tr.grand-total,
body.pos-page.dark-mode .grand-total {
  background: linear-gradient(135deg, var(--syc-blue) 0%, var(--syc-blue-mid) 100%) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 8px;
}
body.pos-page.dark-mode .grand-total *,
body.pos-page.dark-mode #grand-total {
  color: #FFFFFF !important;
  font-weight: 700;
}

/* the cash-register and payment modals open over the till */
body.pos-page.dark-mode .modal-content { background: var(--syc-d-panel) !important; }
body.pos-page.dark-mode .modal-backdrop.show { opacity: .68; }

/* payment row: the semantic colours survive, they just need to hold up on navy */
body.pos-page.dark-mode .payment-btn,
body.pos-page.dark-mode #draft-btn,
body.pos-page.dark-mode #cancel-btn { border: 0 !important; font-weight: 600; }
body.pos-page.dark-mode #cash-btn             { background: #1F9D57 !important; color: #fff !important; }
body.pos-page.dark-mode #multiple-payment-btn { background: var(--syc-blue-mid) !important; color: #fff !important; }
body.pos-page.dark-mode #point-btn            { background: #2A7FA3 !important; color: #fff !important; }
body.pos-page.dark-mode #draft-btn            { background: #B8860B !important; color: #fff !important; }
body.pos-page.dark-mode #cancel-btn           { background: #C0392B !important; color: #fff !important; }

/* the product tiles / filter row */
body.pos-page.dark-mode .product-list .product,
body.pos-page.dark-mode .pos-product-box {
  background: var(--syc-d-panel) !important;
  border-color: var(--syc-d-line) !important;
  color: var(--syc-d-text) !important;
}

/* The grand total lives in div.payment-amount, not in anything named
   "grand-total" - found by inspecting the live till, not by reading the blade.
   In the stock dark mode it kept its light-theme lavender (#D6DEFF) and the
   most important number on the screen sat in a pale block. */
body.pos-page.dark-mode .payment-amount {
  background: linear-gradient(135deg, var(--syc-blue) 0%, var(--syc-blue-mid) 100%) !important;
  border: 0 !important;
  border-radius: 8px;
}
body.pos-page.dark-mode .payment-amount,
body.pos-page.dark-mode .payment-amount * { color: #FFFFFF !important; }
body.pos-page.dark-mode .payment-amount h2 { font-weight: 700; }

/* same block in the light theme: give it the brand instead of the lavender */
body.pos-page .payment-amount {
  background: #EDF3F8;
  border: 1px solid var(--syc-line);
  border-radius: 8px;
}
body.pos-page .payment-amount h2 { color: var(--syc-blue); font-weight: 700; }

/* ==========================================================================
   LICENCE HOLDER
   --------------------------------------------------------------------------
   The name the licence was issued to, on the login screen and at the foot of
   the sidebar. Quiet on purpose: it is not a warning to the shop that bought
   it, it is a signature. A copy that reached somebody it was not sold to
   carries the buyer's name on every screen, and the buyer knows that.
   ========================================================================== */
.syc-licensee {
  margin-top: 6px;
  font-size: 11.5px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.62);
}
.syc-licensee strong { color: rgba(255,255,255,.86); font-weight: 600; }

.syc-sidebar-licence {
  margin: 14px 12px 22px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255,255,255,.46);
}
.syc-sidebar-licence span { display: block; text-transform: uppercase; letter-spacing: .7px; font-size: 9.5px; }
.syc-sidebar-licence strong { display: block; color: rgba(255,255,255,.80); font-weight: 600; font-size: 12px; }
.syc-sidebar-licence em { display: block; font-style: normal; color: rgba(255,255,255,.34); font-size: 10px; }

/* The sidebar collapses to icons on a narrow till screen; a name in a 60px
   rail is unreadable noise, so it goes rather than wraps. */
@media (max-width: 991px) {
  .syc-sidebar-licence { display: none; }
}