/* Update 032 — Business POS UI Refresh
 * Visual/UI-only layer. Loaded after existing styles.
 */
:root {
  --ui-green-950:#0c2d1d;
  --ui-green-900:#123b27;
  --ui-green-800:#185234;
  --ui-green-700:#1f6a42;
  --ui-green-600:#278152;
  --ui-green-500:#36a066;
  --ui-green-100:#dcf3e5;
  --ui-green-50:#f0faf4;
  --ui-ink:#17211b;
  --ui-muted:#6f7d74;
  --ui-bg:#f3f6f4;
  --ui-panel:#ffffff;
  --ui-soft:#f7faf8;
  --ui-border:#dfe7e1;
  --ui-border-strong:#cedad2;
  --ui-danger:#c84646;
  --ui-warning:#bd7a15;
  --ui-blue:#2767bb;
  --ui-radius-sm:10px;
  --ui-radius:14px;
  --ui-radius-lg:18px;
  --ui-shadow-sm:0 5px 18px rgba(21,58,37,.055);
  --ui-shadow:0 16px 42px rgba(21,58,37,.085);
  --app-sidebar-width:264px;
}

html { background: var(--ui-bg); }
body {
  color:var(--ui-ink);
  background:
    radial-gradient(circle at 92% 4%, rgba(39,129,82,.075), transparent 31rem),
    linear-gradient(180deg,#f8faf9 0,#f3f6f4 280px,var(--ui-bg) 100%);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

::selection { background:#bde6ca; color:#153623; }

/* Login */
.login-body {
  background:
    radial-gradient(circle at 15% 10%, rgba(76,168,105,.18), transparent 32rem),
    radial-gradient(circle at 85% 90%, rgba(26,105,66,.12), transparent 35rem),
    #eef5f0;
}
.login-shell { padding:28px; }
.login-panel {
  position:relative;
  width:min(100%,440px);
  padding:34px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:22px;
  background:rgba(255,255,255,.94);
  box-shadow:0 30px 80px rgba(16,61,34,.14);
  backdrop-filter:blur(16px);
  overflow:hidden;
}
.login-panel::before {
  content:"";
  position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg,var(--ui-green-800),var(--ui-green-500));
}
.login-panel .brand-lock {
  width:62px; height:62px; border-radius:17px;
  background:linear-gradient(145deg,var(--ui-green-700),var(--ui-green-900));
  box-shadow:0 10px 24px rgba(31,106,66,.22);
}
.login-panel h1 { font-size:28px; font-weight:850; letter-spacing:-.035em; }
.login-panel .form-control { min-height:50px; }
.login-panel .btn-primary { min-height:50px; }

/* Shell */
.app-shell { grid-template-columns:var(--app-sidebar-width) minmax(0,1fr); }
.app-sidebar {
  position:sticky;
  top:0;
  height:100vh;
  padding:18px 14px 16px;
  gap:14px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.2) transparent;
  background:
    radial-gradient(circle at 10% 4%,rgba(133,211,153,.24),transparent 27%),
    linear-gradient(165deg,#267a46 0%,#185f37 46%,#0f3d27 100%) !important;
  border-right:0 !important;
  box-shadow:9px 0 30px rgba(13,58,33,.12);
  z-index:1045;
}
.app-sidebar::-webkit-scrollbar { width:5px; }
.app-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.22); border-radius:10px; }

.app-brand {
  min-height:58px;
  padding:7px 9px 13px;
  gap:11px;
  color:white !important;
  border-bottom:1px solid rgba(255,255,255,.11);
}
.app-brand > span {
  width:42px !important; height:42px !important; flex:0 0 42px;
  border-radius:13px !important;
  background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.app-brand strong {
  font-size:15px;
  line-height:1.15;
  letter-spacing:-.01em;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-nav { gap:3px !important; }
.app-nav .nav-link {
  min-height:43px;
  padding:9px 11px !important;
  gap:10px;
  border-radius:11px !important;
  color:rgba(255,255,255,.78) !important;
  font-size:13.5px;
  font-weight:570;
}
.app-nav .nav-link i:first-child { width:19px; text-align:center; font-size:16px; opacity:.93; }
.app-nav .nav-link:hover,
.app-nav .nav-link:focus-visible {
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  transform:none !important;
}
.app-nav .nav-link.active:not(button) {
  color:#144128 !important;
  background:#f1fbf4 !important;
  box-shadow:0 8px 20px rgba(4,33,18,.20);
  font-weight:760;
}
.app-nav button.nav-link.active {
  background:rgba(255,255,255,.12) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.app-nav .collapse {
  margin:.15rem 0 .4rem .82rem !important;
  padding-left:.45rem;
  border-left:1px solid rgba(255,255,255,.15) !important;
}
.app-nav .collapse .nav-link { min-height:38px; padding:7px 9px !important; font-size:12.7px; }
.app-nav .badge { font-size:9px; border-radius:999px; }

.sidebar-overlay {
  position:fixed; inset:0; z-index:1040;
  display:none; border:0; padding:0;
  background:rgba(8,24,15,.46);
  backdrop-filter:blur(2px);
}
.mobile-nav-toggle {
  display:none;
  width:42px; height:42px; padding:0;
  align-items:center; justify-content:center;
  border:1px solid var(--ui-border);
  border-radius:12px;
  background:#fff;
  color:var(--ui-green-800);
  box-shadow:var(--ui-shadow-sm);
}

/* Main / topbar */
.app-main { min-width:0; padding:22px 28px 38px !important; }
.app-topbar {
  position:sticky;
  top:0;
  z-index:1000;
  min-height:74px;
  margin:-22px -28px 24px !important;
  padding:14px 28px !important;
  background:rgba(248,250,249,.91) !important;
  border-bottom:1px solid rgba(218,228,221,.85) !important;
  box-shadow:0 5px 20px rgba(23,64,39,.035);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.topbar-title-wrap { display:flex; align-items:center; gap:12px; min-width:0; }
.app-topbar .section-kicker {
  color:#819087;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.app-topbar h1 {
  margin:2px 0 0 !important;
  color:var(--ui-ink);
  font-size:23px !important;
  font-weight:850 !important;
  line-height:1.08;
  letter-spacing:-.03em !important;
}
.topbar-user-avatar {
  width:40px; height:40px;
  display:inline-grid; place-items:center;
  border-radius:13px !important;
  color:var(--ui-green-800) !important;
  background:var(--ui-green-100) !important;
  border:1px solid #cbe9d5;
}
.topbar-actions .btn-outline-danger {
  border-color:#eed7d7;
  color:#9c3e3e;
  background:#fff;
}
.topbar-actions .btn-outline-danger:hover { color:#fff; background:#b94a4a; border-color:#b94a4a; }

/* Content */
.section-panel,
.metric-tile,
.card,
.print-sheet {
  background:var(--ui-panel) !important;
  border:1px solid var(--ui-border) !important;
  border-radius:var(--ui-radius-lg) !important;
  box-shadow:var(--ui-shadow-sm) !important;
}
.section-panel { padding:23px !important; }
.section-heading { margin-bottom:20px !important; gap:14px; }
.section-heading h2,
.section-panel > h2,
.section-panel > h3 {
  color:#17251c;
  font-weight:820;
  letter-spacing:-.025em;
}
.section-heading h2 { font-size:21px !important; }
.section-heading p { color:var(--ui-muted) !important; line-height:1.55; }

.metric-grid { gap:14px !important; }
.metric-tile {
  position:relative;
  min-height:132px !important;
  padding:17px 18px !important;
  overflow:hidden;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.metric-tile::after {
  content:"";
  position:absolute; width:110px; height:110px; right:-42px; top:-48px;
  border-radius:50%; background:rgba(39,129,82,.055);
}
.metric-tile:hover { transform:translateY(-2px); border-color:#c8dbce !important; box-shadow:0 13px 30px rgba(20,69,40,.08) !important; }
.metric-icon {
  width:40px !important; height:40px !important;
  margin-bottom:13px !important;
  border-radius:12px !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.025);
}
.metric-tile span,.metric-tile small { color:var(--ui-muted) !important; font-size:12px; }
.metric-tile strong { color:#17271d; font-size:23px !important; letter-spacing:-.025em; }

/* Forms */
.form-label { color:#4f5e54; font-size:12px; font-weight:720; margin-bottom:6px; }
.form-control,
.form-select,
.input-group-text {
  min-height:42px;
  color:#26342b;
  border-color:#d8e2db !important;
  border-radius:11px !important;
  background-color:#fff;
  box-shadow:none !important;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.form-control::placeholder { color:#a1aba5; }
.form-control:focus,.form-select:focus {
  border-color:#69ab80 !important;
  box-shadow:0 0 0 3px rgba(48,143,85,.12) !important;
}
.form-control:disabled,.form-select:disabled { background:#f2f5f3; color:#8a958e; }
.input-group > :first-child { border-radius:11px 0 0 11px !important; }
.input-group > :last-child { border-radius:0 11px 11px 0 !important; }
.input-group-text { background:#f6f8f7; color:#718078; }

/* Buttons */
.btn {
  min-height:39px;
  padding:.48rem .85rem;
  border-radius:10px !important;
  font-weight:690 !important;
  font-size:13px;
  box-shadow:none !important;
}
.btn-sm { min-height:32px; padding:.34rem .62rem; font-size:12px; }
.btn-lg { min-height:48px; border-radius:12px !important; }
.btn-primary {
  --bs-btn-bg:#24794a;
  --bs-btn-border-color:#24794a;
  --bs-btn-hover-bg:#1c653d;
  --bs-btn-hover-border-color:#1c653d;
  --bs-btn-active-bg:#174f31;
  --bs-btn-active-border-color:#174f31;
}
.btn-success { --bs-btn-bg:#2a8654; --bs-btn-border-color:#2a8654; --bs-btn-hover-bg:#206c43; --bs-btn-hover-border-color:#206c43; }
.btn-outline-primary { --bs-btn-color:#24794a; --bs-btn-border-color:#9bc6aa; --bs-btn-hover-bg:#24794a; --bs-btn-hover-border-color:#24794a; }
.btn-outline-secondary { --bs-btn-color:#58685e; --bs-btn-border-color:#d4ddd7; --bs-btn-hover-bg:#edf3ef; --bs-btn-hover-color:#263c2e; --bs-btn-hover-border-color:#c5d2ca; }

/* Tables */
.table-responsive {
  border:1px solid var(--ui-border);
  border-radius:14px !important;
  background:#fff;
  scrollbar-width:thin;
  scrollbar-color:#c7d4cc transparent;
}
.table { margin:0 !important; --bs-table-bg:transparent; --bs-table-striped-bg:#fafcfb; --bs-table-hover-bg:#f3f8f5; }
.table > :not(caption) > * > * {
  padding:.78rem .72rem !important;
  vertical-align:middle;
  border-bottom-color:#e8eeea;
}
.table thead th {
  position:relative;
  color:#617068 !important;
  background:#f6f9f7 !important;
  font-size:10.5px !important;
  font-weight:820 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase;
  white-space:nowrap;
  border-bottom:1px solid #dfe7e2 !important;
}
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr { transition:background-color .12s ease; }
.table tbody tr:hover { background:#f7faf8; }
.table .btn { min-height:30px; }

/* Statuses, pagination, alerts */
.badge { padding:.42em .62em; border-radius:999px; font-weight:720; letter-spacing:.01em; }
.alert { border-radius:13px; border-width:1px; box-shadow:0 4px 14px rgba(0,0,0,.025); }
.pagination { gap:4px; }
.page-link { min-width:34px; min-height:34px; display:grid; place-items:center; border-radius:9px !important; border-color:#dfe7e2; color:#3f5f4b; }
.active>.page-link,.page-link.active { background:#24794a; border-color:#24794a; }

/* Modal */
.modal-content { border:1px solid rgba(207,220,211,.9) !important; border-radius:18px !important; box-shadow:0 26px 80px rgba(12,47,27,.18) !important; overflow:hidden; }
.modal-header { padding:17px 20px; background:#fbfcfb; border-bottom-color:#e7ede9; }
.modal-title { font-weight:820; letter-spacing:-.015em; }
.modal-body { padding:20px; background:#fff !important; }
.modal-footer { padding:14px 20px; background:#fbfcfb !important; border-top-color:#e7ede9 !important; }

/* Cashier: stronger POS feel */
.cashier-shell { max-width:1760px !important; }
.cashier-header-card {
  border-radius:18px !important;
  background:
    radial-gradient(circle at 95% 0,rgba(56,164,95,.13),transparent 25%),
    linear-gradient(135deg,#fff,#f7fbf8) !important;
  border-color:#d8e5dc !important;
}
.cashier-header-card h2 { color:#153724; font-size:26px !important; }
.cashier-eyebrow { color:#2e8754 !important; }
.cashier-session-meta span { background:#eaf6ee !important; border:1px solid #d2ebda; }
.cashier-catalog-panel,.cashier-cart-panel { border-radius:18px !important; border-color:#dae5dd !important; box-shadow:0 10px 28px rgba(18,67,38,.055) !important; }
.cashier-category-tabs .btn { border-radius:999px !important; }
.cashier-category-tabs .btn.active { background:#24794a !important; border-color:#24794a !important; }
.cashier-product-grid { gap:12px !important; }
.cashier-product-card {
  min-height:166px !important;
  border-radius:15px !important;
  border-color:#e1e9e3 !important;
  background:linear-gradient(180deg,#fff,#fcfdfc) !important;
}
.cashier-product-card:not(:disabled):hover {
  transform:translateY(-3px) !important;
  border-color:#86bd99 !important;
  box-shadow:0 13px 25px rgba(27,99,57,.11) !important;
}
.cashier-product-avatar { background:#e6f4eb !important; color:#1f7245 !important; border:1px solid #d1ead9; }
.cashier-product-bottom strong { color:#155d36 !important; font-size:15px !important; }
.cashier-cart-panel { top:91px !important; }
.cashier-cart-head { border-bottom-color:#e6ede8 !important; }
.cashier-cart-count { background:#e9f5ed !important; }
.cashier-grand-total { background:#f3faf5; margin:10px -9px 0; padding:12px 9px 5px !important; border-top:1px solid #dbe9df !important; border-radius:10px; }
.cashier-grand-total strong { color:#145d36 !important; font-size:24px !important; }
.cashier-payment-options span { border-radius:12px !important; }
.cashier-payment-options input:checked + span { background:#e8f5ec !important; border-color:#6bad83 !important; }
.cashier-pay-button { min-height:56px !important; font-size:14px; box-shadow:0 8px 20px rgba(36,121,74,.18) !important; }

/* Opname / utility pages */
.online-opname-page-form .online-opname-table-wrap,
.stock-opname-page .table-responsive { box-shadow:inset 0 1px 0 rgba(255,255,255,.8); }
[data-opname-row] .form-control { min-width:105px; }

/* Cards and miscellaneous Bootstrap polish */
.dropdown-menu { padding:7px; border:1px solid var(--ui-border); border-radius:12px; box-shadow:0 16px 42px rgba(20,54,35,.13); }
.dropdown-item { border-radius:8px; padding:.48rem .65rem; }
.dropdown-item:hover { background:#eff7f1; }
.nav-tabs { border-bottom-color:#dce5df; gap:4px; }
.nav-tabs .nav-link { border-radius:10px 10px 0 0; color:#637269; }
.nav-tabs .nav-link.active { color:#1e6840; font-weight:750; }

/* Desktop medium */
@media (max-width:1280px) {
  :root { --app-sidebar-width:244px; }
  .app-main { padding-inline:22px !important; }
  .app-topbar { margin-inline:-22px !important; padding-inline:22px !important; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* Mobile/tablet sidebar becomes off-canvas */
@media (max-width:1100px) {
  .app-shell { display:block !important; }
  .app-sidebar {
    position:fixed !important;
    left:0; top:0; bottom:0;
    width:min(86vw,290px);
    height:100dvh !important;
    transform:translateX(-105%);
    transition:transform .22s ease;
    box-shadow:18px 0 50px rgba(8,37,21,.28);
  }
  body.sidebar-open { overflow:hidden; }
  body.sidebar-open .app-sidebar { transform:translateX(0); }
  body.sidebar-open .sidebar-overlay { display:block; }
  .mobile-nav-toggle { display:inline-flex; }
  .app-main { width:100%; }
}

@media (max-width:767.98px) {
  body { background:#f4f7f5; }
  .app-main { padding:14px 12px 26px !important; }
  .app-topbar {
    min-height:66px;
    margin:-14px -12px 16px !important;
    padding:11px 12px !important;
  }
  .app-topbar h1 { font-size:19px !important; max-width:58vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .app-topbar .section-kicker { display:none; }
  .topbar-actions { gap:7px !important; }
  .topbar-actions .lh-sm { display:none; }
  .topbar-user-avatar { width:38px; height:38px; }
  .section-panel { padding:15px !important; border-radius:15px !important; }
  .section-heading { align-items:stretch !important; gap:10px !important; }
  .section-heading h2 { font-size:19px !important; }
  .section-heading > div:last-child:not(:first-child) { display:flex; flex-wrap:wrap; gap:7px; }
  .section-heading .btn { flex:1 1 auto; }
  .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:9px !important; }
  .metric-tile { min-height:116px !important; padding:13px !important; border-radius:14px !important; }
  .metric-icon { width:36px !important; height:36px !important; margin-bottom:9px !important; }
  .metric-tile strong { font-size:19px !important; }
  .table-responsive { border-radius:12px !important; }
  .table > :not(caption) > * > * { padding:.66rem .62rem !important; }
  .form-control,.form-select { min-height:44px; }
  .btn { min-height:40px; }
  .cashier-header-card { padding:15px !important; }
  .cashier-header-card h2 { font-size:22px !important; }
  .cashier-catalog-panel,.cashier-cart-panel { border-radius:15px !important; }
  .cashier-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .cashier-product-card { min-height:152px !important; }
  .cashier-cart-panel { border:2px solid #d5e6da !important; }
}

@media (max-width:420px) {
  .metric-grid { grid-template-columns:1fr !important; }
  .cashier-product-grid { grid-template-columns:1fr 1fr !important; }
  .cashier-product-card { min-height:148px !important; padding:10px !important; }
  .cashier-product-copy strong { font-size:12.5px !important; }
  .cashier-payment-options { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; }
  .cashier-payment-options span { min-height:56px; padding:5px; }
}

@media print {
  .sidebar-overlay,.mobile-nav-toggle { display:none !important; }
  .section-panel,.metric-tile,.card { box-shadow:none !important; }
}