@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');
:root{--g950:#123c2a;--g900:#14532d;--g800:#166534;--g700:#18804a;--g50:#f2faf5;--bg:#f6f8f6;--white:#fff;--text:#17251d;--muted:#829087;--line:#e9eeea;--shadow:0 8px 28px rgba(20,50,32,.045);--side:258px}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}button{font:inherit;cursor:pointer}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);background:#fff;border-right:1px solid var(--line);padding:26px 18px 18px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:11px;padding:0 9px 27px;text-decoration:none;color:inherit}.brand-mark{width:39px;height:39px;border-radius:13px;background:linear-gradient(145deg,#1b7544,#104b2d);display:grid;place-items:center;color:#fff;font:800 22px 'Plus Jakarta Sans';box-shadow:0 5px 12px #14532d26}.brand b{display:block;font:800 16px 'Plus Jakarta Sans';letter-spacing:.7px}.brand b span{color:var(--g700)}.brand small,.store small,.profile small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.store{display:flex;align-items:center;gap:10px;padding:11px;background:#f8faf8;border:1px solid var(--line);border-radius:13px;margin-bottom:29px}.store-avatar{width:34px;height:34px;border-radius:10px;background:#e5f3e9;color:var(--g800);display:grid;place-items:center;font-weight:700;font-size:11px}.store>span:nth-child(2){flex:1}.store b,.profile b{font-size:11px}.chevron{color:var(--muted)}.nav-caption{font-size:9px;font-weight:700;letter-spacing:1.35px;color:#a0aaa3;padding:0 11px;margin:0 0 11px}.side-nav{display:grid;gap:5px}.nav-link{border:0;background:transparent;color:#748078;display:flex;align-items:center;gap:13px;padding:12px 13px;border-radius:11px;text-align:left;font-weight:600;font-size:12px;transition:.2s}.nav-link:hover,.nav-link.active{background:var(--g50);color:var(--g800)}.nav-link i{width:20px;text-align:center;font-style:normal;font-size:18px}.nav-link em{margin-left:auto;font-style:normal;font-size:9px;background:#dff0e5;color:var(--g800);padding:4px 7px;border-radius:6px}.sidebar-bottom{margin-top:auto}.help-card{background:#f5faf6;border:1px solid #e8f1e9;border-radius:14px;padding:15px;margin-bottom:17px}.spark{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:#e4f2e8;color:var(--g800);margin-bottom:10px}.help-card b{font-size:11px}.help-card p{font-size:10px;line-height:1.5;color:var(--muted);margin:5px 0 10px}.help-card button{border:0;background:none;padding:0;color:var(--g800);font-size:10px;font-weight:700}.profile{display:flex;align-items:center;gap:9px;padding:12px 5px 0;border-top:1px solid var(--line)}.avatar,.top-avatar{display:grid;place-items:center;border-radius:50%;background:#e7f2ea;color:var(--g800);font-weight:700}.avatar{width:34px;height:34px}.profile>span:nth-child(2){flex:1}.more{color:#9aa59d;letter-spacing:2px}.main-area{margin-left:var(--side);min-height:100vh}.topbar{height:73px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;position:sticky;top:0;z-index:20}.top-left,.top-right{display:flex;align-items:center;gap:12px}.crumb-muted{font-size:11px;color:#9aa49d}.slash{color:#c0c8c2}.top-left b{font-size:12px}.top-right{gap:16px}.connection{display:flex;align-items:center;gap:7px;color:#718078;font-size:10px;background:#f7faf7;padding:8px 11px;border-radius:20px}.connection i{width:7px;height:7px;background:#e6a23c;border-radius:50%;box-shadow:0 0 0 3px #fff0d9}.notification{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:10px;color:#718078;font-size:18px;position:relative}.notification i{position:absolute;width:5px;height:5px;border-radius:50%;background:#e7a23c;right:6px;top:6px}.top-avatar{width:31px;height:31px;font-size:11px}.mobile-menu{display:none}.content{max-width:1500px;margin:auto;padding:35px 38px 25px}.page-view{display:none;animation:appear .2s ease}.page-view.active{display:block}@keyframes appear{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}.welcome,.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px}.eyebrow{font-size:9px;letter-spacing:1.5px;font-weight:700;color:var(--g700);margin:0 0 9px}.welcome h1,.page-title h1{font:700 25px 'Plus Jakarta Sans';letter-spacing:-.7px;margin:0 0 7px}.muted{color:var(--muted);font-size:11px;margin:0}.date-chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:10px 13px;border-radius:10px;color:#68766d;font-size:10px;box-shadow:var(--shadow)}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}.stat-card,.panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.stat-card{padding:18px;min-height:150px}.stat-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.stat-head small{font-size:9px;color:#9aa59d;background:#f8faf8;padding:5px 8px;border-radius:20px}.stat-icon,.quick-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:17px;font-weight:700}.green{background:#e8f5ec;color:#23834e}.blue{background:#eaf2ff;color:#4e7ed0}.amber{background:#fff4df;color:#c18b28}.violet{background:#f1edff;color:#8469c5}.stat-card p{color:#7d8981;font-size:10px;margin:0 0 5px}.stat-card strong{font:700 22px 'Plus Jakarta Sans'}.stat-card footer{font-size:9px;color:#98a39b;margin-top:10px}.dashboard-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:17px}.panel{padding:20px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.panel-heading h2{font:700 14px 'Plus Jakarta Sans';margin:0 0 5px}.panel-heading p{font-size:10px;color:var(--muted);margin:0}.quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.quick-action{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:1px solid var(--line);background:#fff;border-radius:13px;padding:14px;text-align:left;transition:.2s}.quick-action:hover{border-color:#b8d9c2;transform:translateY(-2px);box-shadow:0 7px 17px #14532d0d}.quick-action b{font-size:10px}.quick-action small{font-size:9px;color:var(--muted)}.quick-action small i{font-style:normal;margin-left:8px}.text-button{border:0;background:none;color:var(--g800);font-size:10px;font-weight:700}.empty{min-height:185px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.empty span{width:45px;height:45px;border-radius:15px;background:#f4f8f5;color:#9aafa0;display:grid;place-items:center;font-size:23px;margin-bottom:11px}.empty b{font-size:11px}.empty p{font-size:10px;color:var(--muted);margin:5px 0}.footer-note{text-align:center;color:#a6afa8;font-size:9px;letter-spacing:.5px;margin-top:26px}.footer-note span{padding:0 5px;color:#c4cdc6}.stage{font-size:9px;color:#9b762c;background:#fff6e5;border:1px solid #f5e9ca;padding:7px 10px;border-radius:20px;white-space:nowrap}.placeholder{min-height:290px;background:#fff;border:1px dashed #dce6de;border-radius:18px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.placeholder>span{width:52px;height:52px;border-radius:16px;background:var(--g50);color:var(--g800);display:grid;place-items:center;font-size:25px;margin-bottom:15px}.placeholder h2{font:700 16px 'Plus Jakarta Sans';margin:0 0 7px}.placeholder p{max-width:430px;color:var(--muted);font-size:10px;line-height:1.7;margin:0}.overlay{display:none}.mobile-nav{display:none}
@media(max-width:1100px){:root{--side:225px}.content{padding:30px 25px}.topbar{padding:0 25px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.sidebar{width:275px;transform:translateX(-102%);transition:transform .25s;box-shadow:12px 0 35px #14251a14}.sidebar.open{transform:translateX(0)}.overlay.show{display:block;position:fixed;inset:0;background:#10221766;z-index:25}.main-area{margin-left:0;padding-bottom:75px}.topbar{height:61px;padding:0 15px}.mobile-menu{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:9px;color:#536259}.top-left{gap:9px}.crumb-muted,.slash{display:none}.top-left b{font-size:11px}.top-right{gap:9px}.connection{font-size:0;padding:8px}.connection i{margin:0}.notification{width:29px;height:29px}.top-avatar{width:29px;height:29px}.content{padding:24px 15px 20px}.welcome,.page-title{align-items:flex-start;margin-bottom:19px}.welcome h1,.page-title h1{font-size:20px;line-height:1.3}.welcome .muted,.page-title .muted{font-size:10px;line-height:1.5}.date-chip{font-size:0;padding:9px}.date-chip:first-letter{font-size:13px}.stats{gap:9px;margin-bottom:13px}.stat-card{padding:13px;min-height:135px;border-radius:15px}.stat-card strong{font-size:18px}.stat-card p{font-size:9px}.stat-card footer{font-size:8px;line-height:1.4}.dashboard-grid{grid-template-columns:1fr;gap:12px}.panel{padding:15px;border-radius:15px}.quick-grid{gap:9px}.quick-action{padding:11px}.quick-action b{font-size:9px}.quick-action small{font-size:8px}.empty{min-height:145px}.footer-note{font-size:8px;margin-top:20px}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;height:67px;padding:7px 7px calc(7px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);z-index:22;box-shadow:0 -5px 20px #12271908}.mobile-nav-link{border:0;background:transparent;color:#9aa59d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:10px}.mobile-nav-link span{font-size:18px;line-height:1.1}.mobile-nav-link small{font-size:9px;font-weight:600}.mobile-nav-link.active{color:var(--g800)}.mobile-nav-link.active span{background:var(--g50);border-radius:8px;padding:3px 11px}.stage{font-size:8px;padding:6px 8px}.placeholder{min-height:245px;padding:22px 15px}}
@media(max-width:380px){.stat-card{padding:11px}.stat-card strong{font-size:16px}.stat-card footer{font-size:7px}.welcome h1{font-size:18px}}


/* =========================================
   RADEN POS - HALAMAN TRANSAKSI
========================================= */

.pos-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px;
  align-items: start;
}

.pos-catalog,
.pos-cart {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.pos-catalog {
  padding: 21px;
  min-width: 0;
}

.pos-toolbar,
.cart-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.pos-toolbar h2,
.cart-heading h2 {
  font: 700 15px 'Plus Jakarta Sans';
  margin: 0 0 5px;
}

.pos-toolbar p,
.cart-heading p {
  font-size: 10px;
  color: var(--muted);
  margin: 0;
}

.demo-label {
  font-size: 9px;
  font-weight: 700;
  color: #a0782d;
  background: #fff6e5;
  padding: 7px 9px;
  border-radius: 8px;
}

.pos-search {
  width: 100%;
  height: 43px;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 0 14px;
  margin: 19px 0 13px;
  outline: none;
  font: inherit;
  font-size: 11px;
  background: #fbfdfb;
}

.pos-search:focus,
.cash-input:focus {
  border-color: var(--g700);
  box-shadow: 0 0 0 3px #23834e12;
}

.pos-categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 5px;
}

.category-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: #77847b;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.category-btn.active {
  background: var(--g800);
  color: #fff;
  border-color: var(--g800);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 17px;
}

.pos-product {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 13px;
  background: #fff;
  text-align: left;
  min-width: 0;
  transition: .2s;
}

.pos-product:hover {
  border-color: #a8cfb3;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px #14532d0c;
}

.product-symbol {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--g50);
  border-radius: 11px;
  font-size: 19px;
  margin-bottom: 12px;
}

.pos-product b {
  display: block;
  font-size: 11px;
  margin-bottom: 5px;
}

.pos-product small {
  display: block;
  font-size: 9px;
  color: var(--muted);
  margin-bottom: 10px;
}

.pos-product strong {
  font-size: 11px;
  color: var(--g800);
}

.pos-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 45px 15px;
  color: var(--muted);
  font-size: 11px;
}

.pos-cart {
  padding: 19px;
  position: sticky;
  top: 90px;
}

.cart-clear {
  border: 0;
  background: #fff0ef;
  color: #c35d55;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
}

.cart-items {
  min-height: 135px;
  max-height: 300px;
  overflow-y: auto;
  margin: 17px 0;
}

.cart-empty {
  min-height: 135px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cart-empty span {
  font-size: 28px;
  margin-bottom: 9px;
}

.cart-empty b {
  font-size: 11px;
}

.cart-empty p {
  font-size: 9px;
  color: var(--muted);
  margin: 5px 0;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  border-bottom: 1px solid #edf1ed;
}

.cart-item-info {
  min-width: 0;
  flex: 1;
}

.cart-item-info b {
  display: block;
  font-size: 10px;
  margin-bottom: 4px;
}

.cart-item-info small {
  font-size: 9px;
  color: var(--muted);
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-control button {
  width: 25px;
  height: 25px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--g800);
  font-weight: 700;
}

.qty-control span {
  font-size: 10px;
  font-weight: 700;
  min-width: 12px;
  text-align: center;
}

.cart-summary {
  border-top: 1px solid var(--line);
  padding-top: 15px;
}

.summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 10px;
  color: var(--muted);
}

.summary-line b {
  color: var(--text);
}

.total-line {
  color: var(--text);
  font-weight: 700;
  font-size: 11px;
  padding-bottom: 13px;
  border-bottom: 1px dashed var(--line);
}

.total-line strong {
  font: 700 19px 'Plus Jakarta Sans';
  color: var(--g800);
}

.payment-section {
  padding-top: 15px;
}

.payment-section h3 {
  font-size: 11px;
  margin: 0 0 11px;
}

.payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 15px;
}

.payment-btn {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #718078;
  font-size: 10px;
  font-weight: 700;
}

.payment-btn.active {
  background: var(--g50);
  border-color: var(--g700);
  color: var(--g800);
}

.payment-section label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 7px;
}

.cash-input {
  width: 100%;
  height: 41px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0 11px;
  outline: none;
  font: inherit;
  font-size: 11px;
}

.change-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5faf6;
  padding: 12px;
  border-radius: 9px;
  margin: 12px 0;
  font-size: 10px;
}

.change-box strong {
  color: var(--g800);
  font-size: 13px;
}

.checkout-btn {
  width: 100%;
  height: 44px;
  background: var(--g800);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.checkout-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.demo-warning {
  font-size: 9px;
  color: #a17c36;
  text-align: center;
  line-height: 1.5;
  margin: 10px 0 0;
}

/* RESPONSIVE TRANSAKSI */

@media(max-width:1050px) {
  .pos-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 12px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:760px) {
  .pos-layout {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .pos-catalog {
    padding: 15px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .pos-product {
    padding: 11px;
  }

  .pos-cart {
    position: static;
    padding: 15px;
  }

  .cart-items {
    max-height: 250px;
  }
}

/* =========================================
   RADEN POS - WARM BEIGE THEME
   Update: 01 November 2026
========================================= */

:root {
  --g950: #4B382B;
  --g900: #6F5038;
  --g800: #8B684B;
  --g700: #A17D5F;
  --g50: #F3EAE0;

  --bg: #F5F0E8;
  --white: #FFFDFA;
  --text: #3D342C;
  --muted: #958779;
  --line: #E8E0D6;

  --shadow: 0 8px 28px rgba(87, 65, 45, .055);
}

/* Sidebar dan identitas toko */
.sidebar {
  background: #FFFDFA;
  border-color: var(--line);
}

.brand-mark {
  background: linear-gradient(145deg, #A17D5F, #6F5038);
  box-shadow: 0 5px 12px rgba(111, 80, 56, .16);
}

.store {
  background: #F8F3EC;
  border-color: var(--line);
}

.store-avatar,
.avatar,
.top-avatar {
  background: #EDE1D3;
  color: #795A40;
}

/* Navigasi */
.nav-link {
  color: #87796B;
}

.nav-link:hover,
.nav-link.active {
  background: #F3EAE0;
  color: #795A40;
}

.nav-link em {
  background: #EDE1D3;
  color: #795A40;
}

/* Bantuan */
.help-card {
  background: #F8F3EC;
  border-color: #EDE2D6;
}

.spark {
  background: #EDE1D3;
  color: #795A40;
}

/* Header */
.topbar {
  background: #FFFDFA;
  border-color: var(--line);
}

.connection {
  background: #F8F3EC;
}

/* Dashboard */
.stat-card,
.panel {
  background: #FFFDFA;
  border-color: var(--line);
}

.stat-icon.green,
.quick-icon.green {
  background: #EDE1D3;
  color: #795A40;
}

.quick-action:hover {
  border-color: #D5BDA5;
  box-shadow: 0 7px 17px rgba(111, 80, 56, .08);
}

.text-button {
  color: #795A40;
}

.empty span,
.placeholder > span {
  background: #F3EAE0;
  color: #A17D5F;
}

/* Transaksi */
.pos-catalog,
.pos-cart {
  background: #FFFDFA;
  border-color: var(--line);
}

.pos-search {
  background: #FAF7F2;
  border-color: var(--line);
}

.pos-search:focus,
.cash-input:focus {
  border-color: #A17D5F;
  box-shadow: 0 0 0 3px rgba(161, 125, 95, .12);
}

.category-btn.active {
  background: #8B684B;
  border-color: #8B684B;
}

.product-symbol {
  background: #F3EAE0;
}

.pos-product strong {
  color: #795A40;
}

.qty-control button {
  color: #795A40;
}

.change-box {
  background: #F8F3EC;
}

.change-box strong {
  color: #795A40;
}

.payment-btn.active {
  background: #F3EAE0;
  border-color: #A17D5F;
  color: #795A40;
}

.checkout-btn {
  background: #8B684B;
}

.checkout-btn:hover:not(:disabled) {
  background: #6F5038;
}

/* Navigasi mobile */
.mobile-nav {
  background: #FFFDFA;
  border-color: var(--line);
}

.mobile-nav-link.active {
  color: #795A40;
}

.mobile-nav-link.active span {
  background: #F3EAE0;
}

/* Latar halaman */
body {
  background: #F5F0E8;
}



/* =========================================
   DASHBOARD REDESIGN
========================================= */

.dashboard-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}

.dashboard-stats .stat-card {
  min-height: 155px;
  padding: 21px;
  border-radius: 17px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.dashboard-stats .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(87, 65, 45, .09);
}

.dashboard-stats .stat-head {
  margin-bottom: 17px;
}

.dashboard-stats .stat-card p {
  font-size: 11px;
  margin-bottom: 7px;
}

.dashboard-stats .stat-card strong {
  font-size: 25px;
  letter-spacing: -.6px;
}

.dashboard-stats .stat-card footer {
  font-size: 10px;
  margin-top: 12px;
}

.dashboard-grid {
  gap: 18px;
}

.dashboard-grid .panel {
  border-radius: 17px;
  padding: 21px;
}

.dashboard-grid .panel-heading {
  margin-bottom: 20px;
}

.dashboard-grid .panel-heading h2 {
  font-size: 15px;
}

.dashboard-grid .panel-heading p {
  font-size: 11px;
}

.dashboard-grid .quick-grid {
  gap: 12px;
}

.dashboard-grid .quick-action {
  min-height: 112px;
  padding: 15px;
  border-radius: 13px;
}

.dashboard-grid .quick-action b {
  font-size: 11px;
}

.dashboard-grid .quick-action small {
  font-size: 10px;
}

@media (max-width: 760px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dashboard-stats .stat-card {
    min-height: 140px;
    padding: 14px;
  }

  .dashboard-stats .stat-card:last-child {
    grid-column: 1 / -1;
  }

  .dashboard-stats .stat-card strong {
    font-size: 21px;
  }

  .dashboard-grid {
    gap: 12px;
  }

  .dashboard-grid .panel {
    padding: 16px;
  }

  .dashboard-grid .quick-action {
    min-height: 105px;
    padding: 12px;
  }
}


/* =========================================
   RADEN POS - KASIR REDESIGN
   Update: 01 November 2026
========================================= */

/* Area utama kasir */
#page-transaksi .page-title {
  margin-bottom: 20px;
}

#page-transaksi .pos-layout {
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 18px;
  align-items: start;
}

/* Katalog produk */
#page-transaksi .pos-catalog {
  padding: 23px;
  border-radius: 20px;
  background: var(--white);
  border-color: #e7ddd1;
  box-shadow: 0 8px 30px rgba(75, 56, 43, .045);
}

#page-transaksi .pos-toolbar {
  margin-bottom: 4px;
}

#page-transaksi .pos-toolbar h2,
#page-transaksi .cart-heading h2 {
  font-size: 16px;
  letter-spacing: -.35px;
  color: var(--g950);
}

#page-transaksi .pos-toolbar p,
#page-transaksi .cart-heading p {
  font-size: 11px;
  line-height: 1.5;
}

#page-transaksi .demo-label {
  border: 1px solid #ead9b8;
  background: #fbf3e5;
  color: #98713b;
  border-radius: 20px;
  padding: 7px 11px;
}

/* Pencarian */
#page-transaksi .pos-search {
  height: 46px;
  margin: 21px 0 15px;
  padding: 0 16px;
  border-radius: 12px;
  background: #faf7f2;
  border-color: #e9dfd3;
  color: var(--text);
  transition: .2s ease;
}

#page-transaksi .pos-search:focus {
  background: #fff;
  border-color: var(--g700);
  box-shadow: 0 0 0 4px rgba(139, 104, 75, .10);
}

/* Kategori */
#page-transaksi .pos-categories {
  gap: 9px;
  padding: 2px 1px 8px;
  scrollbar-width: thin;
}

#page-transaksi .category-btn {
  padding: 9px 15px;
  border-radius: 20px;
  background: #faf7f2;
  border-color: #e9dfd3;
  color: #806f60;
  transition: .2s ease;
}

#page-transaksi .category-btn:hover {
  border-color: var(--g700);
  color: var(--g800);
}

#page-transaksi .category-btn.active {
  background: var(--g800);
  border-color: var(--g800);
  color: #fff;
  box-shadow: 0 4px 10px rgba(75, 56, 43, .13);
}

/* Grid dan kartu produk */
#page-transaksi .product-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin-top: 17px;
}

#page-transaksi .pos-product {
  min-height: 145px;
  padding: 15px;
  border-radius: 15px;
  background: #fffdfa;
  border-color: #ebe2d8;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

#page-transaksi .pos-product:hover {
  transform: translateY(-3px);
  border-color: #c9ad91;
  box-shadow: 0 9px 22px rgba(75, 56, 43, .09);
}

#page-transaksi .product-symbol {
  width: 43px;
  height: 43px;
  margin-bottom: 14px;
  border-radius: 13px;
  background: #f2e9df;
  color: var(--g800);
}

#page-transaksi .pos-product b {
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}

#page-transaksi .pos-product small {
  font-size: 10px;
  margin-bottom: 12px;
}

#page-transaksi .pos-product strong {
  color: var(--g800);
  font-size: 12px;
}

/* Keranjang */
#page-transaksi .pos-cart {
  padding: 21px;
  border-radius: 20px;
  background: var(--white);
  border-color: #e7ddd1;
  box-shadow: 0 8px 30px rgba(75, 56, 43, .06);
  top: 88px;
}

#page-transaksi .cart-heading {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee6dd;
}

#page-transaksi .cart-clear {
  background: #f9eeeb;
  color: #a65f50;
  border: 1px solid #f0ded8;
  border-radius: 9px;
  padding: 8px 11px;
  transition: .2s ease;
}

#page-transaksi .cart-clear:hover {
  background: #f3e0da;
}

#page-transaksi .cart-items {
  margin: 10px 0 17px;
  min-height: 155px;
}

#page-transaksi .cart-empty span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #f3ece3;
  color: #9a8066;
  font-size: 25px;
}

#page-transaksi .cart-empty b {
  color: var(--text);
  font-size: 12px;
}

#page-transaksi .cart-empty p {
  font-size: 10px;
}

/* Ringkasan belanja */
#page-transaksi .cart-summary {
  border-top-color: #e9dfd3;
  padding-top: 17px;
}

#page-transaksi .summary-line {
  font-size: 11px;
  margin-bottom: 13px;
}

#page-transaksi .total-line {
  padding: 15px 0;
  border-top: 1px dashed #ded1c3;
  border-bottom: 1px dashed #ded1c3;
  font-size: 12px;
}

#page-transaksi .total-line strong {
  font-size: 23px;
  color: var(--g900);
}

/* Pembayaran */
#page-transaksi .payment-section {
  padding-top: 19px;
}

#page-transaksi .payment-section h3 {
  font-size: 12px;
  margin-bottom: 12px;
  color: var(--g950);
}

#page-transaksi .payment-methods {
  gap: 9px;
}

#page-transaksi .payment-btn {
  min-height: 43px;
  border-radius: 11px;
  background: #faf7f2;
  border-color: #e9dfd3;
  color: #806f60;
  transition: .2s ease;
}

#page-transaksi .payment-btn:hover {
  border-color: var(--g700);
}

#page-transaksi .payment-btn.active {
  background: #f1e7dc;
  border-color: var(--g700);
  color: var(--g900);
}

#page-transaksi .payment-section label {
  font-size: 11px;
  color: var(--text);
}

#page-transaksi .cash-input {
  height: 45px;
  border-radius: 11px;
  border-color: #e6dbcf;
  background: #fffdfa;
}

#page-transaksi .cash-input:focus {
  border-color: var(--g700);
  box-shadow: 0 0 0 4px rgba(139, 104, 75, .10);
}

#page-transaksi .change-box {
  padding: 14px;
  border: 1px solid #e7e0d3;
  border-radius: 11px;
  background: #f7f2ea;
}

#page-transaksi .change-box strong {
  color: var(--g900);
  font-size: 15px;
}

#page-transaksi .checkout-btn {
  height: 47px;
  border-radius: 12px;
  background: var(--g900);
  box-shadow: 0 5px 13px rgba(75, 56, 43, .14);
  transition: .2s ease;
}

#page-transaksi .checkout-btn:hover:not(:disabled) {
  background: var(--g950);
  transform: translateY(-1px);
}

#page-transaksi .demo-warning {
  color: #98713b;
  font-size: 9px;
  line-height: 1.6;
}

/* Tablet */
@media (max-width: 1100px) {
  #page-transaksi .pos-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 13px;
  }

  #page-transaksi .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 760px) {
  #page-transaksi .pos-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  #page-transaksi .pos-catalog {
    padding: 16px;
    border-radius: 17px;
  }

  #page-transaksi .pos-toolbar h2,
  #page-transaksi .cart-heading h2 {
    font-size: 14px;
  }

  #page-transaksi .pos-search {
    height: 44px;
    margin-top: 16px;
  }

  #page-transaksi .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #page-transaksi .pos-product {
    min-height: 135px;
    padding: 12px;
  }

  #page-transaksi .pos-cart {
    position: static;
    padding: 17px;
    border-radius: 17px;
  }

  #page-transaksi .cart-items {
    max-height: 250px;
  }

  #page-transaksi .total-line strong {
    font-size: 21px;
  }
}

/* HP layar kecil */
@media (max-width: 380px) {
  #page-transaksi .pos-catalog {
    padding: 12px;
  }

  #page-transaksi .pos-product {
    padding: 10px;
  }

  #page-transaksi .product-symbol {
    width: 38px;
    height: 38px;
  }

  #page-transaksi .pos-cart {
    padding: 14px;
  }
}



/* =========================================
   RADEN POS - MANAJEMEN PRODUK
========================================= */

#page-produk {
  color: var(--text);
}

#page-produk .page-title {
  margin-bottom: 23px;
}

#page-produk .management-card {
  min-width: 0;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

#page-produk .product-management-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 19px;
}

#page-produk .management-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 21px;
}

#page-produk .management-card-header h2 {
  margin: 0 0 5px;
  font: 700 16px 'Plus Jakarta Sans';
  letter-spacing: -.3px;
}

#page-produk .management-card-header .eyebrow {
  margin-bottom: 7px;
}

#page-produk .management-icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex-shrink: 0;
  border-radius: 12px;
  background: #f1e7dc;
  color: var(--g800);
  font-size: 21px;
}

#page-produk .form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin-bottom: 15px;
}

#page-produk .form-field label {
  color: #655548;
  font-size: 11px;
  font-weight: 700;
}

#page-produk .form-field input,
#page-produk .form-field select {
  width: 100%;
  height: 43px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid #e6dbcf;
  border-radius: 10px;
  outline: none;
  background: #fffdfa;
  color: var(--text);
  font: 500 12px 'DM Sans', sans-serif;
  transition: .2s ease;
}

#page-produk .form-field input::placeholder {
  color: #b5a99c;
}

#page-produk .form-field input:focus,
#page-produk .form-field select:focus {
  border-color: var(--g700);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 104, 75, .10);
}

#page-produk .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#page-produk .management-primary-button {
  width: 100%;
  min-height: 44px;
  margin-top: 3px;
  padding: 10px 15px;
  border: 0;
  border-radius: 11px;
  background: var(--g800);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  transition: .2s ease;
}

#page-produk .management-primary-button:hover {
  background: var(--g900);
  transform: translateY(-1px);
}

#page-produk .management-primary-button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

#page-produk .product-list-card {
  padding: 22px;
}

#page-produk .product-list-heading {
  align-items: center;
  margin-bottom: 19px;
}

#page-produk .product-list-heading .muted {
  margin-top: 5px;
  line-height: 1.5;
}

#page-produk .management-secondary-button {
  flex-shrink: 0;
  min-height: 37px;
  padding: 8px 12px;
  border: 1px solid #e5d9cc;
  border-radius: 9px;
  background: #faf6f0;
  color: var(--g900);
  font-size: 10px;
  font-weight: 700;
}

#page-produk .management-secondary-button:hover {
  background: #f1e7dc;
}

#page-produk .management-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  scrollbar-width: thin;
}

#page-produk .management-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  background: #fffdfa;
  text-align: left;
}

#page-produk .management-table th {
  padding: 14px 13px;
  background: #f7f2ea;
  color: #806f60;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}

#page-produk .management-table td {
  padding: 14px 13px;
  border-bottom: 1px solid #f0eae2;
  color: #65594e;
  font-size: 11px;
  white-space: nowrap;
}

#page-produk .management-table tbody tr:last-child td {
  border-bottom: 0;
}

#page-produk .management-table tbody tr:hover {
  background: #fcf9f5;
}

#page-produk .management-empty {
  padding: 35px 15px !important;
  text-align: center;
  color: var(--muted) !important;
}

#page-produk .product-stock-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
}

#page-produk .product-stock-status.available-stock {
  background: #edf4e9;
  color: #617c4d;
}

#page-produk .product-stock-status.low-stock {
  background: #fbefdf;
  color: #a87836;
}

#page-produk .management-message {
  margin-bottom: 15px;
  padding: 11px 13px;
  border-radius: 9px;
  background: #f7f2ea;
  color: #795a40;
  font-size: 11px;
  line-height: 1.5;
}

#page-produk .management-message[hidden] {
  display: none;
}

/* Tablet */
@media (max-width: 950px) {
  #page-produk .product-management-grid {
    gap: 12px;
  }

  #page-produk .management-card {
    padding: 17px;
  }
}

/* Mobile */
@media (max-width: 760px) {
  #page-produk .product-management-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  #page-produk .management-card,
  #page-produk .product-list-card {
    padding: 16px;
    border-radius: 15px;
  }

  #page-produk .management-card-header h2 {
    font-size: 14px;
  }

  #page-produk .form-field input,
  #page-produk .form-field select {
    height: 42px;
    font-size: 11px;
  }

  #page-produk .product-list-heading {
    align-items: flex-start;
  }

  #page-produk .management-secondary-button {
    font-size: 9px;
    padding: 7px 9px;
  }

  #page-produk .management-table {
    min-width: 790px;
  }
}

@media (max-width: 380px) {
  #page-produk .form-row {
    gap: 8px;
  }

  #page-produk .management-card,
  #page-produk .product-list-card {
    padding: 13px;
  }
}


/* =========================================
   RADEN POS - GRAPHITE & BEIGE
   LIGHT MODE FOUNDATION
   Update: 02 November 2026
========================================= */

:root {
  /* Warna utama */
  --g950: #292D32;
  --g900: #292D32;
  --g800: #292D32;
  --g700: #C49A6C;
  --g50: #F4F5F6;

  /* Warna sistem */
  --bg: #F4F5F6;
  --white: #FFFFFF;
  --text: #292D32;
  --muted: #858B91;
  --line: #E9EAEC;

  /* Aksen */
  --accent: #C49A6C;
  --accent-soft: #F3EADF;

  /* Efek */
  --shadow: 0 8px 28px rgba(41, 45, 50, .045);
}

/* Fondasi halaman */
body {
  background: var(--bg);
  color: var(--text);
}

/* Permukaan utama */
.sidebar,
.topbar,
.stat-card,
.panel,
.pos-catalog,
.pos-cart,
#page-produk .management-card {
  background: var(--white);
  border-color: var(--line);
}

/* Identitas aplikasi */
.brand-mark {
  background: linear-gradient(145deg, #C49A6C, #A98052);
  box-shadow: 0 5px 12px rgba(196, 154, 108, .20);
}

.brand b span {
  color: var(--accent);
}

/* Navigasi */
.nav-link:hover,
.nav-link.active {
  background: var(--accent-soft);
  color: var(--g950);
}

.mobile-nav-link.active {
  color: var(--g950);
}

.mobile-nav-link.active span {
  background: var(--accent-soft);
}

/* Tombol utama */
.checkout-btn,
.category-btn.active,
#page-produk .management-primary-button {
  background: var(--g950);
  border-color: var(--g950);
  color: #FFFFFF;
}

/* Aksen beige */
.text-button,
.pos-product strong,
.total-line strong,
.change-box strong {
  color: var(--accent);
}

/* Ikon dan elemen pendukung */
.store-avatar,
.avatar,
.top-avatar,
.spark,
.management-icon,
.product-symbol {
  background: var(--accent-soft);
  color: var(--g950);
}

/* Input */
.pos-search,
.cash-input,
#page-produk .form-field input,
#page-produk .form-field select {
  background: #FFFFFF;
  color: var(--text);
  border-color: var(--line);
}

.pos-search:focus,
.cash-input:focus,
#page-produk .form-field input:focus,
#page-produk .form-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 154, 108, .14);
}



/* =========================================
   RADEN POS - RIWAYAT & LAPORAN
   GRAPHITE & BEIGE THEME
========================================= */

/* -----------------------------------------
   TOOLBAR FILTER
----------------------------------------- */

#page-riwayat .history-toolbar,
#page-laporan .report-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 20px;
  padding: 17px 19px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow);
}

#page-riwayat .history-filter,
#page-laporan .report-filter {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

#page-riwayat .history-filter label,
#page-laporan .report-filter label {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

#page-riwayat input[type="month"],
#page-laporan input[type="month"] {
  width: 190px;
  height: 41px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: var(--text);
  font: 500 11px 'DM Sans', sans-serif;
}

#page-riwayat input[type="month"]:focus,
#page-laporan input[type="month"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(196, 154, 108, .13);
}

#page-riwayat .btn-secondary,
#page-laporan .btn-secondary {
  min-height: 39px;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #F8F8F7;
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  transition: .2s ease;
}

#page-riwayat .btn-secondary:hover,
#page-laporan .btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}


/* -----------------------------------------
   STATUS DATA
----------------------------------------- */

#page-riwayat .data-state,
#page-laporan .data-state {
  padding: 25px 18px;
  margin-bottom: 16px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  background: var(--white);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

#page-riwayat .data-state[hidden],
#page-laporan .data-state[hidden],
#page-riwayat [hidden],
#page-laporan [hidden] {
  display: none !important;
}

#page-riwayat .data-error,
#page-laporan .data-error {
  border: 1px solid #F0D8D4;
  background: #FFF8F6;
  color: #A65F50;
}


/* -----------------------------------------
   RIWAYAT TRANSAKSI
----------------------------------------- */

#page-riwayat .history-list {
  display: grid;
  gap: 12px;
}

#page-riwayat .history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 19px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: .2s ease;
}

#page-riwayat .history-item:hover {
  border-color: #D8C2AA;
  transform: translateY(-2px);
}

#page-riwayat .history-item-info {
  min-width: 0;
}

#page-riwayat .history-item-info b {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 12px;
}

#page-riwayat .history-item-info small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

#page-riwayat .history-item-total {
  flex-shrink: 0;
  text-align: right;
}

#page-riwayat .history-item-total strong {
  display: block;
  color: var(--text);
  font: 700 14px 'Plus Jakarta Sans';
}

#page-riwayat .history-item-total small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

#page-riwayat .history-detail {
  margin-top: 18px;
  padding: 21px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}


/* -----------------------------------------
   RINGKASAN LAPORAN
----------------------------------------- */

#page-laporan .report-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 19px;
}

#page-laporan .report-stats .stat-card {
  min-width: 0;
  min-height: 125px;
  padding: 19px;
  border-radius: 15px;
  transition: .2s ease;
}

#page-laporan .report-stats .stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(41, 45, 50, .07);
}

#page-laporan .report-stats .stat-label {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

#page-laporan .report-stats h2 {
  margin: 0;
  color: var(--text);
  font: 700 21px 'Plus Jakarta Sans';
  letter-spacing: -.5px;
  overflow-wrap: anywhere;
}


/* -----------------------------------------
   TABEL PENDAPATAN HARIAN
----------------------------------------- */

#page-laporan .report-daily-panel {
  padding: 21px;
  border-radius: 16px;
}

#page-laporan .report-daily-panel .panel-heading {
  margin-bottom: 17px;
}

#page-laporan .report-daily-panel .panel-heading h2 {
  color: var(--text);
  font-size: 15px;
}

#page-laporan .report-daily-panel .panel-heading p {
  margin-top: 5px;
  font-size: 10px;
}

#page-laporan .table-responsive {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 11px;
  scrollbar-width: thin;
}

#page-laporan .report-table {
  width: 100%;
  min-width: 570px;
  border-collapse: collapse;
  background: #fff;
  text-align: left;
}

#page-laporan .report-table th {
  padding: 14px 15px;
  background: #F4F5F6;
  color: #737A80;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

#page-laporan .report-table td {
  padding: 14px 15px;
  color: #626970;
  border-bottom: 1px solid #F0F0EF;
  font-size: 11px;
  white-space: nowrap;
}

#page-laporan .report-table tbody tr:last-child td {
  border-bottom: 0;
}

#page-laporan .report-table tbody tr:hover {
  background: #FAF8F5;
}


/* -----------------------------------------
   RESPONSIVE TABLET
----------------------------------------- */

@media (max-width: 1000px) {
  #page-laporan .report-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* -----------------------------------------
   RESPONSIVE MOBILE
----------------------------------------- */

@media (max-width: 760px) {
  #page-riwayat .history-toolbar,
  #page-laporan .report-toolbar {
    align-items: stretch;
    padding: 14px;
    gap: 12px;
    border-radius: 13px;
  }

  #page-riwayat .history-filter,
  #page-laporan .report-filter {
    flex: 1;
    min-width: 0;
  }

  #page-riwayat input[type="month"],
  #page-laporan input[type="month"] {
    width: 100%;
    min-width: 0;
    height: 40px;
  }

  #page-riwayat .btn-secondary,
  #page-laporan .btn-secondary {
    align-self: flex-end;
    white-space: nowrap;
  }

  #page-riwayat .history-item {
    align-items: flex-start;
    padding: 14px;
    border-radius: 12px;
  }

  #page-riwayat .history-item-info b {
    font-size: 11px;
  }

  #page-riwayat .history-item-total strong {
    font-size: 12px;
  }

  #page-laporan .report-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  #page-laporan .report-stats .stat-card {
    min-height: 110px;
    padding: 14px;
    border-radius: 13px;
  }

  #page-laporan .report-stats .stat-label {
    font-size: 9px;
    line-height: 1.5;
    min-height: 27px;
  }

  #page-laporan .report-stats h2 {
    font-size: 17px;
  }

  #page-laporan .report-daily-panel {
    padding: 15px;
    border-radius: 14px;
  }

  #page-laporan .report-daily-panel .panel-heading h2 {
    font-size: 13px;
  }

  #page-laporan .report-table {
    min-width: 540px;
  }
}

@media (max-width: 380px) {
  #page-riwayat .history-toolbar,
  #page-laporan .report-toolbar {
    flex-wrap: wrap;
  }

  #page-riwayat .btn-secondary,
  #page-laporan .btn-secondary {
    width: 100%;
  }

  #page-laporan .report-stats .stat-card {
    padding: 12px;
  }

  #page-laporan .report-stats h2 {
    font-size: 15px;
  }
}



/* =========================================
   RADEN POS - FIX TAMPILAN RIWAYAT
   Sesuai class yang dibuat oleh JavaScript
========================================= */

/* Daftar transaksi */
#page-riwayat .history-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* Kartu transaksi */
#page-riwayat .history-card {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 19px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  box-shadow: var(--shadow);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

#page-riwayat .history-card:hover {
  border-color: #D8C2AA;
  transform: translateY(-2px);
}

/* Informasi transaksi */
#page-riwayat .history-card-info {
  flex: 1;
  min-width: 0;
}

#page-riwayat .history-card-info b {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

#page-riwayat .history-card-info small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

/* Ringkasan transaksi */
#page-riwayat .history-card-summary {
  flex-shrink: 0;
  text-align: right;
}

#page-riwayat .history-card-summary strong {
  display: block;
  color: var(--text);
  font: 700 14px 'Plus Jakarta Sans', sans-serif;
}

#page-riwayat .history-card-summary small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
}

/* Detail transaksi */
#page-riwayat .history-detail {
  margin-top: 18px;
  padding: 21px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
}

#page-riwayat .history-back {
  margin-bottom: 16px;
}

#page-riwayat .history-detail-meta {
  margin-bottom: 18px;
}

#page-riwayat .history-detail-items {
  display: grid;
  gap: 10px;
}

#page-riwayat .history-detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

#page-riwayat .history-detail-total {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  text-align: right;
}

/* Tampilan HP */
@media (max-width: 760px) {
  #page-riwayat .history-card {
    padding: 14px;
    border-radius: 12px;
    gap: 10px;
  }

  #page-riwayat .history-card-info b {
    font-size: 11px;
  }

  #page-riwayat .history-card-summary strong {
    font-size: 12px;
  }

  #page-riwayat .history-detail {
    padding: 15px;
    border-radius: 14px;
  }
}


/* =========================================
   TOMBOL KEMBALI KE RIWAYAT
========================================= */

#page-riwayat .history-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 39px;
  margin-bottom: 18px;
  padding: 9px 16px;

  border: 1px solid var(--line);
  border-radius: 9px;
  background: #F8F8F7;
  color: var(--text);

  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
  transition: all .2s ease;
}

#page-riwayat .history-back:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  transform: translateX(-2px);
}

#page-riwayat .history-back:active {
  transform: scale(.97);
}

#page-riwayat .history-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* =========================================
   RADEN POS - HEADER REDESIGN
========================================= */

.topbar {
  height: 72px;
  padding: 0 32px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.top-left,
.top-right {
  display: flex;
  align-items: center;
}

.top-left {
  gap: 15px;
}

.top-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}

.top-brand-mark {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #C49A6C, #A98052);
  color: #fff;
  font: 800 23px 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 4px 12px rgba(196, 154, 108, .2);
}

.top-brand-name {
  font: 800 16px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 1.3px;
  color: var(--text);
}

.top-right {
  gap: 11px;
}

.header-action {
  position: relative;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  transition: .2s ease;
}

.header-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.header-action svg {
  width: 19px;
  height: 19px;
}

.notification i {
  position: absolute;
  width: 7px;
  height: 7px;
  top: 7px;
  right: 7px;
  border: 1.5px solid var(--white);
  border-radius: 50%;
  background: var(--accent);
}

.theme-icon-sun {
  display: none;
}

.mobile-menu {
  flex-shrink: 0;
}

/* Mobile */
@media (max-width: 760px) {
  .topbar {
    height: 62px;
    padding: 0 15px;
  }

  .top-brand-mark {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }

  .top-brand-name {
    font-size: 14px;
  }

  .top-right {
    gap: 8px;
  }

  .header-action {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
}


@media (max-width: 760px) {
    .mobile-menu {
        display: none !important;
    }
}

.top-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.top-brand img {
    display: block;
    width: 185px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 760px) {
    .topbar {
        height: 62px;
        padding: 0 15px;
    }

    .mobile-menu {
        display: none !important;
    }

    .top-brand img {
        width: 145px;
    }
}



/* =========================================
   RADEN POS - DARK MODE
========================================= */

body.dark-mode {
  --bg: #17191C;
  --white: #22262B;
  --text: #E8E9EB;
  --muted: #A0A5AB;
  --line: #353A40;

  --g950: #E8E9EB;
  --g900: #E8E9EB;
  --g800: #D6D9DC;
  --g700: #C49A6C;
  --g50: #30343A;

  --accent: #C49A6C;
  --accent-soft: #39332D;

  --shadow: 0 8px 28px rgba(0, 0, 0, .18);

  background: var(--bg);
  color: var(--text);
}

/* Permukaan utama */
body.dark-mode .sidebar,
body.dark-mode .topbar,
body.dark-mode .stat-card,
body.dark-mode .panel,
body.dark-mode .pos-catalog,
body.dark-mode .pos-cart,
body.dark-mode .management-card,
body.dark-mode .history-card,
body.dark-mode .history-detail,
body.dark-mode .history-toolbar,
body.dark-mode .report-toolbar {
  background: var(--white);
  border-color: var(--line);
  color: var(--text);
}

/* Header */
body.dark-mode .topbar {
  background: #22262B;
}

body.dark-mode .top-brand-name,
body.dark-mode .top-left b {
  color: var(--text);
}

body.dark-mode .header-action,
body.dark-mode .mobile-menu {
  background: #2B3036;
  color: var(--text);
  border-color: var(--line);
}

/* Sidebar */
body.dark-mode .store,
body.dark-mode .help-card {
  background: #292E34;
  border-color: var(--line);
}

body.dark-mode .nav-link {
  color: #A0A5AB;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
  background: var(--accent-soft);
  color: var(--text);
}

body.dark-mode .store-avatar,
body.dark-mode .avatar,
body.dark-mode .top-avatar,
body.dark-mode .spark,
body.dark-mode .management-icon,
body.dark-mode .product-symbol {
  background: #39332D;
  color: var(--accent);
}

/* Dashboard */
body.dark-mode .stat-card,
body.dark-mode .panel {
  color: var(--text);
}

body.dark-mode .stat-head small,
body.dark-mode .quick-action,
body.dark-mode .date-chip {
  background: #292E34;
  border-color: var(--line);
  color: var(--text);
}

body.dark-mode .quick-action b,
body.dark-mode .panel-heading h2,
body.dark-mode .stat-card strong {
  color: var(--text);
}

body.dark-mode .empty span,
body.dark-mode .placeholder,
body.dark-mode .placeholder > span {
  background: #292E34;
  border-color: var(--line);
  color: var(--muted);
}

/* Kasir */
body.dark-mode .pos-search,
body.dark-mode .cash-input,
body.dark-mode .category-btn,
body.dark-mode .pos-product,
body.dark-mode .payment-btn,
body.dark-mode .qty-control button {
  background: #292E34;
  border-color: var(--line);
  color: var(--text);
}

body.dark-mode .pos-search::placeholder,
body.dark-mode input::placeholder {
  color: #858B91;
}

body.dark-mode .pos-product b,
body.dark-mode .summary-line b,
body.dark-mode .total-line,
body.dark-mode .payment-section label,
body.dark-mode .payment-section h3 {
  color: var(--text);
}

body.dark-mode .category-btn.active,
body.dark-mode .checkout-btn,
body.dark-mode .management-primary-button {
  background: #C49A6C;
  border-color: #C49A6C;
  color: #17191C;
}

body.dark-mode .change-box {
  background: #39332D;
  border-color: var(--line);
}

body.dark-mode .cart-item {
  border-color: var(--line);
}

/* Manajemen produk */
body.dark-mode .form-field label {
  color: #D6D9DC;
}

body.dark-mode #page-produk .form-field input,
body.dark-mode #page-produk .form-field select {
  background: #292E34;
  border-color: var(--line);
  color: var(--text);
}

body.dark-mode .management-table,
body.dark-mode .report-table {
  background: #22262B;
}

body.dark-mode .management-table th,
body.dark-mode .report-table th {
  background: #30353B;
  color: #D6D9DC;
  border-color: var(--line);
}

body.dark-mode .management-table td,
body.dark-mode .report-table td {
  color: #D0D3D6;
  border-color: var(--line);
}

body.dark-mode .management-table tbody tr:hover,
body.dark-mode .report-table tbody tr:hover {
  background: #30353B;
}

/* Riwayat dan laporan */
body.dark-mode .data-state {
  background: #22262B;
  border-color: var(--line);
  color: var(--muted);
}

body.dark-mode .data-error {
  background: #382A29;
  border-color: #68413C;
  color: #E9A49A;
}

body.dark-mode .history-back,
body.dark-mode .btn-secondary,
body.dark-mode .management-secondary-button {
  background: #30353B;
  border-color: var(--line);
  color: var(--text);
}

body.dark-mode .history-card-summary strong,
body.dark-mode .history-card-info b,
body.dark-mode .history-detail {
  color: var(--text);
}

/* Navigasi mobile */
body.dark-mode .mobile-nav {
  background: #22262B;
  border-color: var(--line);
}

body.dark-mode .mobile-nav-link {
  color: #858B91;
}

body.dark-mode .mobile-nav-link.active {
  color: var(--accent);
}

body.dark-mode .mobile-nav-link.active span {
  background: var(--accent-soft);
}

/* Ikon tema */
body.dark-mode .theme-icon-moon {
  display: none;
}

body.dark-mode .theme-icon-sun {
  display: block;
}

/* Transisi tema */
body,
body * {
  transition-property: background-color, border-color, color;
  transition-duration: .18s;
  transition-timing-function: ease;
}