/* ============================================
   Pricing Pages — pricing.html & pricing-detail.html
   ============================================ */

/* --- Shared: Sidebar logo overrides --- */
.logo-full--sidebar {
  height: 38px;
  margin: 0 auto;
}
.logo-mark--sidebar {
  height: 28px;
  margin: 0 auto;
}

/* --- Shared: Topbar user pointer --- */
.topbar-user__trigger {
  cursor: pointer;
}

/* --- Shared: Page subtitle --- */
.page-subtitle {
  margin-top: 4px;
}

/* --- pricing.html: Price Lists section --- */
.pricing-section {
  margin-bottom: 24px;
}
.pricing-section__title {
  margin-bottom: 16px;
}
.pricing-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* --- pricing.html: Card header title reset --- */
.card-title--reset {
  margin: 0;
}

/* --- pricing.html: Card body description --- */
.pricing-cards-grid .card .card-body {
  padding: 12px 20px;
}

.card-desc {
  margin-bottom: 4px;
}

/* --- pricing.html: Card meta row --- */
.card-meta {
  display: flex;
  gap: 16px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* --- pricing.html: Card action buttons row --- */
.card-actions {
  display: flex;
  gap: 8px;
}

/* --- pricing.html: Price Rules card header --- */
.price-rules-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.price-rules-header__title {
  margin: 0;
}
.price-rules-header__sep {
  color: var(--text-muted);
  font-size: 0.875rem;
}
.price-rules-header__select {
  width: 220px;
  padding: 7px 36px 7px 12px;
  font-size: 0.875rem;
}

/* --- pricing.html: Filter bar (uses global .filter-bar styles) */
.filter-bar__right {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.filter-bar__select {
  width: 180px;
  padding: 7px 36px 7px 12px;
}

/* --- pricing.html: Table sortable header --- */
.th--sortable {
  cursor: pointer;
}

/* --- pricing.html: Badge font-size variants --- */
.badge--xs {
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge--xxs {
  font-size: 0.6875rem;
}
.badge--sm {
  font-size: 0.75rem;
}

/* --- pricing.html: Discount cell --- */
.td--discount {
  background: none;
}

/* --- pricing.html: Discount sub-label --- */
.discount-label {
  display: block;
}

/* --- pricing-detail.html: Price list header card --- */
.price-list-header {
  margin-bottom: 16px;
}
.price-list-header__inner {
  padding: 16px 20px;
}
.price-list-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price-list-header__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.price-list-header__title {
  font-size: 1.25rem;
  margin: 0;
  font-weight: 700;
}
.badge--active-bordered {
  font-size: 0.6875rem;
  border: 1px solid #bbf7d0;
}
.price-list-header__subtitle {
  font-size: 0.8125rem;
  color: #64748b;
  margin-top: 6px;
}

/* --- pricing-detail.html: Tabs --- */
.pricing-tabs {
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  gap: 0;
  margin-bottom: 16px;
}
.pricing-tab {
  padding: 10px 16px;
  border: none;
  background: none;
  font-size: 0.8125rem;
  cursor: pointer;
}
.pricing-tab--active {
  font-weight: 600;
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}
.pricing-tab--inactive {
  color: #94a3b8;
  border-bottom: 2px solid transparent;
}

/* --- pricing-detail.html: Styled table header (blue on grey) --- */
.th--styled {
  background: #ececed;
  color: #2a60ac;
  font-weight: 700;
}
.th--styled-empty {
  background: #ececed;
  width: 36px;
}

/* --- pricing-detail.html: Table column widths --- */
.th--w120 { width: 120px; }
.th--w100 { width: 100px; }
.th--w70  { width: 70px; }
.th--w110 { width: 110px; }
.th--w130 { width: 130px; }
.th--w140 { width: 140px; }

/* --- pricing-detail.html: Add-rule button in header --- */
.price-rule-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--primary);
  border-radius: 5px;
  text-decoration: none;
  flex-shrink: 0;
}

/* --- pricing-detail.html: Header column inner layout --- */
.th-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.th-count {
  font-weight: 400;
  color: #94a3b8;
}

/* --- pricing-detail.html: Product name cell --- */
.cell-product-name {
  font-size: 0.8125rem;
}

/* --- pricing-detail.html: Product type badge variants --- */
.badge--type-natural {
  background: #e8f2fb;
  color: #0364B1;
  font-size: 0.6875rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #bfdbfe;
}
.badge--type-tile {
  background: #f0fdfa;
  color: #0d9488;
  font-size: 0.6875rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #99f6e4;
}
.badge--type-misc {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.6875rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #fde68a;
}
.badge--type-service {
  background: #f1f5f9;
  color: #475569;
  font-size: 0.6875rem;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #cbd5e1;
}
.badge--type-engineered {
  background: #f3e8ff;
  color: #7c3aed;
  font-size: 0.6875rem;
  border: 1px solid #ddd6fe;
}

/* --- pricing-detail.html: Simple type badges (products tab, no icon) --- */
.badge--type-natural-simple {
  background: #e8f2fb;
  color: #0364B1;
  font-size: 0.6875rem;
  border: 1px solid #bfdbfe;
}
.badge--type-tile-simple {
  background: #f0fdfa;
  color: #0d9488;
  font-size: 0.6875rem;
  border: 1px solid #99f6e4;
}
.badge--type-misc-simple {
  background: #fef3c7;
  color: #92400e;
  font-size: 0.6875rem;
  border: 1px solid #fde68a;
}
.badge--type-service-simple {
  background: #f1f5f9;
  color: #475569;
  font-size: 0.6875rem;
  border: 1px solid #cbd5e1;
}

/* --- pricing-detail.html: Pricing status badges --- */
.badge--has-pricing {
  font-size: 0.6875rem;
  border: 1px solid #bbf7d0;
}
.badge--no-rule {
  font-size: 0.6875rem;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* --- pricing-detail.html: Table cell alignments & styles --- */
.td--right {
  text-align: right;
}
.td--center {
  text-align: center;
}
.td--price {
  text-align: right;
  font-size: 0.875rem;
  font-weight: 600;
}
.td--uom {
  text-align: center;
  font-size: 0.75rem;
  color: #64748b;
}
.td--date {
  font-size: 0.8125rem;
  color: #64748b;
}

/* --- pricing-detail.html: History table cells --- */
.td--history-date {
  font-size: 0.8125rem;
  color: #64748b;
  white-space: nowrap;
}
.td--history-text {
  font-size: 0.8125rem;
}
.td--history-product {
  font-size: 0.8125rem;
  font-weight: 500;
}
.td--old-price {
  text-align: right;
  font-size: 0.8125rem;
  color: #94a3b8;
  text-decoration: line-through;
}
.td--new-price {
  text-align: right;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
}
.td--history-user {
  font-size: 0.8125rem;
  color: #64748b;
}
/* Special case: old-price with no strike-through (dash placeholder) */
.td--old-price-empty {
  text-align: right;
  font-size: 0.8125rem;
  color: #94a3b8;
}

/* --- pricing-detail.html: Slide-out panels --- */
.slide-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 1001;
}
.slide-panel__header {
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.slide-panel__title {
  font-size: 1rem;
  margin: 0;
  font-weight: 600;
}
.slide-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #94a3b8;
}
.slide-panel__body {
  padding: 20px;
}

/* --- pricing-detail.html: Form groups in panels --- */
.form-group--panel {
  margin-bottom: 14px;
}
.form-label--panel {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 4px;
}
.form-label__optional {
  font-weight: 400;
  color: #94a3b8;
}
.form-control--sm {
  font-size: 0.875rem;
}
.form-control--textarea {
  font-size: 0.875rem;
  resize: vertical;
}

/* --- pricing-detail.html: Currency input with prefix --- */
.input-currency {
  position: relative;
}
.input-currency__symbol {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem;
  color: #94a3b8;
}
.input-currency__input {
  font-size: 0.875rem;
  padding-left: 24px;
}

/* --- pricing-detail.html: Panel footer actions --- */
.panel-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 24px;
  padding-top: 14px;
  border-top: 1px solid #e2e8f0;
}
.btn--panel {
  font-size: 0.8125rem;
  padding: 8px 16px;
}

/* --- pricing-detail.html: Toggle switch section --- */
.toggle-section {
  border-top: 1px solid #e2e8f0;
  padding-top: 14px;
  margin-top: 6px;
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toggle-row__label {
  font-size: 0.8125rem;
  font-weight: 500;
}
.toggle-switch {
  width: 40px;
  height: 22px;
  background: var(--primary);
  border-radius: 11px;
  position: relative;
  cursor: pointer;
}
.toggle-switch__knob {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  right: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.toggle-hint {
  font-size: 0.6875rem;
  color: #94a3b8;
  margin-top: 4px;
}

/* --- pricing-detail.html: Panel overlay --- */
.panel-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 1000;
}

/* --- pricing-detail.html: Toolbar above price rules table --- */
.pricing-rules-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.pricing-rules-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- pricing-detail.html: Product type under product name --- */
.pricing-product-type {
  margin-top: 3px;
}

/* --- pricing-detail.html: UOM line under price --- */
.pricing-uom-line {
  font-size: 0.6875rem;
  font-weight: 400;
  color: #64748b;
  margin-top: 2px;
}
.pricing-x {
  font-size: 0.6875rem;
  color: #94a3b8;
  font-weight: 400;
}

/* --- pricing.html: Pill filter selectors --- */
.pricing-pill-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.pricing-pill {
  padding: 5px 12px;
  border: 1.5px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pricing-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.pricing-pill--active {
  background: #d0e4f7;
  color: var(--primary);
  border-color: var(--primary);
  font-weight: 600;
}

/* --- pricing.html: Column widths — Product takes space, rest compact on right --- */
#pricingTab-products table { table-layout: fixed; }
#pricingTab-products table th:nth-child(1) { width: auto; }     /* Product — takes remaining space */
#pricingTab-products table th:nth-child(2) { width: 165px; }    /* Type */
#pricingTab-products table th:nth-child(3) { width: 132px; }    /* Base Price */
#pricingTab-products table th:nth-child(4) { width: 110px; }    /* Contractor */
#pricingTab-products table th:nth-child(5) { width: 99px; }     /* VIP */
#pricingTab-products table th:nth-child(6) { width: 99px; }     /* Status */

/* --- pricing.html: Status column centered --- */
.pricing-th--status {
  text-align: center;
}
.pricing-td--status {
  text-align: center;
}

/* --- pricing.html: tier sub-label in header --- */
.th-sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  opacity: 0.7;
  line-height: 1.2;
}

/* --- pricing.html: Search with button --- */
.filter-bar__search--with-btn {
  position: relative;
}
.filter-bar__search--with-btn .filter-bar__search-input {
  padding-right: 40px;
}
.filter-bar__search-btn {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  border: none;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* --- pricing.html: Price List Selector --- */
.pricing-list-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  border-bottom: none;
  background: #fff;
  flex-wrap: wrap;
  gap: 12px;
}
.pricing-list-selector__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pricing-list-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #2a60ac;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pricing-list-select {
  font-weight: 500;
  font-size: 0.8125rem;
  padding: 8px 32px 8px 10px;
  border-radius: 7px;
}
.pricing-list-selector__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- pricing.html: Tier Summary (inline in list selector) --- */
.pricing-tiers-bar__tiers {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 7px;
}
.pricing-tier-badge--base {
  color: var(--primary);
  border-color: var(--primary);
  background: #f0f7ff;
  font-weight: 600;
}
.pricing-tier-badge__pct {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #94a3b8;
}
.pricing-tier-badge--base .pricing-tier-badge__pct {
  color: var(--primary);
}
.pricing-tiers-bar__manage {
  font-weight: 500;
  color: var(--primary);
}
.pricing-tiers-bar__manage:hover {
  text-decoration: underline;
}