:root {
  --ink: #121214;
  --graphite: #1c1c20;
  --graphite-2: #26262b;
  --flame: #ff5a14;
  --flame-dark: #e24a08;
  --ember: #ff8a3d;
  --paper: #f4f3f1;
  --card: #ffffff;
  --line: #e7e4df;
  --text: #1e1e22;
  --muted: #76716b;
  --ok: #1f9d6b;
  --warn: #e9a100;
  --bad: #d6403a;
  --radius: 12px;
  --bs-body-font-family: 'Manrope', system-ui, sans-serif;
  --bs-body-color: var(--text);
  --bs-primary: var(--flame);
}

* {
  box-sizing: border-box
}

body {
  background: var(--paper);
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  color: var(--text)
}

h1,
h2,
h3,
h4,
.display-font {
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .2px
}

a {
  color: var(--flame-dark);
  text-decoration: none
}

:focus-visible,
:focus {
  outline: none
}

/* ---------- shell ---------- */
.app {
  display: flex;
  min-height: 100vh
}

.sidebar {
  width: 248px;
  background: var(--ink);
  color: #d8d6d2;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1040;
  transition: transform .25s
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 16px;
  color: #fff
}

.brand img {
  width: 46px;
  height: 46px;
  border-radius: 50%
}

.brand b {
  display: block;
  font-family: 'Rajdhani';
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: var(--flame)
}

.brand small {
  font-size: 12px;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase
}

.panel-chip {
  background: var(--graphite-2);
  border-left: 3px solid var(--flame);
  border-radius: 8px;
  padding: 9px 12px;
  margin: 0 2px 18px;
  font-weight: 600;
  font-size: 13px;
  color: #fff
}

.panel-chip i {
  color: var(--flame);
  margin-right: 6px
}

.menu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1
}

.menu a,
.logout {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 9px;
  color: #bdb9b3;
  font-weight: 600;
  transition: background .15s, color .15s
}

.menu a i,
.logout i {
  font-size: 17px
}

.menu a:hover,
.logout:hover {
  background: var(--graphite);
  color: #fff
}

.menu a.active {
  background: var(--flame);
  color: #fff;
  box-shadow: none
}

.logout {
  margin-top: 10px;
  border-top: 1px solid #2c2c31;
  border-radius: 0 0 9px 9px;
  padding-top: 14px
}

.main {
  margin-left: 248px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column
}

.topbar {
  height: 64px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 1030
}

.topbar h1 {
  font-size: 26px;
  margin: 0;
  font-weight: 700
}

.btn-icon {
  font-size: 24px;
  padding: 2px 8px;
  border: 0
}

.who {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.15
}

.who small {
  display: block;
  color: var(--muted);
  font-size: 11px
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--flame);
  display: grid;
  place-items: center;
  font-family: 'Rajdhani';
  font-weight: 700;
  font-size: 18px
}

.content {
  padding: 24px;
  flex: 1
}

@media(max-width:991px) {
  .sidebar {
    transform: translateX(-100%)
  }

  .sidebar.open {
    transform: none
  }

  .main {
    margin-left: 0
  }

  .topbar {
    padding: 0 14px
  }

  .content {
    padding: 16px
  }
}

/* ---------- cards / stats ---------- */
.box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px
}

.box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap
}

.box-head h2 {
  font-size: 21px;
  margin: 0;
  font-weight: 700
}

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  height: 100%;
  position: relative;
  overflow: hidden
}

.stat .label {
  color: var(--muted);
  font-weight: 600;
  font-size: 12.5px
}

.stat .value {
  font-family: 'Rajdhani';
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 2px;
  color: #0f172a;
}

.stat .sub {
  font-size: 12px;
  color: var(--muted)
}

.stat i.ico {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 20px;
  color: var(--flame);
  background: #fff1ea;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center
}

.stat.dark {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff
}

.stat.dark .label,
.stat.dark .sub {
  color: #aaa6a0
}

.stat.dark .value {
  color: var(--ember)
}

.stat.dark i.ico {
  background: var(--graphite-2)
}

.section-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700
}

.section-tag.s1 {
  background: #fff1ea;
  color: var(--flame-dark)
}

.section-tag.s2 {
  background: #e9ecf5;
  color: #34406b
}

.section-tag.sx {
  background: #eee;
  color: #444
}

/* ---------- tables / forms / buttons ---------- */
.table {
  --bs-table-bg: transparent;
  margin: 0;
  font-size: 13.5px
}

.table thead th {
  font-family: 'Manrope';
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  background: #faf9f7
}

.table td {
  vertical-align: middle;
  border-color: #f0eeea
}

.table tbody tr:hover {
  background: #fcfbfa
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums
}

.form-control,
.form-select {
  border-color: #dcd8d2;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 14px
}

.form-control:focus,
.form-control:active,
.form-select:focus,
.form-select:active,
input:focus,
input:active,
select:focus,
select:active,
textarea:focus,
textarea:active,
.form-check-input:focus,
.form-check-input:active {
  border-color: var(--flame);
  box-shadow: none !important;
  outline: none !important
}

.form-label {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 5px
}

.btn {
  border-radius: 9px;
  font-weight: 700;
  padding: 9px 16px;
  font-size: 14px
}

.btn:focus,
.btn:active,
.btn:focus-visible {
  box-shadow: none !important;
  outline: none !important
}

.btn-flame {
  background: var(--flame);
  color: #fff;
  border: 1px solid var(--flame)
}

.btn-flame:hover,
.btn-flame:focus {
  background: var(--flame-dark);
  color: #fff;
  border-color: var(--flame-dark)
}

.btn-ink {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink)
}

.btn-ink:hover {
  background: #000;
  color: #fff
}

.btn-line {
  background: #fff;
  border: 1px solid #d6d2cc;
  color: var(--text)
}

.btn-line:hover {
  border-color: var(--flame);
  color: var(--flame-dark)
}

.btn-sm {
  padding: 5px 10px;
  font-size: 12.5px
}

.badge-in {
  background: #e3f6ee;
  color: var(--ok)
}

.badge-out {
  background: #fde9e8;
  color: var(--bad)
}

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700
}

.pill.low {
  background: #fff4d6;
  color: #9a6a00
}

.pill.out {
  background: #fde9e8;
  color: var(--bad)
}

.pill.good {
  background: #e3f6ee;
  color: var(--ok)
}

.filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: center
}

.filter-bar .form-select,
.filter-bar .form-control {
  width: auto;
  min-width: 150px
}

.empty {
  padding: 36px 10px;
  text-align: center;
  color: var(--muted)
}

.empty i {
  font-size: 34px;
  color: #cfcac3;
  display: block;
  margin-bottom: 6px
}

.profit {
  color: #0f172a;
  font-weight: 700
}

.loss {
  color: var(--bad);
  font-weight: 700
}

/* POS */
.pos-total {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px
}

.pos-total .row-t {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  color: #bbb7b1
}

.pos-total .grand {
  font-family: 'Rajdhani';
  font-size: 34px;
  font-weight: 700;
  color: var(--ember);
  border-top: 1px dashed #3a3a40;
  margin-top: 8px;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: baseline
}

.pos-total .grand span:first-child {
  font-size: 16px;
  color: #fff;
  font-family: 'Manrope'
}

/* ---------- login ---------- */
.login-page {
  min-height: 100vh;
  background-color: #08080a;
  background-image: linear-gradient(135deg, rgba(8, 8, 10, 0.3) 0%, rgba(8, 8, 10, 0.75) 100%), url('../img/login-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: stretch;
  color: #fff;
  position: relative;
  overflow: hidden
}

.login-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 64px;
  position: relative;
  z-index: 2
}

.login-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 90, 20, 0.18);
  border: 1px solid rgba(255, 90, 20, 0.45);
  color: #ff965e;
  padding: 6px 14px;
  border-radius: 30px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  width: fit-content;
  margin-bottom: 16px;
  backdrop-filter: blur(10px)
}

.login-hero h2 {
  font-size: clamp(36px, 4.3vw, 58px);
  font-weight: 700;
  line-height: 1.05;
  max-width: 580px;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .7);
  letter-spacing: .4px
}

.login-hero p {
  max-width: 480px;
  color: #d5d0c8;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .85)
}

.login-side {
  width: min(475px, 100%);
  background: rgba(12, 12, 15, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 42px;
  position: relative;
  z-index: 3
}

.login-side img.logo {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: block;
  box-shadow: 0 0 0 3px rgba(255, 90, 20, .45), 0 16px 36px -8px rgba(255, 90, 20, .55);
  transition: transform .3s ease
}

.login-side img.logo:hover {
  transform: scale(1.04)
}

.login-side h1 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 4px;
  font-weight: 700;
  letter-spacing: .3px
}

.login-side .sub {
  text-align: center;
  color: #9e9992;
  margin-bottom: 26px;
  font-size: 14px
}

.login-side .form-label {
  color: #d6d2cc;
  font-size: 13px;
  font-weight: 600
}

.input-icon {
  position: relative
}

.input-icon>i.bi {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #8d8982;
  font-size: 16px;
  z-index: 2;
  pointer-events: none
}

.input-icon .form-control {
  padding-left: 42px;
  padding-right: 44px;
  background: rgba(22, 22, 28, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  height: 50px;
  border-radius: 10px;
  font-size: 14px;
  transition: border-color .2s
}

.input-icon .form-control::placeholder {
  color: #6c6862
}

.input-icon .form-control:focus,
.input-icon .form-control:active {
  background: #18181d;
  border-color: var(--flame);
  box-shadow: none !important;
  outline: none !important;
  color: #fff
}

.input-icon input[type="password"]::-ms-reveal,
.input-icon input[type="password"]::-ms-clear {
  display: none !important
}

.input-icon .toggle-pass {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  color: #8d8982;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: color .2s
}

.input-icon .toggle-pass:hover {
  color: var(--flame)
}

.input-icon .toggle-pass i {
  position: static !important;
  transform: none !important;
  left: auto !important;
  font-size: 17px;
  color: inherit
}

.login-side .btn-flame {
  height: 50px;
  width: 100%;
  font-size: 15px;
  margin-top: 10px;
  border-radius: 10px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(255, 90, 20, .35);
  transition: transform .15s, box-shadow .2s
}

.login-side .btn-flame:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 90, 20, .45)
}

.login-foot {
  text-align: center;
  color: #6f6b65;
  font-size: 12px;
  margin-top: 28px
}

@media(max-width:860px) {
  .login-hero {
    display: none
  }

  .login-page {
    justify-content: center
  }

  .login-side {
    width: 100%;
    border-left: 0;
    background: rgba(10, 10, 12, .88)
  }
}

@media print {

  .sidebar,
  .topbar,
  .no-print {
    display: none !important
  }

  .main {
    margin: 0
  }

  .content {
    padding: 0
  }

  body {
    background: #fff
  }
}

/* ---------- SweetAlert2 Custom Styling ---------- */
.swal2-container {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.swal2-popup.swal-custom {
  font-family: 'Manrope', system-ui, sans-serif !important;
  border-radius: 18px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 20px 48px -10px rgba(18, 18, 20, 0.25) !important;
  padding: 28px 24px 24px !important;
  background: #ffffff !important;
}

.swal-custom .swal2-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  margin-bottom: 8px !important;
  letter-spacing: .3px !important;
}

.swal-custom .swal2-html-container {
  font-size: 14.5px !important;
  color: var(--muted) !important;
  margin: 10px 0 20px !important;
  line-height: 1.5 !important;
}

.swal-custom .swal2-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 14px !important;
  width: 100% !important;
  justify-content: center !important;
}

.swal-custom .swal2-actions button {
  min-width: 110px !important;
}

.swal2-icon.swal2-warning {
  border-color: #f7a028 !important;
  color: #f7a028 !important;
}

.swal2-icon.swal2-question {
  border-color: var(--flame) !important;
  color: var(--flame) !important;
}

.swal2-icon.swal2-success {
  border-color: var(--ok) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--ok) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(31, 157, 107, 0.3) !important;
}

.swal2-toast-custom {
  font-family: 'Manrope', system-ui, sans-serif !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 32px rgba(18, 18, 20, 0.16) !important;
  border: 1px solid var(--line) !important;
  font-size: 13.5px !important;
  padding: 12px 18px !important;
}

.swal2-toast-custom .swal2-title {
  font-weight: 600 !important;
  font-size: 13.5px !important;
}

/* ---------- POS Quick Search ---------- */
.pos-search-wrap {
  position: relative;
}

.pos-search-input {
  height: 48px;
  font-size: 14.5px;
  border-radius: 10px;
}

.pos-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(18, 18, 20, 0.16);
  max-height: 330px;
  overflow-y: auto;
  z-index: 1050;
  padding: 6px;
}

.pos-search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.12s ease;
  border-bottom: 1px solid #f6f4f0;
}

.pos-search-item:last-child {
  border-bottom: none;
}

.pos-search-item:hover,
.pos-search-item.active {
  background: #fff3ec;
}

.pos-search-item .item-title {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
}

.pos-search-item .item-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
  flex-wrap: wrap;
}

.pos-search-item .item-price {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--flame);
  white-space: nowrap;
}

.pos-search-empty {
  padding: 22px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

/* ---------- Pagination ---------- */
.pag-nav {
  display: flex;
  justify-content: center;
  padding: 18px 0 4px
}

.pag-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap
}

.pag-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  cursor: pointer;
  user-select: none
}

.pag-item:hover:not(.disabled):not(.active) {
  background: #fff1ea;
  border-color: var(--flame);
  color: var(--flame-dark)
}

.pag-item.active {
  background: var(--flame);
  border-color: var(--flame);
  color: #fff;
  pointer-events: none
}

.pag-item.disabled {
  background: #faf9f7;
  border-color: var(--line);
  color: #c5c0ba;
  cursor: not-allowed;
  pointer-events: none
}

.pag-ellipsis {
  border: none;
  background: none;
  cursor: default;
  color: var(--muted)
}

.pag-info {
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  padding-bottom: 6px
}

/* ---------- Developer Credit ---------- */
.dev-credit {
  position: fixed;
  bottom: 10px;
  right: 14px;
  font-size: 11.5px;
  color: #a8a29e;
  letter-spacing: .3px;
  font-weight: 500;
  z-index: 999;
  user-select: none;
}

.dev-credit a {
  color: var(--flame);
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .2s;
}

.dev-credit a:hover {
  color: #25D366;
  text-decoration: none;
}

.dev-credit a i {
  font-size: 12px;
  color: #25D366;
}

@media print {
  .dev-credit {
    display: none;
  }
}

/* ---------- Activity Logs Badges ---------- */
.act-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.act-badge.act-sale { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
.act-badge.act-return { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.act-badge.act-void { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
.act-badge.act-add { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.act-badge.act-edit { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.act-badge.act-delete { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.act-badge.act-stock_in { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.act-badge.act-login { background: #f3f4f6; color: #4b5563; border: 1px solid #e5e7eb; }
.act-badge.act-logout { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.act-badge.act-expense_add { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.act-badge.act-expense_edit { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; }
.act-badge.act-expense_delete { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }