/*
 * SYC-POS theme "Midnight & Gold" (2026-10-17).
 *
 * Loaded LAST, after custom-default.css and syc-brand.css. It only restyles - no markup and
 * no behaviour - so removing its <link> puts the previous look back exactly.
 *
 * Two jobs:
 *  1. remove every trace of the stock purple (#7c5cc4 / #d6deff) - custom-default.css paints
 *     46 rules with it, and an installation without syc-brand.css shows all of them;
 *  2. one premium palette: deep midnight for structure, a restrained gold for accents.
 *
 * Payment buttons keep their MEANING in colour (cash green, cancel red, draft gold): a cashier
 * reads those by colour all day. They are one family now - same size, radius, white text.
 */
:root {
  --theme-color: #C8A24A;
  --primary-bg-color: #F6F1E3;

  --m-ink: #0F172A;
  --m-night: #0B1324;
  --m-night-2: #121D34;
  --m-navy: #1B2A47;
  --m-navy-2: #26375A;
  --m-gold: #C8A24A;
  --m-gold-2: #E3C77E;
  --m-gold-dark: #9A7A2E;
  --m-gold-pale: #F6F1E3;
  --m-canvas: #F4F5F7;
  --m-card: #FFFFFF;
  --m-line: #E5E7EB;
  --m-muted: #6B7280;

  --m-green: #0F8A5F;
  --m-red: #B42318;
  --m-blue: #1D4ED8;
  --m-teal: #0F766E;
  --m-slate: #374151;

  --m-radius: 10px;
  --m-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 4px 12px rgba(15, 23, 42, .06);
  --m-shadow-hover: 0 8px 20px rgba(15, 23, 42, .16);
}

body { font-family: 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif; color: var(--m-ink); }
body:not(.dark-mode), body:not(.dark-mode) .page { background: var(--m-canvas); }
a, .page-link, .dripicons-question, .bootstrap-select .btn-link, .checkbox label::after { color: var(--m-navy); }
a:hover { color: var(--m-gold-dark); }
::selection { background: var(--m-gold-2); color: var(--m-ink); }

/* ================================================================ side menu */
nav.side-navbar {
  background: linear-gradient(180deg, var(--m-night) 0%, var(--m-night-2) 60%, var(--m-navy) 100%) !important;
  box-shadow: 2px 0 16px rgba(11, 19, 36, .35);
}
.side-navbar .sidenav-header,
.side-navbar .brand-big, .side-navbar .brand-small {
  background: var(--m-night) !important;
  border-bottom: 1px solid rgba(200, 162, 74, .25) !important;
}
nav.side-navbar .side-menu > li > a, nav.side-navbar .side-menu a { color: rgba(226, 232, 240, .78) !important; }
nav.side-navbar .side-menu a:hover, nav.side-navbar .side-menu a:focus { color: #fff !important; background: rgba(200, 162, 74, .10) !important; }
nav.side-navbar .side-menu a[aria-expanded="true"], nav.side-navbar .side-menu li.active > a,
.side-navbar li.active > a, .side-navbar li a[aria-expanded=true] {
  color: #fff !important;
  background: rgba(200, 162, 74, .16) !important;
  box-shadow: inset 3px 0 0 var(--m-gold);
}
nav.side-navbar .side-menu i, .side-navbar li a i { color: var(--m-gold) !important; }
nav.side-navbar .side-menu ul { background: rgba(0, 0, 0, .22) !important; }
nav.side-navbar .side-menu ul li a { color: rgba(226, 232, 240, .62) !important; }
nav.side-navbar .side-menu ul li.active > a, nav.side-navbar .side-menu ul li a:hover { color: var(--m-gold-2) !important; background: transparent !important; box-shadow: none; }
nav.side-navbar .sidenav-heading { color: rgba(200, 162, 74, .7) !important; letter-spacing: 1px; }
.dark-mode .side-navbar li ul { border-color: rgba(200, 162, 74, .3); }

/* ================================================================ top bar */
nav.navbar { background: #fff !important; border-bottom: 1px solid var(--m-line); box-shadow: 0 1px 8px rgba(15, 23, 42, .05); }
nav.navbar .nav-item a i, nav.navbar i { color: var(--m-navy) !important; }
nav.navbar .nav-item a:hover i { color: var(--m-gold-dark) !important; }
nav.navbar a.menu-btn { border: 1px solid var(--m-line); color: var(--m-navy); border-radius: 10px; }
nav.navbar a.menu-btn:hover { background: var(--m-night); border-color: var(--m-night); color: #fff; }
.brand-text h3 { color: var(--m-navy); }
.btn-pos { border: 1px solid var(--m-gold) !important; border-radius: 10px !important; }
.btn-pos i, .btn-pos span { color: var(--m-gold-dark) !important; }
.btn-pos:hover { background-color: var(--m-gold) !important; }
.btn-pos:hover i, .btn-pos:hover span { color: var(--m-night) !important; }

/* ================================================================ buttons */
.btn { border-radius: var(--m-radius); font-weight: 600; letter-spacing: .15px;
       transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease, border-color .15s ease, color .15s ease; }
.btn:not(.btn-link):hover { box-shadow: var(--m-shadow-hover); }
.btn:not(.btn-link):active { transform: translateY(1px); box-shadow: none; }
.btn:focus, .btn.focus { box-shadow: 0 0 0 3px rgba(200, 162, 74, .35) !important; }

.btn-primary, .btn-primary:focus, .btn-primary.disabled, .btn-primary:disabled,
.btn-primary:not(:disabled):not(.disabled):active {
  background: linear-gradient(135deg, var(--m-night-2) 0%, var(--m-navy) 100%) !important;
  border-color: var(--m-night-2) !important; color: #fff !important;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--m-night) 0%, var(--m-night-2) 100%) !important; border-color: var(--m-night) !important; color: var(--m-gold-2) !important; }
.btn-primary.active { background: transparent !important; border: 2px solid var(--m-navy) !important; color: var(--m-navy) !important; }
.btn-info { background: var(--m-navy-2) !important; border-color: var(--m-navy-2) !important; color: #fff !important; }
.btn-info:hover { background: var(--m-navy) !important; border-color: var(--m-navy) !important; }
.btn-success { background: var(--m-green) !important; border-color: var(--m-green) !important; color: #fff !important; }
.btn-success:hover { background: #0B6E4B !important; border-color: #0B6E4B !important; }
.btn-danger { background: var(--m-red) !important; border-color: var(--m-red) !important; color: #fff !important; }
.btn-danger:hover { background: #912018 !important; border-color: #912018 !important; }
.btn-warning { background: var(--m-gold) !important; border-color: var(--m-gold) !important; color: var(--m-night) !important; }
.btn-warning:hover { background: var(--m-gold-dark) !important; border-color: var(--m-gold-dark) !important; color: #fff !important; }
.btn-secondary { background: var(--m-slate) !important; border-color: var(--m-slate) !important; color: #fff !important; }
.btn-default, .btn.btn-default, .btn.btn-default:focus, .btn-light {
  background: #fff !important; border: 1px solid var(--m-line) !important; color: var(--m-ink) !important;
}
.btn-default:hover, .btn.btn-default:hover, .btn-light:hover { border-color: var(--m-gold) !important; color: var(--m-gold-dark) !important; }
.btn-outline-primary, .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: var(--m-navy) !important; border-color: var(--m-navy) !important; background: transparent !important; }
.btn-outline-primary:hover, .btn-outline-primary.active,
.btn-outline-primary:not([disabled]):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
  background: var(--m-navy) !important; border-color: var(--m-navy) !important; color: #fff !important;
}
.btn-link, .btn-link:hover, .btn-link:focus { color: var(--m-navy) !important; }

/* the big "add" buttons at the top of list pages: gold, so the main action is obvious */
.add-product-btn.btn-info, a.btn.btn-info[href*="create"] {
  background: linear-gradient(135deg, var(--m-gold) 0%, var(--m-gold-2) 100%) !important;
  border-color: var(--m-gold) !important; color: var(--m-night) !important;
}

/* ================================================================ purple leftovers */
.bg-primary, .badge-primary, .page-item.active .page-link,
.dropdown-item.active, .dropdown-item:active, .nav-pills .nav-link.active, .nav-pills .show > .nav-link,
.statistics .user-activity .progress .progress-bar.bg-primary,
.daterangepicker .custom-range-buttons button.apply-btn,
.buttons-collection, .dt-button-collection.dropdown-menu {
  background: var(--m-navy) !important; border-color: var(--m-navy) !important; color: #fff;
}
.text-primary { color: var(--m-navy) !important; }
.border-primary { border-color: var(--m-navy) !important; }
.blockquote { border-left-color: var(--m-gold); }
.dashboard-counts .count-title i, .statistics .user-activity .page-statistics strong, .gmpc { color: var(--m-gold-dark) !important; }
.details-header { color: var(--m-navy); }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { color: var(--m-gold-dark); }
.nav-tabs .nav-item .nav-link.active, .nav-tabs .nav-link.active { color: var(--m-navy); border-color: transparent; border-bottom: 2px solid var(--m-gold) !important; }
#loader { border-top-color: var(--m-gold) !important; }
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front { background: var(--m-night) !important; border-radius: 12px; box-shadow: var(--m-shadow-hover); }
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active { background: var(--m-gold) !important; color: var(--m-night) !important; border: 0; }
.dropdown-item.selected, .dropdown-menu.edit-options li .btn-link:hover, .dropdown-menu.edit-options li a:hover { background: var(--m-gold-pale) !important; color: var(--m-ink) !important; }
.dropdown-menu.edit-options li .btn-link, .dropdown-menu.edit-options li a { color: var(--m-ink) !important; }
.dropdown-menu { border: 1px solid var(--m-line); border-radius: 12px; box-shadow: var(--m-shadow-hover); }
#product-table td:hover, #product-table tr:first-child td:hover, #product-table tr:last-child td:hover,
#product-table tr td:first-child:hover { border-color: var(--m-gold) !important; color: var(--m-ink) !important; }
#product-table td:hover p { color: var(--m-gold-dark) !important; }
.table.order-list tr td .btn-link, .table.totals tr td .btn-link { color: var(--m-navy) !important; }

/* ================================================================ forms, cards, tables */
.form-control, .bootstrap-select > .dropdown-toggle { border-radius: 8px !important; border-color: var(--m-line); }
.form-control:focus { border: 1px solid var(--m-gold) !important; box-shadow: 0 0 0 3px rgba(200, 162, 74, .18) !important; }
.card, .panel, .box { border: 1px solid var(--m-line); border-radius: 14px; box-shadow: var(--m-shadow); }
.card-header { background: #fff; border-bottom: 1px solid var(--m-line); font-weight: 700; color: var(--m-ink); }
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 60px rgba(11, 19, 36, .35); overflow: hidden; }
.modal-header { background: linear-gradient(135deg, var(--m-night) 0%, var(--m-navy) 100%); border-bottom: 2px solid var(--m-gold); }
.modal-header .modal-title, .modal-header h5 { color: #fff; font-weight: 700; }
.modal-header .close { color: var(--m-gold-2); opacity: .9; text-shadow: none; }
body:not(.dark-mode) table thead th { background: #F8F7F3 !important; color: var(--m-ink) !important; font-weight: 700; border-bottom: 2px solid var(--m-gold-pale) !important; }
body:not(.dark-mode) table.table tbody tr:hover { background: #FBF8EF; }

/* ================================================================ login */
.login-page { background: radial-gradient(1200px 600px at 20% 10%, var(--m-navy) 0%, var(--m-night) 55%, #060B16 100%) !important; }
.login-page .logo { background: linear-gradient(140deg, var(--m-night) 0%, var(--m-navy) 100%) !important; border-bottom: 2px solid var(--m-gold); }
.login-page .btn-primary, .login-page .btn-primary:focus {
  background: linear-gradient(135deg, var(--m-gold) 0%, var(--m-gold-2) 100%) !important;
  border: 0 !important; color: var(--m-night) !important; font-weight: 700;
}
.login-page .btn-primary:hover { background: var(--m-gold-dark) !important; color: #fff !important; }

/* ================================================================ the POS screen */
#pos-layout .pos-form > .payment-form {
  background: var(--m-card); border-radius: 16px; box-shadow: var(--m-shadow); padding: 14px 14px 10px;
}
#pos-layout #lims_productcodeSearch {
  height: 48px; font-size: 1.05rem; padding-left: 16px;
  border: 2px solid var(--m-navy) !important; border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(27, 42, 71, .10);
}
#pos-layout #lims_productcodeSearch:focus { border-color: var(--m-gold) !important; box-shadow: 0 0 0 4px rgba(200, 162, 74, .22) !important; }

#pos-layout #myTable thead tr { background: var(--m-night-2); }
#pos-layout #myTable thead, #pos-layout #myTable thead th { background: var(--m-night-2) !important; color: #fff !important; border: 0 !important; font-weight: 600; }
#pos-layout #myTable thead { border-radius: 10px; overflow: hidden; }
#pos-layout #myTable tbody tr:hover { background: #FBF8EF; }
#pos-layout #myTable .edit-product { color: var(--m-ink) !important; font-weight: 700; }
#pos-layout #myTable .in-stock { color: var(--m-green); font-weight: 700; }
#pos-layout #myTable .minus, #pos-layout #myTable .plus,
.btn-default.minus, .btn-default.plus {
  width: 30px; height: 30px; padding: 0; border-radius: 50% !important;
  background: var(--m-gold-pale) !important; color: var(--m-gold-dark) !important; border: 0 !important; font-weight: 800;
}
#pos-layout #myTable .minus:hover, #pos-layout #myTable .plus:hover { background: var(--m-gold) !important; color: var(--m-night) !important; }
#pos-layout #myTable .qty { border-radius: 8px; text-align: center; font-weight: 700; }
#pos-layout #myTable .ibtnDel { width: 30px; height: 30px; padding: 0; border-radius: 50% !important; background: #FDECEA !important; color: var(--m-red) !important; border: 0 !important; }
#pos-layout #myTable .ibtnDel:hover { background: var(--m-red) !important; color: #fff !important; }

#pos-layout .totals { background: #FAFAF8; border: 1px solid var(--m-line); border-radius: 12px; padding: 8px 12px; }
#pos-layout .totals-title { color: var(--m-muted); font-weight: 600; }

/* grand total */
.payment-amount, #pos-layout .payment-amount {
  background: linear-gradient(135deg, var(--m-night) 0%, var(--m-night-2) 55%, var(--m-navy) 100%) !important;
  border-radius: 14px; border-top: 2px solid var(--m-gold);
  padding: 12px 14px 10px; margin-top: 8px;
  box-shadow: 0 10px 24px rgba(11, 19, 36, .28);
}
.payment-amount h2, #pos-layout .payment-amount h2 { color: #fff !important; font-weight: 800; letter-spacing: .3px; }
#pos-layout .payment-amount h2 *, #pos-layout #grand-total { color: #fff !important; }
#pos-layout .payment-amount h2 .pos-currency-code { color: var(--m-gold-2) !important; }
#pos-layout #pos-currency-breakdown { background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(200, 162, 74, .25) !important; border-radius: 10px; padding: 6px 10px; }
#pos-layout #pos-currency-breakdown, #pos-layout #pos-currency-breakdown * { color: #E5E7EB !important; background: transparent !important; }
#pos-layout #pos-currency-breakdown small { text-transform: uppercase; letter-spacing: .6px; color: var(--m-gold-2) !important; }

#pos-layout .pos-currency-switch { background: rgba(255, 255, 255, .10); border-radius: 999px; padding: 3px; }
#pos-layout .pos-currency-switch .pos-currency-btn { border: 0 !important; border-radius: 999px !important; min-width: 58px; color: #fff !important; background: transparent !important; }
#pos-layout .pos-currency-switch .pos-currency-btn.btn-primary { background: var(--m-gold) !important; color: var(--m-night) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }

/* payment and action buttons: one family */
#pos-layout .payment-btn, #pos-layout #draft-btn, #pos-layout #cancel-btn,
#pos-layout .more-payment-options .btn-custom, #pos-layout .payment-options .btn-custom {
  color: #fff !important; border: 0 !important; border-radius: 12px !important;
  min-height: 48px; padding: 10px 14px !important;
  font-size: .95rem !important; font-weight: 700 !important;
  box-shadow: 0 3px 8px rgba(15, 23, 42, .16);
}
#pos-layout .payment-btn i, #pos-layout #draft-btn i, #pos-layout #cancel-btn i { margin-right: 6px; }
#pos-layout .payment-btn:hover, #pos-layout #draft-btn:hover, #pos-layout #cancel-btn:hover,
#pos-layout .payment-options .btn-custom:hover { transform: translateY(-1px); box-shadow: var(--m-shadow-hover); filter: brightness(1.08); }
#pos-layout #cash-btn             { background: var(--m-green) !important; }
#pos-layout #credit-card-btn      { background: var(--m-blue)  !important; }
#pos-layout #multiple-payment-btn { background: var(--m-navy)  !important; }
#pos-layout #cheque-btn           { background: #0E7490        !important; }
#pos-layout #gift-card-btn        { background: #9F1239        !important; }
#pos-layout #deposit-btn          { background: var(--m-teal)  !important; }
#pos-layout #point-btn            { background: var(--m-teal)  !important; }
#pos-layout #paypal-btn           { background: var(--m-blue)  !important; }
#pos-layout #draft-btn            { background: var(--m-gold)  !important; color: var(--m-night) !important; }
#pos-layout #cancel-btn           { background: var(--m-red)   !important; }
#pos-layout .payment-options .btn-custom,
#pos-layout .more-payment-options .btn-custom:not(.payment-btn):not(#draft-btn):not(#cancel-btn) { background: var(--m-slate) !important; }

/* Category / Brand / Featured */
#pos-layout .product-btns { gap: 8px; }
#pos-layout .product-btns .btn, body.pos-page #category-filter, body.pos-page #brand-filter, body.pos-page #featured-filter {
  margin: 0 !important; height: 44px; border-radius: 12px !important;
  background: #fff !important; color: var(--m-ink) !important; border: 1px solid var(--m-line) !important; box-shadow: var(--m-shadow);
}
#pos-layout .product-btns .btn:hover { background: var(--m-night-2) !important; color: var(--m-gold-2) !important; border-color: var(--m-night-2) !important; }
#pos-layout .load-more { background: #fff !important; color: var(--m-navy) !important; border: 1px dashed var(--m-gold) !important; box-shadow: none; }
#pos-layout .load-more:hover { background: var(--m-gold-pale) !important; }

#pos-layout .filter-window { border-radius: 16px; box-shadow: var(--m-shadow-hover); }
#pos-layout .table-container td { border-radius: 12px; transition: transform .1s ease, box-shadow .15s ease; }
#pos-layout .table-container td:hover { background: #fff; box-shadow: var(--m-shadow-hover); transform: translateY(-2px); cursor: pointer; }

/* dark mode keeps its own palette from syc-brand.css; only the accents change */
body.dark-mode .btn-default, body.dark-mode .btn.btn-default { background: transparent !important; color: #E5E7EB !important; border-color: rgba(255, 255, 255, .18) !important; }

/* ================================================================ purple written inline in the templates */
[style*="color: #7c5cc4"], [style*="color:#7c5cc4"], [style*="color: #733686"], [style*="color:#733686"] { color: var(--m-gold-dark) !important; }
[style*="background-color: #5f27cd"], [style*="background: #6c5ce7"], [style*="background: #7c5cc4"], [style*="background-color: #7c5cc4"] { background: var(--m-navy) !important; color: #fff; }
[style*="solid #7c5cc4"] { border-color: var(--m-gold) !important; }

/* dashboard period buttons: the chosen one must stand out */
.date-btn.active, .btn.btn-default.date-btn.active {
  background: linear-gradient(135deg, var(--m-night-2) 0%, var(--m-navy) 100%) !important;
  border-color: var(--m-night-2) !important; color: var(--m-gold-2) !important;
}

/* the home button in the POS top bar */
nav.navbar a.menu-btn { background: var(--m-night-2) !important; border-color: var(--m-night-2) !important; }
nav.navbar a.menu-btn i { color: var(--m-gold-2) !important; }
nav.navbar a.menu-btn:hover { background: var(--m-gold) !important; border-color: var(--m-gold) !important; }
nav.navbar a.menu-btn:hover i { color: var(--m-night) !important; }