
/* =========================================================
   RELIABIX POS V11.16 — FULL PREMIUM UI
   Visual system based on approved navy/cyan reference.
   Existing layouts, routes and screen scale remain intact.
   ========================================================= */

:root{
  --rb-navy-950:#041c2e;
  --rb-navy-900:#06263d;
  --rb-navy-850:#07324f;
  --rb-navy-800:#0a3d5f;
  --rb-cyan-600:#06afc0;
  --rb-cyan-500:#10c4d0;
  --rb-cyan-400:#3bd7df;
  --rb-cyan-100:#e6fbfd;
  --rb-blue-100:#eaf6ff;
  --rb-bg:#f4f9fc;
  --rb-surface:#ffffff;
  --rb-border:#d9e8f1;
  --rb-text:#082b4b;
  --rb-muted:#6b83a0;
  --rb-green:#16ad70;
  --rb-red:#e82843;
  --rb-shadow:0 8px 28px rgba(7,48,76,.055);
}

/* Core shell */
html,body{background:var(--rb-bg)!important;color:var(--rb-text)!important}
body{
  font-family:Inter,"Segoe UI",Arial,sans-serif!important;
  background:
    radial-gradient(circle at 80% 0,rgba(16,196,208,.045),transparent 30%),
    linear-gradient(180deg,#f8fcfe 0%,#f2f8fb 100%)!important;
}
.content{
  background:transparent!important;
}
a{transition:all .18s ease}
h1,h2,h3,h4,b,strong{color:var(--rb-text)}
.muted,.premium-title p,.page-title p{color:var(--rb-muted)!important}

/* Sidebar — strong but refined */
.sidebar{
  background:linear-gradient(180deg,var(--rb-navy-950) 0%,var(--rb-navy-900) 58%,#073756 100%)!important;
  border-right:1px solid rgba(12,82,115,.45)!important;
  box-shadow:14px 0 38px rgba(4,28,46,.08)!important;
}
.sidebar:after{
  opacity:.72!important;
  background:
    linear-gradient(135deg,transparent 39%,rgba(8,159,192,.18) 40% 52%,transparent 53%),
    linear-gradient(45deg,transparent 43%,rgba(6,92,145,.28) 44% 56%,transparent 57%)!important;
}
.reference-brand{
  height:86px!important;
  padding:14px 22px 10px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  overflow:hidden!important;
  background:rgba(3,23,38,.16)!important;
  border-bottom:1px solid rgba(255,255,255,.045)!important;
}
.reference-wordmark.exact-wordmark{
  width:164px!important;
  height:54px!important;
  object-fit:contain!important;
  object-position:left center!important;
  mix-blend-mode:normal!important;
  filter:none!important;
  transform:none!important;
}
.main-nav{padding-top:14px!important}
.main-nav a{
  min-height:42px!important;
  color:#d8eff6!important;
  font-weight:600!important;
  font-size:13px!important;
  border-radius:9px!important;
  letter-spacing:-.1px;
}
.main-nav a span{
  color:#63d8e5!important;
  opacity:.95;
}
.main-nav a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.065)!important;
  transform:translateX(1px);
}
.main-nav a.active,.main-nav .nav-parent.active{
  color:#fff!important;
  background:linear-gradient(100deg,#12c5d1 0%,#08aabe 100%)!important;
  box-shadow:0 8px 20px rgba(4,179,195,.24)!important;
}
.main-nav a.active span,.main-nav .nav-parent.active span{color:#fff!important}
.subnav{
  margin-left:20px!important;
  border-left:1px solid rgba(87,206,220,.22)!important;
}
.subnav a{
  min-height:32px!important;
  color:#a9cfdc!important;
  font-size:11px!important;
  padding-top:7px!important;
  padding-bottom:7px!important;
}
.subnav a.active{
  background:rgba(18,197,209,.13)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.premium-support-footer{
  left:17px!important;right:17px!important;bottom:15px!important;
  z-index:3!important;
  min-height:60px!important;
  padding:12px 6px!important;
  border:0!important;
  border-top:1px solid rgba(255,255,255,.17)!important;
  border-radius:0!important;
  background:transparent!important;
  display:flex!important;
  align-items:center!important;
  gap:11px!important;
  color:#fff!important;
}
.premium-support-footer .support-icon{
  width:30px;height:30px;border:2px solid #36d8e0;border-radius:50%;
  display:grid;place-items:center;color:#36d8e0;font-size:10px;
}
.premium-support-footer b{display:block;color:#fff!important;font-size:11px}
.premium-support-footer small{
  display:block;color:#a7d6e2!important;font-size:6.5px!important;
  margin-top:4px;letter-spacing:1.5px
}

/* Top bar */
.topbar{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid var(--rb-border)!important;
  box-shadow:0 4px 18px rgba(8,43,75,.025)!important;
}
.store-pill{
  background:#fff!important;
  border:1px solid var(--rb-border)!important;
  border-radius:10px!important;
  padding:8px 13px!important;
  box-shadow:0 3px 12px rgba(8,43,75,.025)!important;
}
.store-pill>span:first-child{color:var(--rb-cyan-600)!important}
.online{
  background:#e7fbf3!important;
  color:#149467!important;
  border:1px solid #d8f6e9!important;
}
.avatar{
  background:#083b67!important;color:#fff!important;
  box-shadow:0 4px 12px rgba(8,59,103,.16)!important;
}
.logout{color:#008da4!important}
.bell{color:#099fb1!important}

/* Page headings */
.page-title,.premium-title,.dash-heading-row{
  margin-bottom:14px!important;
}
.page-title h1,.premium-title h1,.dash-heading-row h1{
  color:#061e38!important;
  font-weight:800!important;
  letter-spacing:-.75px!important;
}
.eyebrow{
  color:#5c7997!important;
  letter-spacing:2.1px!important;
}

/* Global cards and panels */
.card,.premium-card,.dash-card,.dash-kpi,.pos-products,.pos-cart,
.metric-card,.summary-card,.settings-card,.report-card,.branch-card{
  background:rgba(255,255,255,.985)!important;
  border:1px solid var(--rb-border)!important;
  box-shadow:var(--rb-shadow)!important;
}
.card,.premium-card,.dash-card{
  border-radius:13px!important;
}
.card-title h2,.dash-card-head h2,.section-title{
  color:#082d50!important;
}
.welcome-chip{
  background:linear-gradient(105deg,#ecfaff 0%,#dff7fb 100%)!important;
  border:1px solid #cdeaf3!important;
}

/* KPI cards */
.dash-kpi{
  border-radius:13px!important;
  box-shadow:0 6px 22px rgba(7,48,76,.045)!important;
}
.dash-kpi:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(7,48,76,.07)!important;
}
.dash-kpi small{color:#5d7899!important}
.dash-kpi strong{color:#071f3d!important}
.kpi-sales .dash-kpi-icon{background:#d8fbf4!important;color:#0ca779!important}
.kpi-trans .dash-kpi-icon{background:#e7f4ff!important;color:#0c79bd!important}
.kpi-customer .dash-kpi-icon{background:#def2ff!important;color:#1388d1!important}
.kpi-alert .dash-kpi-icon{background:#ffe3e7!important;color:#e82c47!important}
.kpi-shift .dash-kpi-icon{background:#e0f8ed!important;color:#0aa76a!important}

/* Charts/tables */
.chart-gridline{border-top-color:#d8e8f0!important}
.sales-svg circle{filter:drop-shadow(0 2px 3px rgba(4,170,200,.16))}
.top-product-table,table{
  border-color:#e0ebf2!important;
}
th{
  background:#f0f7fb!important;
  color:#244b72!important;
  font-weight:700!important;
}
td{color:#173d62!important}
tr:hover td{background:#fbfdff}
.status-chip.ok,.badge.green{
  background:#e5f8ef!important;color:#0a8c5b!important
}
.status-chip.off,.badge.red{
  background:#ffe9ec!important;color:#cf2440!important
}

/* Buttons and form controls */
.btn,.icon-btn{
  border-radius:9px!important;
}
.btn-primary,.complete{
  background:linear-gradient(135deg,#12c4cf 0%,#079eb4 100%)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 7px 18px rgba(7,166,184,.16)!important;
}
.btn-primary:hover,.complete:hover{
  background:linear-gradient(135deg,#09b7c4,#078ca7)!important;
  transform:translateY(-1px);
}
input,select,textarea{
  border-color:#d7e6ef!important;
  color:#123b61!important;
  background:#fff!important;
}
input:focus,select:focus,textarea:focus{
  border-color:#18bdc9!important;
  box-shadow:0 0 0 3px rgba(24,189,201,.11)!important;
}

/* Quick actions */
.quick-action-grid{gap:9px!important}
.qa{
  border:1px solid rgba(31,104,144,.055)!important;
  box-shadow:0 4px 14px rgba(7,48,76,.02);
  transition:.18s ease;
}
.qa:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(7,48,76,.06)}
.qa-teal{background:linear-gradient(100deg,#e7fbf7,#dff8f5)!important}
.qa-blue{background:linear-gradient(100deg,#edf8ff,#e3f2fc)!important}
.qa-orange{background:linear-gradient(100deg,#fff7e8,#fff0d2)!important}
.qa-purple,.qa-violet{background:linear-gradient(100deg,#f4efff,#eee4ff)!important}
.qa-red{background:linear-gradient(100deg,#fff1f3,#ffe7eb)!important}
.qa-green{background:linear-gradient(100deg,#ecfaef,#e2f6e8)!important}
.qa-cyan{background:linear-gradient(100deg,#eafaff,#ddf5fb)!important}

/* POS screen */
.pos-reference-head h1{color:#061f3c!important}
.pos-reference-search .search-wrap,.ref-scan-btn{
  border-color:#d5e6ef!important;
  box-shadow:0 5px 17px rgba(7,48,76,.035)!important;
}
.ref-scan-btn:hover{border-color:#16bdc9!important;color:#078ba3!important}
.ref-kpis .kpi{
  border:1px solid var(--rb-border)!important;
  box-shadow:0 6px 20px rgba(7,48,76,.04)!important;
}
.ref-brand-banner{
  background:linear-gradient(115deg,#06213a 0%,#084665 62%,#08aebd 100%)!important;
}
.catalog-toolbar{
  border-bottom:1px solid #e6eff4;
  margin-bottom:9px;
}
.premium-pos .cat{
  color:#375675!important;
  border:1px solid #e0ebf1!important;
  background:#f7fafc!important;
}
.premium-pos .cat.active{
  color:#fff!important;
  background:linear-gradient(135deg,#14c4ce,#08a6b9)!important;
}
.premium-pos .product{
  background:#fff!important;
  border:1px solid #dce9f0!important;
  box-shadow:0 4px 15px rgba(7,48,76,.028)!important;
}
.premium-pos .product:hover{
  border-color:#81dbe2!important;
  box-shadow:0 9px 24px rgba(7,156,178,.08)!important;
  transform:translateY(-1px);
}
.product-visual{background:linear-gradient(180deg,#fff,#f7fbfd)!important}
.premium-pos .price{color:#04aabc!important}
.add-circle{
  background:#e6fafd!important;color:#05aab9!important;
  border:1px solid #d8f3f7;
}
.cart-head{border-bottom-color:#deebf2!important}
.clear-btn{background:#eafafd!important;color:#0698aa!important}
.order-pill.active{
  border-color:#10bdc9!important;color:#068fa2!important;background:#edfcfd!important
}
.premium-pos .pay.selected{
  background:linear-gradient(135deg,#12c5cf,#079eae)!important;
  color:#fff!important;
  border-color:#079eae!important;
}

/* Product / inventory / purchasing / reports management */
.toolbar,.filterbar,.report-filter,.actions-row{
  background:transparent!important;
}
.icon-btn{
  border:1px solid #d9e7ef!important;
  background:#f8fbfd!important;
  color:#215078!important;
}
.icon-btn:hover{background:#e9f9fc!important;color:#0495a8!important}
.product-list-thumb{
  background:#f6fbfd!important;
  border-color:#d8e9ef!important;
}
.details-panel{
  background:linear-gradient(180deg,#fff,#fbfdfe)!important;
}
.detail-list>div{
  border-bottom-color:#e4eef3!important;
}
.status-chip{
  border:1px solid transparent;
}

/* Modals */
.modal-card,.camera-card{
  border:1px solid #d6e6ee!important;
  box-shadow:0 24px 70px rgba(2,34,55,.18)!important;
}
.modal-head{
  border-bottom:1px solid #e0ebf1!important;
}
.modal-backdrop,.modal{
  backdrop-filter:blur(4px);
}

/* Login — cleaner first-impression screen */
.login-content{
  background:
    radial-gradient(circle at 50% 28%,rgba(11,183,200,.11),transparent 28%),
    linear-gradient(135deg,#041d30 0%,#062e48 58%,#06445f 100%)!important;
}
.login-card{
  width:390px!important;
  padding:0 30px 30px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:0 32px 85px rgba(0,18,30,.30)!important;
}
.login-logo,.login-logo.branded-login-logo{
  margin:0 -30px 26px!important;
  min-height:132px!important;
  padding:20px 28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(115deg,#041c2f,#073752)!important;
  border-bottom:4px solid #16c7d1!important;
}
.login-logo img,.login-logo.branded-login-logo img{
  width:245px!important;
  height:82px!important;
  object-fit:contain!important;
  filter:none!important;
}
.login-card h2{
  color:#062744!important;
  font-size:23px!important;
  letter-spacing:-.4px;
}
.login-card label{color:#0c3a5c!important;font-weight:700!important}
.login-card input{
  border-radius:10px!important;
  background:#fbfdfe!important;
}

/* Receipt */
.receipt{
  border-color:#d7e5ec!important;
  box-shadow:0 8px 26px rgba(6,44,70,.08);
}

/* Scrollbars for admin/product pages */
*{scrollbar-width:thin;scrollbar-color:#a8c8d8 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#a8c8d8;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:#82afc2}
::-webkit-scrollbar-track{background:transparent}

/* Retain current sizing / responsive behavior */

/* ===== V11.17 Multi-country / regional tax setup ===== */
.regional-preset-bar{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid #dbe9f1;border-radius:12px;background:#f8fcfe}.regional-preset-bar>span{font-weight:800;color:#173f64;padding-top:7px}.regional-preset-group{display:flex;align-items:center;gap:7px;padding:6px 8px;background:#fff;border:1px solid #e3edf3;border-radius:9px}.regional-preset-group b{font-size:10px;min-width:80px}.regional-preset-group form{display:flex;gap:5px}.regional-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.regional-card{padding:15px}.country-chip{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:#e7fafd;color:#078ba0;font-size:9px;font-weight:800}.regional-switches{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 12px}.currency-summary-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}.currency-summary-chip{display:flex;flex-direction:column;gap:2px;padding:8px 11px;border:1px solid #d9e8f1;border-radius:9px;background:#f8fcfe}.currency-summary-chip b{font-size:11px}.currency-summary-chip small{font-size:8px;color:#6b83a0}.tax-row{display:flex;justify-content:space-between;gap:8px;color:#315776}.tax-row b{color:#0b5368}@media(max-width:1050px){.regional-settings-grid{grid-template-columns:1fr}.regional-switches{grid-template-columns:1fr}}

.pos-tax-chip{background:#e8fbfd!important;color:#078c9e!important;border:1px solid #cdeef2!important;border-radius:999px!important;padding:5px 8px!important;font-style:normal!important;font-size:8px!important;font-weight:800!important}
