/* =========================================================
   Voucher System UI Theme (Green • Blue • White)
   - Professional, clean, subtle motion
   - Works with Bootstrap 5
   ========================================================= */

:root{
  --bg: #f6fbff;
  --surface: #ffffff;
  --surface-2: #f3f8ff;
  --header-h: 56px;
  --sidebar-w: 260px;
  --sidebar-cw: 72px;

  --text: #0f172a;         /* slate-900 */
  --muted: #64748b;        /* slate-500 */
  --border: #e2e8f0;       /* slate-200 */

  --blue: #2563eb;         /* blue-600 */
  --blue-700:#1d4ed8;
  --green:#16a34a;         /* green-600 */
  --green-700:#15803d;

  --danger:#dc2626;
  --warning:#f59e0b;

  --radius: 16px;
  --radius-sm: 12px;

  --shadow-sm: 0 8px 18px rgba(2, 6, 23, 0.06);
  --shadow-md: 0 18px 40px rgba(2, 6, 23, 0.10);

  --ring: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* ---------- Base ---------- */
html, body{ height: 100%; }

body{
  background: radial-gradient(900px 500px at 10% 0%, rgba(37,99,235,0.10), transparent 60%),
              radial-gradient(700px 400px at 80% 10%, rgba(22,163,74,0.10), transparent 65%),
              var(--bg);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ text-decoration: none; }

/* ---------- Cards / Surfaces ---------- */
.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.card-soft{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
  border: 1px solid rgba(226,232,240,0.9);
}

.shadow-soft{ box-shadow: var(--shadow-sm) !important; }
.shadow-deep{ box-shadow: var(--shadow-md) !important; }

/* ---------- Headings ---------- */
h1,h2,h3,h4,h5{ letter-spacing: -0.02em; }
h2{ font-weight: 900; }

/* ---------- Text helpers ---------- */
.text-muted{ color: var(--muted) !important; }

.stat-card-value{
  font-size: clamp(1.65rem, 1.65vw, 2.1rem);
  line-height: 1.15;
  white-space: nowrap;
}

.stats-cards-wrap{
  width: 100%;
}

@media (max-width: 767.98px){
  .stats-cards-collapsed .stat-card-extra{
    display: none !important;
  }
}

/* ---------- Badges ---------- */
.badge-soft{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .65rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.15);
  color: var(--blue-700);
  font-weight: 700;
}

/* ---------- Tabs ---------- */
.nav-tabs{ border-bottom: 1px solid var(--border); }

.nav-tabs .nav-link{
  border: none !important;
  border-radius: 999px !important;
  padding: .55rem .85rem;
  color: var(--muted);
  font-weight: 800;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.nav-tabs .nav-link:hover{
  background: rgba(2,6,23,0.04);
  color: var(--text);
  transform: translateY(-1px);
}

.nav-tabs .nav-link.active{
  background: linear-gradient(90deg, rgba(37,99,235,0.14), rgba(22,163,74,0.12));
  color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.18);
}

.nav-pills .nav-link{
  border-radius: 999px !important;
  padding: .55rem 1.15rem;
  font-size: .92rem;
  font-weight: 800;
  color: inherit;
  background: transparent;
}

.nav-pills{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem;
  border-radius: 20px;
}

.nav-pills .nav-link.active{
  border-radius: 999px !important;
  color: inherit;
  background: #8fd3ff;
}

.nav-pills .nav-link:hover{
  color: inherit;
}

.voucher-subtabs{
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
}

.voucher-subtabs .nav-link{
  padding: .5rem 1rem;
  border: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  background: transparent !important;
  color: rgba(100,116,139,0.9);
  font-size: .95rem;
  font-weight: 800;
  margin-bottom: -1px;
}

.voucher-subtabs .nav-link:hover{
  color: var(--text);
  background: rgba(0,0,0,0.02) !important;
  border-color: transparent !important;
}

.voucher-subtabs .nav-link.active{
  color: var(--text);
  background: #ffffff !important;
  border-color: var(--border) var(--border) #ffffff !important;
  box-shadow: none;
}

/* ---------- Forms ---------- */
.form-control,
.form-select{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.96);
  transition: box-shadow .15s ease, border-color .15s ease;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(37,99,235,0.55);
  box-shadow: var(--ring);
}

.custom-select-wrap{
  position: relative;
}

.custom-select-trigger{
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

.custom-select-trigger-input{
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 14px 14px;
}

.custom-select-trigger::after{
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.custom-select-menu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(15,23,42,0.14);
  z-index: 1080;
  padding: .35rem 0;
}

.custom-select-search{
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0 .6rem .4rem;
  background: #fff;
}

.custom-select-search .form-control{
  border-radius: 10px;
}

.custom-select-option{
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: .55rem .85rem;
  color: var(--text);
}

.custom-select-option:hover,
.custom-select-option.active{
  background: rgba(37,99,235,0.08);
}

label.form-label{
  font-weight: 800;
  color: rgba(15,23,42,0.85);
}

.pt-pill{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(2,6,23,0.04);
  border: 1px solid rgba(226,232,240,0.9);
  font-weight: 800;
  color: rgba(15,23,42,0.92);
  cursor: default;
}

.amt-pill{
  display: inline-block;
  cursor: default;
  border-bottom: 1px dashed rgba(100,116,139,0.55);
}

#mainContent .amt-pill:hover{
  border-bottom-color: rgba(37,99,235,0.55);
}

#ptMiniTooltip{
  position: fixed;
  max-width: 360px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(226,232,240,0.95);
  box-shadow: 0 10px 28px rgba(2,6,23,0.14);
  color: rgba(15,23,42,0.92);
  padding: .5rem .6rem;
  border-radius: .6rem;
  font-size: .85rem;
  line-height: 1.3;
  z-index: 2000;
  pointer-events: none;
  display: none;
  white-space: normal;
}

/* ---------- Buttons (professional + subtle effects) ---------- */
.btn{
  border-radius: 14px;
  font-weight: 900;
  letter-spacing: .01em;
  padding: .55rem .85rem;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, opacity .12s ease;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{
  border: none;
  background: linear-gradient(135deg, var(--blue), var(--green));
  box-shadow: 0 10px 22px rgba(37,99,235,0.22);
}

.btn-primary:hover{
  filter: brightness(1.02);
  box-shadow: 0 16px 34px rgba(37,99,235,0.28);
  transform: translateY(-1px);
}

.btn-success{
  border: none;
  background: linear-gradient(135deg, var(--green), #22c55e);
  box-shadow: 0 10px 22px rgba(22,163,74,0.22);
}

.btn-success:hover{
  filter: brightness(1.02);
  box-shadow: 0 16px 34px rgba(22,163,74,0.26);
  transform: translateY(-1px);
}

.btn-outline-secondary{
  border: 1px solid rgba(100,116,139,0.35);
  color: rgba(15,23,42,0.85);
  background: rgba(255,255,255,0.75);
}

.btn-outline-secondary:hover{
  background: rgba(2,6,23,0.04);
  transform: translateY(-1px);
}

.btn-outline-danger{
  border: 1px solid rgba(220,38,38,0.35);
  color: var(--danger);
  background: rgba(255,255,255,0.75);
}

.btn-outline-danger:hover{
  background: rgba(220,38,38,0.06);
  transform: translateY(-1px);
}

.btn-sm{
  border-radius: 12px;
  padding: .34rem .52rem;
  font-weight: 900;
  font-size: .84rem;
  line-height: 1.15;
}

.action-cell-buttons .btn{
  min-width: 0;
}

/* Small utility for locked buttons */
.btn-locked{
  opacity: .75;
  cursor: not-allowed;
}

/* ---------- Table ---------- */
.voucher-table .col-remarks {
  max-width: 220px;
  white-space: normal;
  word-break: break-word;
}

/* Action column stability */
.voucher-table .col-action {
  min-width: 260px;
  white-space: nowrap;
}

/* Better button spacing */
.voucher-table .col-action .btn {
  margin-bottom: 4px;
}

.table{ border-color: var(--border); }

.table thead th{
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(100,116,139,0.95);
  border-bottom: 1px solid var(--border);
  padding-top: 1rem;
  padding-bottom: .85rem;
}

.table tbody td{ vertical-align: middle; }

.table-hover tbody tr{ transition: background .12s ease; }

.table-hover tbody tr:hover{ background: rgba(37,99,235,0.04); }

.table-minimal-wrap{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.96);
  overflow: hidden;
}

.table.table-minimal{
  margin-bottom: 0;
}

.table.table-minimal thead th{
  padding: .58rem .75rem;
  font-size: .68rem;
  letter-spacing: .06em;
  color: rgba(100,116,139,0.95);
  background: rgba(2,6,23,0.02);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
}

.table.table-minimal tbody td{
  padding: .58rem .75rem;
  font-size: .95rem;
  border-top: 1px solid rgba(226,232,240,0.75);
  vertical-align: middle;
}

.table.table-minimal tbody tr:hover{
  background: rgba(2,6,23,0.025);
}

.table.table-minimal td .badge{
  font-weight: 800;
}

.history-page{
  height: calc(100vh - var(--header-h) - 4px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.history-page .history-card{
  flex: 1 1 auto;
  min-height: 0;
}

.history-page .history-card .card-body{
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.history-page .table-minimal-wrap{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.history-table-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.history-table-scroll thead th{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  background-clip: padding-box;
}

.history-table-scroll .table.table-minimal thead th{
  position: sticky !important;
  top: 0;
  z-index: 10;
  background-color: var(--surface) !important;
  background-image: none !important;
}

.voucher-row .vno-link.vno-priority{
  color: rgba(220,38,38,0.95) !important;
}

/* ---------- Modal ---------- */
.modal-content{
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

/* ---------- Select (Chevron) ---------- */
.form-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 14px 14px;
  padding-right: 2.25rem;
}
.form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%232563EB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
}
.form-select[multiple],
.form-select[size]:not([size="1"]) {
  background-image: none;
  padding-right: .75rem;
}
.modal{ z-index: 1060; }
.modal-backdrop{ z-index: 1050; }

.modal-header{ border-bottom: 1px solid var(--border); }
.modal-footer{ border-top: 1px solid var(--border); }

/* ===========================
   Sidebar (premium)
   =========================== */
#sidebar,
.sidebar{
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.90));
  position: sticky;
  top: 0;
  min-height: calc(100vh - 4px);
  overflow-y: auto;
}
#sidebar{
  transition: width .35s ease, margin-left .35s ease, left .35s ease;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* Fixed sidebar on desktop + content offset */
@media (min-width: 992px){
  #sidebar{
    position: fixed;
    top: 4px;
    left: 0;
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    max-width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    height: calc(100vh - 4px);
    overflow-y: auto;
    overflow-x: visible;
    z-index: 1040;
  }
  #mainContent{
    margin-left: var(--sidebar-w) !important;
    width: calc(100% - var(--sidebar-w)) !important;
    transition: margin-left .35s ease, width .35s ease;
  }

  /* Collapsed: icons only */
  #sidebar.collapsed,
  body.sidebar-collapsed #sidebar{
    width: var(--sidebar-cw);
    min-width: var(--sidebar-cw);
    max-width: var(--sidebar-cw);
    flex-basis: var(--sidebar-cw);
  }
  #sidebar.collapsed ~ #mainContent,
  body.sidebar-collapsed #sidebar ~ #mainContent{
    margin-left: var(--sidebar-cw) !important;
    width: calc(100% - var(--sidebar-cw)) !important;
  }

  /* Hide text labels when collapsed; keep icons */
  #sidebar.collapsed .user-chip,
  #sidebar.collapsed .menu-label,
  #sidebar.collapsed .menu-sep:not(.mt-auto),
  body.sidebar-collapsed #sidebar .user-chip,
  body.sidebar-collapsed #sidebar .menu-label,
  body.sidebar-collapsed #sidebar .menu-sep:not(.mt-auto){
    display: none !important;
  }
  #sidebar.collapsed .brand .brand-title,
  body.sidebar-collapsed #sidebar .brand .brand-title{
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    pointer-events: none;
  }
  #sidebar.collapsed .menu-sep.mt-auto,
  body.sidebar-collapsed #sidebar .menu-sep.mt-auto{
    height: 0;
    background: transparent;
    margin: 0;
  }
  #sidebar.collapsed .nav-item,
  body.sidebar-collapsed #sidebar .nav-item{
    justify-content: center;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  #sidebar.collapsed .nav-item .nav-ic,
  body.sidebar-collapsed #sidebar .nav-item .nav-ic{
    width: 100%;
    text-align: center;
  }
  #sidebar.collapsed .nav-item .nav-ic svg,
  body.sidebar-collapsed #sidebar .nav-item .nav-ic svg{
    display: block;
    margin: 0 auto;
  }
  #sidebar.collapsed .nav-item span:not(.nav-ic),
  body.sidebar-collapsed #sidebar .nav-item span:not(.nav-ic){
    display: none !important;
  }
  #sidebar.collapsed .logout-box,
  body.sidebar-collapsed #sidebar .logout-box{
    padding: .35rem;
  }
}

/* Top header that does not cover sidebar */
.app-topbar{
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 .75rem;
}
.app-topbar-page{
  display: flex;
  align-items: center;
}
.app-topbar-page h2{
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1;
}
.app-topbar-actions{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cashier-filter-icon{
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}
.cashier-filter-icon svg{
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.cashier-filter-wrap{
  position: relative;
}
.cashier-filter-menu{
  width: 240px;
  border-radius: 14px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1050;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  padding: 1rem;
}
.cashier-filter-menu[hidden]{
  display: none !important;
}
.enduser-total-card-btn{
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  appearance: none;
}
.total-amount-card-white{
  background: #fff !important;
}
@media (min-width: 992px){
  .app-topbar{
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
    transition: margin-left .35s ease, width .35s ease;
  }
  body.sidebar-collapsed .app-topbar{
    margin-left: var(--sidebar-cw);
    width: calc(100% - var(--sidebar-cw));
  }
}

/* Sidebar tooltip is rendered via JS to avoid clipping/stacking issues */
#sidebarMiniTooltip{
  position: fixed;
  background: rgba(17,24,39,0.92);
  color: #fff;
  padding: .35rem .55rem;
  border-radius: .6rem;
  font-size: .85rem;
  white-space: nowrap;
  z-index: 3000;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  display: none;
}
@media (max-width: 991.98px){
  .app-topbar{
    margin-left: 0;
    width: 100%;
    height: auto;
    min-height: var(--header-h);
    padding: .6rem .75rem;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
  }
  .app-topbar-page,
  .app-topbar-actions{
    min-width: 0;
  }
  .app-topbar-page h2{
    font-size: 1.05rem;
  }
  .app-topbar-actions{
    display: flex;
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
  }
}

.brand .brand-badge{
  width: 38px;
  height: 38px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: none;
  box-shadow: none;
}

.brand{
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: .35rem;
  margin-bottom: .75rem;
}

.brand .brand-title{
  font-weight: 900;
  line-height: 1.1;
  color: var(--text);
  max-width: 220px;
  transition: opacity .2s ease, max-width .35s ease;
}

.brand .brand-sub{
  font-size: .78rem;
  color: var(--muted);
  font-weight: 700;
}

.user-chip{
  border: 1px solid rgba(37,99,235,0.16);
  background: linear-gradient(90deg, rgba(37,99,235,0.10), rgba(22,163,74,0.08));
  border-radius: var(--radius-sm);
  padding: .65rem .75rem;
}

.user-chip-name{
  font-weight: 900;
  color: var(--text);
  font-size: .95rem;
}

.user-chip-role{
  font-size: .78rem;
  font-weight: 900;
  color: rgba(29,78,216,0.9);
}

.menu-label{
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900;
  color: rgba(100,116,139,0.95);
  margin: .75rem 0 .35rem;
}

.menu-sep{
  height: 1px;
  background: var(--border);
  margin: .75rem 0;
}

.nav-list{
  display: grid;
  gap: .35rem;
}

.logout-box{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(2,6,23,0.04);
  padding: .4rem;
}

.nav-item{
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .75rem;
  border-radius: 14px;
  color: rgba(15,23,42,0.90);
  font-weight: 900;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.nav-item .nav-ic{
  width: 26px;
  text-align: center;
  opacity: .95;
}

.nav-item:hover{
  background: rgba(37,99,235,0.08);
  border-color: rgba(37,99,235,0.14);
  transform: translateY(-1px);
}

.nav-item.active{
  background: linear-gradient(90deg, rgba(37,99,235,0.16), rgba(22,163,74,0.10));
  border-color: rgba(37,99,235,0.18);
  color: var(--blue-700);
}

.nav-badge{
  margin-left: auto;
  font-size: .75rem;
  font-weight: 900;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(37,99,235,0.12);
  border: 1px solid rgba(37,99,235,0.18);
  color: var(--blue-700);
}

.nav-badge-muted{
  background: rgba(100,116,139,0.10);
  border-color: rgba(100,116,139,0.18);
  color: rgba(100,116,139,0.95);
}

.nav-item-disabled{
  opacity: .65;
  cursor: not-allowed;
  user-select: none;
}

/* ===========================
   Page Header (breadcrumb + chips)
   =========================== */
.page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.page-crumb{
  font-size: .78rem;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .02em;
}

.page-title{
  font-weight: 900;
  letter-spacing: -0.02em;
}

.chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.42rem .7rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 900;
  border: 1px solid transparent;
  background: rgba(2,6,23,0.04);
  color: rgba(15,23,42,0.9);
}

.chip-blue{
  background: rgba(37,99,235,0.10);
  border-color: rgba(37,99,235,0.18);
  color: var(--blue-700);
}

.chip-green{
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.18);
  color: var(--green-700);
}

.amount-range-flyout{
  position: relative;
  display: inline-flex;
  z-index: 1200;
}

.office-total-amount-col{
  position: relative;
  z-index: 60;
}

.office-total-amount-card,
.office-total-amount-card .card-body{
  position: relative;
  overflow: visible;
}

.office-total-amount-col:hover{
  z-index: 90;
}

.office-total-amount-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
}

.amount-range-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  min-width: 92px;
  padding: .28rem .68rem;
  border-radius: 12px;
  border: 1px solid rgba(203,213,225,0.95);
  background: #fff;
  color: rgba(15,23,42,0.92);
  font-size: .86rem;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(15,23,42,0.06);
}

.amount-range-menu,
.amount-range-submenu{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 170px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(203,213,225,0.95);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(15,23,42,0.14);
  padding: .45rem;
  z-index: 1300;
  display: none;
}

.amount-range-flyout:hover .amount-range-menu,
.amount-range-flyout:focus-within .amount-range-menu{
  display: block;
}

.amount-range-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  padding: .5rem .7rem;
  border-radius: 12px;
  color: rgba(15,23,42,0.9);
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
}

.amount-range-item:hover,
.amount-range-item.is-active,
.amount-range-item.has-submenu:hover{
  background: rgba(37,99,235,0.10);
  color: var(--blue-700);
}

.amount-range-item.has-submenu{
  position: relative;
  cursor: default;
}

.amount-range-item.has-submenu::after{
  content: "";
  position: absolute;
  top: 0;
  right: -14px;
  width: 18px;
  height: 100%;
}

.submenu-caret{
  font-size: 1rem;
  line-height: 1;
}

.amount-range-submenu{
  top: 0;
  left: calc(100% - 6px);
  max-height: 280px;
  overflow-y: auto;
}

.amount-range-item.has-submenu:hover .amount-range-submenu,
.amount-range-item.has-submenu:focus-within .amount-range-submenu{
  display: block;
}

/* ---------- Small animation (respect reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference){
  .card, .btn, .nav-item, .table-hover tbody tr{
    will-change: transform;
  }
}

@media (max-width: 992px){
  #sidebar{
    position:fixed;
    left:-100%;
    top:0;
    height:100vh;
    width:min(84vw, 300px);
    background:white;
    z-index:1050;
    box-shadow: 18px 0 36px rgba(15,23,42,0.18);
    border-right: 1px solid var(--border);
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar.show{
    left:0;
  }

  #mainContent{
    margin-left: 0 !important;
    width: 100% !important;
    padding: 1rem !important;
  }

  .container-fluid,
  .container-fluid > .row{
    --bs-gutter-x: 0;
  }

  .card{
    border-radius: 14px;
  }

  .card .card-body{
    padding: 1rem;
  }

  .stat-card-value,
  .fs-4.fw-bold{
    font-size: clamp(1.45rem, 5.8vw, 2rem) !important;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
  }

  .fs-3.fw-bold{
    font-size: clamp(1.6rem, 6vw, 2rem) !important;
  }

  .office-total-amount-head{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .55rem;
  }

  .amount-range-flyout{
    width: auto;
    max-width: 100%;
  }

  .amount-range-trigger{
    min-width: 84px;
    padding: .24rem .58rem;
    font-size: .8rem;
  }

  .amount-range-menu,
  .amount-range-submenu,
  .cashier-filter-menu{
    width: min(280px, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
  }

  .amount-range-submenu{
    left: auto;
    right: calc(100% - 6px);
  }

  .nav-tabs,
  .voucher-subtabs{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: .15rem;
  }

  .nav-tabs .nav-link,
  .voucher-subtabs .nav-link,
  .nav-pills .nav-link{
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .voucher-subtabs{
    width: 100%;
  }

  .voucher-subtabs .nav-link{
    padding: .55rem .9rem;
    font-size: .9rem;
  }

  .btn,
  .btn-sm{
    white-space: nowrap;
  }

  .d-flex.align-items-center.justify-content-between.gap-2.flex-wrap.mb-3,
  .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap.mb-2{
    align-items: stretch !important;
  }

  .d-flex.align-items-center.justify-content-between.gap-2.flex-wrap.mb-3 > div:last-child,
  .d-flex.align-items-center.justify-content-between.gap-3.flex-wrap.mb-2 > div:last-child{
    width: 100%;
    max-width: none !important;
  }

  #tableSearch{
    min-height: 44px;
  }

  .table-responsive,
  .history-table-scroll{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table.table-minimal{
    min-width: 900px;
  }

  .table.table-minimal thead th{
    font-size: .64rem;
    padding: .55rem .62rem;
  }

  .table.table-minimal tbody td{
    font-size: .9rem;
    padding: .55rem .62rem;
  }

  .voucher-table .col-action{
    min-width: 220px;
  }

  .action-cell-buttons{
    gap: .35rem !important;
  }

  .action-cell-buttons .btn{
    padding: .32rem .54rem;
    font-size: .8rem;
  }

  .history-page{
    height: auto;
    min-height: auto;
    overflow: visible;
    display: block;
  }

  .history-page .history-card,
  .history-page .history-card .card-body,
  .history-page .table-minimal-wrap{
    min-height: 0;
    height: auto;
  }

  .modal-dialog{
    margin: .75rem;
    max-width: calc(100vw - 1.5rem);
  }
}

@media (min-width: 768px) and (max-width: 991.98px){
  .app-topbar-page h2{
    font-size: 1.2rem;
  }

  .app-topbar-actions .chip{
    margin-left: auto;
  }

  .table.table-minimal{
    min-width: 980px;
  }
}

@media (max-width: 767.98px){
  .app-topbar{
    padding: .55rem .65rem;
  }

  .app-topbar .btn{
    padding: .42rem .65rem;
  }

  .app-topbar-page{
    width: 100%;
  }

  .app-topbar-page h2{
    font-size: 1rem;
  }

  .app-topbar-actions{
    align-items: center;
  }

  .app-topbar-actions .chip{
    padding: .35rem .55rem;
    font-size: .78rem;
  }

  .app-topbar-actions .chip span:first-child{
    display: none;
  }

  .page-head{
    flex-direction: column;
    align-items: stretch;
  }

  #mainContent{
    padding: .85rem !important;
  }

  .card .card-body{
    padding: .9rem;
  }

  .stat-card-value,
  .fs-3.fw-bold,
  .fs-4.fw-bold{
    font-size: clamp(1.35rem, 7vw, 1.8rem) !important;
  }

  .voucher-subtabs .nav-link,
  .nav-tabs .nav-link{
    font-size: .88rem;
    padding: .5rem .82rem;
  }

  .btn-group.w-100{
    flex-wrap: wrap;
  }

  .btn-group.w-100 > .btn,
  .btn-group.w-100 > .btn-check + .btn{
    flex: 1 1 calc(50% - .25rem);
  }

  .amount-range-menu,
  .amount-range-submenu,
  .cashier-filter-menu{
    left: auto;
    right: 0;
  }

  .amount-range-submenu{
    top: calc(100% + 6px);
    right: 0;
  }

  .amount-range-item.has-submenu::after{
    display: none;
  }

  .table.table-minimal{
    min-width: 820px;
  }

  .table.table-minimal tbody td{
    font-size: .88rem;
  }

  .modal-content{
    border-radius: 16px;
  }
}

body.nav-loading-on{
  cursor: progress;
}

.nav-loading-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2000;
  display: none;
}

body.nav-loading-on .nav-loading-overlay{
  display: grid;
  place-items: center;
}

.nav-loading-card{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(226,232,240,0.95);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-loading-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  animation: navdot 0.9s ease-in-out infinite;
}

@keyframes navdot{
  0%{ transform: scale(1); opacity: .7; }
  50%{ transform: scale(1.35); opacity: 1; }
  100%{ transform: scale(1); opacity: .7; }
}