/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@ng-select/ng-select/themes/default.theme.css ***!
  \****************************************************************************************************************************************************************************************************************************************************/
.ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#b3b3b3 #ccc #d9d9d9}.ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}.ng-select.ng-select-opened>.ng-select-container .ng-arrow{top:-2px;border-color:transparent transparent #999;border-width:0 5px 5px}.ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #333}.ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-right-radius:0;border-top-left-radius:0}.ng-select.ng-select-opened.ng-select-right>.ng-select-container{border-top-right-radius:0;border-bottom-right-radius:0}.ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-right-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-opened.ng-select-left>.ng-select-container{border-top-left-radius:0;border-bottom-left-radius:0}.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:#007eff;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 0 3px rgba(0,126,255,0.1)}.ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}.ng-select .ng-has-value .ng-placeholder{display:none}.ng-select .ng-select-container{color:#333;background-color:#fff;border-radius:4px;border:1px solid #ccc;min-height:36px;align-items:center}.ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,0.06)}.ng-select .ng-select-container .ng-value-container{align-items:center;padding-left:10px}[dir="rtl"] .ng-select .ng-select-container .ng-value-container{padding-right:10px;padding-left:0}.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#999}.ng-select.ng-select-single .ng-select-container{height:36px}.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{top:5px;left:0;padding-left:10px;padding-right:50px}[dir="rtl"] .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{padding-right:10px;padding-left:50px}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e6e6e6}.ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-top:5px;padding-left:7px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-right:7px;padding-left:0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{font-size:.9em;margin-bottom:5px;color:#333;background-color:#ebf5ff;border-radius:2px;margin-right:5px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{margin-right:0;margin-left:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:0;padding-right:5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:1px 5px}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#d1e8ff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #b8dbff}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-left:1px solid #b8dbff;border-right:none}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #b8dbff}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:0;border-right:1px solid #b8dbff}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 0 3px 3px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding:0 3px 3px 0}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input>input{color:#000}.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:5px;padding-bottom:5px;padding-left:3px}[dir="rtl"] .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-right:3px;padding-left:0}.ng-select .ng-clear-wrapper{color:#999}.ng-select .ng-clear-wrapper:hover .ng-clear{color:#D0021B}.ng-select .ng-clear-wrapper:focus .ng-clear{color:#D0021B}.ng-select .ng-clear-wrapper:focus{outline:none}.ng-select .ng-spinner-zone{padding:5px 5px 0 0}[dir="rtl"] .ng-select .ng-spinner-zone{padding:5px 0 0 5px}.ng-select .ng-arrow-wrapper{width:25px;padding-right:5px}[dir="rtl"] .ng-select .ng-arrow-wrapper{padding-left:5px;padding-right:0}.ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}.ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}.ng-dropdown-panel{background-color:#fff;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,0.06);left:0}.ng-dropdown-panel.ng-select-top{bottom:100%;border-top-right-radius:4px;border-top-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px;border-top-left-radius:4px}.ng-dropdown-panel.ng-select-right{left:100%;top:0;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-right .ng-dropdown-panel-items .ng-option:first-child{border-top-right-radius:4px}.ng-dropdown-panel.ng-select-bottom{top:100%;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-top-color:#e6e6e6;margin-top:-1px}.ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.ng-dropdown-panel.ng-select-left{left:-100%;top:0;border-top-left-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;border-bottom-color:#e6e6e6;margin-bottom:-1px}.ng-dropdown-panel.ng-select-left .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px}.ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-webkit-user-select:none;user-select:none;padding:8px 10px;font-weight:500;color:rgba(0,0,0,0.54);cursor:pointer}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#f5faff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected.ng-option-marked{color:rgba(0,0,0,0.54);background-color:#ebf5ff;font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,0.87);padding:8px 10px}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked{color:#333;background-color:#ebf5ff}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label,.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked .ng-option-label{font-weight:600}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#f5faff;color:#333}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-right:22px;padding-left:0}.ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}[dir="rtl"] .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{padding-left:5px;padding-right:0}[dir="rtl"] .ng-dropdown-panel{direction:rtl;text-align:right}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!./src/styles.scss?ngGlobalStyle ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/* You can add global styles to this file, and also import other style files */
/* ============================================================================
   DESIGN SYSTEM — dark, high-end POS admin theme
   Replaces the legacy light/blue theme. Every page inherits this through the
   shared shell (side-bar / combo-bar / footer) and the generic Bootstrap-ish
   classes (.card, .table, .btn, .badge, .form-control, .modal) that virtually
   every page in this app already uses.
   ============================================================================ */
:root {
  /* ===== Theme: DARK (default) =====
     html[data-theme="light"] and html[data-theme="classic"] below redefine
     every --pos-* color token to switch the whole app's palette - nothing
     else needs to change per-theme since every component reads these vars. */
  --pos-bg: #0a0e1a;
  --pos-bg-soft: #0d1220;
  --pos-surface: #12182a;
  --pos-surface-2: #161d33;
  --pos-surface-hover: #1c2440;
  --pos-border: rgba(255, 255, 255, 0.08);
  --pos-border-strong: rgba(255, 255, 255, 0.14);
  /* Text */
  --pos-text: #f1f5f9;
  --pos-text-muted: #93a0b8;
  --pos-text-faint: #6b7690;
  /* Brand / actions */
  --pos-primary: #3b82f6;
  --pos-primary-dark: #2563eb;
  --pos-primary-soft: rgba(59, 130, 246, 0.16);
  --pos-accent: #f6b93b;
  /* Semantic */
  --pos-success: #22c55e;
  --pos-success-soft: rgba(34, 197, 94, 0.15);
  --pos-danger: #f87171;
  --pos-danger-soft: rgba(248, 113, 113, 0.15);
  --pos-warning: #fbbf24;
  --pos-warning-soft: rgba(251, 191, 36, 0.15);
  --pos-info: #38bdf8;
  --pos-info-soft: rgba(56, 189, 248, 0.15);
  --pos-beta: #a78bfa;
  --pos-beta-soft: rgba(167, 139, 250, 0.18);
  /* Category accent set — cycled by nth-of-type for icon-tile badges */
  --pos-accent-1: #fb923c;
  /* orange */
  --pos-accent-1-soft: rgba(251, 146, 60, 0.15);
  --pos-accent-2: #a78bfa;
  /* purple */
  --pos-accent-2-soft: rgba(167, 139, 250, 0.15);
  --pos-accent-3: #2dd4bf;
  /* teal */
  --pos-accent-3-soft: rgba(45, 212, 191, 0.15);
  --pos-accent-4: #818cf8;
  /* indigo */
  --pos-accent-4-soft: rgba(129, 140, 248, 0.15);
  --pos-accent-5: #f87171;
  /* red */
  --pos-accent-5-soft: rgba(248, 113, 113, 0.15);
  --pos-accent-6: #22d3ee;
  /* cyan */
  --pos-accent-6-soft: rgba(34, 211, 238, 0.15);
  --pos-accent-7: #fbbf24;
  /* amber */
  --pos-accent-7-soft: rgba(251, 191, 36, 0.15);
  /* Lets Chromium/Firefox render native controls (select/option popups,
     scrollbars, checkboxes) in a dark palette instead of the OS default
     light one - this is the fix for "dropdown looks wrong when opened". */
  color-scheme: dark;
  /* Radius / shadow scale (same across all 3 themes) */
  --pos-radius-sm: 8px;
  --pos-radius-md: 12px;
  --pos-radius-lg: 16px;
  --pos-radius-xl: 20px;
  --pos-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --pos-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --pos-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.35);
  /* ===== Spacing scale — use these instead of ad-hoc px/rem values so
     padding/margin stays consistent across every component. ===== */
  --space-1: 0.25rem;
  /* 4px */
  --space-2: 0.5rem;
  /* 8px */
  --space-3: 0.75rem;
  /* 12px */
  --space-4: 1rem;
  /* 16px */
  --space-5: 1.5rem;
  /* 24px */
  --space-6: 2rem;
  /* 32px */
  /* ===== Typography scale — one font stack, one set of sizes/weights. ===== */
  --font-family-base: "Plus Jakarta Sans", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-xs: 0.75rem;
  /* 12px - helper text, badges */
  --font-size-sm: 0.8125rem;
  /* 13px - labels, table cells */
  --font-size-base: 0.875rem;
  /* 14px - body copy, inputs, buttons */
  --font-size-md: 1rem;
  /* 16px - card titles */
  --font-size-lg: 1.25rem;
  /* 20px - section headings */
  --font-size-xl: 1.5rem;
  /* 24px - page titles */
  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --line-height-base: 1.5;
  /* Back-compat: some components still read the old --portal-* tokens */
  --portal-bg: var(--pos-bg);
  --portal-surface: var(--pos-surface);
  --portal-surface-soft: var(--pos-surface-2);
  --portal-primary: var(--pos-primary);
  --portal-primary-dark: var(--pos-primary-dark);
  --portal-border: var(--pos-border);
  --portal-text: var(--pos-text);
  --portal-muted: var(--pos-text-muted);
  /* Back-compat: a couple of components reference these generic names */
  --light-bg: var(--pos-surface-2);
  --border-color: var(--pos-border);
  --primary-color: var(--pos-primary);
  --text-secondary: var(--pos-text-muted);
  --text-muted: var(--pos-text-muted);
  --border-radius: var(--pos-radius-md);
  /* Fixed (non theme-swapped) dark chrome used for modal header bars, so
     every "New/Edit ..." panel keeps the same dark navy title bar with
     white text no matter which of the 3 themes (dark/light/classic) is
     active - mirrors the app's top nav header. */
  --pos-modal-header-bg: #0a0e1a;
  --pos-modal-header-text: #f8fafc;
}

/* ===== Theme: LIGHT ===== */
html[data-theme=light] {
  --pos-bg: #f3f5fa;
  --pos-bg-soft: #eaedf5;
  --pos-surface: #ffffff;
  --pos-surface-2: #f2f4f9;
  --pos-surface-hover: #e8ecf5;
  --pos-border: rgba(15, 23, 42, 0.09);
  --pos-border-strong: rgba(15, 23, 42, 0.16);
  --pos-text: #0f172a;
  --pos-text-muted: #5b6478;
  --pos-text-faint: #94a0b8;
  --pos-primary: #2563eb;
  --pos-primary-dark: #1d4ed8;
  --pos-primary-soft: rgba(37, 99, 235, 0.12);
  --pos-accent: #d97706;
  --pos-success: #16a34a;
  --pos-success-soft: rgba(22, 163, 74, 0.12);
  --pos-danger: #dc2626;
  --pos-danger-soft: rgba(220, 38, 38, 0.12);
  --pos-warning: #d97706;
  --pos-warning-soft: rgba(217, 119, 6, 0.12);
  --pos-info: #0284c7;
  --pos-info-soft: rgba(2, 132, 199, 0.12);
  --pos-beta: #7c3aed;
  --pos-beta-soft: rgba(124, 58, 237, 0.12);
  --pos-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --pos-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --pos-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
  color-scheme: light;
}

/* ===== Theme: CLASSIC — warmer, traditional POS look (navy + cream) ===== */
html[data-theme=classic] {
  --pos-bg: #eef1f6;
  --pos-bg-soft: #e6e9f0;
  --pos-surface: #ffffff;
  --pos-surface-2: #f6f2e8;
  --pos-surface-hover: #ede4cf;
  --pos-border: rgba(30, 41, 59, 0.14);
  --pos-border-strong: rgba(30, 41, 59, 0.24);
  --pos-text: #1e293b;
  --pos-text-muted: #64748b;
  --pos-text-faint: #94a3b8;
  --pos-primary: #1e3a5f;
  --pos-primary-dark: #16283f;
  --pos-primary-soft: rgba(30, 58, 95, 0.12);
  --pos-accent: #b45309;
  --pos-success: #15803d;
  --pos-success-soft: rgba(21, 128, 61, 0.12);
  --pos-danger: #b91c1c;
  --pos-danger-soft: rgba(185, 28, 28, 0.12);
  --pos-warning: #b45309;
  --pos-warning-soft: rgba(180, 83, 9, 0.12);
  --pos-info: #0e7490;
  --pos-info-soft: rgba(14, 116, 144, 0.12);
  --pos-beta: #6d28d9;
  --pos-beta-soft: rgba(109, 40, 217, 0.12);
  --pos-shadow-sm: 0 2px 8px rgba(30, 41, 59, 0.08);
  --pos-shadow-md: 0 8px 24px rgba(30, 41, 59, 0.1);
  --pos-shadow-lg: 0 20px 48px rgba(30, 41, 59, 0.14);
  color-scheme: light;
}

html,
body {
  background: var(--pos-bg) !important;
  color: var(--pos-text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  transition: background-color 0.2s ease, color 0.2s ease;
  /* This is a touchscreen POS - disable pinch-zoom/double-tap-zoom (which
     would otherwise trigger the browser's own pinch/zoom UI over the till)
     while still allowing normal single-touch panning/scrolling and taps,
     and suppress the iOS-style long-press callout menu. The matching
     right-click/two-finger context-menu block lives in AppComponent. */
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

/* Legacy `.side-header` (used by the top nav bar and the admin sub-page
   "Back to Admin" bar) sets `position: sticky` but never a `top` offset,
   so it never actually sticks - it just scrolls away with the rest of the
   page like a normal element. Pin it to the viewport top so the page
   scrollbar only moves the content underneath, not the header itself. */
.side-header {
  top: 0 !important;
}

/* Standardized heading scale - every page should use these instead of one-off
   font-size overrides, so page titles/section headings/card titles line up. */
h1 {
  font-size: calc(var(--font-size-xl) * 1.3);
}

h2 {
  font-size: var(--font-size-xl);
}

h3 {
  font-size: var(--font-size-lg);
}

h4 {
  font-size: calc(var(--font-size-lg) * 0.9);
}

h5 {
  font-size: var(--font-size-md);
}

h6 {
  font-size: var(--font-size-sm);
}

h1,
h2,
h3,
h4,
h5,
h6,
.main-content-title,
.card-title {
  font-family: var(--font-family-base);
  color: var(--pos-text);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.page-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--pos-text);
  margin-bottom: 0;
}

.section-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--pos-text);
  margin-bottom: 0;
}

a {
  color: var(--pos-primary);
}

.page {
  min-height: 100vh;
  background: var(--pos-bg);
}

.main-content {
  background: var(--pos-bg);
  min-height: 100vh;
}

.main-content .container-fluid {
  padding: 8px;
}

.tx-gray-500,
.tx-gray-600,
.text-muted,
p.mg-b-0,
small {
  color: var(--pos-text-muted) !important;
}

/* ---------------------------------------------------------------- Cards -- */
/*
 * !important is used deliberately throughout this section (and in the
 * Tables/Modals sections below) because these classes are also defined by
 * the legacy bundled admin-theme stylesheet (assets/css/style.css and
 * friends), loaded via a plain <link> in index.html with the exact same
 * selector specificity (e.g. `.card`, `.table`, `.modal-content`). Without
 * !important, whichever stylesheet happens to be parsed/attached last wins
 * the tie - which varies between `ng serve` and a production build, and
 * can silently flip back to the legacy light theme. !important removes
 * that ambiguity so the new design system always wins here.
 */
.card {
  background: var(--pos-surface) !important;
  border: 1px solid var(--pos-border) !important;
  border-radius: var(--pos-radius-lg);
  box-shadow: var(--pos-shadow-md);
  color: var(--pos-text) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--pos-border) !important;
  padding: 1.1rem 1.25rem;
  color: var(--pos-text) !important;
}

.card-body {
  padding: 1.25rem;
  color: var(--pos-text) !important;
}

@media (max-width: 575.98px) {
  .card-body {
    padding: 1rem;
  }
}
.card-title {
  font-size: 1.02rem;
  margin-bottom: 0.25rem;
  color: var(--pos-text) !important;
}

.card-sub-title,
.card-body .text-muted {
  color: var(--pos-text-muted) !important;
  font-size: 0.85rem;
}

/* ------------------------------------------------------------- Buttons -- */
.btn {
  border-radius: var(--pos-radius-sm);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-4);
  line-height: 1.4;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn-sm {
  font-size: var(--font-size-sm);
  padding: 0.3rem var(--space-3);
}

.btn-lg {
  font-size: var(--font-size-md);
  padding: var(--space-3) var(--space-5);
}

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

.btn-primary,
.btn-main-primary {
  background: var(--pos-primary-dark);
  border-color: var(--pos-primary-dark);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.btn-primary:hover,
.btn-main-primary:hover {
  background: var(--pos-primary);
  border-color: var(--pos-primary);
}

.btn-dark,
.btn-black {
  background: #05070d;
  border-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.btn-dark:hover,
.btn-black:hover {
  background: #10141f;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

.btn-outline-primary {
  border-color: rgba(59, 130, 246, 0.4);
  color: var(--pos-primary);
  background: transparent;
}

.btn-outline-primary:hover {
  background: var(--pos-primary-soft);
  color: #fff;
}

.btn-outline-secondary,
.btn-outline-dark {
  border-color: var(--pos-border-strong);
  color: var(--pos-text);
  background: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  background: var(--pos-surface-hover);
  color: #fff;
}

/* Solid color variants used across action bars, row actions and status-
   change buttons (Search / Download / Save / Edit / Delete / status
   transitions, etc.) - consistent rounded look + hover lift/glow, matching
   .btn-primary above, instead of the framework's flat defaults. */
.btn-info {
  background: var(--pos-info);
  border-color: var(--pos-info);
  color: #06202f;
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.22);
}

.btn-info:hover {
  background: #5cc9fb;
  border-color: #5cc9fb;
  color: #06202f;
}

.btn-success {
  background: var(--pos-success);
  border-color: var(--pos-success);
  color: #06210f;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.22);
}

.btn-success:hover {
  background: #3ddb75;
  border-color: #3ddb75;
  color: #06210f;
}

.btn-danger {
  background: var(--pos-danger);
  border-color: var(--pos-danger);
  color: #2b0705;
  box-shadow: 0 8px 20px rgba(248, 113, 113, 0.22);
}

.btn-danger:hover {
  background: #fb8f8f;
  border-color: #fb8f8f;
  color: #2b0705;
}

.btn-warning {
  background: var(--pos-warning);
  border-color: var(--pos-warning);
  color: #2b1c02;
  box-shadow: 0 8px 20px rgba(251, 191, 36, 0.22);
}

.btn-warning:hover {
  background: #fdd257;
  border-color: #fdd257;
  color: #2b1c02;
}

.btn-purple {
  background: var(--pos-accent-2);
  border-color: var(--pos-accent-2);
  color: #1c1033;
  box-shadow: 0 8px 20px rgba(167, 139, 250, 0.22);
}

.btn-purple:hover {
  background: #bda5fc;
  border-color: #bda5fc;
  color: #1c1033;
}

.btn-secondary {
  background: var(--pos-surface-2);
  border-color: var(--pos-border-strong);
  color: var(--pos-text);
}

.btn-secondary:hover {
  background: var(--pos-surface-hover);
  border-color: var(--pos-border-strong);
  color: var(--pos-text);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  box-shadow: none;
  transform: none !important;
  cursor: not-allowed;
}

/* Compact square icon-only action buttons, used in table row actions
   (edit / delete / view / add) to match the reference POS UI. */
.btn-icon,
.btn-action,
.action-icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pos-radius-sm);
  background: var(--pos-surface-2);
  border: 1px solid var(--pos-border);
  color: var(--pos-text-muted);
  padding: 0;
}

.btn-icon:hover,
.btn-action:hover,
.action-icon-btn:hover {
  background: var(--pos-surface-hover);
  color: var(--pos-text);
}

.btn-icon.text-danger:hover,
.action-icon-btn.text-danger:hover {
  background: var(--pos-danger-soft);
  color: var(--pos-danger) !important;
}

.btn-icon.text-primary:hover,
.action-icon-btn.text-primary:hover {
  background: var(--pos-primary-soft);
  color: var(--pos-primary) !important;
}

/* 34px is fine for a mouse; bump toward the ~40-44px comfortable tap-target size on
   touch-sized viewports so row actions (edit/delete/print icons) are easy to hit. */
@media (max-width: 767.98px) {
  .btn-icon,
  .btn-action,
  .action-icon-btn {
    width: 40px;
    height: 40px;
  }
}
/* -------------------------------------------------------------- Forms --- */
.form-control,
.form-select,
select,
.input-group-text {
  background: var(--pos-surface-2) !important;
  border-radius: var(--pos-radius-md);
  border: 1px solid var(--pos-border) !important;
  color: var(--pos-text) !important;
  font-size: var(--font-size-base);
  padding: var(--space-2) var(--space-3);
}

.form-control::placeholder {
  color: var(--pos-text-faint) !important;
}

.form-control:focus,
.form-select:focus,
select:focus,
.ng-select.ng-select-focused .ng-select-container,
.ng-select.ng-select-opened > .ng-select-container {
  background: var(--pos-surface-2) !important;
  color: var(--pos-text) !important;
  border-color: var(--pos-primary) !important;
  box-shadow: 0 0 0 0.15rem var(--pos-primary-soft);
}

/* Native <select>: color-scheme (set per-theme above) makes Chromium/Firefox
   render the popup list itself (the part CSS normally can't reach) in the
   matching light/dark palette instead of always defaulting to OS-light. */
select,
select.form-control,
select.form-select {
  color-scheme: inherit;
}

select option {
  background: var(--pos-surface-2);
  color: var(--pos-text);
}

label {
  color: var(--pos-text-muted) !important;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

/* ---------------------------------------------------------- ng-select --- */
.ng-select {
  min-height: 2.375rem;
  box-shadow: none;
  font-size: var(--font-size-base);
}

.ng-select .ng-select-container {
  background: var(--pos-surface-2);
  border-radius: var(--pos-radius-md);
  border: 1px solid var(--pos-border) !important;
  min-height: 2.375rem;
  padding: 0.1rem 0.35rem;
  color: var(--pos-text);
}

.ng-select.ng-select-single .ng-select-container {
  height: 40px;
}

.ng-select .ng-select-container .ng-value-container .ng-input > input {
  padding: 0;
}

.ng-dropdown-panel {
  background: var(--pos-surface-2) !important;
  border-radius: var(--pos-radius-lg);
  box-shadow: var(--pos-shadow-lg);
  border: 1px solid var(--pos-border-strong) !important;
  z-index: 1200;
  padding: var(--space-2);
}

.ng-dropdown-panel .ng-dropdown-panel-items {
  background: var(--pos-surface-2);
}

.ng-dropdown-panel .scroll-host {
  background: var(--pos-surface-2);
}

.ng-option {
  background: var(--pos-surface-2) !important;
  color: var(--pos-text) !important;
  padding: 0.4rem 0.65rem;
  font-size: var(--font-size-base);
  border-radius: var(--pos-radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ng-option.ng-option-marked {
  background: var(--pos-surface-hover) !important;
  color: var(--pos-text) !important;
}

.ng-option-selected {
  background: var(--pos-surface-hover) !important;
  color: var(--pos-text) !important;
  font-weight: var(--font-weight-medium);
}

.ng-option-mark,
.ng-option-selected .ng-option-label::after {
  color: var(--pos-primary);
}

.ng-select .ng-clear-wrapper,
.ng-select .ng-arrow-wrapper {
  color: var(--pos-text-muted);
}

/* ------------------------------------------------- ng-multiselect-dropdown */
/* Used for Coupon/Promotion's "Customer Type" picker. The library ships its
   own default.theme.css (light-only, hardcoded colors) which this app never
   imported, so this control rendered with no theme styling at all - these
   rules give it the same themed, rounded control/panel look as ng-select
   above, using the same CSS variables so it follows light/dark mode too. */
.multiselect-dropdown .dropdown-btn {
  background: var(--pos-surface-2) !important;
  border: 1px solid var(--pos-border) !important;
  border-radius: var(--pos-radius-md) !important;
  min-height: 2.375rem;
  padding: 0.4rem 0.75rem !important;
  color: var(--pos-text) !important;
  font-size: var(--font-size-base) !important;
}

.multiselect-dropdown .dropdown-btn .dropdown-down,
.multiselect-dropdown .dropdown-btn .dropdown-up {
  border-top-color: var(--pos-text-muted) !important;
  border-bottom-color: var(--pos-text-muted) !important;
}

.multiselect-dropdown .dropdown-btn .selected-item {
  background: var(--pos-primary) !important;
  border-color: var(--pos-primary) !important;
  color: #fff !important;
}

.multiselect-dropdown .dropdown-btn .selected-item:hover {
  box-shadow: none !important;
}

.multiselect-dropdown .dropdown-btn .dropdown-multiselect__caret {
  color: var(--pos-text-muted);
}

.multiselect-dropdown .disabled > span {
  background-color: var(--pos-surface-hover) !important;
  color: var(--pos-text-faint) !important;
}

.dropdown-list {
  background: var(--pos-surface-2) !important;
  border: 1px solid var(--pos-border-strong) !important;
  border-radius: var(--pos-radius-lg) !important;
  box-shadow: var(--pos-shadow-lg) !important;
  z-index: 1200;
}

.dropdown-list .filter-textbox {
  background: var(--pos-surface-2);
  border-bottom: 1px solid var(--pos-border);
}

.dropdown-list .filter-textbox input {
  background: transparent;
  color: var(--pos-text);
}

.dropdown-list ul li {
  color: var(--pos-text);
}

.dropdown-list ul li:hover,
.dropdown-list ul li.selected-item {
  background: var(--pos-surface-hover);
}

.multiselect-item-checkbox input[type=checkbox] + div {
  color: var(--pos-text);
}

.multiselect-item-checkbox input[type=checkbox] + div:before {
  border-color: var(--pos-primary);
}

.multiselect-item-checkbox input[type=checkbox]:checked + div:before {
  background: var(--pos-primary);
}

.multiselect-item-checkbox input[type=checkbox]:focus + div:before,
.multiselect-item-checkbox input[type=checkbox]:hover + div:before {
  border-color: var(--pos-primary);
  background-color: var(--pos-surface-hover);
}

/* --------------------------------------------------------- ngx-editor --- */
/* Mail Notification's rich-text editor. This version of ngx-editor ships no
   CSS of its own at all (older versions bundled a stylesheet; this one
   expects the consumer to style its NgxEditor__* classes directly), and the
   component's own leftover scss still targeted a previous, since-replaced
   editor library's classes - so in practice this control rendered with no
   styling whatsoever. ngx-editor's menu/content are separate Angular
   components with their own view encapsulation, so component-scoped CSS in
   mail-notification.component.scss can't reach their internals - these
   rules live globally, the same reason the ng-select/multiselect-dropdown
   overrides above do.
*/
.ngx-editor-wrapper .NgxEditor__Wrapper {
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-md);
  overflow: hidden;
  background: var(--pos-surface-2);
}

.ngx-editor-wrapper .NgxEditor__MenuBar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  background: var(--pos-surface-hover);
  border-bottom: 1px solid var(--pos-border);
  padding: 0.35rem 0.5rem;
}

.ngx-editor-wrapper .NgxEditor__MenuItem {
  color: var(--pos-text-muted);
  border-radius: var(--pos-radius-sm);
}

.ngx-editor-wrapper .NgxEditor__MenuItem--Icon {
  padding: 0.3rem 0.4rem;
}

.ngx-editor-wrapper .NgxEditor__MenuItem--Button:hover {
  background: var(--pos-surface-2);
  color: var(--pos-text);
}

.ngx-editor-wrapper .NgxEditor__MenuItem--Active {
  background: var(--pos-primary-soft);
  color: var(--pos-primary);
}

.ngx-editor-wrapper .NgxEditor__Seperator {
  border-left: 1px solid var(--pos-border);
  margin: 0.2rem 0.3rem;
}

.ngx-editor-wrapper .NgxEditor__Content {
  min-height: 10rem;
  padding: 0.75rem 1rem;
  color: var(--pos-text);
  background: var(--pos-surface-2);
  font-size: var(--font-size-base);
}

.ngx-editor-wrapper .NgxEditor__Placeholder::before {
  color: var(--pos-text-faint);
}

.ngx-editor-wrapper .NgxEditor__Dropdown {
  color: var(--pos-text-muted);
}

.ngx-editor-wrapper .NgxEditor__Dropdown:hover,
.ngx-editor-wrapper .NgxEditor__Dropdown--Open {
  background: var(--pos-surface-hover);
}

.ngx-editor-wrapper .NgxEditor__Dropdown--DropdownMenu {
  background: var(--pos-surface-2);
  border: 1px solid var(--pos-border-strong);
  border-radius: var(--pos-radius-md);
  box-shadow: var(--pos-shadow-lg);
}

.ngx-editor-wrapper .NgxEditor__Dropdown--Item {
  color: var(--pos-text);
}

.ngx-editor-wrapper .NgxEditor__Dropdown--Item:hover,
.ngx-editor-wrapper .NgxEditor__Dropdown--Selected {
  background: var(--pos-surface-hover);
}

.ngx-editor-wrapper .NgxEditor__Popup {
  background: var(--pos-surface-2);
  border: 1px solid var(--pos-border-strong);
  border-radius: var(--pos-radius-md);
  box-shadow: var(--pos-shadow-lg);
  color: var(--pos-text);
}

.ngx-editor-wrapper .NgxEditor__Popup--Label {
  color: var(--pos-text-muted);
}

/* ------------------------------------------------------- Bootstrap menus -- */
/* Covers both plain Bootstrap .dropdown-menu (data-bs-toggle="dropdown") and
   ng-bootstrap's <div ngbDropdownMenu> (which renders the same .dropdown-menu
   class) - restyled as a rounded, inset-row "card" menu: comfortable row
   padding, a checkmark on the active/selected item, and muted uppercase
   section labels (.dropdown-header) for menus that group their options,
   matching the reference "All day / Time of day" filter menu style. */
.dropdown-menu {
  background: var(--pos-surface-2) !important;
  border: 1px solid var(--pos-border-strong) !important;
  border-radius: var(--pos-radius-lg);
  box-shadow: var(--pos-shadow-lg);
  padding: var(--space-2);
  font-size: var(--font-size-base);
}

.dropdown-item {
  color: var(--pos-text) !important;
  padding: 0.6rem 0.85rem;
  border-radius: var(--pos-radius-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--pos-surface-hover) !important;
  color: var(--pos-text) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--pos-surface-hover) !important;
  color: var(--pos-text) !important;
  font-weight: var(--font-weight-medium);
}

.dropdown-item.active::after {
  content: "✓";
  color: var(--pos-primary);
  font-weight: var(--font-weight-bold);
  margin-left: var(--space-2);
}

.dropdown-divider {
  border-top: 1px solid var(--pos-border);
  margin: var(--space-2) 0.4rem;
}

.dropdown-header {
  color: var(--pos-text-faint) !important;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) 0.85rem 0.3rem;
}

/* Dropdown-toggle trigger buttons (the "All day ⌄" style pill that opens a
   menu): a cleaner chevron than Bootstrap's default tiny triangle, which
   rotates to point up while the menu is open. */
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.dropdown-toggle::after {
  display: inline-block;
  content: "";
  border: none;
  width: 0.4em;
  height: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: var(--space-1);
  transition: transform 0.15s ease;
  vertical-align: 0;
}

.dropdown-toggle[aria-expanded=true]::after,
.show > .dropdown-toggle::after {
  transform: rotate(-135deg);
}

/* -------------------------------------------------------------- Tables -- */
.table {
  border-radius: var(--pos-radius-md);
  overflow: hidden;
  color: var(--pos-text) !important;
  background: transparent !important;
  --bs-table-bg: transparent;
  --bs-table-color: var(--pos-text);
  font-size: var(--font-size-base);
}

/* Flat, card-integrated header - sits on the same background as the rows
   (no filled band) with plain sentence-case labels, matching the clean
   "stat list" look (e.g. a Category / Items / Revenue / % breakdown) used
   as the reference for every table in the app. */
.table thead th {
  background: transparent !important;
  color: var(--pos-text-muted) !important;
  font-weight: var(--font-weight-medium);
  letter-spacing: normal;
  text-transform: none;
  font-size: var(--font-size-sm);
  border-bottom: 1px solid var(--pos-border);
  /* Compact row density app-wide. The legacy admin-theme stylesheet
     (assets/css/style.css) sets its own .table th/.table td padding
     (9px 15px, then later 0.75rem) AND its own line-height (1.462) on
     every table cell - !important on both properties here is what
     actually beats that legacy pair; padding alone previously left the
     taller legacy line-height still governing most of the row's height. */
  padding: 0.375rem 0.625rem !important;
  line-height: 1.25 !important;
  white-space: nowrap;
}

.table tbody td,
.table tbody th {
  background: transparent !important;
  color: var(--pos-text) !important;
  border-bottom: 1px solid var(--pos-border);
  /* Compact row density app-wide - see the thead th comment above for why
     both padding and line-height need !important here. */
  padding: 0.375rem 0.625rem !important;
  line-height: 1.25 !important;
  vertical-align: middle;
  transition: background-color 0.12s ease;
}

/* No trailing divider under the last row - the card edge closes the list.
   (.table-bordered is excluded - it wants a fully closed grid, see below.) */
.table:not(.table-bordered) tbody tr:last-child td {
  border-bottom: none;
}

/* Numeric / right-aligned columns: bold the primary figure, keep secondary
   figures (percentages, counts) a touch lighter - same emphasis pattern as
   the reference table (bold Items/Revenue, muted %). Opt in per-cell with
   .table-figure (primary) / .table-figure-muted (secondary), or just keep
   using <strong>/<b> as most pages already do. */
.table .table-figure {
  font-weight: var(--font-weight-bold);
  color: var(--pos-text);
}

.table .table-figure-muted {
  font-weight: var(--font-weight-normal);
  color: var(--pos-text-muted);
}

.table th.text-end,
.table td.text-end,
.table th.text-right,
.table td.text-right {
  text-align: right;
}

/* No hover fill - rows are told apart by alternating odd/even shading
   instead (see the zebra-striping rules below), not by pointer position. */
.table tbody tr {
  position: relative;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background: var(--pos-bg-soft) !important;
  color: var(--pos-text) !important;
}

.table-responsive {
  border-radius: var(--pos-radius-md);
}

.table-bordered {
  border: 1px solid var(--pos-border-strong) !important;
  border-collapse: collapse !important;
}

.table-bordered thead th,
.table-bordered tbody td,
.table-bordered tbody th {
  border: 1px solid var(--pos-border-strong) !important;
}

/* Header row of a bordered table needs to read as clearly separated from
   the body, not just another grid line - a touch heavier + a filled band
   so it doesn't wash out against the low-contrast border color. */
.table-bordered thead th {
  border-bottom-width: 2px !important;
  background: var(--pos-surface-2) !important;
}

/* Thumbnail + stacked title/subtitle pattern used in item/product rows */
.row-thumb {
  width: 42px;
  height: 42px;
  border-radius: var(--pos-radius-sm);
  object-fit: cover;
  background: var(--pos-surface-2);
  border: 1px solid var(--pos-border);
}

.row-title {
  color: var(--pos-text);
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.row-subtitle {
  color: var(--pos-text-muted);
  font-size: 0.8rem;
}

/* -------------------------------------------------------------- Badges -- */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.35em 0.75em;
}

.badge-status-active,
.badge-success,
.bg-success {
  background: var(--pos-success-soft) !important;
  color: var(--pos-success) !important;
}

.badge-status-inactive,
.badge-danger,
.bg-danger {
  background: var(--pos-danger-soft) !important;
  color: var(--pos-danger) !important;
}

.badge-beta,
.badge-warning,
.bg-warning {
  background: var(--pos-beta-soft) !important;
  color: var(--pos-beta) !important;
  text-transform: uppercase;
  font-size: 0.65rem;
}

.badge-info,
.bg-info {
  background: var(--pos-info-soft) !important;
  color: var(--pos-info) !important;
}

/* ------------------------------------------------------------- Modals --- */
.modal-content {
  /* No rounded corners - this panel is a full-height slide-in flush
     against the edge of the screen, so a border-radius only ever showed
     (partially) on the inner edge and looked like a rendering glitch. */
  background: var(--pos-surface) !important;
  border: 1px solid var(--pos-border-strong) !important;
  border-radius: 0;
  box-shadow: var(--pos-shadow-lg);
  color: var(--pos-text) !important;
}

.modal-content .card {
  background: var(--pos-surface-2) !important;
}

.modal-title,
.modal-body,
.modal-body label,
.modal-body h1,
.modal-body h2,
.modal-body h3,
.modal-body h4,
.modal-body h5,
.modal-body h6 {
  color: var(--pos-text) !important;
}

/* Modal header bar: fixed dark navy chrome (see --pos-modal-header-bg above)
   with a bold white title and a round "X" close button on the right -
   consistent across every Create/Edit panel in the app, regardless of theme. */
.modal-header {
  /* No !important on background/padding: a couple of special-purpose
     modals (the WhatsApp-styled chat header, the product-detail popup)
     set their own inline background/padding intentionally and should
     keep it - this rule only supplies the default for every other one.
     Compact padding (space-3/space-4) to match the narrower modal-sm
     dialog width below - a tall space-4/space-5 header looked oversized
     once the panel got narrower.
     display/align-items/justify-content are spelled out explicitly
     (not just inherited) because a legacy rule elsewhere in
     assets/css/style.css sets align-items: flex-start on .modal-header,
     which top-aligns the title against the close button instead of
     centering them - this rule needs to win that on its own. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  background: var(--pos-modal-header-bg);
  border-bottom: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: var(--space-4) var(--space-4);
  min-height: 0;
}

.modal-header .modal-title {
  color: var(--pos-modal-header-text) !important;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
  line-height: 1.3;
}

.modal-body {
  padding: var(--space-2);
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--pos-border) !important;
  padding: var(--space-2) var(--space-2);
  gap: var(--space-3);
}

.modal-footer .btn {
  padding: 0.45rem 1rem;
  font-size: var(--font-size-sm);
}

.modal-header .close,
.modal-header .close span {
  color: var(--pos-modal-header-text) !important;
}

.modal-header .close {
  opacity: 0.75;
  text-shadow: none;
  font-size: 1.2rem;
  font-weight: var(--font-weight-normal);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.modal-header .close:hover {
  opacity: 1;
  transform: scale(1.08);
}

/* The product-detail popup (new-orders) already ships its own Bootstrap-5
   style close control (.btn-close, plain "X" text, no project styling
   anywhere) - just make sure it stays legible now that the header behind
   it is dark navy instead of the old plain background. */
.modal-header .btn-close {
  background: rgba(255, 255, 255, 0.12);
  color: var(--pos-modal-header-text);
  border: none;
  border-radius: 999px;
  width: 24px;
  height: 24px;
  line-height: 1;
  opacity: 0.85;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal {
  overflow: auto !important;
}

.modal-dialog {
  /* Slide-in panel, anchored to the RIGHT edge, capped to a compact
     modal-sm-equivalent width instead of the old 60% - every modal now
     opens at the same tidy size regardless of any modal-lg/modal-xl
     class still on the markup, which is why the cap uses !important to
     beat those legacy max-width rules from assets/css/style.css. */
  position: absolute;
  margin: auto;
  width: 60%;
  max-width: 460px !important;
  height: 100%;
  right: 0px;
  background-color: transparent !important;
}

/* Slide-in panels are fine at 60% on desktop, but that's ~225px on a 375px phone -
   too narrow for a labelled form. Widen progressively as the viewport shrinks so every
   breakpoint gets a usable form width, using the same 576/768/992 breakpoints the legacy
   theme (style.css) already establishes app-wide. The max-width cap above still keeps
   the modal-sm size on larger tablets/desktops. */
@media (max-width: 991.98px) {
  .modal-dialog {
    width: 85%;
  }
}
@media (max-width: 575.98px) {
  .modal-dialog {
    width: 100%;
  }
  .modal-content.card,
  .modal-content .card {
    border-radius: 0;
  }
}
/* --------------------------------------------------------- Page header -- */
.breadcrumb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.breadcrumb-header .main-content-title {
  font-size: 1.5rem;
  margin-bottom: 0.15rem;
}

/* Boxed header icon shown next to a page's breadcrumb title (Admin Control
   and every sub-page it links to). Defined once here so every page that
   renders `.dash-header-icon` gets the same styling without needing a local
   duplicate - Angular's per-component style encapsulation means a page with
   no local rule for this class would otherwise render it completely
   unstyled. (A few pages - admin-control, dashboard, attendance-home,
   order-history - already carry an identical local copy; left in place as
   harmless redundancy.) */
.dash-header-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--pos-radius-md, 12px);
  background: var(--pos-surface-2, #161d33);
  border: 1px solid var(--pos-border, rgba(255, 255, 255, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.9rem;
  color: var(--pos-text, #f1f5f9);
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* ---------------------------------------------- Sidebar: off-canvas ------
   The bundled admin template (assets/css/sidemenu.css) only fully hides
   .app-sidebar below 768px - above that it's a permanently-visible 240px
   column, and toggling `sidenav-toggled` (assets/plugins/side-menu/sidemenu.js,
   still wired to [data-toggle="sidebar"]) just shrinks it to an 80px icon
   rail instead of removing it. The whole point here is no persistent
   sidebar at any screen size: extend the same off-canvas/overlay behavior
   the template already uses on mobile to every width, so by default the
   sidebar is fully hidden and the content area uses the full page width,
   and the toggle (now placed on the Admin Dashboard page, next to the page
   title, instead of the shared top header) slides it in on top of the
   content as a dismissible overlay rather than shrinking to icons. */
.app-sidebar {
  left: -240px !important;
  transition: left 0.25s ease !important;
}

.app-content,
.main-content {
  margin-left: 0 !important;
}

.app-sidebar__overlay {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1050 !important;
  transition: visibility 0.25s ease;
}

.app.sidenav-toggled .app-sidebar {
  left: 0 !important;
  width: 240px !important;
  overflow: visible !important;
  z-index: 1051 !important;
  box-shadow: var(--pos-shadow-lg);
}

.app.sidenav-toggled .app-content,
.app.sidenav-toggled .main-content {
  margin-left: 0 !important;
}

.app.sidenav-toggled .app-sidebar__overlay {
  visibility: visible !important;
}

/* The toggle button itself (open/close icon pair), relocated onto the
   Admin Dashboard page's header next to the title. Its icons were styled by
   the legacy template for a light header background (.header-icon at
   #a8b1c7, but .close-toggle at pure #000 - invisible against a dark card),
   so recolor them explicitly rather than relying on the legacy defaults.
   The combined selector (both classes on one element - see
   dashboard.component.html) beats the legacy single-class rule regardless
   of stylesheet load order. */
.app-sidebar__toggle.dashboard-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: var(--pos-radius-md);
  background: var(--pos-surface-2);
  border: 1px solid var(--pos-border-strong);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dashboard-sidebar-toggle:hover {
  background: var(--pos-surface-hover);
}

.dashboard-sidebar-toggle .header-icon,
.dashboard-sidebar-toggle .header-icons {
  color: var(--pos-text) !important;
  width: auto;
  height: auto;
  line-height: 1;
  font-size: 1.1rem;
}

/* ---------------------------------------------------- Misc / carried over */
.side-bar-icon {
  font-size: 1.1em;
  margin-right: 10px;
  width: 15px;
}

.text-align-right {
  text-align: right;
}

.big-modal {
  max-width: 95% !important;
}

.verical-middle {
  vertical-align: middle !important;
}

.display-inline {
  display: inline !important;
}

.k-input {
  font-weight: 300 !important;
}

.font-bold {
  font-size: medium;
  font-weight: bold;
}

.search-button {
  margin-top: 26px;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.print,
.print * {
  display: none !important;
}

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
  .card-body {
    padding: 0 !important;
  }
  .print,
  .print * {
    display: initial !important;
  }
}
@page {
  size: auto;
}
.btn-eye {
  visibility: hidden !important;
}

.show-eye:hover .btn-eye {
  visibility: visible !important;
}

.is_present_checkbox {
  text-align: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #333c53;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--pos-primary);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--pos-primary);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* --------------------------------------------- Fixed-height tables --- */
/* Opt-in wrapper for list-page tables: keeps the table body a consistent
   height as records grow (instead of pushing the page footer further and
   further down) and scrolls internally once it fills up. Pair with the
   `paginate` pipe + <app-table-pagination> for the actual paging. */
.table-fixed-scroll {
  max-height: 60vh;
  overflow-y: auto;
}

.table-fixed-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--pos-surface, #10162b);
}

/* A "No records"/"Loading" row is always a single full-width <td colspan="...">
   cell in this app's tables - give it generous vertical padding so it reads as
   centered within the fixed-height area instead of sitting flush at the top. */
.table-fixed-scroll td[colspan] {
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Belt-and-braces: force every table cell's background/text/border color
   regardless of which legacy rule (.table-bordered, .table-striped, etc.
   in assets/css/style.css) would otherwise win for a given table - some of
   those set their own background-color/border-color without !important in
   ways that occasionally beat the general .table rules above for specific
   class combinations, leaving pale, low-contrast fills (most visibly
   behind "No Records found." / "Loading..." text). */
.table,
.table-bordered,
.table-striped {
  background: transparent !important;
}

.table tbody tr,
.table-bordered tbody tr,
.table-striped tbody tr {
  background: transparent !important;
}

.table tbody td,
.table tbody th,
.table-bordered tbody td,
.table-bordered tbody th {
  background: transparent !important;
  color: var(--pos-text) !important;
  border-color: var(--pos-border) !important;
}

/* Zebra striping (odd/even row shading) app-wide, in place of the old hover
   fill - a subtle tint on odd rows, the table's own background on even rows,
   using the same --pos-bg-soft token .table-striped already used above. */
.table tbody tr:nth-of-type(odd) > td,
.table tbody tr:nth-of-type(odd) > th,
.table-bordered tbody tr:nth-of-type(odd) > td,
.table-bordered tbody tr:nth-of-type(odd) > th {
  background: var(--pos-bg-soft) !important;
}

.table tbody tr:nth-of-type(even) > td,
.table tbody tr:nth-of-type(even) > th,
.table-bordered tbody tr:nth-of-type(even) > td,
.table-bordered tbody tr:nth-of-type(even) > th {
  background: transparent !important;
}

.table tbody td b,
.table-bordered tbody td b {
  color: var(--pos-text) !important;
}

/* ==========================================================================
   Master pages (Inventory Master, Procurement, Stock, Attendance, Integration
   Settings): clean "workspace" look - large light title with subtitle, three
   summary cards, a flat icon menu on the left and rounded white cards on the
   right. Scoped by .ms-ui and written with extra specificity so it wins over
   the per-component .mst-* / .atd-* styles without editing each one.
   ========================================================================== */
.container-fluid.ms-ui {
  padding-top: 8px;
  padding-bottom: 32px;
  /* header: big light title + muted subtitle, no icon tile */
  /* three summary cards */
  /* two-column workspace: menu | content */
  /* left menu */
  /* right side: header row (search + primary action) */
  /* right side: rounded content card around tables */
}
.container-fluid.ms-ui .breadcrumb-header {
  margin-bottom: 18px;
}
.container-fluid.ms-ui .breadcrumb-header .dash-header-icon {
  display: none;
}
.container-fluid.ms-ui .breadcrumb-header .main-content-title {
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--pos-text);
  margin-bottom: 2px;
}
.container-fluid.ms-ui .breadcrumb-header p {
  font-size: 0.85rem;
  color: var(--pos-text-muted);
}
.container-fluid.ms-ui .ms-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.container-fluid.ms-ui .ms-kpi-card {
  background: var(--pos-surface);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-lg, 16px);
  padding: 14px 18px;
  min-width: 0;
}
.container-fluid.ms-ui .ms-kpi-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--pos-text-muted);
}
.container-fluid.ms-ui .ms-kpi-value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--pos-text);
  margin-top: 2px;
}
.container-fluid.ms-ui .ms-kpi-value.ms-kpi-text {
  font-size: 1.15rem;
  padding: 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container-fluid.ms-ui .ms-kpi-sub {
  font-size: 0.7rem;
  color: var(--pos-text-faint);
}
.container-fluid.ms-ui .mst-layout,
.container-fluid.ms-ui .atd-layout {
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 20px;
  margin-top: 0;
}
.container-fluid.ms-ui .mst-side,
.container-fluid.ms-ui .atd-side {
  background: var(--pos-surface);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-lg, 16px);
  padding: 0 0 10px;
  gap: 2px;
  align-self: start;
}
.container-fluid.ms-ui .ms-side-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--pos-border);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--pos-text);
}
.container-fluid.ms-ui .ms-side-back {
  order: 2;
  margin-left: auto;
  display: inline-flex;
  color: var(--pos-text-muted);
  font-size: 0.85rem;
}
.container-fluid.ms-ui .ms-side-back:hover {
  color: var(--pos-text);
}
.container-fluid.ms-ui .mst-side-item,
.container-fluid.ms-ui .atd-side-item {
  padding: 9px 14px;
  margin: 0 8px;
  width: calc(100% - 16px);
  gap: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
}
.container-fluid.ms-ui .mst-side-item:hover,
.container-fluid.ms-ui .atd-side-item:hover {
  background: var(--pos-surface-2);
}
.container-fluid.ms-ui .mst-side-item-active,
.container-fluid.ms-ui .atd-side-item-active {
  background: var(--pos-primary-soft);
  border: 0;
}
.container-fluid.ms-ui .mst-side-icon,
.container-fluid.ms-ui .atd-side-icon {
  width: 18px;
  height: 18px;
  background: transparent !important;
  border-radius: 0;
  font-size: 0.9rem;
  color: var(--pos-text-muted) !important;
}
.container-fluid.ms-ui .mst-side-item-active .mst-side-icon,
.container-fluid.ms-ui .atd-side-item-active .atd-side-icon {
  color: var(--pos-primary) !important;
}
.container-fluid.ms-ui .mst-side-label,
.container-fluid.ms-ui .atd-side-label {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--pos-text);
}
.container-fluid.ms-ui .mst-side-item-active .mst-side-label,
.container-fluid.ms-ui .atd-side-item-active .atd-side-label {
  color: var(--pos-text);
  font-weight: 600;
}
.container-fluid.ms-ui .mst-side-desc,
.container-fluid.ms-ui .atd-side-desc {
  display: none;
}
.container-fluid.ms-ui .mst-content-header {
  background: var(--pos-surface);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-lg, 16px);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.container-fluid.ms-ui .mst-add-btn {
  background: var(--pos-surface);
  color: var(--pos-text);
  border: 1px solid var(--pos-border-strong);
  border-radius: 10px;
  font-weight: 500;
  box-shadow: none;
}
.container-fluid.ms-ui .mst-add-btn:hover, .container-fluid.ms-ui .mst-add-btn:focus {
  background: var(--pos-surface-2);
  color: var(--pos-text);
}
.container-fluid.ms-ui .mst-table-wrap {
  background: var(--pos-surface);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-lg, 16px);
  overflow: hidden;
}
.container-fluid.ms-ui .mst-table thead th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pos-text-muted);
}

@media (max-width: 991px) {
  .container-fluid.ms-ui .ms-kpi-row {
    grid-template-columns: 1fr;
  }
  .container-fluid.ms-ui .mst-layout,
  .container-fluid.ms-ui .atd-layout {
    grid-template-columns: 1fr;
  }
  .container-fluid.ms-ui .mst-side,
  .container-fluid.ms-ui .atd-side {
    flex-direction: row;
    overflow-x: auto;
    padding: 6px;
    align-self: stretch;
  }
  .container-fluid.ms-ui .ms-side-head {
    display: none;
  }
  .container-fluid.ms-ui .mst-side-item,
  .container-fluid.ms-ui .atd-side-item {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
  }
}
/* ms-ui pages: the page title/description now lives on the right pane and follows the selected tab */
.container-fluid.ms-ui .mst-content-title {
  flex: 0 1 240px;
  min-width: 0;
}
.container-fluid.ms-ui .mst-content-title h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pos-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container-fluid.ms-ui .mst-content-title p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--pos-text-muted);
  line-height: 1.3;
}
.container-fluid.ms-ui .mst-int-desc {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--pos-text-muted);
  line-height: 1.3;
}
.container-fluid.ms-ui .ms-title-card {
  background: var(--pos-surface);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-lg, 16px);
  padding: 12px 16px;
  margin-bottom: 14px;
}
.container-fluid.ms-ui .ms-title-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--pos-text);
}
.container-fluid.ms-ui .ms-title-card p {
  margin: 2px 0 0;
  font-size: 0.75rem;
  color: var(--pos-text-muted);
}

/* ms-ui pages (Inventory Master, Procurement, Stock, Integration Settings, Attendance):
   full-screen workspace on tablet/desktop - the page fills the viewport, the left menu
   and the right content card stretch to the bottom, and only the content scrolls. */
@media (min-width: 768px) {
  .main-content.app-content:has(> .container-fluid.ms-ui) {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .container-fluid.ms-ui {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .container-fluid.ms-ui .mst-layout,
  .container-fluid.ms-ui .atd-layout {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 0;
    grid-template-rows: minmax(0, 1fr);
  }
  .container-fluid.ms-ui .mst-side,
  .container-fluid.ms-ui .atd-side {
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
  }
  .container-fluid.ms-ui .mst-content,
  .container-fluid.ms-ui .atd-content {
    min-height: 0;
    overflow-y: auto;
  }
  .container-fluid.ms-ui .mst-content-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .container-fluid.ms-ui .mst-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
}
/* Attendance: the whole right-hand side (title + tab content) lives inside one card */
.container-fluid.ms-ui .atd-content {
  background: var(--pos-surface);
  border: 1px solid var(--pos-border);
  border-radius: var(--pos-radius-lg, 16px);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.container-fluid.ms-ui .atd-content .ms-title-card {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pos-border);
  border-radius: 0;
  margin: 0;
  padding: 14px 20px;
}
.container-fluid.ms-ui .atd-content .atd-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px;
}

@media (min-width: 768px) {
  .container-fluid.ms-ui .atd-content {
    overflow: hidden;
  }
  .container-fluid.ms-ui .atd-content .atd-body {
    overflow: auto;
  }
}
/* ------------------------------------------------------------------------
   Full-screen loader (ngx-ui-loader style): dimmed + blurred backdrop in the
   current theme's colours, a ring of dots with the logo in the middle, a
   message and a slim indeterminate bar on top. Driven by PageLoader.
   ---------------------------------------------------------------------- */
html #global-loader {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pos-bg, #0a0e1a);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
html #global-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
html #global-loader .gl-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  background: transparent;
}
html #global-loader .gl-bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35%;
  border-radius: 3px;
  background: var(--pos-primary, #3b82f6);
  animation: gl-bar-slide 1.3s ease-in-out infinite;
}
html #global-loader .gl-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
html #global-loader .gl-spinner {
  position: relative;
  width: 76px;
  height: 76px;
}
html #global-loader .gl-spinner span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--pos-primary, #3b82f6);
  opacity: 0.15;
  animation: gl-dot-fade 1s linear infinite;
}
html #global-loader .gl-spinner span:nth-child(1) {
  transform: rotate(0deg) translateY(-32px);
  animation-delay: 0s;
}
html #global-loader .gl-spinner span:nth-child(2) {
  transform: rotate(45deg) translateY(-32px);
  animation-delay: 0.125s;
}
html #global-loader .gl-spinner span:nth-child(3) {
  transform: rotate(90deg) translateY(-32px);
  animation-delay: 0.25s;
}
html #global-loader .gl-spinner span:nth-child(4) {
  transform: rotate(135deg) translateY(-32px);
  animation-delay: 0.375s;
}
html #global-loader .gl-spinner span:nth-child(5) {
  transform: rotate(180deg) translateY(-32px);
  animation-delay: 0.5s;
}
html #global-loader .gl-spinner span:nth-child(6) {
  transform: rotate(225deg) translateY(-32px);
  animation-delay: 0.625s;
}
html #global-loader .gl-spinner span:nth-child(7) {
  transform: rotate(270deg) translateY(-32px);
  animation-delay: 0.75s;
}
html #global-loader .gl-spinner span:nth-child(8) {
  transform: rotate(315deg) translateY(-32px);
  animation-delay: 0.875s;
}
html #global-loader .gl-spinner .gl-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  object-fit: contain;
  border-radius: 6px;
}
html #global-loader .gl-text {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pos-text-muted, #94a3b8);
}

/* Over an existing page (branch switch): keep the page faintly visible behind a blur. */
@supports (backdrop-filter: blur(4px)) {
  html #global-loader.gl-overlay {
    background: color-mix(in srgb, var(--pos-bg, #0a0e1a) 82%, transparent);
    backdrop-filter: blur(6px);
  }
}
@keyframes gl-dot-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.15;
  }
}
@keyframes gl-bar-slide {
  0% {
    left: -35%;
  }
  100% {
    left: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  html #global-loader .gl-spinner span,
  html #global-loader .gl-bar::after {
    animation-duration: 3s;
  }
}
/* Serial-number column ("#") added to every data table */
th.serial-col,
td.serial-col {
  width: 48px;
  min-width: 48px;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

td.serial-col {
  opacity: 0.75;
}

/* Small dialogs that should sit in the middle of the screen (Cancel order, Transfer, Update rider)
   instead of the right-edge slide-in panel above. Add `modal-dialog-centered modal-center` to the dialog. */
.modal-dialog.modal-center {
  position: relative;
  right: auto;
  height: auto;
  width: calc(100% - 2rem);
  max-width: 460px !important;
  margin: 1rem auto !important;
}

.modal-dialog.modal-center .modal-content {
  width: 100%;
  height: auto;
  border-radius: 14px;
  overflow: hidden;
}