/* BUILD234 — premium interior UI refresh. Visual-only: no business/data logic changes. */
:root{
  --ui234-green-950:#032b1a;
  --ui234-green-900:#063b24;
  --ui234-green-800:#075b34;
  --ui234-green-700:#087747;
  --ui234-green-600:#0b9156;
  --ui234-green-100:#e9f7ef;
  --ui234-green-050:#f5fbf7;
  --ui234-gold:#e9b433;
  --ui234-gold-soft:#fff6dc;
  --ui234-ink:#10251a;
  --ui234-muted:#63746a;
  --ui234-line:#d9e6dd;
  --ui234-canvas:#eef5f0;
  --ui234-surface:#ffffff;
  --ui234-shadow:0 10px 30px rgba(3,43,26,.08);
  --ui234-shadow-lg:0 18px 50px rgba(3,43,26,.13);
}

/* Authenticated application shell */
#app{
  min-height:100dvh;
  background:
    radial-gradient(circle at 96% 2%,rgba(233,180,51,.10),transparent 25%),
    linear-gradient(180deg,#f8fbf9 0,#eef5f0 100%);
}
#app header{
  min-height:68px;
  padding:9px clamp(14px,2vw,26px)!important;
  border-bottom:1px solid rgba(255,255,255,.11);
  background:linear-gradient(112deg,var(--ui234-green-950) 0%,#064d2d 58%,#087342 100%)!important;
  box-shadow:0 6px 24px rgba(2,33,20,.22)!important;
}
#app header>div:first-child{display:flex;align-items:baseline;gap:8px;min-width:0}
#app header strong{font-size:16px;font-weight:1000;letter-spacing:.25px}
#app header #headerBranchName{font-size:10px!important;font-weight:850;letter-spacing:.8px;opacity:.78;text-transform:uppercase}
#app .headerUser{gap:8px}
#app .networkBadge,
#app .annliemart-pos-clock,
#app #userBadge{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.09);
  border-radius:999px;
  box-shadow:none;
}
#app .networkBadge{min-height:36px;padding:7px 11px}
#app .logoutBtn{
  min-height:38px;
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:11px;
  font-weight:950;
}
#app .logoutBtn:hover{background:rgba(255,255,255,.20);filter:none}

#app main{
  position:relative;
  color:var(--ui234-ink);
}
#app .pageTitle{
  color:var(--ui234-green-950);
  font-weight:1000;
  letter-spacing:-.035em;
}

/* Back office sidebar */
@media(min-width:900px){
  #app:not(:has(.posScreen)){padding-left:238px}
  #app:not(:has(.posScreen)) nav{
    top:68px;
    width:238px;
    padding:18px 12px 22px!important;
    gap:5px!important;
    border-right:1px solid rgba(255,255,255,.07)!important;
    background:linear-gradient(180deg,#052e1d 0%,#073d26 62%,#052b1b 100%)!important;
    box-shadow:9px 0 28px rgba(3,43,26,.10)!important;
  }
  #app:not(:has(.posScreen)) nav:before{
    content:"BACK OFFICE";
    display:block;
    padding:0 12px 11px;
    color:#9bc2aa;
    font-size:9px;
    font-weight:1000;
    letter-spacing:1.5px;
  }
  #app:not(:has(.posScreen)) nav button{
    position:relative;
    min-height:44px!important;
    padding:10px 13px 10px 15px!important;
    border:1px solid transparent!important;
    border-radius:11px!important;
    background:transparent!important;
    color:#dcece3!important;
    font-size:12px!important;
    font-weight:850!important;
    letter-spacing:.01em;
  }
  #app:not(:has(.posScreen)) nav button:before{
    content:"";
    width:5px;height:5px;
    margin-right:10px;
    display:inline-block;
    vertical-align:middle;
    border-radius:50%;
    background:#7eaa91;
    transition:transform .16s ease,background .16s ease;
  }
  #app:not(:has(.posScreen)) nav button:hover{
    background:rgba(255,255,255,.08)!important;
    border-color:rgba(255,255,255,.08)!important;
    color:#fff!important;
    transform:translateX(2px);
    filter:none;
  }
  #app:not(:has(.posScreen)) nav button.active{
    background:linear-gradient(100deg,#0a8d52,#087342)!important;
    border-color:rgba(255,255,255,.12)!important;
    color:#fff!important;
    box-shadow:0 8px 18px rgba(0,0,0,.18)!important;
  }
  #app:not(:has(.posScreen)) nav button.active:before{background:var(--ui234-gold);transform:scale(1.45)}
  #app:not(:has(.posScreen)) main{padding:26px 30px 76px!important}
}

/* Panels, cards and controls */
#app .panel,
#app .card{
  border:1px solid var(--ui234-line)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:var(--ui234-shadow)!important;
}
#app .panel{padding:18px!important}
#app .panel>h2:first-child,
#app .card>h2:first-child{
  position:relative;
  margin-top:0;
  padding-left:11px;
  color:var(--ui234-green-950)!important;
  font-weight:1000;
}
#app .panel>h2:first-child:before,
#app .card>h2:first-child:before{
  content:"";
  position:absolute;left:0;top:.18em;bottom:.18em;width:4px;
  border-radius:99px;
  background:linear-gradient(var(--ui234-gold),#d99913);
}
#app .toolbar,
#app .dateFilterTray{
  padding:11px!important;
  border:1px solid #d5e3da!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#fff,#f7faf8)!important;
  box-shadow:0 6px 18px rgba(3,43,26,.05)!important;
}
#app .form{gap:12px!important}
#app .form label,
#app .toolbar label,
#app .dateFilterTray label{
  color:#415b4b!important;
  font-size:10px!important;
  font-weight:950!important;
  letter-spacing:.45px;
}
#app input,
#app select,
#app textarea{
  border:1px solid #bcd0c3!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#10251a!important;
  box-shadow:inset 0 1px 1px rgba(3,43,26,.025);
}
#app input:hover,
#app select:hover,
#app textarea:hover{border-color:#8eb49c!important}
#app input:focus,
#app select:focus,
#app textarea:focus{
  border-color:#15925a!important;
  box-shadow:0 0 0 4px rgba(21,146,90,.11)!important;
  outline:none!important;
}
#app button{
  border-radius:10px;
  font-weight:900;
}
#app button:not(.posBtn):not(.dashboardModule):not(.cartQtyBtn){
  box-shadow:0 3px 8px rgba(3,43,26,.06);
}
#app button:not(.posBtn):not(.dashboardModule):hover{filter:brightness(.985);box-shadow:0 5px 12px rgba(3,43,26,.10)}
#app .primary{background:linear-gradient(115deg,#087747,#0b9257)!important;color:#fff!important}
#app .gold{background:linear-gradient(115deg,#f0c04e,#e5aa25)!important;color:#201704!important}
#app .danger{background:linear-gradient(115deg,#c8383f,#ad252d)!important;color:#fff!important}
#app .actions{gap:8px;align-items:center}

/* Tables */
#app .tableScroll{
  border:1px solid #dbe6df;
  border-radius:14px;
  background:#fff;
  box-shadow:0 4px 15px rgba(3,43,26,.04);
}
#app table{border-collapse:separate;border-spacing:0;background:#fff}
#app th{
  top:0;
  padding:11px 10px!important;
  border-bottom:1px solid #cbdcd1!important;
  background:linear-gradient(180deg,#e8f4ec,#deede4)!important;
  color:#143824!important;
  font-size:10px!important;
  font-weight:1000!important;
  letter-spacing:.35px;
  text-transform:uppercase;
}
#app td{
  padding:10px!important;
  border-bottom:1px solid #edf2ee!important;
  color:#16251c!important;
  font-weight:600;
}
#app tbody tr:nth-child(even) td{background:#fafcfb}
#app tbody tr:hover td{background:#f0f8f3}
#app table tr:last-child td{border-bottom:0!important}
#app .tableActions{gap:5px}
#app .tableActions button{min-height:36px!important;padding:6px 9px!important;font-size:10px!important}

/* Dashboard */
#app .dashboardHome{max-width:1540px;padding-top:2px}
#app .dashboardWelcome{
  min-height:205px;
  padding:30px 38px;
  border:1px solid rgba(255,255,255,.18)!important;
  background:
    radial-gradient(circle at 80% 30%,rgba(233,180,51,.20),transparent 27%),
    linear-gradient(118deg,#05341f 0%,#087045 62%,#0c8b55 100%)!important;
  box-shadow:var(--ui234-shadow-lg)!important;
}
#app .dashboardWelcome h1{color:#fff!important;font-size:clamp(30px,3vw,46px)!important}
#app .dashboardWelcome p{color:#dcefe4!important}
#app .dashboardEyebrow{color:#f2ca64!important}
#app .dashboardPills span{
  border-color:rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff!important;
}
#app .dashboardBrandLogo{
  width:150px;height:150px;
  padding:10px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:24px;
  background:rgba(255,255,255,.93);
  box-shadow:0 18px 42px rgba(0,0,0,.18);
  object-fit:contain;
}
#app .dashboardKpis{gap:14px;margin:16px 0 24px}
#app .dashboardKpi{
  position:relative;
  overflow:hidden;
  padding:19px 20px!important;
  border:1px solid var(--ui234-line)!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:var(--ui234-shadow)!important;
}
#app .dashboardKpi:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#0b8b53;
}
#app .dashboardKpi strong{color:#075d37!important;font-size:clamp(23px,2vw,30px)!important}
#app .dashboardSectionHead{margin:6px 0 13px}
#app .dashboardSectionHead h2{font-size:23px!important;color:#163c28!important}
#app .dashboardModules{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#app .dashboardModule{
  min-height:154px;
  padding:18px 18px 16px;
  align-items:flex-start;
  text-align:left;
  border:1px solid var(--ui234-line)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#fff,#f7fbf8)!important;
  box-shadow:var(--ui234-shadow)!important;
}
#app .dashboardModule:hover{
  transform:translateY(-3px);
  border-color:#a9ccb5!important;
  box-shadow:0 16px 34px rgba(3,43,26,.13)!important;
}
#app .moduleIcon{
  width:48px;height:48px;margin:0 0 12px;
  border:1px solid #cfe4d7;
  border-radius:14px;
  background:#eaf7ef!important;
  font-size:23px;
}
#app .dashboardModule strong{font-size:14px!important;color:#173d29!important}
#app .dashboardModule>span:not(.moduleIcon){max-width:none;text-align:left;color:#66776d!important}
#app .dashboardModule i{right:14px;bottom:14px;width:30px;height:30px;border-color:#cfe0d5;background:#fff;color:#087747}
#app .dashboardStats span{border:1px solid #dfe9e3;background:#f7faf8!important}

/* Module headers */
#app .moduleHeader{
  margin-bottom:14px;
  padding:16px 18px!important;
  border:1px solid rgba(255,255,255,.12);
  border-radius:17px!important;
  background:
    radial-gradient(circle at 90% 0,rgba(233,180,51,.15),transparent 25%),
    linear-gradient(115deg,#04301d,#08633b)!important;
  box-shadow:0 10px 26px rgba(3,43,26,.18)!important;
}
#app .moduleHeader .pageTitle{color:#fff!important;font-size:clamp(22px,2vw,30px)!important}
#app .todayBadge{background:var(--ui234-gold)!important;color:#241a04!important}
#app .dateFilterButton{border:1px solid #c9ddd0!important;background:#fff!important;color:#0b5d38!important}

/* Modal / dialogs */
#modalRoot .modal{background:rgba(3,28,18,.58);backdrop-filter:blur(7px)}
#modalRoot .modalBox,
#modalRoot .dialogPanel{
  border:1px solid rgba(255,255,255,.75)!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 30px 90px rgba(0,0,0,.28)!important;
}
#modalRoot .modalBox h2,
#modalRoot .dialogPanel h2{color:#083d26;font-weight:1000}

/* POS terminal — faster visual reading and stronger hierarchy */
#app .posScreen{
  padding:10px 12px 12px!important;
  background:linear-gradient(180deg,#f7fbf8,#edf5f0)!important;
}
#app .posHeading{
  margin-bottom:9px;
  padding:0 3px;
}
#app .posHeading .pageTitle{font-size:24px!important;letter-spacing:-.4px}
#app .posHeading>div:first-child>span{color:#17764b!important}
#app .posStatusBar{gap:6px}
#app .posStatusBar>span{
  min-width:105px;
  padding:7px 10px!important;
  border:1px solid #d5e4da!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.93)!important;
  box-shadow:0 4px 12px rgba(3,43,26,.05)!important;
}
#app .posStatusBar small{color:#72847a!important}
#app .posStatusBar b{color:#0a3e27!important}
#app .posToolbar{
  gap:7px!important;
  padding:7px!important;
  border:1px solid #d6e5db!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 7px 20px rgba(3,43,26,.07)!important;
}
#app .posToolbar input,
#app .posToolbar select,
#app .posToolbar button{min-height:45px!important}
#app .posToolbar #posSearch{
  padding-left:15px;
  border:2px solid #a8c8b4!important;
  font-size:15px!important;
  font-weight:850!important;
}
#app .posToolbar #posSearch:focus{border-color:#0b8d54!important}
#app .posSearchResults{
  border:1px solid #cbded1!important;
  border-radius:12px!important;
  box-shadow:0 18px 42px rgba(3,43,26,.18)!important;
  overflow:hidden;
}
#app .posSearchResult{padding:10px 12px!important;border-bottom:1px solid #edf2ee!important;background:#fff!important}
#app .posSearchResult:hover,
#app .posSearchResult.active{background:#eaf7ef!important;filter:none}

#app .posScreen .cartPanel{
  padding:10px!important;
  border:1px solid #ccded2!important;
  border-top:4px solid var(--ui234-gold)!important;
  border-radius:17px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(3,43,26,.09)!important;
}
#app .cartPanel>h2{
  margin:0 0 7px!important;
  padding:0 3px 6px!important;
  border-bottom:1px solid #e6eee9;
  color:#063b24!important;
  font-size:15px!important;
  font-weight:1000!important;
}
#app .cartListHeader{
  padding:7px 12px!important;
  border:1px solid #dce9e1;
  border-radius:9px!important;
  background:#eff7f2!important;
  color:#506a5a!important;
}
#app .cartRow{
  margin:6px 1px!important;
  padding:10px 11px!important;
  border:1px solid #dde8e1!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 3px 10px rgba(3,43,26,.045)!important;
}
#app .cartRow:hover{border-color:#b7d3c1!important;background:#fbfdfc!important}
#app .cartItemName{color:#0b3d27!important;font-weight:900!important}
#app .cartQtyBtn{background:#edf6f0!important;border-color:#c5dacd!important;color:#075b34!important}
#app .cartQtyBtn:hover{background:var(--ui234-gold)!important;color:#1c1404!important}
#app .cartItemTotal strong{color:#075d37!important;font-weight:1000!important}

#app .barcodeDock{
  border:1px solid #bfd5c7!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,#f8fcf9,#eef7f1)!important;
  box-shadow:inset 0 1px 0 #fff;
}
#app .barcodeShortcut{
  border-radius:9px!important;
  background:#075b34!important;
  color:#fff!important;
  box-shadow:none!important;
}
#app .barcodeInputWrap input{
  border:0!important;
  background:#fff!important;
  font-weight:900!important;
}
#app .cartSummary{gap:5px!important}
#app .cartSummary>span{
  border:1px solid #dce8e0!important;
  background:#f9fbfa!important;
}
#app .cartSummary>span:nth-child(1){border-left:4px solid #0b8a52!important}
#app .cartSummary>span:nth-child(2){border-left:4px solid #c63b41!important}
#app .cartSummary>span:nth-child(3){border-left:4px solid #e2a72c!important}

/* BUILD233 no-amount layout retained; grand total gets the strongest visual priority. */
#app .posScreen .cartTotal{
  min-height:92px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:14px!important;
  background:
    radial-gradient(circle at 80% 25%,rgba(233,180,51,.18),transparent 26%),
    linear-gradient(102deg,#032b1a,#08603a)!important;
  box-shadow:0 9px 22px rgba(3,43,26,.22)!important;
}
#app .posScreen .cartItemCount.totalStripBlock{
  background:linear-gradient(145deg,#f1c454,#dfa31f)!important;
  border:1px solid rgba(0,0,0,.08)!important;
  color:#1c1404!important;
}
#app .posScreen .grandTotalBlock.totalStripBlock{
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.08)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
#app .posScreen .grandTotalBlock strong{
  color:#fff!important;
  text-shadow:0 2px 5px rgba(0,0,0,.15);
  letter-spacing:-1px;
}

#app .checkoutActions{gap:7px!important;margin-top:7px!important}
#app .checkoutGroup{
  padding:20px 7px 7px!important;
  border:1px solid #d7e5dc!important;
  border-radius:13px!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(3,43,26,.05)!important;
}
#app .groupLabel{color:#60756a!important;font-size:8px!important}
#app .checkoutActions .posBtn{
  min-height:53px;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:10px!important;
  box-shadow:0 4px 10px rgba(0,0,0,.13)!important;
}
#app .checkoutActions .posBtn:hover{transform:translateY(-1px);filter:brightness(1.06)}
#app .checkoutActions .posBtn.selected{outline:3px solid var(--ui234-gold)!important;outline-offset:1px}
#app .btnCash{background:linear-gradient(145deg,#0a8d4d,#08763f)!important}
#app .btnGcash{background:linear-gradient(145deg,#1481df,#0768ba)!important}
#app .btnMaya{background:linear-gradient(145deg,#00aaa1,#078c85)!important}
#app .btnBank{background:linear-gradient(145deg,#345a86,#263f61)!important}
#app .btnCredit{background:linear-gradient(145deg,#e28b16,#c96d08)!important}
#app .btnRetail{background:linear-gradient(145deg,#2180e8,#1464bc)!important}
#app .btnWholesale{background:linear-gradient(145deg,#7a5ad0,#6040b0)!important}
#app .btnInquiry{background:linear-gradient(145deg,#0b705d,#075949)!important}

/* Price inquiry modal */
#modalRoot .priceInquiryModal226,
#modalRoot .priceInquiryBox226{
  border-radius:22px!important;
}
#modalRoot .priceInquiryResult226{
  border:1px solid #cfe2d5!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,#fff,#f5fbf7)!important;
}

/* Status language colors */
#app .paid{color:#087747!important}
#app .balance{color:#b4262d!important}
#app .low td{background:#fff8e7!important}

@media(max-width:1180px){
  #app .dashboardModules{grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .dashboardBrandLogo{width:125px;height:125px}
}
@media(max-width:899px){
  #app nav{background:linear-gradient(90deg,#04301d,#075d37)!important}
  #app nav button{border-color:rgba(255,255,255,.10)!important;background:rgba(255,255,255,.07)!important;color:#fff!important}
  #app nav button.active{background:var(--ui234-gold)!important;color:#1d1504!important}
  #app .dashboardWelcome{padding:24px!important}
}
@media(max-width:720px){
  #app .dashboardBrandLogo{display:none}
  #app .dashboardModules{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  #app .dashboardModule{min-height:142px;padding:14px}
  #app .moduleIcon{width:42px;height:42px;font-size:20px}
  #app .panel{padding:14px!important}
  #app .moduleHeader{padding:13px!important}
}
@media(max-width:680px){
  #app .posScreen{padding:7px!important}
  #app .posScreen .cartPanel{padding:7px!important;border-radius:13px!important}
  #app .checkoutGroup{box-shadow:none!important}
  #app .dashboardWelcome{min-height:150px;padding:20px!important}
  #app .dashboardWelcome h1{font-size:28px!important}
}
@media(max-width:430px){
  #app .dashboardModules{grid-template-columns:1fr}
  #app .dashboardModule{min-height:122px}
}