/* ===== Bootstrap variable overrides (brand alignment) ===== */
:root {
  --bs-primary: var(--primary);
  --bs-primary-rgb: 212, 89, 10;
  --bs-success: var(--green);
  --bs-success-rgb: 27, 122, 74;
  --bs-danger: var(--red);
  --bs-danger-rgb: 192, 57, 43;
  --bs-warning: var(--amber);
  --bs-warning-rgb: 180, 83, 9;
  --bs-info: var(--cyan);
  --bs-info-rgb: 14, 116, 144;
  --bs-secondary: var(--text3);
  --bs-secondary-rgb: 138, 126, 116;
  --bs-body-font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Small font-size utilities (Bootstrap's fs-1..6 are heading-scale, these are for compact UI text) */
.fs-10 {
  font-size: 10px !important;
}

.fs-11 {
  font-size: 11px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-12-5 {
  font-size: 12.5px !important;
}

.fs-13 {
  font-size: 13px !important;
}

:root {
  --primary: #D4590A;
  --primary-light: #F5853A;
  --gold: #E8960C;
  --gold-light: #FFC845;
  --bg: #F5F3EF;
  --bg2: #EDE9E3;
  --surface: #FFFFFF;
  --surface2: #FAF8F5;
  --border: #E2DDD6;
  --border2: #D5CFC6;
  --text: #1A1612;
  --text2: #4A423A;
  --text3: #8A7E74;
  --green: #1B7A4A;
  --green-bg: #E8F5EE;
  --red: #C0392B;
  --red-bg: #FDECEA;
  --blue: #1A5FAB;
  --blue-bg: #E8F0FB;
  --amber: #B45309;
  --amber-bg: #FEF3C7;
  --cyan: #0E7490;
  --cyan-bg: #E0F7FA;
  --purple: #6D28D9;
  --purple-bg: #EDE9FE;
  --sidebar-w: 230px;
  --shadow: 0 1px 3px rgba(0, 0, 0, .07), 0 4px 16px rgba(0, 0, 0, .06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .05);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  min-height: 100vh;
  font-size: 14px;
  overflow-x: hidden;
  max-width: 100%;
}

a {
  text-decoration: none;
}

/* SIDEBAR */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 18px 16px 14px;
  border-bottom: 1.5px solid var(--border);
}

.logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.logo-brand {
  font-family: 'Playfair Display', serif;
  font-size: 15px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.1;
}

.logo-sub {
  font-size: 9px;
  color: var(--text3);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 1px;
}

.nav-section {
  padding: 8px 0;
}

.nav-label {
  font-size: 9px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 16px 3px;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text2);
  border-left: 3px solid transparent;
  transition: all .15s;
  font-weight: 500;
}

.nav-item:hover {
  color: var(--primary);
  background: #FEF3ED;
}

.nav-item.active {
  color: var(--primary);
  background: #FEF3ED;
  border-left-color: var(--primary);
  font-weight: 600;
}

.nav-item .icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 9px;
}

/* MAIN */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
  max-width: calc(100vw - var(--sidebar-w));
  overflow-x: hidden;
}

/* TOPBAR */
.topbar {
  background: var(--surface);
  border-bottom: 1.5px solid var(--border);
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 50;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

.topbar-title {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  flex: 1;
}

.breadcrumb {
  font-size: 11px;
  color: var(--text3);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 300px;
  margin: 0;
}

.breadcrumb span {
  color: var(--primary);
  font-weight: 600;
}

.search-wrap {
  position: relative;
}

.search-bar {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px 7px 34px;
  color: var(--text);
  font-size: 12px;
  width: 200px;
  outline: none;
  font-family: inherit;
}

.search-bar:focus {
  border-color: var(--primary);
  background: #fff;
}

.search-wrap::before {
  content: '🔍';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  pointer-events: none;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  position: relative;
  transition: all .15s;
}

.icon-btn:hover {
  background: #FEF3ED;
  border-color: var(--primary);
}

.notif-dot {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  background: var(--primary);
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
}

/* PAGE */
.page {
  display: none;
  padding: 20px 22px;
  flex: 1;
  animation: fadeIn .2s ease;
}

.page.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* GREETING */
.greeting {
  margin-bottom: 20px;
}

.greeting h1 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

.greeting p {
  color: var(--text3);
  font-size: 12.5px;
  margin-top: 3px;
}

.date-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text2);
  border-radius: 20px;
  padding: 3px 11px;
  font-size: 11px;
  margin-top: 7px;
  font-weight: 500;
}

/* KPI */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
  width: 100%;
}

.kpi-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
  box-shadow: var(--shadow-sm);
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--border2);
}

.kpi-label {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.kpi-value {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  margin: 6px 0 4px;
  line-height: 1;
}

.kpi-card.c1 .kpi-value {
  color: var(--primary);
}

.kpi-card.c2 .kpi-value {
  color: var(--blue);
}

.kpi-card.c3 .kpi-value {
  color: var(--green);
}

.kpi-card.c4 .kpi-value {
  color: var(--red);
}

.kpi-trend {
  font-size: 11px;
  font-weight: 500;
}

.kpi-trend.up {
  color: var(--green);
}

.kpi-trend.down {
  color: var(--red);
}

.kpi-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 20px;
  opacity: .5;
}

.kpi-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.kpi-card.c1 .kpi-strip {
  background: linear-gradient(90deg, var(--primary), var(--gold));
}

.kpi-card.c2 .kpi-strip {
  background: linear-gradient(90deg, #1A5FAB, #5B9BD5);
}

.kpi-card.c3 .kpi-strip {
  background: linear-gradient(90deg, #1B7A4A, #2ECC71);
}

.kpi-card.c4 .kpi-strip {
  background: linear-gradient(90deg, #C0392B, #E74C3C);
}

/* ALERT BANNER */
.alert-strip {
  background: var(--red-bg);
  border: 1.5px solid #F5C6C2;
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12.5px;
}

.alert-strip .badge {
  background: var(--red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.alert-items {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.alert-item {
  color: var(--red);
  cursor: pointer;
  font-weight: 500;
}

.alert-item:hover {
  text-decoration: underline;
}

/* MODULE GRID */
.module-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
}

.mod-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  box-shadow: var(--shadow-sm);
}

.mod-card:hover {
  border-color: var(--primary);
  background: #FEF3ED;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.mod-icon {
  font-size: 22px;
  margin-bottom: 6px;
}

.mod-name {
  font-size: 10.5px;
  color: var(--text3);
  line-height: 1.3;
  font-weight: 500;
}

.mod-count {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin: 3px 0;
}

/* GRID LAYOUTS */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}

.three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}

/* PANEL */
.panel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.panel-header {
  padding: 14px 18px 12px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface2);
}

.panel-header .btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
  font-weight: 600;
}

.panel-header .btn-ghost {
  padding: 7px 12px !important;
  font-size: 12px !important;
}

/* Table row action buttons — always small */
.mini-table td .btn {
  padding: 3px 8px;
  font-size: 11px;
}

.mini-table td .btn-ghost {
  padding: 3px 8px;
  font-size: 11px;
}

.mini-table td .btn-primary {
  padding: 3px 8px;
  font-size: 11px;
}

.mini-table td .btn-success {
  padding: 3px 8px;
  font-size: 11px;
}

.mini-table td .btn-danger {
  padding: 3px 8px;
  font-size: 11px;
}

.panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}

.panel-title .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  flex-shrink: 0;
}

.panel-link {
  font-size: 11px;
  color: var(--primary);
  cursor: pointer;
  font-weight: 600;
}

.panel-link:hover {
  text-decoration: underline;
}

.panel-body {
  padding: 16px 18px;
  overflow-x: auto;
}

/* TABLE */
.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 500px;
}

.mini-table th {
  text-align: left;
  color: var(--text3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 0 8px 9px;
  font-weight: 600;
}

.mini-table td {
  padding: 10px 8px;
  border-top: 1px solid var(--border);
  color: var(--text2);
}

.mini-table td:first-child,
.mini-table th:first-child {
  padding-left: 18px;
}

.mini-table tr:hover td {
  background: var(--bg);
}

/* BRANCH MANAGEMENT TABLE */
.branch-th-first {
  padding: 9px 16px;
}

.branch-th {
  padding: 9px 8px;
}

.branch-td-name {
  padding: 10px 16px;
  font-weight: 700;
}

.branch-td {
  padding: 10px 8px;
}

.branch-td-actions {
  padding: 10px 8px;
  display: flex;
  gap: 5px;
}

.branch-empty-cell {
  padding: 15px;
  text-align: center;
  color: var(--text3);
}

/* STATUS */
.status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2px;
}

.status.paid {
  background: var(--green-bg);
  color: var(--green);
}

.status.pending {
  background: var(--amber-bg);
  color: var(--amber);
}

.status.overdue {
  background: var(--red-bg);
  color: var(--red);
}

.status.partial {
  background: var(--purple-bg);
  color: var(--purple);
}

.status.transit {
  background: var(--blue-bg);
  color: var(--blue);
}

.status.active {
  background: var(--green-bg);
  color: var(--green);
}

.status.inactive {
  background: var(--bg2);
  color: var(--text3);
}

/* PROGRESS */
.prog-wrap {
  margin: 8px 0;
}

.prog-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  margin-bottom: 5px;
}

.prog-meta .label {
  color: var(--text2);
  font-weight: 500;
}

.prog-meta .val {
  color: var(--primary);
  font-weight: 700;
}

.prog-bar {
  background: var(--bg2);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}

.prog-fill {
  height: 100%;
  border-radius: 4px;
}

.prog-fill.orange {
  background: linear-gradient(90deg, var(--primary), var(--gold));
}

.prog-fill.green {
  background: linear-gradient(90deg, #1B7A4A, #2ECC71);
}

.prog-fill.blue {
  background: linear-gradient(90deg, #1A5FAB, #5B9BD5);
}

.prog-fill.purple {
  background: linear-gradient(90deg, #5b21b6, #8B5CF6);
}

/* CHART */
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
  padding: 8px 0;
}

.bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, var(--primary), var(--gold));
  opacity: .85;
  transition: opacity .2s;
  cursor: pointer;
}

.bar:hover {
  opacity: 1;
}

.bar.dim {
  background: linear-gradient(180deg, #D5CFC6, #C5BFB6);
}

.bar-label {
  font-size: 9px;
  color: var(--text3);
  font-weight: 500;
}

/* ACTIVITY */
.activity-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

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

.act-dot {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.act-dot.orange {
  background: #FEF3ED;
}

.act-dot.green {
  background: var(--green-bg);
}

.act-dot.cyan {
  background: var(--cyan-bg);
}

.act-dot.red {
  background: var(--red-bg);
}

.act-dot.purple {
  background: var(--purple-bg);
}

.act-dot.blue {
  background: var(--blue-bg);
}

.act-text {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text2);
}

.act-text strong {
  color: var(--text);
  font-weight: 600;
}

.act-time {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 1px;
}

/* STOCK */
.stock-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

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

.stock-name {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}

.stock-sku {
  font-size: 10px;
  color: var(--text3);
}

.stock-bar-bg {
  background: var(--bg2);
  border-radius: 3px;
  height: 5px;
  width: 80px;
}

.stock-bar-fill {
  height: 5px;
  border-radius: 3px;
}

/* EMPLOYEE */
.emp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.emp-row:last-child {
  border-bottom: none;
}

.emp-avatar {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.emp-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.emp-dept {
  font-size: 10px;
  color: var(--text3);
}

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  outline: none;
  transition: all .15s;
  font-family: inherit;
}

/* Bootstrap ships its own .btn/.btn-primary/.btn-danger/.btn-success rules
   (loaded before this file). They share the same class names as our theme,
   so Bootstrap's default focus ring / active box-shadow otherwise bleeds
   through on top of our styling. Kill it once here for every button. */
.btn:focus,
.btn:focus-visible,
.btn:active {
  box-shadow: none;
  outline: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border-color: transparent;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  opacity: .9;
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--text2);
  border: 1.5px solid var(--border);
}

.btn-ghost:hover,
.btn-ghost:focus,
.btn-ghost:active {
  color: var(--primary);
  border-color: var(--primary);
  background: #FEF3ED;
}

.btn-danger {
  background: var(--red-bg);
  color: var(--red);
  border: 1.5px solid #F5C6C2;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn-success {
  background: var(--green-bg);
  color: var(--green);
  border: 1.5px solid #B8E8D0;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* FORM */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.form-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}

.form-input:focus {
  border-color: var(--primary);
  background: #fff;
}

.form-select {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
}

.form-select:focus {
  border-color: var(--primary);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

/* TABS */
.tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 16px;
  background: var(--bg2);
  border-radius: 8px;
  padding: 3px;
}

.tab {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text3);
  transition: all .15s;
  font-weight: 500;
}

.tab.active {
  background: var(--surface);
  color: var(--primary);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.tab:hover:not(.active) {
  color: var(--text2);
}

/* PAGE HEADER */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.page-header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.page-header p {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}

/* DIVIDER */
.divider {
  height: 1px;
  background: var(--border);
  margin: 12px 0;
}

/* PILL */
.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}

.pill.orange {
  background: #FEF3ED;
  color: var(--primary);
}

.pill.green {
  background: var(--green-bg);
  color: var(--green);
}

.pill.red {
  background: var(--red-bg);
  color: var(--red);
}

.pill.blue {
  background: var(--blue-bg);
  color: var(--blue);
}

.pill.purple {
    background: #EDE9FE;
    color: #6D28D9;
}

.pill.amber {
    background: #FFF8E1;
    color: #B45309;
}

.pill.gray {
    background: #F3F4F6;
    color: #4B5563;
}

/* FOOTER */
.footer-brand {
  color: var(--primary);
  font-weight: 600;
}

/* ONLINE */
.online-dot {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

/* STAT BOX */
.stat-box {
  text-align: center;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
}

.stat-box-val {
  font-size: 22px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
}

.stat-box-label {
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
  font-weight: 500;
}

/* CARD LIST */
.card-list-item {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all .15s;
}

.card-list-item:hover {
  border-color: var(--primary);
  background: #FEF3ED;
}

.integration-toggle-btn {
  width: 100%;
  margin-bottom: 8px;
}

.fs-11-muted {
  font-size: 11px;
  color: var(--text3);
}

.fs-11-5-muted-mb-12 {
  font-size: 11.5px;
  color: var(--text3);
  margin-bottom: 12px;
}

.card-list-item:last-child {
  margin-bottom: 0;
}

/* LEAD STAGE */
.pipeline {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}

.pipeline-stage {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 8px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all .15s;
}

.pipeline-stage:hover {
  border-color: var(--primary);
}

.pipeline-stage-count {
  font-size: 18px;
  font-weight: 700;
}

.pipeline-stage-name {
  font-size: 9px;
  color: var(--text3);
  margin-top: 2px;
  font-weight: 500;
}

/* MODAL OVERLAY (for simple actions) */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--text);
  color: #fff;
  padding: 10px 18px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  z-index: 999;
  display: none;
  animation: slideUp .2s ease;
}

.toast.show {
  display: block;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* ===== MODALS (Scoped under .modal-overlay to prevent conflicts with Bootstrap modals) ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-overlay .modal,
.modal-overlay .modal-box {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  margin: auto !important;
  display: block;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn .2s ease;
}

@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(.95)translateY(10px);
  }

  to {
    opacity: 1;
    transform: scale(1)translateY(0);
  }
}

.modal-overlay .modal-sm,
.modal-overlay .modal-box-sm {
  max-width: 440px;
}

.modal-overlay .modal-md,
.modal-overlay .modal-box-md {
  max-width: 640px;
}

.modal-overlay .modal-lg,
.modal-overlay .modal-box-lg {
  max-width: 860px;
}

.modal-overlay .modal-xl,
.modal-overlay .modal-box-xl {
  max-width: 1060px;
}

.modal-header,
.modal-overlay .modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface2);
  border-radius: 16px 16px 0 0;
}

.modal-overlay .modal-header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.modal-close {
  position: relative;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;
}

.modal-close::before,
.modal-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--text3, #6b7280);
}

.modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal-close:hover {
  background: var(--red-bg);
  border-color: var(--red);
}

.modal-close:hover::before,
.modal-close:hover::after {
  background: var(--red);
}

.modal-overlay .modal-body {
  padding: 22px;
}

.modal-overlay .modal-footer {
  padding: 14px 22px;
  border-top: 1.5px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--surface2);
  border-radius: 0 0 16px 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.form-full {
  grid-column: 1/-1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border .15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  background: #fff;
}

.form-group textarea {
  resize: vertical;
  min-height: 70px;
}

.form-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 8px 0 6px;
  border-bottom: 1px dashed var(--border2);
  margin-bottom: 4px;
  grid-column: 1/-1;
}

.emp-detail-section {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}

.emp-detail-section h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 12px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.detail-item label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
  margin-bottom: 3px;
}

.detail-item span {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}

/* ===== HR SUBMENU STYLES ===== */
.nav-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s ease;
}

.nav-sub.open {
  max-height: 500px;
}

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 38px;
  cursor: pointer;
  font-size: 11.5px;
  color: var(--text3);
  border-left: 3px solid transparent;
  transition: all .15s;
  font-weight: 500;
}

.nav-sub-item:hover {
  color: var(--primary);
  background: #FEF3ED;
}

.nav-sub-item.active {
  color: var(--primary);
  background: #FEF3ED;
  border-left-color: var(--primary);
  font-weight: 600;
}

.nav-sub-item .sub-icon {
  font-size: 12px;
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}

.nav-parent {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text2);
  border-left: 3px solid transparent;
  transition: all .15s;
  font-weight: 500;
}

.nav-parent:hover {
  color: var(--primary);
  background: #FEF3ED;
}

.nav-parent.active {
  color: var(--primary);
  background: #FEF3ED;
  border-left-color: var(--primary);
  font-weight: 600;
}

.nav-parent .icon {
  font-size: 15px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.nav-arrow {
  margin-left: auto;
  font-size: 10px;
  transition: transform .3s;
  color: var(--text3);
}

.nav-parent.open .nav-arrow {
  transform: rotate(90deg);
}

/* ===== HR DASHBOARD STYLES ===== */
.hr-dash-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.hr-stat-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
  box-shadow: var(--shadow-sm);
}

.hr-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.hr-stat-val {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  font-weight: 700;
  margin: 4px 0 2px;
  line-height: 1;
}

.hr-stat-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.hr-stat-sub {
  font-size: 11px;
  color: var(--text3);
  margin-top: 3px;
}

.hr-stat-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 22px;
  opacity: .4;
}

/* ===== OFFER LETTER PAGE ===== */
.offer-preview {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 36px 40px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  /* max-width: 720px; */
  margin: 0 auto;
  box-shadow: var(--shadow);
}

.offer-preview h1 {
  font-family: 'Playfair Display', serif;
  color: var(--primary);
  font-size: 28px;
  margin-bottom: 4px;
}

.offer-preview .offer-sub {
  color: var(--text3);
  font-size: 12px;
  margin-bottom: 24px;
}

.offer-field-val {
  border-bottom: 1.5px dashed var(--border2);
  display: inline-block;
  min-width: 180px;
  color: var(--text);
  font-weight: 600;
  padding: 0 4px;
}

/* ===== ASSESSMENT PAGE ===== */
.assessment-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  transition: all .2s;
  box-shadow: var(--shadow-sm);
}

.assessment-card:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}

.assess-score {
  font-size: 22px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
}

.assess-score.pass {
  color: var(--green);
}

.assess-score.fail {
  color: var(--red);
}

.assess-score.pending {
  color: var(--text3);
}

.q-card {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 12px;
}

.q-card .q-text {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.5;
}

.q-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  margin-bottom: 7px;
  transition: all .15s;
}

.q-option:hover {
  border-color: var(--primary);
  background: #FEF3ED;
}

.q-option.selected {
  border-color: var(--primary);
  background: #FEF3ED;
}

.q-option.correct {
  border-color: var(--green);
  background: var(--green-bg);
}

.q-option.wrong {
  border-color: var(--red);
  background: var(--red-bg);
}

/* ===== ADD EMPLOYEE FULL PAGE ===== */
.add-emp-page {
  max-width: 100%;
  margin: 0;
}

.alert-strip.alert-danger-soft {
  background: #FFF5F5 !important;
  border-color: #FFCDD2 !important;
}

.employee-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  justify-content: flex-end;
  margin-bottom: 24px;
}

.textarea-min-h-60 {
  min-height: 60px;
}

.form-section-divider {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1.5px dashed var(--border);
}

.perm-address-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.same-address-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
}

.credentials-note-box {
  margin-top: 10px;
  padding: 10px 14px;
  background: #F0FDF4;
  border: 1.5px solid #A7D7B5;
  border-radius: 8px;
  font-size: 11.5px;
  color: #166534;
}

.visit-count-input {
  max-width: 90px;
}

.ot-section-label {
  letter-spacing: .5px;
}

.ot-preview-box {
  background: linear-gradient(135deg, #FEF3ED, var(--surface2));
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 8px;
}

.ot-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ot-rate-highlight {
  background: var(--primary);
  border-radius: 8px;
  padding: 8px;
}

.text-white-80 {
  color: rgba(255, 255, 255, .8);
}

.text-white {
  color: #fff;
}

.input-uppercase {
  text-transform: uppercase;
}

.photo-thumb-40-round {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* ===== SALARY INFO POPUP ===== */
@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(.92) translateY(8px);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.sal-popup-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.sal-popup-row:last-child {
  border-bottom: none;
}

.sal-popup-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.sal-popup-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.sal-popup-meta {
  font-size: 11px;
  color: var(--text3);
  line-height: 1.5;
}

.sal-popup-amt {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  flex-shrink: 0;
  padding-left: 10px;
}

.filter-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 10, .5);
  z-index: 500;
  display: none;
  backdrop-filter: blur(2px);
  transition: opacity .3s;
  opacity: 0;
}

.filter-sidebar-overlay.open {
  display: block;
  opacity: 1;
}

.filter-sidebar {
  position: fixed;
  top: 0;
  right: -440px;
  width: 420px;
  height: 100vh;
  background: var(--surface);
  z-index: 501;
  display: flex;
  flex-direction: column;
  transition: right .35s cubic-bezier(.4, 0, .2, 1);
  box-shadow: -8px 0 40px rgba(0, 0, 0, .18);
}

.filter-sidebar.open {
  right: 0;
}

/* Slide-in indicator bar */
.filter-sidebar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--primary), var(--gold));
}

.filter-sidebar-head {
  padding: 20px 22px 16px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #FEF3ED, var(--surface));
}

.filter-sidebar-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-sidebar-head .fs-count {
  font-size: 11px;
  background: var(--primary);
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
}

.filter-sidebar-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
}

.filter-sidebar-body::-webkit-scrollbar {
  width: 4px;
}

.filter-sidebar-body::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 4px;
}

/* Filter sections accordion style */
.fs-section {
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.fs-section-head {
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background .15s;
  user-select: none;
}

.fs-section-head:hover {
  background: var(--bg);
}

.fs-section-head.active {
  background: #FEF3ED;
}

.fs-section-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .7px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-section-label .fs-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
}

.fs-section-arrow {
  font-size: 11px;
  color: var(--text3);
  transition: transform .25s;
}

.fs-section-head.active .fs-section-arrow {
  transform: rotate(90deg);
}

.fs-active-dot {
  width: 7px;
  height: 7px;
  background: var(--primary);
  border-radius: 50%;
  margin-left: 6px;
  display: none;
}

.fs-active-dot.show {
  display: inline-block;
}

.fs-section-body {
  padding: 0 22px 16px;
  display: none;
}

.fs-section-body.open {
  display: block;
}

/* Chips */
.filter-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.fchip {
  padding: 7px 15px;
  border-radius: 22px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--text2);
  transition: all .18s;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  text-transform: uppercase;
}

.fchip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #FEF3ED;
  transform: translateY(-1px);
}

.fchip.selected {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border-color: var(--primary);
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(212, 89, 10, .3);
  transform: translateY(-1px);
}

.fchip .fchip-check {
  display: none;
  font-size: 10px;
}

.fchip.selected .fchip-check {
  display: inline;
}

.iv-star {
  font-size: 24px;
  cursor: pointer;
  color: var(--border2);
  transition: color .12s;
  user-select: none;
}

.iv-star.active {
  color: var(--gold);
}

.dr-picker {
  position: relative;
}

.dr-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  color: var(--text);
}

.dr-input:hover {
  border-color: var(--primary);
}

.dr-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  padding: 14px;
  width: 270px;
  display: none;
}

.dr-popup.open {
  display: block;
}

.dr-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 12.5px;
}

.dr-cal-nav {
  cursor: pointer;
  padding: 2px 9px;
  border-radius: 6px;
  user-select: none;
}

.dr-cal-nav:hover {
  background: var(--bg2);
}

.dr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dr-cal-dow {
  font-size: 9.5px;
  color: var(--text3);
  text-align: center;
  font-weight: 700;
  padding: 4px 0;
}

.dr-cal-day {
  font-size: 11.5px;
  text-align: center;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
}

.dr-cal-day:hover {
  background: var(--bg2);
}

.dr-cal-day.in-range {
  background: rgba(232, 103, 10, .14);
  border-radius: 0;
}

.dr-cal-day.range-start {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: 6px 0 0 6px;
}

.dr-cal-day.range-end {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  border-radius: 0 6px 6px 0;
}

.dr-cal-day.range-start.range-end {
  border-radius: 6px;
}

/* Range inputs */
.fs-range-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

.fs-range-sep {
  color: var(--text3);
  font-size: 12px;
  text-align: center;
  padding-top: 20px;
}

.fs-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border .15s;
}

.fs-input:focus {
  border-color: var(--primary);
  background: #fff;
}

.fs-input-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Range slider */
.fs-slider-wrap {
  margin-top: 14px;
}

.fs-slider-track {
  position: relative;
  height: 5px;
  background: var(--bg2);
  border-radius: 3px;
  margin: 20px 0 8px;
}

.fs-slider-fill {
  position: absolute;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--gold));
  border-radius: 3px;
  pointer-events: none;
}

.fs-slider {
  position: absolute;
  width: 100%;
  height: 5px;
  top: 0;
  left: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.fs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  border: 2.5px solid #fff;
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 2px 8px rgba(212, 89, 10, .4);
  transition: transform .15s;
}

.fs-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.fs-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
}

/* Footer */
.filter-sidebar-foot {
  padding: 16px 22px;
  border-top: 1.5px solid var(--border);
  display: flex;
  gap: 10px;
  background: var(--surface2);
}

.fs-clear-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text3);
  font-family: inherit;
  transition: all .15s;
}

.fs-clear-btn:hover {
  border-color: var(--red);
  color: var(--red);
}

.fs-apply-btn {
  flex: 1;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  box-shadow: 0 4px 14px rgba(212, 89, 10, .3);
}

.fs-apply-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(212, 89, 10, .4);
}

/* Active filter chips bar */
.filter-chips-bar {
  display: none;
  padding: 10px 16px;
  background: linear-gradient(90deg, #FFF8E1, var(--surface));
  border: 1px solid #FFD54F;
  border-radius: 10px;
  margin-bottom: 12px;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-chips-bar.show {
  display: flex;
}

.factive-chip {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: #fff;
  padding: 3px 10px 3px 12px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(212, 89, 10, .25);
}

.factive-chip .chip-x {
  cursor: pointer;
  opacity: .75;
  font-size: 11px;
  transition: opacity .15s;
}

.factive-chip .chip-x:hover {
  opacity: 1;
}

.filter-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.form-section {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.form-section-header {
  background: var(--surface2);
  padding: 13px 20px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

.form-section-body {
  padding: 16px 18px;
}

/* Additional compact utilities (Pass 3) */
.pad-2-8 {
  padding: 2px 8px !important;
}

.pad-3-8 {
  padding: 3px 8px !important;
}

.pad-2-7 {
  padding: 2px 7px !important;
}

.icon-26 {
  width: 26px;
  height: 26px;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-17 {
  font-size: 17px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-32 {
  font-size: 32px !important;
}

.text-purple {
  color: var(--purple) !important;
}

.text-body2 {
  color: var(--text) !important;
}

.text-body3 {
  color: var(--text2) !important;
}

.bb-success {
  border-bottom: 3px solid var(--green);
}

.bb-primary {
  border-bottom: 3px solid var(--primary);
}

.bb-info {
  border-bottom: 3px solid var(--blue);
}

.bb-danger {
  border-bottom: 3px solid var(--red);
}

.bb-warning {
  border-bottom: 3px solid var(--amber);
}
.text-gold{
    color: var(--gold);
}
.text-body-muted{
    color: var(--text3);
    font-size: 11px;
}

.table-empty{
    text-align:center;
    color:var(--text3);
    padding:18px;
}
.alert-warning{
    background:#FFF5F5;
    border-color:#FFCDD2;
    margin-bottom:14px;
}
.alert-success{
    background:#E8F5EE;
    border-color:#A7D7B5;
    margin-bottom:14px;
}
.form-actions{
    display:flex;
    gap:10px;
    margin-top:16px;
    align-items:center;
    justify-content:flex-end;
}
.rating-wrapper{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-bottom:14px;
}
.rating-label{
    display:block;
    font-size:11.5px;
    font-weight:600;
    color:var(--text2);
    margin-bottom:6px;
}

.iv-star-row{
    display:flex;
    gap:4px;
}

.two-col-gap {
    margin-bottom: 16px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.detail-label {
    font-size: 10px;
    color: var(--text3);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.detail-value {
    font-size: 13px;
}

.btn-xs {
    padding: 2px 8px !important;
    font-size: 11px !important;
}

.rating-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.star-lg {
    font-size: 22px;
}

.text-gold {
    color: var(--gold);
}

.text-border {
    color: var(--border2);
}

.rating-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.rating-row {
    display: flex;
    justify-content: space-between;
}

.muted-text {
    color: var(--text3);
    font-size: 12px;
}

.remarks-text {
    font-size: 12.5px;
    line-height: 1.6;
}

.invite-help {
    font-size: 11.5px;
    color: var(--text3);
    margin-bottom: 10px;
}

.invite-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.invite-field {
    flex: 1;
    min-width: 220px;
}

.full-width {
    width: 100% !important;
}

.mt-14 {
    margin-top: 14px;
}

.history-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text2);
    margin-bottom: 6px;
}

.history-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
}
input[type=range]#salary-slider-min,
input[type=range]#salary-slider-max {
    -webkit-appearance: none;
    height: 0;
    pointer-events: none;
}

input[type=range]#salary-slider-min::-webkit-slider-thumb,
input[type=range]#salary-slider-max::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--primary, #E8670A);
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    pointer-events: auto;
    cursor: pointer;
    margin-top: -7px;
}

input[type=range]#salary-slider-min::-moz-range-thumb,
input[type=range]#salary-slider-max::-moz-range-thumb {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    background: var(--primary, #E8670A);
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
    pointer-events: auto;
    cursor: pointer;
}

/* ===== GLOBAL KPI CARDS & GRIDS ===== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
  width: 100%;
}

.kpi-grid.grid-5 {
  grid-template-columns: repeat(5, 1fr);
}

.kpi-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.kpi-card .kpi-label {
  font-size: 11.5px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.kpi-card .kpi-value {
  font-size: 24px;
  font-weight: 800;
  margin: 6px 0;
  color: var(--text);
  line-height: 1.2;
}

.kpi-card .kpi-trend {
  font-size: 11px;
  color: var(--text3);
}

.kpi-card .kpi-trend.up {
  color: var(--green);
  font-weight: 600;
}

.kpi-card .kpi-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 22px;
  opacity: .85;
}

.kpi-card .kpi-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.kpi-card.c1 .kpi-strip { background: var(--primary); }
.kpi-card.c2 .kpi-strip { background: var(--amber); }
.kpi-card.c3 .kpi-strip { background: var(--red); }
.kpi-card.c4 .kpi-strip { background: var(--green); }

.kpi-card.purple .kpi-strip,
.kpi-card.c5 .kpi-strip {
  background: linear-gradient(90deg, var(--purple), #9D7BEA);
}
.kpi-card.purple .kpi-value,
.kpi-card.c5 .kpi-value {
  color: var(--purple);
}

/* ===== HR MODULE CUSTOM CLASSES ===== */
.alert-strip.birthday-alert {
  background: #FFF8E1 !important;
  border-color: #FFD54F !important;
  margin-bottom: 16px;
}
.alert-strip.birthday-alert .birthday-icon {
  font-size: 20px;
}
.alert-strip.birthday-alert .birthday-content {
  flex: 1;
}
.alert-strip.birthday-alert .birthday-content b {
  color: #B45309;
}
.alert-strip.birthday-alert .birthday-names {
  color: #92400E;
  margin-left: 8px;
}

.alert-strip.alert-success {
  background: var(--green-bg) !important;
  border-color: #A7D7B5 !important;
  margin-bottom: 14px;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 10px !important;
  text-decoration: none;
  color: inherit !important;
  transition: all .15s ease;
}
.quick-action-card:hover {
  background: var(--bg) !important;
  transform: translateY(-1px);
}
.quick-action-card .qa-emoji {
  font-size: 26px;
}
.quick-action-card .qa-title {
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}
.quick-action-card .qa-desc {
  font-size: 10px;
  color: var(--text3);
}

.filter-chips-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 14px;
  font-size: 12px;
}
.filter-chips-bar .filter-label {
  color: var(--amber);
  font-weight: 700;
}
.filter-chips-bar .chips-container {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-chips-bar .clear-all-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--red);
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}

.card-list-item-link {
  text-decoration: none;
  color: inherit !important;
}
.card-list-item-link:hover {
  background: var(--bg) !important;
}

.card-list-item .item-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.card-list-item .item-sub {
  font-size: 11px;
  color: var(--text3);
}

.card-list-empty {
  text-align: center;
  color: var(--text3);
  font-size: 12.5px;
  padding: 18px 14px;
}

/* ===== LAYOUT & STYLING UTILITIES ===== */
.flex-align-center {
  display: flex;
  align-items: center;
  gap: 8px;
}
.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.text-bold {
  font-weight: 600;
}
.text-muted-sm {
  font-size: 10.5px;
  color: var(--text3);
}
.text-center {
  text-align: center;
}
.white-space-nowrap {
  white-space: nowrap;
}
.btn-sm {
  font-size: 11px !important;
  padding: 5px 12px !important;
}
.btn-sm-padding {
  padding: 3px 8px !important;
  font-size: 11px !important;
}
.badge-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 9px;
}
.p-0 {
  padding: 0 !important;
}
.padding-11-18 {
  padding: 11px 18px !important;
}
.relative {
  position: relative !important;
}
.display-none {
  display: none !important;
}
.margin-left-auto {
  margin-left: auto !important;
}

/* Salary Slider Range Styling */
.flex-space-between {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
.mb-10 {
  margin-bottom: 10px !important;
}
.mt-12 {
  margin-top: 12px !important;
}
.flex-1 {
  flex: 1 !important;
}
.text-blue {
  color: #3B82F6 !important;
}
.salary-slider-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}
.salary-slider-container {
  position: relative !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
}
#salary-track {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: var(--border) !important;
  border-radius: 4px !important;
}
#salary-fill {
  position: absolute !important;
  height: 4px !important;
  background: var(--primary) !important;
  border-radius: 4px !important;
}
.salary-slider-input {
  position: absolute !important;
  width: 100% !important;
  appearance: none !important;
  background: transparent !important;
  pointer-events: auto !important;
}
#salary-slider-min {
  z-index: 3 !important;
}
#salary-slider-max {
  z-index: 4 !important;
}

/* ===== EMPLOYEE PROFILE VIEW STYLING ===== */
.employee-hero-banner {
  background: linear-gradient(135deg, #E8670A 0%, #F5A623 100%) !important;
  border-radius: 16px !important;
  padding: 22px 26px !important;
  margin-bottom: 18px !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  flex-wrap: wrap !important;
}

.employee-hero-banner .hero-avatar {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
  overflow: hidden;
}

.employee-hero-banner .hero-avatar img {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
}

.employee-hero-banner .hero-info {
  flex: 1;
  min-width: 200px;
}

.employee-hero-banner .hero-info .hero-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 2px;
  color: #fff;
}

.employee-hero-banner .hero-info .hero-meta {
  font-size: 12px;
  opacity: .85;
  margin-bottom: 8px;
}

.employee-hero-banner .hero-info .hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.employee-hero-banner .hero-info .hero-chip {
  background: rgba(255, 255, 255, .2);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.employee-hero-banner .hero-info .hero-chip.active {
  background: rgba(76, 175, 80, .45);
  font-weight: 700;
}

.employee-hero-banner .hero-info .hero-chip.inactive {
  background: rgba(244, 67, 54, .4);
  font-weight: 700;
}

.employee-hero-banner .hero-salary {
  text-align: right;
  flex-shrink: 0;
}

.employee-hero-banner .hero-salary .salary-label {
  font-size: 11px;
  opacity: .8;
  margin-bottom: 4px;
}

.employee-hero-banner .hero-salary .salary-val {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
}

.employee-hero-banner .hero-salary .salary-sub {
  font-size: 11px;
  opacity: .75;
  margin-top: 2px;
}

.doc-download-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 12px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text2) !important;
  background: var(--surface2) !important;
  text-decoration: none !important;
  transition: all 0.15s ease;
}
.doc-download-link:hover {
  background: var(--bg) !important;
  border-color: var(--text3) !important;
}
.doc-download-link .download-arrow {
  opacity: .6 !important;
}

.stats-grid-small {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  width: 100%;
}

.stat-card-small {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}

.stat-card-small .stat-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text3);
  margin-bottom: 6px;
}

.stat-card-small .stat-val {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--stat-color, inherit);
}

.stat-card-small .stat-sub {
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
}

.performance-card {
  background: var(--surface2) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}
.performance-card .perf-label {
  font-size: 9.5px !important;
  color: var(--text3) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
.performance-card .perf-val {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--perf-color, inherit) !important;
}

.progress-container-small {
  background: var(--border) !important;
  border-radius: 6px !important;
  height: 8px !important;
  overflow: hidden !important;
  width: 100% !important;
}
.progress-container-small .progress-bar-orange {
  background: linear-gradient(90deg, #E8670A, #F5A623) !important;
  height: 100% !important;
  border-radius: 6px !important;
  transition: width .5s ease !important;
  width: var(--bar-width, 0%) !important;
}
.progress-container-small .progress-bar-green {
  background: linear-gradient(90deg, #22C55E, #16A34A) !important;
  height: 100% !important;
  border-radius: 6px !important;
  transition: width .5s ease !important;
  width: var(--bar-width, 0%) !important;
}

.salary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  width: 100%;
}

.salary-block-card {
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  border: 1.5px solid transparent;
  background: var(--block-bg, var(--surface2));
}
.salary-block-card.bordered {
  border-color: var(--border) !important;
}
.salary-block-card .salary-block-label {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
  color: var(--block-label-color, var(--text3));
}
.salary-block-card .salary-block-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--block-val-color, var(--text));
}

.attendance-block-card {
  border-radius: 10px !important;
  padding: 12px !important;
  text-align: center !important;
  background: var(--att-bg, var(--surface2)) !important;
}
.attendance-block-card .att-block-label {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  margin-bottom: 4px !important;
  color: var(--att-fg, var(--text3)) !important;
}
.attendance-block-card .att-block-val {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--att-fg, var(--text)) !important;
}

.attendance-block-card-deduction {
  background: #FFF5F5 !important;
}

.att-block-label-deduction {
  color: #9B1C1C !important;
}

.att-block-val-deduction {
  color: #DC2626 !important;
}

.info-note-footer {
  padding: 10px 12px !important;
  background: var(--surface2) !important;
  border-radius: 8px !important;
}

.grid-col-2 {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
}
.grid-col-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
}
.mb-16 {
  margin-bottom: 16px !important;
}
.word-break-all {
  word-break: break-all !important;
}
.grid-col-full {
  grid-column: 1 / -1 !important;
}

/* ===== BIRTHDAYS & CAKES VIEW STYLING ===== */
.bday-today-alert {
  background: linear-gradient(135deg, #FFF8E1, #FFF3CD) !important;
  border: 1.5px solid #FFD54F !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 16px !important;
}
.bday-today-alert .alert-inner {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.bday-today-alert .bday-icon {
  font-size: 28px !important;
}
.bday-today-alert .bday-text {
  flex: 1 !important;
}
.bday-today-alert .bday-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #B45309 !important;
  margin-bottom: 3px !important;
}
.bday-today-alert .bday-names {
  font-size: 12px !important;
  color: #92400E !important;
}

.hr-stat-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.hr-stat-card .hr-stat-label {
  font-size: 11.5px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.hr-stat-card .hr-stat-val {
  font-size: 24px;
  font-weight: 800;
  margin: 6px 0;
  color: var(--text);
  line-height: 1.2;
}
.hr-stat-card .hr-stat-sub {
  font-size: 11px;
  color: var(--text3);
}
.hr-stat-card .hr-stat-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 22px;
  opacity: .85;
}
.hr-stat-card.red {
  border-bottom: 3px solid var(--red) !important;
}
.hr-stat-card.red .hr-stat-val {
  color: var(--red) !important;
}
.hr-stat-card.amber {
  border-bottom: 3px solid var(--amber) !important;
}
.hr-stat-card.amber .hr-stat-val {
  color: var(--amber) !important;
}
.hr-stat-card.green {
  border-bottom: 3px solid var(--green) !important;
}
.hr-stat-card.green .hr-stat-val {
  color: var(--green) !important;
}
.hr-stat-card.primary {
  border-bottom: 3px solid var(--primary) !important;
}
.hr-stat-card.primary .hr-stat-val {
  color: var(--primary) !important;
}
.hr-stat-card.blue {
  border-bottom: 3px solid var(--blue) !important;
}
.hr-stat-card.blue .hr-stat-val {
  color: var(--blue) !important;
}

.padding-9-14 {
  padding: 9px 14px !important;
}
.padding-9-8 {
  padding: 9px 8px !important;
}

.cake-order-card {
  background: #E8F5EE !important;
  border: 1.5px solid #A7D7B5 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  transition: all 0.15s ease;
}
.cake-order-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.cake-order-card .order-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;
}
.cake-order-card .order-header b {
  color: var(--green) !important;
}
.cake-order-card .order-details {
  font-size: 12px !important;
  color: var(--text2) !important;
  line-height: 1.7 !important;
}

.card-dashed-empty {
  padding: 15px !important;
  text-align: center !important;
  color: var(--text3) !important;
  border: 1.5px dashed var(--border) !important;
  border-radius: 10px !important;
}

.cake-order-hero {
  background: linear-gradient(135deg, #F9A825, #F57F17) !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  color: #fff !important;
}
.cake-order-hero .hero-left {
  flex: 1 !important;
}
.cake-order-hero .hero-occasion {
  font-size: 11px !important;
  color: rgba(255, 255, 255, .7) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}
.cake-order-hero .hero-emp-name {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-family: 'Playfair Display', serif !important;
}
.cake-order-hero .hero-emp-detail {
  font-size: 12px !important;
  color: rgba(255, 255, 255, .85) !important;
  margin-top: 3px !important;
}
.cake-order-hero .hero-right {
  text-align: right !important;
}
.cake-order-hero .hero-amount-label {
  font-size: 10px !important;
  color: rgba(255, 255, 255, .7) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}
.cake-order-hero .hero-amount-val {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-family: 'Playfair Display', serif !important;
}

.vendor-avatar-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--primary), var(--gold)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

/* ===== GENERAL LAYOUT UTILITIES ===== */
.align-items-start {
  align-items: start !important;
}
.flex-align-center-gap-12 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.flex-justify-end {
  display: flex !important;
  justify-content: flex-end !important;
}
.mb-12 {
  margin-bottom: 12px !important;
}
.mb-20 {
  margin-bottom: 20px !important;
}
.mt-10 {
  margin-top: 10px !important;
}
.fs-12 {
  font-size: 12px !important;
}
.fs-11 {
  font-size: 11px !important;
}
.fs-10 {
  font-size: 10px !important;
}

.kpi-grid.grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

.flex-column-gap-10 {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.flex-column-gap-12 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.bg-surface2 {
  background: var(--surface2) !important;
}

.btn-outline-danger {
  color: var(--red) !important;
  border-color: #F5C6C2 !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  background: transparent !important;
  transition: all 0.15s ease;
}

.text-red-border-soft {
  color: var(--red) !important;
  border-color: #F5C6C2 !important;
}
.btn-outline-danger:hover {
  background: var(--red-bg) !important;
  color: var(--red) !important;
}
.fs-14 {
  font-size: 14px !important;
}
.padding-2-8 {
  padding: 2px 8px !important;
}
.fs-9 {
  font-size: 9px !important;
}

/* ===== ASSESSMENT & EVALUATION UTILITIES ===== */
.text-border2 {
  color: var(--border2) !important;
}
.text-danger {
  color: var(--red) !important;
}
.font-monospace {
  font-family: monospace !important;
}
.fs-11-5 {
  font-size: 11.5px !important;
}
.text-primary {
  color: var(--primary) !important;
}
.flex-gap-4 {
  display: flex !important;
  gap: 4px !important;
}
.credentials-box {
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
}
.credentials-row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.credentials-row.no-border {
  border-bottom: none !important;
}
.text-amber {
  color: var(--amber) !important;
}
.fs-16 {
  font-size: 16px !important;
}
.text-text3 {
  color: var(--text3) !important;
}
.mt-5 {
  margin-top: 5px !important;
}

.grid-col-4 {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px !important;
}

.detail-label-xs {
  font-size: 10px !important;
  color: var(--text3) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 3px !important;
}

.flex-align-center-gap-24 {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

.fs-40 {
  font-size: 40px !important;
}

.fw-extrabold {
  font-weight: 800 !important;
}

.badge-large {
  font-size: 14px !important;
  padding: 6px 14px !important;
}

.flex-justify-end-gap-10 {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

/* Assessment Template Builder */
.training-video-box {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
}
.training-video-box .video-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.training-video-box input[type="file"] {
  font-size: 12px;
}
.font-11-muted-mb10 {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 10px;
}
.font-11-muted-mt5 {
  font-size: 11px;
  color: var(--text3);
  margin-top: 5px;
}
.flex-gap10-mt16-center {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  align-items: center;
}
.q-card {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--bg);
}
.q-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.q-card .q-num-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
}
.q-card .q-type-sel {
  font-size: 11px;
  padding: 3px 8px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-family: inherit;
}
.q-btn-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 14px;
}
.q-input-text {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 12.5px;
  font-family: inherit;
  background: var(--surface);
  margin-bottom: 8px;
  box-sizing: border-box;
}
.q-tf-row {
  display: flex;
  gap: 8px;
}
.q-option {
  cursor: pointer;
  padding: 5px 14px;
  border-radius: 7px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  font-size: 12px;
}
.q-option.is-selected {
  border: 1.5px solid var(--green) !important;
  background: #E8F5EE !important;
}
.tf-answer-label {
  margin-left: auto;
  font-size: 10px;
  color: var(--text3);
  font-weight: 700;
  align-self: center;
}
.multi-opts-title {
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 6px;
}
.multi-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.multi-opts-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
}
.multi-opts-chk {
  accent-color: var(--primary);
}
.multi-opts-input {
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 12px;
  font-family: inherit;
  flex: 1;
}
.multi-opts-btn-del {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 11px;
}
.q-btn-add-option {
  margin-top: 8px;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  font-size: 11px;
  color: var(--text3);
  font-family: inherit;
}
.text-answer-title {
  font-size: 10px;
  color: var(--text3);
  margin-bottom: 5px;
}
.q-textarea-disabled {
  width: 100%;
  min-height: 60px;
  padding: 8px 10px;
  border: 1.5px dashed var(--border);
  border-radius: 7px;
  font-size: 12px;
  font-family: inherit;
  background: var(--surface2);
  color: var(--text3);
  box-sizing: border-box;
  resize: none;
}
.text-answer-hint {
  font-size: 10px;
  color: var(--text3);
  margin-top: 5px;
}
.q-empty-placeholder {
  text-align: center;
  color: var(--text3);
  padding: 14px;
  font-size: 12.5px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
}

/* ===== GENERAL UTILITIES & FILTER STYLING ===== */
.flex-gap-6-wrap {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.btn-clear-filters {
  margin-left: auto !important;
  background: none !important;
  border: none !important;
  color: var(--red) !important;
  font-size: 11px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
}

.rotate-90 {
  transform: rotate(90deg) !important;
}

.badge-filter-counter {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  background: var(--primary) !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 9px !important;
}

.btn-outline-success {
  color: var(--green) !important;
  border-color: var(--green) !important;
  background: transparent !important;
  transition: all 0.15s ease;
}

.btn-outline-success:hover {
  background: var(--green-bg) !important;
  color: var(--green) !important;
}

.empty-table-cell {
  text-align: center !important;
  color: var(--text3) !important;
  padding: 18px !important;
}

/* ===== OFFER LETTER PREVIEW STYLING ===== */
.offer-preview-card {
  max-width: 680px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 36px 40px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
  font-family: var(--offer-font, 'Plus Jakarta Sans', sans-serif);
}

.offer-accent-color {
  color: var(--offer-accent, #D4590A) !important;
}

.offer-card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: start !important;
  margin-bottom: 20px !important;
}

.offer-card-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 26px !important;
  margin: 0 0 4px !important;
}

.offer-logo-img {
  max-height: 55px !important;
  max-width: 130px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
}

.offer-date-badge {
  background: var(--bg) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  margin-bottom: 16px !important;
  font-size: 12px !important;
  color: var(--text3) !important;
}

.offer-body-text {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--text2) !important;
  margin-bottom: 14px !important;
}

.offer-comp-box {
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-bottom: 14px !important;
}

.offer-comp-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.flex-justify-between-center {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.offer-comp-value {
  font-size: 20px !important;
  font-weight: 700 !important;
  font-family: 'Playfair Display', serif !important;
}

.offer-comp-annual {
  font-size: 11px !important;
  color: var(--text3) !important;
  margin-top: 6px !important;
  border-top: 1px dashed var(--border) !important;
  padding-top: 6px !important;
}

.offer-details-list {
  font-size: 12.5px !important;
  line-height: 2 !important;
  color: var(--text2) !important;
  margin-bottom: 14px !important;
}

.offer-custom-clause {
  background: #FFF7ED !important;
  border-left: 3px solid #F59E0B !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 10px 14px !important;
  margin-bottom: 14px !important;
  font-size: 12.5px !important;
  color: var(--text2) !important;
  line-height: 1.7 !important;
}

.offer-closing-text {
  font-size: 12px !important;
  color: var(--text3) !important;
  line-height: 1.7 !important;
  margin-top: 16px !important;
}

.offer-signatures {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 36px !important;
  padding-top: 16px !important;
  border-top: 1.5px solid var(--border) !important;
  font-size: 12px !important;
  color: var(--text3) !important;
}

.offer-sig-line {
  display: inline-block !important;
  width: 130px !important;
  border-bottom: 1.5px solid var(--border2) !important;
}

/* ===== OFFER BUILDER & CUSTOMIZER UTILITIES ===== */
.p-16 {
  padding: 16px !important;
}

.flex-column-gap-8-mt-12 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.flex-justify-between-center.mb-10 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.preview-live-label {
  font-size: 11px !important;
  color: var(--text3) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

.flex-gap-6 {
  display: flex !important;
  gap: 6px !important;
}

.font-select-input {
  font-size: 11px !important;
  padding: 3px 8px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--bg) !important;
  font-family: inherit !important;
}

.flex-justify-between-start {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

.offer-prev-title {
  font-family: 'Playfair Display', serif !important;
  color: var(--primary) !important;
  font-size: 26px !important;
  margin-bottom: 2px !important;
}

.offer-body-text-nomargin {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--text2) !important;
}

.logo-upload-box {
  background: var(--bg) !important;
  border: 1.5px dashed var(--border2) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  text-align: center !important;
  cursor: pointer !important;
}

.logo-upload-hint {
  font-size: 10px !important;
  color: var(--text3) !important;
  margin-top: 4px !important;
}

.logo-upload-sub {
  font-size: 9px !important;
  color: var(--text3) !important;
}

.flex-gap-6.mt-8 {
  display: flex !important;
  gap: 6px !important;
  margin-top: 8px !important;
}

.flex-1-margin-0 {
  flex: 1 !important;
  margin: 0 !important;
}

.logo-tagline-input {
  font-size: 11px !important;
  padding: 5px 8px !important;
}

.flex-column-gap-6 {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.customizer-textarea {
  width: 100% !important;
  font-size: 11.5px !important;
  padding: 8px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--bg) !important;
  font-family: inherit !important;
  resize: vertical !important;
  min-height: 80px !important;
  outline: none !important;
}

.btn-customizer-add {
  width: 100% !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  padding: 5px !important;
}

.customizer-textarea-sm {
  width: 100% !important;
  font-size: 11px !important;
  padding: 8px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--bg) !important;
  font-family: inherit !important;
  resize: vertical !important;
  min-height: 60px !important;
  outline: none !important;
}

.customizer-input {
  width: 100% !important;
  font-size: 12px !important;
  padding: 7px 10px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--bg) !important;
  font-family: inherit !important;
  outline: none !important;
}

.flex-gap-8-wrap {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.logo-img-prev {
  max-height: 50px !important;
  max-width: 120px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
}

.logo-img-thumb {
  max-height: 40px !important;
  max-width: 100px !important;
  object-fit: contain !important;
}

.logo-upload-success {
  font-size: 9px !important;
  color: var(--green) !important;
  margin-top: 4px !important;
}

.ol-builder-grid {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 1100px) {
  .ol-builder-grid {
    grid-template-columns: 1fr;
  }
}

.customizer-panel {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.customizer-panel-header {
  background: var(--surface2);
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--border);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

.customizer-section {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.customizer-section:last-child {
  border-bottom: none;
}

.customizer-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.block-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--bg);
}

.block-toggle-label input[type="checkbox"] {
  accent-color: var(--primary);
}

.color-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}

.color-dot:hover {
  transform: scale(1.15);
}

.color-dot.active {
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px currentColor;
}

.color-dot-orange {
  background: #D4590A;
}

.color-dot-blue {
  background: #1A5FAB;
}

.color-dot-green {
  background: #1B7A4A;
}

.color-dot-purple {
  background: #6D28D9;
}

.color-dot-black {
  background: #1A1612;
}

.ol-salary-input {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}

.ol-annual-hint {
  font-size: 10px;
  color: var(--text3);
  margin-top: 4px;
}

.ol-annual-hint b {
  font-weight: 600;
  color: var(--text);
}

.btn-no-border {
  border: none !important;
}

/* ===== OFFER LETTER PRINT VIEW ===== */
@page {
  margin: 0;
}

@media print {
  .sidebar, .topbar, .page-header, .btn, .modal, .filter-sidebar, .filter-sidebar-overlay, .alert-strip, .no-print {
    display: none !important;
  }
  .main {
    margin: 0 !important;
  }
  .panel {
    border: none !important;
    box-shadow: none !important;
  }
  body {
    background: #fff !important;
  }
  .offer-preview-card {
    box-shadow: none !important;
    border: none !important;
  }
}

/* ===== HOLIDAY CALENDAR & SYSTEM UTILITIES ===== */
.alert-success-strip {
  background: #E8F5EE !important;
  border: 1.5px solid #A7D7B5 !important;
  margin-bottom: 14px !important;
}

.hr-stat-card.purple {
  border-bottom: 3px solid var(--purple) !important;
}
.hr-stat-card.purple .hr-stat-val {
  color: var(--purple) !important;
}

.holiday-filter-select {
  width: 140px !important;
  font-size: 12px !important;
}

.sticky-thead {
  position: sticky !important;
  top: 0 !important;
  background: var(--surface2) !important;
  z-index: 1 !important;
  padding-top: 8px;
}

.multi-day-row {
  background: linear-gradient(90deg, #EDE9FE, var(--surface)) !important;
}

.status.purple {
  background: var(--purple-bg) !important;
  color: var(--purple) !important;
  border: 1px solid #C4B5FD !important;
}

.text-green {
  color: var(--green) !important;
}
.text-red {
  color: var(--red) !important;
}
.fw-bold {
  font-weight: 700 !important;
}
.fs-12 {
  font-size: 12px !important;
}
.p-0 {
  padding: 0 !important;
}
.mb-16 {
  margin-bottom: 16px !important;
}

.btn-xxs {
  padding: 2px 8px !important;
  font-size: 11px !important;
}

.grid-2-gap-12 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.remarks-textarea {
  min-height: 55px !important;
}

/* ===== ATTENDANCE LOG & UTILITIES ===== */
.flex-align-center-gap-8 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.attendance-month-heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
  min-width: 100px !important;
  text-align: center !important;
  display: inline-block !important;
}

.grid-6-gap-10-mb-16 {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.flex-gap-8 {
  display: flex !important;
  gap: 8px !important;
}

.text-cyan {
  color: #0891B2 !important;
}

.bg-surface2 {
  background: var(--surface2) !important;
}

.align-top {
  vertical-align: top !important;
}

.today-badge {
  font-size: 9.5px !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

.sunday-badge {
  font-size: 9.5px !important;
  color: var(--text3) !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}

.pill-weekly-off {
  background: var(--surface) !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text2) !important;
}

.pill.primary-bg {
  background: var(--primary) !important;
  color: #fff !important;
}

.worked-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  background: #FFF8EC !important;
  border: 1.5px solid #FFD9A8 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  margin: 2px 4px 0 0 !important;
}

.pill-ot {
  background: var(--amber) !important;
  color: #fff !important;
  font-size: 9.5px !important;
}

.btn-action-view {
  padding: 3px 10px !important;
  font-size: 11px !important;
}

.late-hint {
  font-size: 9.5px !important;
  color: var(--text3) !important;
  font-weight: 400 !important;
}

/* ===== DAY-WISE ATTENDANCE LOG ===== */
.attendance-day-thead-sticky {
  position: sticky;
  top: 0;
  background: var(--surface2);
  z-index: 1;
}

.attendance-day-th-first {
  padding: 11px 18px;
}

.attendance-day-th {
  padding: 11px 8px;
}

.grid-7-gap-10-mb-10 {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.hr-stat-card.cyan {
  border-bottom: 3px solid #0891B2 !important;
}
.hr-stat-card.cyan .hr-stat-val {
  color: #0891B2 !important;
}

.hr-stat-card.gray {
  border-bottom: 3px solid var(--text3) !important;
}
.hr-stat-card.gray .hr-stat-val {
  color: var(--text3) !important;
}

.help-hint-strip {
  font-size: 11px !important;
  color: var(--text3) !important;
  margin-bottom: 14px !important;
}

.correction-pending-strip {
  background: linear-gradient(90deg, #FFF8E1, var(--surface)) !important;
  border: 1.5px solid #FFD54F !important;
  border-radius: 10px !important;
  padding: 12px 18px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.pending-count-badge {
  margin-left: 8px !important;
  background: var(--primary) !important;
  color: #fff !important;
  padding: 1px 8px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.employee-search-bar {
  width: 180px !important;
}

.status.late {
  background: #FFF3CD !important;
  color: #B45309 !important;
  border: 1px solid #FFD54F !important;
}

.status.early {
  background: #E0F7FA !important;
  color: #0891B2 !important;
  border: 1px solid #B2EBF2 !important;
}

.correction-needed-row {
  background: #FFFDF5 !important;
}

.corr-req-badge {
  font-size: 10px !important;
  color: var(--amber) !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

.visiting-staff-badge {
  font-size: 10px !important;
  color: var(--blue) !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
}

.punch-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.punch-row:not(:last-child) {
  margin-bottom: 3px !important;
}

.punch-index {
  font-size: 10px !important;
  color: var(--text3) !important;
  width: 12px !important;
}

.punch-note {
  font-size: 10.5px !important;
  color: var(--text3) !important;
  font-style: italic !important;
  margin-left: 4px !important;
}

.btn-correction-trigger {
  padding: 3px 10px !important;
  font-size: 11px !important;
  color: var(--amber) !important;
  border-color: #FFD54F !important;
}

.modal-box-system {
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
}

.modal-box-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}
.modal-box-label.system {
  color: var(--text3) !important;
  margin-bottom: 8px !important;
}
.modal-box-label.requested {
  color: var(--primary) !important;
  margin-bottom: 8px !important;
}
.modal-box-label.reason {
  color: var(--text3) !important;
  margin-bottom: 6px !important;
}
.modal-box-label.remark {
  color: var(--text3) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.modal-box-content {
  font-size: 12.5px !important;
  line-height: 1.8 !important;
}
.modal-box-content.system {
  color: var(--text2) !important;
}
.modal-box-content.requested {
  color: var(--text) !important;
}

.modal-box-requested {
  background: #FEF3ED !important;
  border: 1.5px solid var(--primary) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
}

.modal-box-reason {
  font-size: 12.5px !important;
  color: var(--text2) !important;
  background: var(--surface2) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border) !important;
}

.modal-remark-textarea {
  width: 100% !important;
  margin-top: 6px !important;
  padding: 9px 12px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  resize: none !important;
  height: 55px !important;
  box-sizing: border-box !important;
  background: var(--surface2) !important;
}

.btn-correction-reject {
  color: var(--red) !important;
  border-color: #FFCDD2 !important;
  background: #FFF5F5 !important;
}

.btn-correction-approve {
  background: linear-gradient(135deg, var(--green), #2ECC71) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
}

/* ===== DAY-OFF ATTENDANCE DETAILS ===== */
.grid-5-gap-10-mb-10 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.pill-ot-badge {
  background: var(--amber) !important;
  color: #fff !important;
  font-size: 11px !important;
}

.btn-ot-approve {
  padding: 3px 10px !important;
  font-size: 11px !important;
  color: var(--green) !important;
  border-color: #A7D7B5 !important;
  background: var(--green-bg) !important;
}

.empty-table-cell {
  text-align: center !important;
  color: var(--text3) !important;
  padding: 18px !important;
}

.table-footer-note {
  text-align: center !important;
  color: var(--text3) !important;
  font-style: italic !important;
  font-size: 12px !important;
  padding: 14px !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/* ===== TRAINING DETAILS ===== */
.fs-15 {
  font-size: 15px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.grid-col-all {
  grid-column: 1 / -1 !important;
}

.grid-2-gap-10 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.form-actions-row {
  display: flex !important;
  gap: 10px !important;
  margin-top: 16px !important;
  justify-content: flex-end !important;
}

/* ===== AUDIENCE PILLS ===== */
.audience-pill {
  padding: 6px 16px !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .15s !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text2) !important;
}

.audience-pill.active {
  border: 1.5px solid var(--primary) !important;
  background: var(--primary) !important;
  color: #fff !important;
}

/* ===== ATTENDANCE MARK PILLS ===== */
.att-pill {
  padding: 5px 14px !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: all .15s !important;
  border: 1.5px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text2) !important;
}

.att-pill.active.present {
  border: 1.5px solid var(--green) !important;
  background: var(--green-bg) !important;
  color: var(--green) !important;
}

.att-pill.active.absent {
  border: 1.5px solid var(--red) !important;
  background: var(--red-bg) !important;
  color: var(--red) !important;
}

/* ===== LEAVE MANAGEMENT ===== */
.leave-policy-note {
  font-size: 11px !important;
  color: var(--text3) !important;
  margin: -6px 0 14px !important;
}

.leave-filter-select {
  width: 130px !important;
  font-size: 12px !important;
}

.status-badge-emergency {
  margin-left: 4px !important;
  font-size: 9px !important;
  padding: 1px 6px !important;
}

.btn-leave-approve {
  padding: 4px 10px !important;
  border: 1.5px solid var(--green) !important;
  border-radius: 7px !important;
  background: #E8F5EE !important;
  color: var(--green) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.btn-leave-reject {
  padding: 4px 10px !important;
  border: 1.5px solid #FFCDD2 !important;
  border-radius: 7px !important;
  background: #FFF5F5 !important;
  color: var(--red) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  font-family: inherit !important;
}

.halfday-checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin-top: 8px !important;
}

.leave-notice-box-base {
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
}
.leave-notice-emergency {
  background: #FFF5F5 !important;
  border: 1.5px solid #FFCDD2 !important;
  color: var(--red) !important;
}
.leave-notice-ok {
  background: #E8F5EE !important;
  border: 1.5px solid #A7D7B5 !important;
  color: var(--green) !important;
}

.leave-approve-warning-box {
  background: #FFF5F5 !important;
  border: 1.5px solid #FFCDD2 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 14px !important;
}

.leave-approve-warning-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--red) !important;
  margin-bottom: 3px !important;
}

.grid-2-gap-14-mb-14 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.detail-label-sm {
  font-size: 11px !important;
  color: var(--text3) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.leave-reason-display {
  margin-top: 5px !important;
  margin-bottom: 14px !important;
  padding: 9px 12px !important;
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
}

.modal-remark-textarea-60 {
  width: 100% !important;
  margin-top: 5px !important;
  padding: 9px 12px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  resize: none !important;
  height: 60px !important;
  box-sizing: border-box !important;
}

.leave-reject-detail-box {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
  padding: 9px 12px !important;
  background: var(--surface2) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
}

.flex-gap-7-wrap-my-8 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 8px 0 10px !important;
}

.rl-pill {
  padding: 6px 12px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 20px !important;
  background: var(--surface) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all 0.15s ease !important;
}
.rl-pill.active {
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}

.modal-remark-textarea-70 {
  width: 100% !important;
  padding: 9px 12px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  resize: none !important;
  height: 70px !important;
  box-sizing: border-box !important;
}

.fw-normal {
  font-weight: 400 !important;
}

/* ===== HR MASTERS ===== */
.master-tabs-container {
  display: flex !important;
  gap: 0 !important;
  border-bottom: 2px solid var(--border) !important;
  margin-bottom: 16px !important;
}

.master-tab {
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text3) !important;
  cursor: pointer !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -2px !important;
  transition: all 0.15s ease !important;
}

.master-tab.active {
  font-weight: 700 !important;
  color: var(--primary) !important;
  border-bottom: 2px solid var(--primary) !important;
}

.fs-10 {
  font-size: 10px !important;
}

.flex-column-gap-12 {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.font-monospace {
  font-family: monospace !important;
}

/* ===== PAYROLL ===== */
.grid-5-gap-10-mb-16 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.current-month-row {
  background: linear-gradient(90deg, #FEF3ED, var(--surface)) !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.text-amber {
  color: var(--amber) !important;
}

.btn-sm-semibold {
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

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

/* ===== PAYROLL DETAILS ===== */
.fs-16 {
  font-size: 16px !important;
}

.flex-align-center-gap-8-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.employee-search-input {
  width: 160px !important;
}

.employee-filter-select {
  width: 120px !important;
  font-size: 12px !important;
}

.employee-link {
  color: var(--primary) !important;
  cursor: pointer !important;
  text-decoration: underline dotted !important;
}

.fs-9 {
  font-size: 9px !important;
}

.info-tooltip-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 13px !important;
  height: 13px !important;
  background: var(--red) !important;
  color: #fff !important;
  border-radius: 50% !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  cursor: help !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
}

.btn-xs-pad {
  padding: 5px 10px !important;
  font-size: 11px !important;
}

/* ===== LOANS MODULE ===== */
.kpi-strip-purple-gradient {
  background: linear-gradient(90deg, var(--purple), #9D7BEA);
}

.loan-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.loan-panel-subtitle {
  font-size: 11px;
  color: var(--text3);
}

.fs-10-5-muted {
  font-size: 10.5px;
  color: var(--text3);
}

.loan-reason-cell {
  font-size: 12px;
  color: var(--text3);
  max-width: 160px;
}

.btn-approve-outline {
  border: 1.5px solid var(--green);
  background: #E8F5EE;
  color: var(--green);
}

.btn-reject-outline {
  border: 1.5px solid var(--red);
  background: #FFF5F5;
  color: var(--red);
}

.modal-dialog-520 {
  max-width: 520px;
}

.flex-column-gap-14 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.loan-preview-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.loan-preview-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.loan-preview-value-primary {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}

.loan-preview-value-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.loan-preview-value-muted {
  font-size: 13px;
  font-weight: 600;
  color: var(--text3);
}

.textarea-min-h-70 {
  min-height: 70px;
}

.doc-hint-text {
  font-size: 10px;
  color: var(--text3);
  margin-top: 4px;
}

/* ===== LOAN DETAIL VIEW ===== */
.loan-hero-banner {
  background: linear-gradient(135deg, var(--blue), #2D7DD2);
  border-radius: 12px;
  padding: 18px 22px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.loan-hero-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: .85;
}

.loan-hero-name {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  margin: 2px 0;
}

.loan-hero-meta {
  font-size: 12px;
  opacity: .9;
}

.loan-hero-amount-label {
  font-size: 10px;
  opacity: .85;
  text-transform: uppercase;
}

.loan-hero-amount {
  font-size: 22px;
  font-weight: 700;
}

.status-on-hero {
  background: rgba(255, 255, 255, .25);
  color: #fff;
  margin-top: 4px;
  display: inline-block;
}

.recovery-progress-track {
  background: var(--border);
  border-radius: 6px;
  height: 5px;
  margin-top: 4px;
  overflow: hidden;
}

.recovery-progress-fill {
  background: var(--blue);
  height: 100%;
}

.loan-detail-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.loan-reason-label {
  color: var(--text3);
  display: block;
  margin-bottom: 4px;
}

.loan-reason-box {
  background: var(--surface2);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12.5px;
}

.loan-approved-box {
  background: var(--green-bg);
  border: 1.5px solid #A7D7B5;
  border-radius: 10px;
  padding: 12px;
  margin-top: 6px;
}

.loan-approved-title {
  font-weight: 700;
  color: var(--green);
  font-size: 12.5px;
}

.loan-approved-meta {
  font-size: 11.5px;
  color: var(--text2);
  margin-top: 4px;
}

.loan-approved-date {
  font-size: 11px;
  color: var(--text3);
}

.empty-table-cell-16 {
  text-align: center;
  color: var(--text3);
  padding: 16px;
}

/* ===== LOAN APPROVE/REJECT MODALS ===== */
.modal-dialog-480 {
  max-width: 480px;
}

.border-bottom-hairline {
  border-bottom: 1px solid var(--border);
}

.border-top-hairline {
  border-top: 1px solid var(--border);
}

.modal-title-green {
  color: var(--green);
  margin: 0;
}

.modal-title-red {
  color: var(--red);
  margin: 0;
}

.modal-subtitle-sm {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}

.loan-summary-box {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

.loan-summary-row {
  display: flex;
  gap: 28px;
  margin-bottom: 10px;
}

.loan-summary-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.loan-summary-footer {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  font-size: 12px;
  color: var(--text3);
}

.text-text {
  color: var(--text) !important;
}

.chips-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.decision-chip {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--text);
  transition: all .15s;
}

.decision-textarea {
  min-height: 80px;
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface2);
  resize: vertical;
}

.btn-confirm-green {
  background: var(--green);
  border-color: var(--green);
}

.btn-confirm-red {
  background: var(--red);
  border-color: var(--red);
}

/* ===== LOAN HISTORY VIEW ===== */
.loan-summary-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.search-bar-180 {
  width: 180px;
}

.loan-history-group-border {
  border-bottom: 2px solid var(--border);
}

.loan-history-header-row {
  padding: 12px 18px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-align-center-gap-10 {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loan-avatar-circle {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.loan-employee-meta {
  font-size: 11px;
  color: var(--text3);
  margin-left: 8px;
}

.ml-4 {
  margin-left: 4px;
}

.loan-pending-flag {
  font-size: 12px;
  color: var(--amber);
  font-weight: 600;
}

.rounded-0 {
  border-radius: 0;
}

.thead-bg {
  background: var(--bg);
}

.loan-hist-th-first {
  padding: 9px 18px;
}

.loan-hist-th {
  padding: 9px 8px;
}

.row-closed-muted {
  opacity: .75;
  background: var(--bg);
}

.loan-hist-td-first {
  padding: 9px 18px;
  color: var(--text3);
  font-size: 11px;
}

.loan-hist-td {
  padding: 9px 8px;
}

.pill-muted {
  background: var(--surface2);
  color: var(--text3);
}

.mt-2-muted {
  color: var(--text3);
  margin-top: 2px;
}

.decision-note-italic {
  color: var(--text2);
  font-style: italic;
}

.btn-view-xs {
  padding: 2px 8px;
  font-size: 11px;
}

.empty-state-30 {
  text-align: center;
  color: var(--text3);
  padding: 30px;
}

/* ===== HR ACTIVITY LOG ===== */
.search-bar-160 {
  width: 160px;
}

.search-bar-200 {
  width: 200px;
}

.search-bar-130 {
  width: 130px;
}

.activity-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.activity-kpi-card {
  text-decoration: none;
  color: inherit;
  text-align: center;
}

.activity-kpi-orange {
  background: #FEF3ED;
  border: 1.5px solid var(--primary);
}

.activity-kpi-orange .hr-stat-val,
.activity-kpi-orange .hr-stat-label {
  color: var(--primary);
}

.activity-kpi-green {
  background: #E8F5EE;
  border: 1.5px solid var(--green);
}

.activity-kpi-green .hr-stat-val,
.activity-kpi-green .hr-stat-label {
  color: var(--green);
}

.activity-kpi-amber {
  background: #FFF8E1;
  border: 1.5px solid var(--amber);
}

.activity-kpi-amber .hr-stat-val,
.activity-kpi-amber .hr-stat-label {
  color: var(--amber);
}

.activity-kpi-blue {
  background: #E8F0FE;
  border: 1.5px solid var(--blue);
}

.activity-kpi-blue .hr-stat-val,
.activity-kpi-blue .hr-stat-label {
  color: var(--blue);
}

.activity-kpi-purple {
  background: #EDE9FE;
  border: 1.5px solid var(--purple);
}

.activity-kpi-purple .hr-stat-val,
.activity-kpi-purple .hr-stat-label {
  color: var(--purple);
}

.thead-sticky {
  position: sticky;
  top: 0;
  background: var(--surface2);
  z-index: 1;
}

.row-today-highlight {
  background: #FFFDF5;
}

.activity-td-first {
  padding: 11px 18px;
  color: var(--text3);
}

.activity-td {
  padding: 11px 8px;
}

.activity-action-label {
  font-weight: 700;
  font-size: 12.5px;
}

.activity-action-primary {
  color: var(--primary);
}

.activity-action-green {
  color: var(--green);
}

.activity-action-blue {
  color: var(--blue);
}

.activity-action-purple {
  color: var(--purple);
}

.activity-action-text {
  color: var(--text);
}

.fw-600 {
  font-weight: 600 !important;
}

.btn-activity-view {
  padding: 2px 10px;
  font-size: 11px;
}

.empty-table-cell-20 {
  text-align: center;
  color: var(--text3);
  padding: 20px;
}

.activity-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}

/* ===== EMPLOYEE PAYROLL HISTORY VIEW ===== */
.text-text2 {
  color: var(--text2) !important;
}

.text-blue-var {
  color: var(--blue) !important;
}

.payroll-hero-banner {
  background: linear-gradient(135deg, var(--primary), var(--gold));
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  color: #fff;
}

.flex-align-center-gap-14 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.payroll-hero-avatar {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.payroll-hero-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
}

.payroll-hero-meta {
  font-size: 12.5px;
  opacity: .9;
}

.payroll-hero-right {
  display: flex;
  gap: 1rem;
  height: inherit;
  align-items: center;
}

.payroll-hero-net-label {
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .85;
}

.payroll-hero-net-value {
  font-size: 24px;
  font-weight: 700;
}

.btn-hero-back {
  background: rgba(255, 255, 255, .2);
  border: none;
  color: #fff;
}

.payroll-th-first {
  padding: 9px 16px;
}

.payroll-th {
  padding: 9px 8px;
}

.payroll-td-first {
  padding: 9px 16px;
}

.payroll-td {
  padding: 9px 8px;
}

.no-loans-box {
  text-align: center;
  padding: 24px 10px;
}

.no-loans-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--green-bg);
  border: 2px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
}

.no-loans-checkmark {
  color: var(--green);
  font-size: 20px;
  font-weight: 700;
}

.no-loans-title {
  font-weight: 700;
  color: var(--text2);
}

.loan-summary-item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.deduction-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}

.deduction-row-thick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1.5px solid var(--border);
}

.deduction-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--surface2);
}

/* ===== EMPLOYEE LIST / FILTER SIDEBAR ===== */
.text-absence-red {
  color: #dc2626;
}

.empty-table-cell-24 {
  text-align: center;
  color: var(--text3);
  padding: 24px;
}

/* ===== BIRTHDAYS & CAKE VENDOR VIEW ===== */
.row-amber-highlight {
  background: linear-gradient(90deg, #FFF8E1, var(--surface));
}

.info-row-bordered {
  display: flex;
  justify-content: space-between;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}

.bday-td-12 {
  padding: 9px 8px;
  font-size: 12px;
}

.bday-td-center {
  padding: 9px 8px;
  text-align: center;
}

.bday-td-bold {
  padding: 9px 8px;
  font-weight: 700;
}

.info-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12.5px;
}

.flavor-move-btn {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flavor-move-spacer {
  width: 22px;
}

.flavor-remove-btn {
  width: 22px;
  height: 22px;
  border: 1.5px solid #FFCDD2;
  border-radius: 5px;
  background: #FFF5F5;
  cursor: pointer;
  font-size: 10px;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flavor-rotation-badge {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--badge-bg, var(--border));
  color: var(--badge-fg, var(--text3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.flavor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--row-bg, var(--surface2));
  border: 1.5px solid var(--row-border, var(--border));
  border-radius: 8px;
}

.grid-col-full {
  grid-column: 1/-1;
}

.field-error-msg {
  margin-top: 6px;
  font-size: 12px;
  color: var(--red);
  font-weight: 600;
}

.status-paid-override {
  background: #E8F5EE;
  color: var(--green);
}

.text-end-max-200 {
  text-align: right;
  max-width: 200px;
}

.no-flavors-msg {
  text-align: center;
  color: var(--text3);
  padding: 16px;
  font-size: 12px;
}

.padding-6-10 {
  padding: 6px 10px;
}

.btn-view-all-vendors {
  padding: 3px 8px;
  font-size: 11px;
}

.payout-order-list-box {
  max-height: 150px;
  overflow-y: auto;
  padding: 8px 10px;
}

.my-4 {
  margin: 4px 0;
}

.payout-outstanding-val {
  font-weight: 700;
  font-size: 18px;
  color: var(--red);
}

.flavor-cycle-note {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 10px;
}

.flex-1-min-w-0 {
  flex: 1;
  min-width: 0;
}

.payout-msg-box {
  border-radius: 8px;
  border: 1.5px solid;
  padding: 8px 10px;
  font-size: 11.5px;
  font-weight: 600;
}

.payout-pending-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 12px;
}

.flex-justify-between {
  display: flex;
  justify-content: space-between;
}

.vendor-info-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12.5px;
}

.timeline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.timeline-row-bordered {
  border-bottom: 1px dashed var(--border);
}

.timeline-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--step-bg, var(--border));
  color: var(--step-fg, var(--text3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}

.timeline-step-label {
  font-size: 12.5px;
  font-weight: var(--step-weight, 500);
  color: var(--step-label-color, var(--text3));
}

.row-muted-80 {
  opacity: .8;
}

.fw-500 {
  font-weight: 500;
}

.status-badge-sm-mt {
  font-size: 11px;
  margin-top: 4px;
}

/* ===== ASSET MANAGEMENT ===== */
.asset-alert-success {
  margin-bottom: 18px;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
}

.mb-24 {
  margin-bottom: 24px;
}

.mb-14 {
  margin-bottom: 14px;
}

.w-80 {
  width: 80px;
}

.pad-6-12-fs-12 {
  padding: 6px 12px;
  font-size: 12px;
}

.pill-squared {
  padding: 2px 8px;
  border-radius: 5px;
}

.asset-status-badge {
  border-radius: 4px;
}

.asset-two-col {
  margin-bottom: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.asset-panel-scroll {
  max-height: 300px;
  overflow-y: auto;
  padding: 12px 18px;
}

.asset-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}

.fs-20 {
  font-size: 20px;
}

.fs-24 {
  font-size: 24px;
}

.asset-link-name {
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}

.asset-inline-status-pill {
  font-size: 10.5px;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--pill-color, inherit);
}

.asset-sm-action-btn {
  padding: 3px 8px;
  font-size: 10.5px;
  font-weight: 700;
  text-decoration: none;
}

.asset-empty-msg {
  text-align: center;
  color: var(--text3);
  padding: 24px;
  font-size: 13px;
}

.asset-register-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.asset-search-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.asset-filter-select {
  width: 130px;
  height: 34px;
  padding: 5px 10px;
  font-size: 12px;
}

.asset-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.asset-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  position: relative;
  transition: all .2s;
  box-shadow: var(--shadow-sm);
}

.asset-card-namewrap {
  flex: 1;
  min-width: 0;
}

.asset-card-name {
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}

.asset-card-id {
  font-size: 11px;
  color: var(--primary);
  font-family: monospace;
  font-weight: 700;
}

.asset-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.asset-tag {
  background: var(--bg2);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  color: var(--text2);
  font-weight: 600;
}

.asset-card-divider-row {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
}

.asset-meta-label {
  color: var(--text3);
  font-weight: 700;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}

.asset-meta-value {
  color: var(--meta-color, inherit);
  font-weight: 700;
}

.asset-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: 2px;
}

.asset-view-link {
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.asset-view-link-table {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.asset-empty-grid-msg {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text3);
  padding: 36px;
  font-size: 14px;
}

.asset-th-first {
  padding: 10px 14px;
}

.asset-td-first {
  padding: 10px 14px;
  color: var(--primary);
  font-family: monospace;
  font-weight: 700;
}

.asset-td-dynamic {
  color: var(--td-color, inherit);
  font-weight: var(--td-weight, normal);
}

.asset-modal-content {
  border: none;
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.asset-modal-header {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.asset-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.asset-info-box {
  background: #fff8f5;
  border: 1px solid #ffe8df;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 600;
}

.asset-viewmode-btn {
  padding: 7px 12px;
  font-size: 12px;
}

.asset-modal-body {
  padding: 20px;
}

.asset-modal-footer {
  background: var(--surface2);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  text-align: right;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* ===== ASSET SHOW / DETAIL PAGE ===== */
.mb-40 {
  margin-bottom: 40px !important;
}

.mt-20 {
  margin-top: 20px;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.p-20 {
  padding: 20px;
}

.textarea-min-h-80 {
  min-height: 80px;
}

.asset-grid-2fr1fr-gap20 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.flex-column-gap-20 {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.asset-spec-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-size: 13.5px;
}

.asset-spec-item {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.asset-spec-label {
  color: var(--text3);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  display: block;
}

.asset-spec-label-10 {
  color: var(--text3);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  display: block;
}

.asset-spec-value-mono {
  font-weight: 700;
  color: var(--text);
  font-family: monospace;
}

.asset-spec-value-dynamic {
  font-weight: 600;
  color: var(--val-color, inherit);
}

.asset-spec-value-dynamic-bold {
  font-weight: 700;
  color: var(--val-color, inherit);
}

.asset-notes-box {
  background: var(--bg2);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text2);
  line-height: 1.4;
}

.asset-purchase-grid-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  font-size: 13px;
}

.asset-hr-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}

.status-fs11-br4 {
  font-size: 11px;
  border-radius: 4px;
}

.asset-print-tag-btn {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
}

.asset-qr-panel-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.asset-qr-box {
  border: 2px solid var(--text);
  padding: 16px;
  border-radius: 10px;
  background: #fff;
  width: 180px;
  text-align: center;
}

.asset-qr-header {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.asset-qr-svg {
  margin: 8px 0;
}

.asset-qr-id {
  font-family: monospace;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  margin-top: 4px;
}

.asset-th-right {
  text-align: right;
  padding-right: 14px;
}

.asset-note-cell {
  color: var(--text2);
  line-height: 1.4;
}

.btn-full-center {
  width: 100%;
  justify-content: center;
}

/* ===== ASSET CREATE / EDIT FORM ===== */
.asset-error-list {
  margin: 0;
  padding-left: 20px;
}

.asset-grid-1fr1fr-gap20 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.grid-3col-gap16 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.input-mono-bold {
  font-family: monospace;
  font-weight: 700;
}

.input-mono-bold-disabled {
  font-family: monospace;
  font-weight: 700;
  background: var(--bg2);
}

.pad-8-12 {
  padding: 8px 12px;
}

.mr-8 {
  margin-right: 8px;
}

.pad-10-24 {
  padding: 10px 24px;
}

.asset-master-modal-content {
  border-radius: 14px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}

.asset-master-modal-header {
  border-bottom: none;
  padding: 16px 20px;
}

.asset-master-modal-title {
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.asset-master-modal-body {
  padding: 10px 20px;
}

.asset-ajax-error {
  background: #fee2e2;
  color: #b91c1c;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 10px;
}

.asset-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.asset-master-input {
  flex: 1;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  padding: 10px 14px;
  background: #faf8f6;
  font-size: 13px;
  font-weight: 600;
}

.asset-master-add-btn {
  background: #E8670A;
  border-color: #E8670A;
  border-radius: 10px;
  font-weight: 700;
  padding: 10px 18px;
  font-size: 13px;
  white-space: nowrap;
}

.asset-master-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 4px;
}

.asset-master-delete-btn {
  padding: 4px 8px;
  border-radius: 6px;
  background: #f5f3f0;
  border: none;
  font-size: 11px;
  line-height: 1;
}

.asset-master-modal-footer {
  border-top: none;
  justify-content: flex-end;
  padding: 14px 20px;
}

/* ===== PURCHASE / STOCK MODULE ===== */
.pad-7-14-fs-12 {
  padding: 7px 14px;
  font-size: 12px;
}

.text-dynamic-bold {
  color: var(--dyn-color, inherit);
  font-weight: 700;
}

.kpi-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}


.w-220 {
  width: 220px;
}

.btn-action-sm {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
}

.dot-amber {
  background: var(--amber);
}

.dot-red {
  background: var(--red);
}

.dot-green {
  background: var(--green);
}

.empty-table-cell-10 {
  text-align: center;
  color: var(--text3);
  padding: 10px;
}

.variant-tag-row {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.variant-tag-pill {
  background: var(--bg2);
  padding: 1px 6px;
  border-radius: 4px;
}

.text-dynamic {
  color: var(--dyn-color, inherit);
}

.alert-strip-danger {
  background: var(--red-bg);
  border-color: var(--red);
  margin-bottom: 16px;
}

.pad-9-14 {
  padding: 9px 14px;
}

.pad-8-14 {
  padding: 8px 14px;
}

.pad-10-14 {
  padding: 10px 14px;
}

.w-100px {
  width: 100px;
}

.hint-text-mt6 {
  font-size: 11px;
  color: var(--text3);
  margin-top: 6px;
}

.actions-end-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 0;
}

.photo-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.photo-thumb-wrapper {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
}

.photo-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.mt-4 {
  margin-top: 4px;
}

.flex-gap-10-end {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.field-label-10 {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
}

.supplier-name-link {
  font-size: 13px;
  color: var(--primary);
  cursor: pointer;
  margin-top: 4px;
}

.field-value-13 {
  font-size: 13px;
  margin-top: 4px;
}

.field-value-text2-lh {
  font-size: 12.5px;
  color: var(--text2);
  line-height: 1.6;
  margin-top: 4px;
}

.item-photo-thumb-90 {
  width: 90px;
  height: 90px;
  border-radius: 8px;
  object-fit: cover;
  border: 1.5px solid var(--border);
}

.btn-reject-lg {
  color: var(--red);
  border-color: var(--red);
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 700;
}

.btn-approve-lg {
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 700;
}

.status-lg {
  font-size: 13px;
  padding: 8px 20px;
  font-weight: 700;
}

.btn-view-action {
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.history-modal-content {
  border-radius: 16px;
  border: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .15);
}

.history-modal-header {
  border-bottom: 1px solid var(--border);
  padding: 18px 24px;
}

.history-modal-title {
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-scroll-area {
  max-height: 400px;
  overflow-y: auto;
}

.log-date-cell {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text3);
}

.log-action-badge {
  background: var(--bg2);
  color: var(--text);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}

.history-modal-footer {
  border-top: none;
  padding: 16px 24px;
}

.btn-modal-confirm {
  padding: 8px 24px;
  font-weight: 700;
  border-radius: 8px;
}

.p-24 {
  padding: 24px;
}

/* Order Instructions panel (dispatch/mfg pills) — shared across Purchase views */
.grid-2col-gap20 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.instruction-label {
  font-size: 10px;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.flex-gap-6-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill-dispatch {
  background: #FFF3E0;
  border: 1px solid #FFB74D;
  color: #E65100;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

.pill-manufacturing {
  background: #E8F5E9;
  border: 1px solid #81C784;
  color: #2E7D32;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
}

/* QC Inspection table */
.thead-row-tint {
  background: #FAF8F5;
}

.th-item-220 {
  padding: 12px 20px;
  width: 220px;
}

.w-180 {
  width: 180px;
}

.td-item-cell {
  padding: 14px 20px;
  font-weight: 600;
  vertical-align: top;
}

.td-supplier-cell {
  vertical-align: top;
  color: var(--primary);
  font-weight: 600;
}

.variant-list-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 0;
}

.qc-variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px;
  background: #fdfdfd;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.qc-variant-name {
  font-weight: 700;
  color: var(--primary);
  font-size: 12.5px;
}

.qc-variant-name-muted {
  font-weight: 700;
  color: var(--text2);
  font-size: 12.5px;
}

.qc-awaiting-note {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

.qc-inspect-form {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.qc-field-label {
  font-size: 12px;
  color: var(--text3);
  font-weight: 600;
}

.qc-num-input {
  width: 75px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
}

.qc-reason-input-w {
  width: 150px;
  padding: 4px 8px;
  border-radius: 6px;
}

.btn-qc-submit {
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
}

.date-filter-input {
  width: 150px;
  padding: 6px 10px;
}

.pad-14-18 {
  padding: 14px 18px;
}

.bid-card-row {
  cursor: pointer;
  display: flex;
  align-items: center;
  background: #fff;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
}

.mr-12 {
  margin-right: 12px;
}

.bid-title-text {
  font-size: 13.5px;
  color: var(--text);
}

.bid-meta-line {
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}

.text-end-mr-16 {
  text-align: right;
  margin-right: 16px;
}

.fs-10-muted {
  font-size: 10px;
  color: var(--text3);
}

.text-green-13 {
  color: var(--green);
  font-size: 13px;
}

.flex-align-center-gap-12 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.badge-printed {
  background: #E8F5E9;
  color: #2E7D32;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.badge-pending-print {
  background: #FFF8E1;
  color: #F57C00;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

.btn-reprint {
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
}

.btn-print {
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
}

.modal-dialog-440 {
  max-width: 440px;
}

.modal-body-center-24 {
  padding: 24px;
  display: flex;
  justify-content: center;
}

.sticker-preview-box {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  font-family: monospace;
  background: var(--bg);
  width: 100%;
}

.sticker-preview-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 800;
}

.modal-footer-flex-end {
  border-top: none;
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.copies-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.copies-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
}

.copies-input {
  width: 65px;
  text-align: center;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
}

.btn-modal-cancel {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 700;
  color: var(--text2);
}

.btn-print-now {
  border-radius: 8px;
  padding: 8px 24px;
  font-weight: 700;
}

/* Suggested POs page */
.panel-header-suggested {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.supplier-name-lg {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

.badge-items-low {
  font-size: 11px;
  margin-left: 8px;
  background: var(--bg2) !important;
  color: var(--text2);
}

.badge-items-unassigned {
  font-size: 11px;
  margin-left: 8px;
  background: var(--red-bg) !important;
  color: var(--red);
}

.flex-gap-16-center {
  display: flex;
  gap: 16px;
  align-items: center;
}

.fs-13-5-text2 {
  font-size: 13.5px;
  color: var(--text2);
}

.text-primary-15-5 {
  color: var(--primary);
  font-size: 15.5px;
}

.hint-italic-12 {
  font-size: 12px;
  font-style: italic;
  color: var(--text3);
}

.mini-table-flush {
  margin: 0;
  border: none;
}

.th-item-240 {
  padding: 10px 20px;
  width: 240px;
}

.w-120 {
  width: 120px;
}

.th-total-right-150 {
  text-align: right;
  padding-right: 20px;
  width: 150px;
}

.item-thumb-40 {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1.5px solid var(--border);
}

.item-thumb-placeholder-40 {
  width: 40px;
  height: 40px;
  background: var(--bg2);
  border-radius: 6px;
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.hsn-note {
  font-size: 10.5px;
  color: var(--text3);
  font-weight: normal;
  margin-top: 2px;
}

.valign-top-pt-16 {
  vertical-align: top;
  padding-top: 16px;
}

.sku-badge {
  font-family: monospace;
  background: var(--bg2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text2);
}

.variant-list-col-8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0;
}

.suggested-variant-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #fdfdfd;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}

.min-w-90 {
  min-width: 90px;
}

.td-total-cell {
  text-align: right;
  padding-right: 20px;
  font-weight: 700;
  color: var(--text);
  vertical-align: top;
  padding-top: 16px;
}

.empty-state-panel {
  text-align: center;
  padding: 48px;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.empty-state-desc {
  color: var(--text3);
  font-size: 13px;
  max-width: 400px;
  margin: 0 auto;
}

.btn-view-challan {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text2);
  background: #fff;
}

.btn-inward-view {
  border-radius: 8px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  display: inline-block;
}

.challan-modal-header {
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
}

.challan-supplier-line {
  font-size: 13.5px;
  margin-bottom: 12px;
  color: var(--text2);
}

.challan-items-table {
  min-width: 0;
}

.challan-modal-footer {
  border-top: none;
  padding: 12px 24px;
}

.btn-modal-confirm-sm {
  padding: 6px 20px;
  font-weight: 700;
  border-radius: 8px;
}

/* Purchase Dashboard */
.grid-3col-gap14-mb16 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}

.panel-link-card {
  cursor: pointer;
  margin-bottom: 0;
  text-decoration: none;
  color: inherit;
}

.pipeline-card-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.fs-26 {
  font-size: 26px;
}

.pipeline-label {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
}

.pipeline-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
}

.supplier-row-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.avatar-circle-36 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.fw-600-fs-13 {
  font-weight: 600;
  font-size: 13px;
}

.value-16-800-primary {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
}

.value-14-bold-primary {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.top-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--rank-bg, var(--bg2));
  color: var(--rank-fg, var(--text3));
}

.flex-gap-14 {
  display: flex;
  gap: 14px;
}

.request-bid-card {
  flex: 1;
  text-align: center;
  padding: 14px;
  background: var(--bg);
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.fs-11-muted-600 {
  font-size: 11px;
  color: var(--text3);
  font-weight: 600;
}

.value-24-800-primary {
  font-size: 24px;
  font-weight: 800;
  color: var(--primary);
}

/* Supplier create/edit form */
.supplier-form-panel {
  width: 100%;
  max-width: 100%;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}

.supplier-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 992px) {
  .supplier-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .supplier-form-grid {
    grid-template-columns: 1fr;
  }
}

.span-2 {
  grid-column: span 2;
}

.span-full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .span-2, .span-full {
    grid-column: span 1;
  }
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.form-hint {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
}

.field-validation-msg {
  font-size: 11.5px;
  color: #dc2626;
  margin-top: 4px;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 4px;
}

.field-validation-msg.visible {
  display: flex;
}

.field-success-msg {
  font-size: 11.5px;
  color: #16a34a;
  margin-top: 4px;
  font-weight: 500;
  display: none;
  align-items: center;
  gap: 4px;
}

.field-success-msg.visible {
  display: flex;
}

.field-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
  font-size: 11px;
}

.char-counter {
  font-size: 10.5px;
  color: var(--text3, #888);
  font-family: monospace;
}

.form-control.is-invalid,
.form-input.is-invalid,
.is-invalid + .select2-container .select2-selection,
.select2-container .select2-selection.is-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
  background-color: #fff8f8;
}

.form-control.is-valid,
.form-input.is-valid {
  border-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.08) !important;
}

@keyframes shakeField {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.shake-input {
  animation: shakeField 0.35s ease-in-out;
}

.form-section-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 14px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mb-18 {
  margin-bottom: 18px;
}

.chip-grid-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.type-detail-block {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.subtype-heading {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 8px;
}

.subtype-heading-11 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 8px;
}

.chip-grid-row-mb10 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.chip-grid-row-mb8 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.embroidery-block {
  background: var(--surface);
  border: 1.5px dashed var(--border2);
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.chip-grid-row-gap7 {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fchip-sm {
  font-size: 11px;
  padding: 6px 12px;
}

.machines-grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 10px 14px;
  align-items: center;
}

.form-footer-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.machine-label {
  font-size: 12px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.machine-label-sub {
  color: var(--text3);
  font-size: 10px;
  text-transform: uppercase;
}

.machine-label-bold {
  font-size: 12px;
  color: var(--text2);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.machines-hint-row {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--text3);
  font-style: italic;
}

/* Job Work Material & Per Pc Rates Section */
.jw-rates-wrap {
  margin-top: 14px;
}

.jw-card-block {
  background: #ffffff;
  border: 1.5px solid #fed7aa;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.04);
}

.jw-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #fed7aa;
}

.jw-card-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #ea580c;
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}

.jw-mat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jw-mat-row {
  display: grid;
  grid-template-columns: 1fr 220px 40px;
  gap: 12px;
  align-items: flex-end;
  background: #fff8f5;
  border: 1px solid #ffedd5;
  border-radius: 8px;
  padding: 10px 12px;
}

@media (max-width: 768px) {
  .jw-mat-row {
    grid-template-columns: 1fr;
  }
}

.jw-regular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.jw-regular-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.jw-regular-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
}

/* Purchase Orders index — filter sidebar bar/badge */
.ol-filter-chips-bar {
  margin-bottom: 16px;
  padding: 10px 16px;
  background: #fff8f5;
  border: 1.5px solid #ffe8df;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-applied-label {
  color: var(--primary);
  font-weight: 700;
  font-size: 12px;
}


.filter-count-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--primary);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 9px;
  display: block;
}

.fs-clear-btn-mini {
  padding: 4px 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--text3) !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

.fs-select-style {
  width: 100%;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 8px;
}

.value-label-13 {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}

.flex-2 {
  flex: 2;
}

.modal-search-input {
  width: 100%;
  border-radius: 8px;
  padding: 10px 14px;
  background: #fcfbfa;
  font-size: 13px;
}

.overdue-highlight {
  color: var(--red);
  font-weight: 700;
}

/* Stock Item Master index */
.kpi-card-clickable {
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.w-40 {
  width: 40px;
}

.item-thumb-32 {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
}

.item-thumb-placeholder-32 {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.variant-count-note {
  font-size: 9.5px;
  color: var(--text3);
  font-weight: 400;
}

.badge-price-request {
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 5px;
  border-radius: 4px;
}

.price-strikethrough {
  text-decoration: line-through;
  color: var(--text3);
  font-size: 11px;
}

.sale-badge-note {
  font-size: 9px;
  color: var(--red);
  font-weight: 700;
}

.asset-master-input-num-90 {
  width: 90px;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  padding: 10px 10px;
  background: #faf8f6;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.asset-master-input-num-70 {
  width: 70px;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  padding: 10px 10px;
  background: #faf8f6;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.master-hint-text {
  font-size: 10.5px;
  color: var(--text3);
  margin-bottom: 14px;
}

.margin-badge-green {
  margin-right: 8px;
  color: var(--green);
}

/* Toggle switch component */
.tgl-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 21px;
  flex-shrink: 0;
}

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

.tgl-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--tgl-bg, #E4E2DD);
  transition: .2s;
  border-radius: 21px;
}

.tgl-slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  transition: .2s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.tgl-switch input:checked + .tgl-slider {
  background: #1B7A4A !important;
}

.tgl-switch input:checked + .tgl-slider:before {
  transform: translateX(17px);
}

/* Purchase Inward Show */
.text-red-bold-ml8 {
  color: var(--red);
  font-weight: 700;
  margin-left: 8px;
}

.alert-danger-full {
  margin-bottom: 18px;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  background: var(--red-bg);
}

.supplier-name-line {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

.supplier-firm-line {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 10px;
}

.fs-12-mb4 {
  font-size: 12px;
  margin-bottom: 4px;
}

.fs-12-muted-mb4 {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: 4px;
}

.address-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text3);
  letter-spacing: .5px;
  margin-bottom: 3px;
}

.fs-12-5-text {
  font-size: 12.5px;
  color: var(--text);
}

.valign-top {
  vertical-align: top;
}

.text-amber-dark {
  color: #d97706;
}

.text-amber-dark-600 {
  font-weight: 600;
  color: #d97706;
}

.remark-reason-note {
  margin-top: 4px;
  color: var(--red);
  font-style: italic;
}

.status-received-badge {
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--green-bg);
  color: var(--green);
  font-weight: 700;
}

.status-awaiting-badge {
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 8px;
  background: #FFE0B2;
  color: #E65100;
  font-weight: 700;
}

.inline-form-flex {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.flex-col-gap-4 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qty-input-style {
  width: 90px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  font-size: 12px;
}

.btn-mark-received {
  border: none;
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 6px;
}

.remark-field-style {
  width: 220px;
  padding: 4px 8px;
  font-size: 11.5px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
}

.dispatch-history-card {
  background: #FFFDFB;
  border: 1px solid #FFE0B2;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.mb-8 {
  margin-bottom: 8px;
}

.dispatch-title {
  font-weight: 700;
  font-size: 13px;
  color: #D97706;
}

.dispatch-notes {
  font-size: 11.5px;
  color: var(--text2);
  margin-bottom: 8px;
  font-style: italic;
}

.fs-12-m0 {
  font-size: 12px;
  margin: 0;
}

/* Bid Details show */
.grid-2col-gap16-pad4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 4px 0;
}

.field-label-10-uc {
  font-size: 10px;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.field-value-13-mt4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-top: 4px;
}

.fs-13-mt4 {
  font-size: 13px;
  margin-top: 4px;
}

.field-value-desc {
  font-size: 12.5px;
  color: var(--text2);
  margin-top: 4px;
  line-height: 1.4;
}

.text-start-pl-40 {
  text-align: left;
  padding-left: 40px;
}

.flex-gap-12-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.photo-frame-link {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .05);
  display: inline-block;
}

.photo-frame-img {
  max-width: 140px;
  max-height: 140px;
  object-fit: cover;
  border-radius: 6px;
}

.link-input-mono {
  flex: 1;
  font-family: monospace;
  font-size: 12px;
  background: var(--bg2);
}

.btn-copy-link {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  background: #fff;
}

.link-status-note {
  font-size: 11px;
  color: var(--text3);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.badge-existing-vendor {
  background: #FFF3E0;
  color: #E65100;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-new-vendor {
  background: #E3F2FD;
  color: #0D47A1;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-quote-pending {
  background: #FFF8E1;
  color: #F57C00;
  border: 1px solid #FFE082;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-quote-approved {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid #C8E6C9;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.badge-quote-rejected {
  background: #FFEBEE;
  color: #C62828;
  border: 1px solid #FFCDD2;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-view-quote {
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
}

.flex-gap-20-mb10 {
  display: flex;
  gap: 20px;
  margin-bottom: 10px;
}

.metric-label-10 {
  font-size: 10px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
}

.fs-16-bold {
  font-size: 16px;
  font-weight: 700;
}

.recommendation-footer {
  font-size: 12px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.quote-total-line {
  text-align: right;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
}

.actions-end-row-gap12 {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 10px 0;
}

/* Supplier Show page */
.badge-chip {
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11.5px;
  color: var(--text2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.badge-chip.bg-gray {
  background: var(--border);
  font-weight: 600;
  color: var(--text);
}

.badge-chip.border-gray {
  border-style: dashed;
  background: transparent;
}

.detail-card-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1.5px solid var(--border);
}

.detail-card-row:last-child {
  border-bottom: none;
}

.detail-card-row span.label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text3);
  font-weight: 700;
}

.detail-card-row span.value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.status.transit {
  background: rgba(13, 110, 253, .1);
  color: #0d6efd;
  border: 1.5px solid rgba(13, 110, 253, .2);
}

.header-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.btn-ghost-outline-sm {
  font-size: 12px;
  border: 1.5px solid var(--border);
  background: var(--bg);
}

.btn-primary-solid-sm {
  font-size: 12px;
  background: var(--primary);
  border-color: var(--primary);
}

.supplier-hero-banner {
  background: linear-gradient(135deg, #E8670A 0%, #F5A623 100%);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 18px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 4px 15px rgba(232, 103, 10, .15);
}

.supplier-hero-initials {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff;
}

.supplier-hero-name {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}

.supplier-hero-firm {
  font-size: 12px;
  opacity: .9;
  margin-bottom: 8px;
  font-weight: 500;
}

.hero-pill {
  background: rgba(255, 255, 255, .2);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.hero-status-pill {
  background: rgba(76, 175, 80, .4);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.text-end-shrink0 {
  text-align: right;
  flex-shrink: 0;
}

.hero-rating-label {
  font-size: 11px;
  opacity: .8;
  margin-bottom: 2px;
}

.hero-rating-stars {
  font-size: 22px;
  color: #FFE08A;
  letter-spacing: 2px;
  line-height: 1.2;
}

.hero-rating-number {
  font-size: 11px;
  opacity: .9;
  margin-top: 2px;
}

.kpi-grid-4-gap12-mb18 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.grid-2col-gap14-20 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}

.business-section-heading {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.tag-pill-plain {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 11px;
}

.tag-pill-embroidery {
  background: #FFF7ED;
  border: 1px solid #FFD9A8;
  border-radius: 14px;
  padding: 3px 10px;
  font-size: 10px;
}

.italic-muted-12 {
  color: var(--text3);
  font-size: 12px;
  font-style: italic;
}

.fs-10-5 {
  font-size: 10.5px;
}

.reason-note-10 {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}

.pt-10 {
  padding-top: 10px;
}

.item-request-card {
  border: 1.5px solid var(--border);
  background: var(--surface2);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fs-22 {
  font-size: 22px;
}

.request-item-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.request-item-meta {
  font-size: 11.5px;
  color: var(--text3);
  margin-top: 2px;
}

.meta-value-bold {
  color: var(--text);
  font-weight: 600;
}

.pad-4-12-fs-11 {
  padding: 4px 12px;
  font-size: 11px;
}

.btn-outline-red {
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
}

.btn-doc-action {
  padding: 2px 8px;
  font-size: 11px;
  border: 1px solid var(--border);
}

.dash-muted-11 {
  color: var(--text3);
  font-size: 11px;
}

.btn-late-outline {
  padding: 2px 8px;
  font-size: 11px;
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}

.rating-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1.5px solid var(--border);
}

.fs-12-5-text2 {
  font-size: 12.5px;
  color: var(--text2);
}

.rating-change-value {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--dyn-color, inherit);
}

/* Purchase Order create/edit form */
.grid-4col-gap16 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bg-disabled-input {
  background: #f5f3f0;
}

.label-hint-inline {
  font-weight: 400;
  color: var(--text3);
}

.grid-2col-gap16-mt16 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.grid-2col-gap16-mb16 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.supplier-info-box {
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.empty-hint-italic {
  text-align: center;
  color: var(--text3);
  font-size: 12.5px;
  font-style: italic;
}

.grid-1col-gap12 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.textarea-min-h-50-fs12 {
  min-height: 50px;
  font-size: 12px;
}

.textarea-min-h-80-w100-fs12-5 {
  min-height: 80px;
  width: 100%;
  font-size: 12.5px;
}

.bg-disabled-input-fs12-5 {
  background: #f5f3f0;
  font-size: 12.5px;
}

.no-supplier-msg-box {
  font-size: 12.5px;
  color: var(--text3);
  padding: 16px;
  background: #fff7ed;
  border: 1px solid #ffd9a8;
  border-radius: 10px;
  margin-bottom: 12px;
  font-weight: 600;
}

.th-item-minw180 {
  min-width: 180px;
  padding: 10px 14px;
}

.min-w-250 {
  min-width: 250px;
}

.po-items-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  border-top: 1.5px solid var(--border);
  padding-top: 16px;
}

.po-totals-box {
  text-align: right;
  font-size: 13px;
  color: var(--text2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grand-total-line {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
  margin-top: 4px;
}

.flex-justify-between-mb6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.pad-2-6-fs-11 {
  padding: 2px 6px;
  font-size: 11px;
}

.instruction-checklist-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 140px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface2);
  border: 1.5px solid var(--border2);
  border-radius: 8px;
}

.instruction-empty-msg {
  font-size: 11.5px;
  color: var(--text3);
  text-align: center;
  padding: 10px;
}

.instruction-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  cursor: pointer;
  margin: 0;
}

.btn-cancel-lg {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 700;
}

.btn-save-lg {
  border-radius: 10px;
  padding: 10px 24px;
  font-weight: 700;
}

.form-footer-actions-2 {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 0;
}

.qty-field:read-only {
  background: #f5f3f0;
}

.supplier-info-name {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  margin-bottom: 4px;
}

.supplier-info-contact {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 10px;
}

.supplier-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text2);
}

.supplier-info-rating-badge {
  margin-top: 10px;
  font-size: 12px;
  color: #FFE08A;
  font-weight: 800;
  background: #333;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-block;
}

.item-tap-photo-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1.5px solid var(--border);
}

.variant-qty-input-style {
  width: 70px;
  padding: 3px 6px;
  font-size: 11.5px;
  border-radius: 6px;
}

/* PO Show page */
.alert-danger-full {
  border-color: var(--red);
}

.po-title-heading {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.po-subtitle-line {
  font-size: 12px;
  color: var(--text3);
  margin: 4px 0 0;
}

.status-banner-base {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.status-banner-pending {
  background: #FFF3CD;
  border: 1.5px solid #FFD54F;
  color: #92400E;
}

.status-banner-cancelled {
  background: #FFF5F5;
  border: 1.5px solid #FFCDD2;
  color: var(--red);
}

.status-banner-success {
  background: #F0FDF4;
  border: 1.5px solid #A7D7B5;
  color: var(--green);
}

.btn-approve-po {
  padding: 6px 12px;
  font-size: 11.5px;
  background: var(--green);
  border: none;
  color: #fff;
}

.btn-reject-po {
  padding: 6px 12px;
  font-size: 11.5px;
  background: var(--red);
  border: none;
  color: #fff;
}

.kpi-grid-4-gap16-mb20 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.kpi-value-orange {
  color: #E8670A;
}

.kpi-value-blue {
  color: #1A5FAB;
}

.kpi-value-green {
  color: var(--green);
}

.kpi-value-status {
  font-size: 14px;
  margin-top: 8px;
}

.date-input-sm {
  max-width: 200px;
  border-radius: 8px;
  padding: 6px 10px;
}

.dashed-divider-mt16 {
  border-top: 1px dashed var(--border2);
  margin-top: 16px;
  padding-top: 12px;
}

.btn-extension-demo {
  font-size: 11px;
  border: 1px solid var(--border);
  padding: 5px 10px;
  border-radius: 6px;
}

.delivery-save-btn {
  padding: 6px 12px;
  font-size: 11.5px;
  border-radius: 6px;
  background: #fff;
  border: 1.5px solid var(--border);
}

.remarks-save-btn {
  padding: 10px 18px;
  border-radius: 8px;
  background: #fff;
  border: 1.5px solid var(--border);
  font-weight: 700;
}

.receive-grn-panel {
  margin-bottom: 20px;
}

.supplier-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.supplier-card-name-h4 {
  margin: 0;
  font-size: 14px;
}

.fs-11-muted-mt4 {
  font-size: 11px;
  color: var(--text3);
  margin-top: 4px;
}

.text-gold-14 {
  color: var(--gold);
  font-size: 14px;
}

.address-value-line {
  color: var(--text2);
  margin-top: 3px;
  font-weight: 500;
}

.gstin-note-line {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 10px;
  border-top: 1px dashed var(--border2);
  padding-top: 8px;
}

.terms-text-box {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.6;
}

.variant-breakdown-note {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 3px;
}

.nowrap-line {
  white-space: nowrap;
}

.nowrap-red {
  white-space: nowrap;
  color: var(--red);
}

.nowrap-muted {
  white-space: nowrap;
  color: var(--text3);
}

.remark-tag-red {
  font-size: 10px;
  color: var(--red);
  font-style: italic;
}

.tax-note-cell {
  color: var(--text3);
  font-size: 11px;
}

.order-totals-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1.5px dashed var(--border2);
  font-size: 13px;
  color: var(--text2);
}

.grand-total-line-lg {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--primary);
}

.flex-column-gap-8 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.variant-label-min80 {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text2);
  min-width: 80px;
}

.receive-qty-input {
  width: 120px;
  border-radius: 8px;
  padding: 5px 8px;
}

.pt-14-text-end {
  padding-top: 14px;
  text-align: right;
}

.flex-gap-12-start {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.remarks-textarea {
  flex: 1;
  min-height: 80px;
  border-radius: 8px;
  padding: 10px;
}

.btn-save-remarks {
  padding: 10px 18px;
  border-radius: 8px;
  background: #fff;
  border: 1.5px solid var(--border);
  font-weight: 700;
}

/* PDF Preview modal */
.pdf-modal-header {
  padding: 16px 20px;
  border-bottom: 1.5px solid var(--border);
}

.pdf-modal-title {
  font-family: 'Playfair Display', serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pdf-modal-body {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(100vh - 200px);
  background: #fdfdfd;
}

.pdf-printable-box {
  background: #fff;
  padding: 24px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.pdf-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #E8670A;
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.pdf-company-name {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 800;
  color: #E8670A;
}

.pdf-meta-line {
  font-size: 11px;
  color: #555;
  margin-top: 4px;
}

.pdf-po-number {
  font-size: 18px;
  font-weight: 800;
  color: #E8670A;
}

.pdf-billing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
  line-height: 1.5;
}

.pdf-section-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 4px;
}

.pdf-section-value {
  font-size: 12px;
  color: #333;
}

.pdf-schedule-line {
  font-size: 12px;
  color: #333;
  margin-bottom: 14px;
}

.pdf-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.pdf-thead-row {
  background: #f5f5f5;
  text-align: left;
}

.pdf-th {
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 11px;
  font-weight: 700;
}

.pdf-td {
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 12px;
}

.pdf-variant-note {
  font-size: 10.5px;
  color: #555;
  margin-top: 3px;
}

.pdf-td-muted {
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 12px;
  color: #555;
}

.pdf-td-total {
  padding: 8px;
  border: 1px solid #ddd;
  font-size: 12px;
  font-weight: 700;
  color: #000;
}

.pdf-totals-line {
  text-align: right;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

.pdf-grand-total-line {
  text-align: right;
  font-size: 14px;
  font-weight: 800;
  color: #E8670A;
  margin-bottom: 20px;
}

.pdf-terms-text {
  font-size: 11px;
  color: #555;
  line-height: 1.6;
}

.pdf-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1.5px solid var(--border);
}

.border-left-dynamic {
  border-left: 3px solid var(--dyn-color, transparent);
}

.ml-8-muted-11-5 {
  color: var(--text3);
  font-size: 11.5px;
  margin-left: 8px;
}

.rejection-reason-box {
  background: #FFF5F5;
  border: 1px solid #FFCDD2;
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--text2);
}

.timeline-container {
  position: relative;
  padding-left: 28px;
}

.timeline-item {
  position: relative;
  margin-bottom: 18px;
}

.timeline-line {
  position: absolute;
  left: -19px;
  top: 22px;
  bottom: -18px;
  width: 2px;
  background: var(--border2);
}

.timeline-dot {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--dot-color, #6B7280);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #fff;
  box-shadow: 0 0 0 3px var(--dot-shadow, transparent);
}

.timeline-content-box {
  background: #F9F9F9;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
}

.timeline-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

.timeline-desc {
  font-size: 12px;
  color: var(--text2);
  margin-top: 3px;
}

.timeline-date {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 5px;
}

/* Stock Item create/edit form */
.pad-8-10 {
  padding: 8px 10px;
}

.flex-align-center-gap-6 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.margin-percent-input {
  width: 70px;
  padding: 10px;
  font-size: 13px;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  background: #faf8f6;
  font-weight: 700;
}

.margin-percent-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text3);
}

.margin-feedback-badge {
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12.5px;
  background: var(--badge-bg, transparent);
  color: var(--badge-fg, inherit);
}

.margin-warning-banner {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #FFF4E5;
  border: 1px solid #FFE0B2;
  color: #B78103;
  font-size: 12.5px;
  font-weight: 600;
  align-items: center;
  gap: 8px;
}

.margin-warning-banner:not(.d-none) {
  display: flex;
}

.offer-section-wrap {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border2);
}

.offer-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
}

.offer-fields-box {
  margin-top: 12px;
}

.variants-intro-text {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 10px;
}

.th-minw-120 {
  min-width: 120px;
}

.th-minw-160 {
  min-width: 160px;
}

.variant-input-style {
  width: 100%;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  padding: 6px 10px;
  background: #faf8f6;
  font-size: 12.5px;
  font-weight: 600;
}

.variant-stock-input-style {
  width: 70px;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  padding: 6px 10px;
  background: #faf8f6;
  font-size: 12.5px;
  font-weight: 600;
}

.variants-empty-msg {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 8px;
}

.add-variant-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-add-variant {
  background: #fff;
  border: 1.5px solid #F3F1ED;
  border-radius: 10px;
  padding: 10px 18px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
}

.media-block {
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border2);
}

.media-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.media-label-hint {
  font-weight: 400;
  color: var(--text3);
  font-size: 11px;
}

.media-upload-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}

.media-placeholder-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text3);
}

.media-preview-box {
  position: relative;
}

.media-preview-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  border: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.media-remove-btn {
  position: absolute;
  top: -7px;
  right: -7px;
  background: #FF4D4D;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.single-photos-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.d-contents {
  display: contents;
}

.single-photo-card-style {
  position: relative;
  width: 90px;
  height: 90px;
}

.single-photo-img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid var(--border);
}

.single-photo-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #FF4D4D;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marked-for-delete {
  opacity: .3;
  pointer-events: none;
}

.add-photo-zone {
  cursor: pointer;
  width: 90px;
  height: 90px;
  min-width: 90px;
}

.add-photo-placeholder {
  flex-direction: column;
  gap: 4px;
}

.add-photo-text {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
}

.video-upload-zone-w {
  cursor: pointer;
  width: 160px;
}

.video-preview-el-style {
  max-width: 240px;
  max-height: 140px;
  border-radius: 10px;
  border: 2px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}

.video-info-row {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-name-text {
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
}

.video-remove-btn {
  background: #FF4D4D;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.checkbox-row-gap24 {
  display: flex;
  gap: 24px;
  margin-top: 14px;
}

.checkbox-label-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}

.hint-text-11-5-mb12 {
  font-size: 11.5px;
  color: var(--text3);
  margin-bottom: 12px;
}

.hint-text-11-5-mb10 {
  font-size: 11.5px;
  color: var(--text3);
  margin-bottom: 10px;
}

.tags-input-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 40px;
  padding: 8px 10px;
  border: 1.5px solid #F3F1ED;
  border-radius: 10px;
  background: #faf8f6;
  align-items: center;
  cursor: text;
}

.tag-chip-style {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #E8670A;
  color: #fff;
  border-radius: 20px;
  padding: 3px 10px 3px 12px;
  font-size: 12px;
  font-weight: 600;
}

.tag-remove-btn {
  background: rgba(255, 255, 255, .3);
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tag-text-input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 140px;
  padding: 2px 0;
}

.tags-hint-below {
  font-size: 10.5px;
  color: var(--text3);
  margin-top: 6px;
}

.form-submit-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 6px;
}

.group-list-item-info {
  flex: 1;
  line-height: 1;
}

.group-item-count {
  font-size: 10px;
  color: var(--text3);
}

.asset-master-modal-close-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--text3);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #faf8f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs-9-5-hint {
  font-size: 9.5px;
  color: var(--text3);
  font-weight: 400;
}

.new-single-preview-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  display: inline-block;
}

/* Stock Item show page */
.header-actions-row {
  display: flex;
  gap: 8px;
}

.grid-2col-gap20-mb24 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.panel-bordered {
  border: 1.5px solid #F3F1ED;
  border-radius: 14px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .01);
}

.panel-header-bordered {
  border-bottom: 1.5px solid #F3F1ED;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.panel-header-bordered-mb18 {
  border-bottom: 1.5px solid #F3F1ED;
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.panel-header-bordered-between {
  border-bottom: 1.5px solid #F3F1ED;
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-title-bold {
  font-weight: 800;
  font-size: 15px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.dot-orange {
  color: #E8670A;
}

.p-0 {
  padding: 0;
}

.available-stock-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #FAF8F6;
  border: 1.5px solid #F3F1ED;
  border-radius: 10px;
  margin-bottom: 18px;
}

.uppercase-label-muted {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.available-stock-value {
  font-weight: 800;
  font-size: 18px;
  color: #E8670A;
}

.variant-select-group {
  margin-bottom: 18px;
}

.variant-select-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text2);
  margin-bottom: 6px;
  display: block;
}

.variant-select-input {
  width: 100%;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  padding: 10px;
  background: #faf8f6;
  font-size: 13px;
  font-weight: 600;
}

.stock-action-row {
  display: flex;
  gap: 10px;
}

.btn-stock-inward {
  flex: 1;
  background: #E2F0D9;
  border: none;
  color: #385723;
  border-radius: 10px;
  padding: 12px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-stock-outward {
  flex: 1;
  background: #FCE4D6;
  border: none;
  color: #C65911;
  border-radius: 10px;
  padding: 12px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.info-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}

.info-field-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.info-field-label-mb8 {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.info-field-label-mb4 {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.info-field-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.info-field-value-flex {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.grid-col-span-2 {
  grid-column: span 2;
}

.supplier-price-card {
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-1-block {
  flex: 1;
}

.supplier-price-note {
  font-size: 11.5px;
  color: var(--text3);
  margin-top: 4px;
}

.price-value-strong {
  color: var(--text);
  font-weight: 600;
}

.rejection-reason-note {
  margin-top: 4px;
  font-size: 11px;
  font-style: italic;
  color: var(--text2);
}

.price-action-row {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.btn-sm-approve {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 6px;
}

.btn-sm-reject {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--red);
  background: transparent;
  color: var(--red);
}

.no-supplier-note {
  color: var(--text3);
  font-style: italic;
  font-size: 12px;
}

.flex-between-mb8 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.timing-add-btn {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 6px;
  background: var(--border);
  border: none;
  cursor: pointer;
}

.timings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timing-row-card {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.timing-takes-text {
  color: var(--text3);
  margin-left: 6px;
}

.timing-actions {
  display: flex;
  gap: 6px;
}

.btn-sm-edit {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}

.btn-sm-delete {
  padding: 2px 8px;
  font-size: 11px;
  border-radius: 6px;
  border: 1px solid var(--red);
  color: var(--red);
  background: transparent;
  cursor: pointer;
}

.empty-note-box {
  color: var(--text3);
  font-style: italic;
  font-size: 12px;
  padding: 12px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  text-align: center;
}

.tags-flex-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-pill-static {
  background: var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}

.no-tags-note {
  color: var(--text3);
  font-style: italic;
  font-size: 12px;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.media-item-card {
  border: 1.5px solid #F3F1ED;
  border-radius: 12px;
  padding: 16px;
  background: #faf8f6;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .02);
}

.media-item-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 10px;
  letter-spacing: .5px;
}

.media-item-link {
  display: inline-block;
}

.media-item-img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .04);
}

.media-item-video {
  max-width: 100%;
  height: 160px;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .04);
}

.gallery-section {
  margin-top: 20px;
  border-top: 1px dashed var(--border2);
  padding-top: 16px;
}

.gallery-label-mb12 {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 12px;
  letter-spacing: .5px;
}

.gallery-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.gallery-thumb-img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .04);
  transition: transform .2s;
}

.gallery-thumb-img:hover {
  transform: scale(1.05);
}

.table-row-border {
  border-bottom: 1.5px solid #F3F1ED;
}

.th-muted-12 {
  font-weight: 700;
  color: var(--text3);
  font-size: 12px;
}

.th-muted-12-right {
  font-weight: 700;
  color: var(--text3);
  font-size: 12px;
  text-align: right;
}

.table-row-border-light {
  border-bottom: 1px solid #F9F8F6;
}

.td-variant-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.td-price-12-5 {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
}

.td-margin {
  font-size: 12.5px;
  font-weight: 700;
}

.td-location-muted {
  font-size: 12.5px;
  color: var(--text3);
}

.td-stock-right {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  text-align: right;
}

.low-stock-warn-icon {
  font-size: 13px;
  color: #c62828;
}

.movement-search-input {
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  padding: 6px 12px;
  background: #faf8f6;
  font-size: 11.5px;
  font-weight: 600;
}

.td-movement-date {
  font-size: 12.5px;
  color: var(--text2);
}

.td-movement-type {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.td-movement-qty {
  font-size: 12.5px;
  font-weight: 800;
}

.td-movement-muted {
  font-size: 12.5px;
  color: var(--text3);
}

.td-movement-note {
  font-size: 12.5px;
  color: var(--text2);
}

.td-movement-after {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

.td-empty-movement {
  text-align: center;
  color: var(--text3);
  padding: 20px;
  font-size: 13px;
}

.kpi-margin-good {
  color: #2e7d32;
}

.kpi-margin-bad {
  color: #c62828;
}

.kpi-strip-good {
  background: #2e7d32;
}

.kpi-strip-bad {
  background: #c62828;
}

/* Item show — full-screen custom modals */
.item-modal-overlay {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .4);
  z-index: 9999;
}

.item-modal-overlay.is-open {
  display: flex;
}

.item-modal-box {
  width: 460px;
  max-width: 90%;
}

.item-modal-content {
  border-radius: 18px;
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  background: #fff;
  overflow: hidden;
}

.item-modal-header {
  border-bottom: 1px solid #F3F1ED;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-modal-title {
  font-weight: 800;
  font-size: 17px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.item-modal-icon-badge {
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.item-modal-icon-purple {
  background: #5C2D91;
}

.item-modal-icon-blue {
  background: #0F6AB4;
}

.item-modal-close-btn {
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--text3);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #faf8f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-modal-body {
  padding: 24px;
}

.item-modal-field {
  margin-bottom: 18px;
}

.item-modal-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
  letter-spacing: .5px;
}

.item-modal-input {
  width: 100%;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  padding: 12px 14px;
  background: #faf8f6;
  font-size: 13px;
  font-weight: 600;
}

.item-modal-2col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}

.item-modal-note {
  font-size: 11.5px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.item-modal-footer {
  border-top: 1px solid #F3F1ED;
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #faf8f6;
}

.item-modal-btn-cancel {
  border: 1.5px solid #F3F1ED;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13px;
  background: #fff;
  color: var(--text);
}

.item-modal-btn-save-purple {
  background: #5C2D91;
  border-color: #5C2D91;
  border-radius: 10px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.item-modal-btn-save-orange {
  background: #E8670A;
  border-color: #E8670A;
  border-radius: 10px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.d-block {
  display: block;
}

body.modal-open-noscroll {
  overflow: hidden;
}

.asset-master-list-mt10 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 10px;
}

#opening_stock_input:read-only,
input[name="opening_stock"]:read-only {
  background: #faf8f6;
}

.media-upload-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 2px dashed #D6D0C9;
  border-radius: 10px;
  background: #faf8f6;
  transition: border-color .2s, background .2s;
}

.media-upload-zone:hover {
  border-color: #E8670A;
  background: #fff9f5;
}

/* Tap Photo Rectangle (Horizontal Landscape) */
.media-upload-zone.tap-photo-upload-zone {
  width: 200px;
  height: 110px;
  border-radius: 10px;
}

.media-preview-box.tap-preview-box {
  width: 200px;
  height: 110px;
}

.media-preview-img.tap-preview-img {
  width: 200px;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
}

.media-item-img.tap-photo-rect-img {
  width: 240px;
  height: 135px;
  object-fit: cover;
  border-radius: 10px;
}

.media-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}

.tag-chip {
  animation: tagIn .15s ease;
}

@keyframes tagIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}

@media print {
  .sidebar, .topbar, header, footer, .no-print, .alert-strip, .kpi-grid, .modal-header, .modal-footer { display: none !important; }
  body.modal-open .panel { display: none !important; }
  #app-shell { display: block !important; }
  .main { margin-left: 0 !important; padding: 0 !important; width: 100% !important; }
  .page { padding: 0 !important; margin: 0 !important; }
  #modal-print { display: block !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; overflow: visible !important; background: #fff !important; border: none !important; box-shadow: none !important; }
  .modal-dialog { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .modal-content { border: none !important; box-shadow: none !important; background: #fff !important; }
  .modal-body { padding: 0 !important; overflow: visible !important; }
  #po-pdf-printable { border: none !important; box-shadow: none !important; padding: 24px !important; margin: 0 !important; width: 100% !important; }
}

.sticker-status-pill {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--pill-bg, transparent);
  color: var(--pill-fg, inherit);
}

.photo-thumb-remove-btn {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  z-index: 10;
}

/* ===== SALES MODULE ===== */

/* ===== SALES DASHBOARD ===== */
.status-badge {
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-block;
}
.status-badge.pending-qc { background: #FEF3C7; color: #D97706; }
.status-badge.verified { background: #ECFDF5; color: #059669; }
.status-badge.packaging { background: #EEF2F6; color: #4B5563; }
.status-badge.dispatched { background: #E0F2FE; color: #0284C7; }
.status-badge.delivered { background: #D1FAE5; color: #047857; }
.status-badge.neutral { background: var(--border2); color: var(--text2); }

/* ===== SALES — SHARED TEXT/LAYOUT UTILITIES ===== */
.text-xs { font-size: 11px; }
.text-sm { font-size: 12px; }
.text-muted3 { color: var(--text3); }
.table-empty-icon { font-size: 32px; margin-bottom: 8px; }
.remarks-cell { max-width: 300px; font-size: 12.5px; }
.modal-context-label { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.sales-search-input { max-width: 220px; font-size: 12px; padding: 6px 12px; }
.d-flex-center { display: flex; align-items: center; }
.d-flex-between { display: flex; justify-content: space-between; align-items: center; }
.d-flex-col { display: flex; flex-direction: column; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.text-center-muted3-pad15 { text-align: center; color: var(--text3); padding: 15px; font-size: 12.5px; }

/* ===== SALES POS ===== */
.trolley-card { background: var(--bg); border: 1.5px solid var(--border2); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.trolley-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.trolley-title { font-weight: 700; font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.trolley-item-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border2); color: var(--text2); }
.trolley-item-row:last-child { border-bottom: none; }
.search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 100; max-height: 200px; overflow-y: auto; padding: 6px; }
.search-dropdown-item { padding: 8px 12px; font-size: 13px; cursor: pointer; border-radius: 6px; color: var(--text2); }
.search-dropdown-item:hover { background: var(--border2); color: var(--text); }
.search-dropdown-empty { padding: 8px; color: var(--text3); font-size: 12px; }
.quick-add-btn { background: var(--surface2); border: 1.5px solid var(--border2); border-radius: 8px; padding: 8px 10px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; transition: all 0.15s; }
.quick-add-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); }

.pos-cust-card { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 16px; }
.pos-cust-name { font-weight: 700; font-size: 13.5px; }
.pos-cust-meta { font-size: 11.5px; color: var(--text3); margin-top: 4px; }
.pos-section-label { font-weight: 700; font-size: 12px; margin-bottom: 8px; color: var(--text2); }
.pos-target-trolley-select { font-weight: 700; color: var(--primary); }
.pos-qty-panel { background: var(--surface2); border: 1.5px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.pos-item-header-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pos-item-photo { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--border); }
.pos-item-name { font-weight: 800; font-size: 15px; color: var(--text); }
.pos-item-hsn { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.pos-divider-dashed { border-top: 1px dashed var(--border2); padding-top: 12px; margin-bottom: 12px; }
.pos-variant-label { font-size: 11.5px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
.pos-variant-row { display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.pos-variant-name { font-weight: 700; flex: 1.2; font-size: 12.5px; color: var(--text); }
.pos-variant-field { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pos-variant-field-label { font-size: 10px; color: var(--text3); }
.pos-variant-input { padding: 4px 8px; font-size: 12px; height: 28px; }
.pos-variant-remove-btn { padding: 4px 8px; height: 28px; display: flex; align-items: center; color: var(--red); }
.pos-quick-items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pos-submit-btn { padding: 12px; font-weight: 700; font-size: 14px; border-radius: 8px; }
.btn-icon-remove { border: none; background: none; color: var(--red); font-size: 12px; cursor: pointer; }

.pos-modal { background: rgba(0,0,0,.5); align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 1050; }
.pos-modal-dialog-sm { max-width: 400px; width: 100%; }
.pos-modal-content { border-radius: 12px; border: none; box-shadow: var(--shadow-lg); }
.pos-modal-title { font-weight: 700; font-size: 15px; }
.pos-sticker-body { padding: 20px; font-family: monospace; font-size: 13px; line-height: 1.4; color: #000; background: #fff; border: 1px solid #ddd; margin: 15px; }
.sticker-title { text-align: center; font-weight: bold; border-bottom: 1px solid #000; padding-bottom: 8px; margin-bottom: 8px; font-size: 15px; }
.sticker-trolley-no { border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 6px 0; margin: 8px 0; font-size: 16px; font-weight: bold; text-align: center; }
.sticker-items-list { font-size: 11px; margin-bottom: 10px; }
.sticker-footer { font-size: 9px; text-align: center; color: #555; border-top: 1px dotted #ccc; padding-top: 4px; }

/* ===== SALES DUES ===== */
.kpi-card.red::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #EF4444, #DC2626); }
.kpi-card.amber::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #F59E0B, #D97706); }
.kpi-card.blue::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #6366F1, #4F46E5); }

/* ===== SALES ORDER DETAIL (orders_show) ===== */
.icon-32 { font-size: 32px; }
.status-banner-pending-po { background: #EFF6FF; border: 1px solid #93C5FD; color: #1E40AF; }
.status-banner-pending-qc { background: #FFF7ED; border: 1px solid #FFD9A8; color: var(--primary); }
.status-banner-verified { background: #F0FDF4; border: 1px solid #A7D7B5; color: var(--green); }
.status-banner-packaging { background: #ECFDF5; border: 1px solid #A7D7B5; color: #047857; }
.status-banner-dispatched { background: #EDE9FE; border: 1px solid #C4B5FD; color: #6D28D9; }
.status-banner-delivered { background: #F0FDF4; border: 1px solid #A7D7B5; color: var(--green); }
.kpi-card-accent-amber { border-left: 4px solid var(--amber) !important; }
.kpi-card-accent-blue { border-left: 4px solid var(--blue) !important; }
.kpi-card-accent-green { border-left: 4px solid var(--green) !important; }
.kpi-card-accent-red { border-left: 4px solid var(--red) !important; }
.kpi-value-15 { font-size: 15px; margin-top: 8px; }
.two-col-detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.th-w-40 { width: 40px; }
.trolley-pill-blue { background: #E0F2FE; color: #0284C7; font-size: 10px; }
.order-totals-box { padding: 16px 20px; background: var(--surface2); border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.totals-line { font-size: 12.5px; color: var(--text2); }
.totals-grand { font-size: 15px; font-weight: 800; color: var(--primary); margin-top: 4px; }
.info-grid-2col-sm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 12.5px; }
.field-value-strong { font-weight: 700; margin-top: 2px; }
.grid-col-span-all { grid-column: 1 / -1; }
.info-grid-2col-lg { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field-value-instruction { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.terms-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
.terms-list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text2); line-height: 1.6; }
.terms-side-panel { display: flex; flex-direction: column; gap: 14px; padding-left: 16px; border-left: 1px solid var(--border); }
.text-muted2 { color: var(--text2); }
.text-strong { color: var(--text); }
.transport-lr-details { font-size: 13px; color: var(--text2); line-height: 1.5; margin-top: 2px; }

.overdue-badge {
  display: inline-block;
  padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700;
}
.overdue-badge.red { background: #FEF2F2; color: #DC2626; }
.overdue-badge.green { background: #ECFDF5; color: #059669; }
.overdue-badge.amber { background: #FEF3C7; color: #D97706; }

.action-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 10px; font-size: 11.5px; font-weight: 700;
}
.action-pill.call { background: #EEF2FF; color: #4F46E5; }
.action-pill.whatsapp { background: #ECFDF5; color: #059669; }
.action-pill.visit { background: #FEF3C7; color: #D97706; }
.action-pill.letter { background: #FEF2F2; color: #DC2626; }

/* ===== SALES DESKS — SHARED (QC / Packaging / Dispatch / Transport LR / Delivered) ===== */
.live-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: 10px; padding: 14px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 8px; position: relative; }
.trolley-pill-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.trolley-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; background: var(--surface2); border: 1px solid var(--border2); color: var(--text2); }
.status-badge.pending-po { background: #FEF2F2; color: #DC2626; border: 1px solid #FCA5A5; }
.live-card.ready { border-color: var(--amber); background: #FFFDF5; }
.trolley-pill.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.trolley-pill.success { background: var(--green); border-color: var(--green); color: #fff; }
.status-badge.in-transit { background: #EEF2F6; color: #4B5563; border: 1px solid #D1D5DB; }
.status-badge.out-for-delivery { background: #FEF3C7; color: #D97706; border: 1px solid #FCD34D; }
.two-col-sales-desk { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }

/* ===== PIPELINE TABS ===== */
.pipeline-tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1.5px solid var(--border); padding-bottom: 1px; }
.pipeline-tab-btn { background: transparent; border: none; padding: 10px 18px; font-weight: 700; font-size: 13px; color: var(--text3); cursor: pointer; position: relative; transition: all 0.15s; }
.pipeline-tab-btn.active { color: var(--primary); }
.pipeline-tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background: var(--primary); border-radius: 3px 3px 0 0; }

.modal-dialog-md { max-width: 520px; width: 100%; }
.scan-result-empty { text-align: center; color: var(--text3); padding: 20px; }
.scan-result-icon { font-size: 32px; margin-bottom: 8px; }
.scan-result-card-primary { background: var(--surface2); border: 2px solid var(--primary); border-radius: 12px; padding: 16px; }
.scan-result-card-green { background: var(--surface2); border: 2px solid var(--green); border-radius: 12px; padding: 16px; }
.scan-result-label { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.scan-result-value-primary { font-size: 18px; font-weight: 800; color: var(--primary); margin-top: 2px; }
.scan-result-value-green { font-size: 18px; font-weight: 800; color: var(--green); margin-top: 2px; }
.scan-result-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12.5px; margin-bottom: 12px; }
.scan-result-not-found { text-align: center; padding: 20px; background: var(--surface2); border: 1.5px dashed var(--border); border-radius: 10px; }
.scan-trolleys-box { padding: 10px; background: var(--surface3); border: 1.5px solid var(--border); border-radius: 8px; margin-bottom: 12px; }
.scan-trolleys-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); margin-bottom: 8px; }
.scan-trolley-count-badge { background: var(--green); color: #fff; font-size: 10px; padding: 1px 7px; border-radius: 9px; font-weight: 800; }
.scan-trolley-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; background: var(--surface); color: var(--text2); border: 1.5px solid var(--border2); }
.scan-trolley-chip.scanned { background: var(--green); color: #fff; border-color: var(--green); }
.fulfillment-note-gray { background: #F3F4F6; border-left: 4px solid #4B5563; padding: 12px; border-radius: 8px; margin-bottom: 12px; font-size: 12.5px; color: #374151; }
.fulfillment-note-green { background: #ECFDF5; border-left: 4px solid #047857; padding: 12px; border-radius: 8px; font-size: 13px; color: #065F46; font-weight: 700; text-align: center; }

/* ===== SALES PACKAGING DESK ===== */
.single-col-20 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.completion-status-bar { padding: 16px 20px; background: var(--surface2); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.btn-disabled-initial { opacity: 0.65; }
.packaging-item-section { padding: 16px 20px; border-bottom: 1.5px solid var(--border); }
.item-section-title { font-weight: 800; font-size: 14px; color: var(--text); margin: 0; }
.tr-dashed { border-bottom: 1px dashed var(--border); }
.td-variant-name { padding: 10px 0; font-size: 13px; }
.td-qty-text { font-size: 13px; color: var(--text2); }
.verified-qty-done { color: var(--green); font-weight: 700; }
.verified-qty-pending { color: #D97706; font-weight: 700; }
.status-badge.done { background: #ECFDF5; color: #059669; font-weight: 800; }
.status-badge.in-progress { background: #FEF3C7; color: #B45309; border: 1px solid #FCD34D; font-weight: 800; }
.status-badge.pending-review { background: var(--surface3); color: var(--text3); font-weight: 700; }
.th-pb-8 { padding-bottom: 8px; }
.th-w-100 { width: 100px; }
.th-row-upper { text-align: left; font-size: 11px; color: var(--text3); text-transform: uppercase; }
.completion-badge-done { background: #ECFDF5; color: #059669; font-weight: 800; font-size: 12px; padding: 4px 12px; border: 1px solid #A7D7B5; border-radius: 12px; display: inline-block; }
.completion-text-pending { font-size: 12.5px; color: var(--text3); }

/* ===== SELECT2 CUSTOM THEME OVERRIDES ===== */
.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bg) !important;
    border: 1.5px solid var(--border) !important;
    border-radius: 8px !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    color: var(--text) !important;
    font-family: inherit !important;
    box-shadow: none !important;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 2px rgba(212, 89, 10, 0.15) !important;
    background-color: #fff !important;
}
.select2-container--bootstrap-5 .select2-selection__rendered {
    font-size: 13px !important;
    color: var(--text) !important;
}
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--border) !important;
    border-radius: 8px !important;
    background-color: var(--surface) !important;
    box-shadow: var(--shadow) !important;
    z-index: 1060 !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    border: 1.5px solid var(--border) !important;
    border-radius: 6px !important;
    background-color: var(--bg) !important;
    font-size: 13px !important;
    padding: 6px 10px !important;
}
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--primary) !important;
    background-color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}
.select2-container--bootstrap-5 .select2-results__option {
    font-size: 13px !important;
    padding: 6px 12px !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: #FEF3ED !important;
    color: var(--primary) !important;
}
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--primary) !important;
    color: #fff !important;
}
select.select2-hidden-accessible[style*="display: none"] + .select2-container,
select.select2-hidden-accessible[style*="display:none"] + .select2-container {
    display: none !important;
}
select.select2-hidden-accessible[style*="display: inline-block"] + .select2-container,
select.select2-hidden-accessible[style*="display:inline-block"] + .select2-container {
    display: inline-block !important;
}
select.select2-hidden-accessible[style*="display: block"] + .select2-container,
select.select2-hidden-accessible[style*="display:block"] + .select2-container {
    display: block !important;
}

/* ===== RECEPTION DESK ===== */
.tab-btn {
    padding: 10px 24px;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    transition: all .15s;
    border: none;
}
.visitor-item, .token-item {
    transition: all 0.2s ease;
}
.visitor-item:hover, .token-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* ===== LOGIN PAGE ===== */
.login-page-body {
    display: block !important;
}

/* ===== SALES DELIVERED DESK ===== */
.status-badge-block-mb12 { display: inline-block; margin-bottom: 12px; }
.delivery-status-card { background: var(--surface2); border: 1.5px solid var(--border); padding: 16px; border-radius: 12px; text-align: center; }
.field-label-11-uc { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.select-bold-13 { font-size: 13px; font-weight: 600; }

/* ===== SALES TRANSPORT LR DESK ===== */
.lr-save-btn { background: #E26D27; border-color: #E26D27; color: #fff; }
.lr-details-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; text-align: left; font-size: 12.5px; border-top: 1px solid rgba(0,0,0,0.06); padding-top: 10px; margin-bottom: 12px; }
.lr-doc-link { padding: 6px 8px; font-size: 12px; }

/* ===== SALES ORDERS LIST ===== */
.live-tracking-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.live-tracking-empty { text-align: center; color: var(--text3); padding: 16px; grid-column: span 4; }
.live-card-token-amber { font-weight: 800; font-size: 14px; color: var(--amber); }
.live-card-meta { font-size: 13px; color: var(--text2); margin-top: 4px; }
.trolley-pill.pending { background: #FEF3C7; border-color: #FCD34D; color: #D97706; }
.live-card-cta-btn { width: 100%; font-size: 12px; font-weight: 700; padding: 6px; margin-top: 8px; }
.live-card.not-ready { border-color: var(--border2); opacity: 0.85; }
.live-card-token-muted { font-weight: 800; font-size: 14px; color: var(--text2); }
.live-card-cta-btn-disabled { width: 100%; font-size: 12px; font-weight: 600; padding: 6px; margin-top: 8px; background: var(--surface2); pointer-events: none; border-color: var(--border2); color: var(--text3); }
.so-filter-chips-bar { padding: 10px 16px; background: #fff8f5; border: 1.5px solid #ffe8df; border-radius: 12px; align-items: center; gap: 10px; margin-bottom: 16px; }
.filter-chips-label { color: var(--primary); font-weight: 700; font-size: 12px; }
.filter-chips-clear-btn { margin-left: auto; background: none; border: none; color: var(--red); font-size: 11.5px; cursor: pointer; font-weight: 700; }
.search-bar-200 { width: 200px; }
.filter-count-badge { position: absolute; top: -5px; right: -5px; background: var(--primary); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 9px; }
.row-clickable { cursor: pointer; }
.so-filter-chip { background: #FEF3ED; border: 1.5px solid var(--border); padding: 4px 10px; border-radius: 14px; font-size: 11.5px; font-weight: 600; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; }
.so-filter-chip .chip-x { cursor: pointer; font-weight: 800; color: var(--text3); margin-left: 4px; }
.fs-select-full { width: 100%; border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
.fs-value-label { font-size: 13px; font-weight: 700; color: var(--primary); }
.fs-apply-icon { font-size: 14px; }
.scan-trolley-count-badge-primary { background: var(--primary); }
.scan-result-card-amber-border { border-color: var(--amber); }
.scan-trolley-item-count { font-size: 10px; opacity: .75; }
.scan-ready-banner { margin-top: 12px; padding: 10px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 8px; font-size: 12px; color: #92400E; }
.scan-waiting-banner { margin-top: 12px; padding: 10px; background: var(--surface3); border: 1px solid var(--border2); border-radius: 8px; font-size: 12px; color: var(--text3); }
.scan-trolley-chip.scanned-primary { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ===== SALES ORDER CREATE ===== */
.returning-badge { background: #F0FDF4; border: 1.5px solid #A7D7B5; border-radius: 9px; padding: 8px 12px; margin-bottom: 8px; font-size: 12px; color: var(--green); }
.textarea-46 { min-height: 46px; }
.textarea-50 { min-height: 50px; }
.credit-info-box { background: #FFFBEB; border: 1.5px solid #FDE68A; border-radius: 9px; padding: 10px 12px; margin-top: 10px; margin-bottom: 10px; font-size: 12.5px; }
.credit-info-row { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: #B45309; }
.make-to-order-box { margin-top: 15px; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--border); padding: 10px; border-radius: 8px; background: #fffdf9; }
.checkbox-lg { width: 18px; height: 18px; cursor: pointer; }
.make-to-order-label { margin-bottom: 0; font-weight: 700; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.th-item-name { width: 340px; max-width: 420px; min-width: 260px; padding: 10px 14px; }
.th-variant { min-width: 250px; }
.th-w-110 { width: 110px; }
.items-footer-row { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; border-top: 1.5px solid var(--border); padding-top: 16px; }
.totals-block { text-align: right; font-size: 13px; color: var(--text2); display: flex; flex-direction: column; gap: 6px; }
.grand-total-line { font-size: 16px; font-weight: 800; color: var(--primary); margin-top: 4px; }
.btn-manage-icon { padding: 8px 10px; }
.checklist-box { display: flex; flex-direction: column; gap: 6px; max-height: 120px; overflow-y: auto; padding: 8px; background: var(--surface2); border: 1.5px solid var(--border2); border-radius: 8px; }
.checklist-empty { font-size: 11.5px; color: var(--text3); text-align: center; padding: 10px; }
.checklist-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; margin: 0; }
.terms-desc { font-size: 11.5px; color: var(--text3); margin-bottom: 12px; }
.term-checkbox-label { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; font-size: 12.5px; cursor: pointer; }
.pb-30 { padding-bottom: 30px; }
.master-modal-content { border-radius: 14px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.master-modal-header { border-bottom: none; padding: 16px 20px; }
.master-modal-title { font-weight: 800; font-size: 17px; color: #000; display: flex; align-items: center; gap: 8px; }
.master-modal-close-btn { background: #faf8f6; border: none; font-size: 16px; color: var(--text3); cursor: pointer; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.master-modal-body { padding: 10px 20px; }
.master-modal-input { border-radius: 10px; border: 1.5px solid #F3F1ED; padding: 10px 14px; background: #faf8f6; font-size: 13px; font-weight: 600; }
.master-modal-add-btn { background: #E8670A; border-color: #E8670A; border-radius: 10px; font-weight: 700; padding: 10px 18px; font-size: 13px; white-space: nowrap; }
.master-modal-delete-btn { padding: 4px 8px; border-radius: 6px; background: #f5f3f0; border: none; font-size: 11px; line-height: 1; }
.master-modal-footer { border-top: none; justify-content: flex-end; padding: 14px 20px; }
.td-item-cell { width: 340px; max-width: 420px; min-width: 260px; padding: 8px 14px; }
.td-item-cell .select2-container,
.td-item-cell select { width: 100% !important; max-width: 100% !important; }

/* Global Multi-line Select2 Text Wrapping */
.select2-container { max-width: 100% !important; }
.select2-container .select2-selection--single {
    height: auto !important;
    min-height: 38px !important;
    white-space: normal !important;
    padding: 4px 8px !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    padding: 2px 24px 2px 2px !important;
}
.select2-container .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 6px !important;
}
.select2-results__option {
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
}
.item-meta-info-box { margin-top: 8px; align-items: center; gap: 10px; }
.item-tap-photo-thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 1.5px solid var(--border); }
.item-meta-text { font-size: 11px; color: var(--text2); }
.item-meta-value { font-weight: 700; color: var(--text); }
.variant-na-text { font-size: 11px; color: var(--text3); }
.td-subtotal { font-size: 12.5px; font-weight: 600; color: var(--text2); }
.td-tax { font-size: 12px; color: var(--text3); }
.td-total { font-size: 13px; font-weight: 700; color: var(--primary); }
.btn-remove-row { padding: 2px 8px; font-size: 11px; color: var(--red); }
.variant-row-chip { display: flex; align-items: center; gap: 8px; font-size: 12px; background: #f9fafb; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); }
.variant-chip-name { font-weight: 600; flex: 1; }
.variant-chip-stock { font-size: 10px; color: var(--text3); font-weight: normal; margin-left: 4px; }
.variant-chip-qty-input { width: 70px; padding: 3px 6px; font-size: 11.5px; border-radius: 6px; }
.qty-readonly-bg { background: #f5f3f0 !important; }
.tax-amt-note { font-size: 10.5px; color: var(--text3); }

/* Login page */
.login-page-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF3E6 0%, #FFE3C2 45%, #FFD2A3 100%);
  position: relative;
  overflow: hidden;
}

.login-blob-tr {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 103, 10, .18), transparent 70%);
}

.login-blob-bl {
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 166, 35, .18), transparent 70%);
}

.login-card {
  position: relative;
  z-index: 2;
  display: flex;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 25px 60px rgba(120, 70, 20, .18);
  overflow: hidden;
  max-width: 760px;
  width: 92%;
}

.login-brand-panel {
  flex: 1;
  background: linear-gradient(160deg, #E8670A 0%, #C9500A 60%, #A8420A 100%);
  padding: 48px 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  min-width: 280px;
}

.login-logo-box {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.login-logo-img {
  width: 42px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.login-brand-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.3;
}

.login-brand-subtitle {
  font-size: 13px;
  opacity: .85;
  line-height: 1.6;
  max-width: 240px;
}

.login-brand-footer {
  display: flex;
  gap: 18px;
  font-size: 11px;
  opacity: .8;
}

.login-form-panel {
  flex: 1;
  padding: 48px 40px;
  min-width: 300px;
}

.login-welcome-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
}

.login-welcome-subtitle {
  font-size: 12.5px;
  color: var(--text3);
  margin-bottom: 28px;
}

.login-field-mb16 {
  margin-bottom: 16px;
}

.login-field-mb10 {
  margin-bottom: 10px;
}

.login-field-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text2);
  display: block;
  margin-bottom: 6px;
  letter-spacing: .3px;
}

.login-input-wrap {
  position: relative;
}

.login-input-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: 14px;
}

.login-input {
  width: 100%;
  padding: 11px 14px 11px 36px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.login-input-pw {
  width: 100%;
  padding: 11px 40px 11px 36px;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
}

.login-pw-eye {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 14px;
  color: var(--text3);
  user-select: none;
}

.login-error-box {
  color: var(--red);
  font-size: 11.5px;
  margin-bottom: 14px;
  background: #FFF5F5;
  border: 1px solid #FFCDD2;
  border-radius: 7px;
  padding: 8px 12px;
}

.login-spacer-6 {
  height: 6px;
}

.login-submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 9px;
  box-shadow: 0 8px 20px rgba(232, 103, 10, .3);
}

.login-footer-text {
  text-align: center;
  font-size: 11px;
  color: var(--text3);
  margin-top: 22px;
}

/* ── Find Similar Item (image match) ── */
.match-upload-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.match-upload-field {
  flex: 1 1 280px;
  min-width: 240px;
}

.match-error {
  color: var(--red);
  font-size: 12px;
  margin-top: 6px;
}

.match-optional-tag {
  color: var(--text3);
  font-weight: 400;
  text-transform: none;
  font-size: 11px;
}

.match-upload-preview {
  width: 84px;
  height: 84px;
  flex: 0 0 auto;
}

.match-upload-preview img {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid #F3F1ED;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .04);
}

.match-submit-btn {
  flex: 0 0 auto;
  padding: 11px 22px;
}

.match-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.match-card {
  border: 1.5px solid #F3F1ED;
  border-radius: 14px;
  background: #faf8f6;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .02);
}

.match-card-slider-wrap {
  position: relative;
}

.match-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.match-card-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3F1ED;
  color: var(--text3);
  font-size: 12px;
}

.match-card-score-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  z-index: 2;
}

.match-score-same {
  background: var(--green-bg);
  color: var(--green);
}

.match-score-similar {
  background: var(--amber-bg);
  color: var(--amber);
}

.match-card-body {
  padding: 16px;
}

.match-card-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text1, #2b2420);
}

.match-card-sku {
  font-size: 11px;
  color: var(--text3);
  margin-bottom: 10px;
}

.match-card-points {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.match-card-points li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text2);
}

.match-point-icon {
  flex: 0 0 auto;
}

.match-point-label {
  flex: 1 1 auto;
}

.match-point-score {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--text1, #2b2420);
}

.match-card-prices {
  display: flex;
  gap: 16px;
  border-top: 1px dashed var(--border2);
  padding-top: 10px;
  margin-bottom: 12px;
}

.match-card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match-price-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.match-price-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text1, #2b2420);
}

.match-card-view-btn {
  display: block;
  text-align: center;
  width: 100%;
}

/* ===== PAGINATION BRAND THEME OVERRIDES ===== */
.pagination {
  gap: 4px;
  margin-bottom: 0;
}

.pagination .page-item .page-link {
  color: var(--text2);
  background-color: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  transition: all 0.15s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pagination .page-item .page-link:hover {
  color: var(--primary);
  background-color: #FEF3ED;
  border-color: var(--primary-light);
  transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
  color: #ffffff;
  background: linear-gradient(135deg, var(--primary), var(--gold));
  border-color: var(--primary);
  box-shadow: 0 3px 8px rgba(212, 89, 10, 0.3);
}

.pagination .page-item.disabled .page-link {
  color: var(--text3);
  background-color: var(--bg2);
  border-color: var(--border);
  opacity: 0.6;
}

/* ===== GLOBAL PRINT RULES ===== */
@media print {
  #chat-widget-root,
  .cw-fab,
  .cw-panel,
  .no-print,
  #toast,
  .toast,
  .modal,
  .modal-backdrop {
    display: none !important;
  }
}

.bg-secondary {
  background-color: #475569 !important;
  color: #ffffff !important;
}

.badge-secondary {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
  border: 1px solid #cbd5e1 !important;
}