/*
 * Shared SalesPro interface polish for dashboard pages.
 * Kept generic so older CRUD/history screens inherit the newer visual language.
 */
:root {
  --sp-ui-primary: #ea580c;
  --sp-ui-accent: #f97316;
  --sp-ui-primary-soft: #fff7ed;
  --sp-ui-primary-line: #fed7aa;
  --sp-ui-success: #16a34a;
  --sp-ui-warning: #f59e0b;
  --sp-ui-danger: #dc2626;
  --sp-ui-ink: #172033;
  --sp-ui-muted: #667085;
  --sp-ui-line: #e6eaf0;
  --sp-ui-soft: #f6f8fb;
  --sp-ui-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
  --bs-primary: #ea580c;
  --bs-primary-rgb: 234, 88, 12;
  --bs-link-color: #ea580c;
  --bs-link-hover-color: #c2410c;
}

body.layout-fixed.sidebar-expand-lg.bg-body-tertiary:not(.salespro-dashboard):not(.pos-page):not(.report-page) {
  background:
    radial-gradient(circle at top left, rgba(249, 115, 22, 0.12), transparent 34rem),
    linear-gradient(180deg, #fff7ed 0%, #f8fafc 52%, #eef2f7 100%) !important;
  color: var(--sp-ui-ink);
}

body:not(.salespro-dashboard):not(.pos-page):not(.report-page) .app-content-header {
  padding: 1.2rem 0 0.75rem;
}

body:not(.salespro-dashboard):not(.pos-page):not(.report-page) .app-content-header > .container-fluid > .row {
  align-items: center;
  min-height: 86px;
  margin-right: 0.35rem;
  margin-left: 0.35rem;
  padding: 1.05rem 1.25rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--sp-ui-primary), var(--sp-ui-accent));
  box-shadow: 0 16px 34px rgba(234, 88, 12, 0.18);
  color: #fff;
}

body:not(.salespro-dashboard):not(.pos-page):not(.report-page) .app-content-header h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0;
}

body:not(.salespro-dashboard):not(.pos-page):not(.report-page) .app-content-header .breadcrumb {
  margin: 0;
}

body:not(.salespro-dashboard):not(.pos-page):not(.report-page) .app-content-header .breadcrumb,
body:not(.salespro-dashboard):not(.pos-page):not(.report-page) .app-content-header .breadcrumb a {
  color: rgba(255, 255, 255, 0.84);
}

.app-main .card:not(.plan-card):not(.dashboard-card):not(.pos-card):not(.report-card) {
  overflow: hidden;
  border: 1px solid var(--sp-ui-line);
  border-radius: 8px;
  box-shadow: var(--sp-ui-shadow);
}

.app-main .card:not(.plan-card):not(.dashboard-card):not(.pos-card):not(.report-card) > .card-header {
  min-height: 54px;
  border-bottom: 1px solid var(--sp-ui-line);
  background: #fff;
}

.app-main .card-title,
.app-main .card-header h3,
.app-main .card-header h5,
.app-main .card-header h6 {
  margin: 0;
  font-weight: 800;
  color: var(--sp-ui-ink);
}

.app-main .card-body {
  color: var(--sp-ui-ink);
}

.app-main .form-control,
.app-main .form-select,
.app-main select.form-control {
  min-height: 42px;
  border-color: var(--sp-ui-line);
  border-radius: 8px;
}

.app-main label {
  color: var(--sp-ui-muted);
  font-size: 0.84rem;
  font-weight: 800;
}

.app-main .btn {
  border-radius: 8px;
  font-weight: 800;
}

.app-main .btn-primary {
  border-color: var(--sp-ui-primary);
  background: var(--sp-ui-primary);
}

.btn-primary {
  --bs-btn-bg: var(--sp-ui-primary);
  --bs-btn-border-color: var(--sp-ui-primary);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #c2410c;
  --bs-btn-hover-border-color: #c2410c;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #9a3412;
  --bs-btn-active-border-color: #9a3412;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #fdba74;
  --bs-btn-disabled-border-color: #fdba74;
}

.btn-outline-primary {
  --bs-btn-color: var(--sp-ui-primary);
  --bs-btn-border-color: var(--sp-ui-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sp-ui-primary);
  --bs-btn-hover-border-color: var(--sp-ui-primary);
  --bs-btn-focus-shadow-rgb: 234, 88, 12;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #c2410c;
  --bs-btn-active-border-color: #c2410c;
  --bs-btn-disabled-color: #fdba74;
  --bs-btn-disabled-border-color: #fdba74;
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  color: #fff;
  background-color: #c2410c;
  border-color: #c2410c;
}

.app-main .btn-primary:hover,
.app-main .btn-primary:focus {
  border-color: #c2410c;
  background: #c2410c;
}

.app-main .btn-success {
  border-color: var(--sp-ui-success);
  background: var(--sp-ui-success);
}

.app-main .btn-danger {
  border-color: var(--sp-ui-danger);
  background: var(--sp-ui-danger);
}

.app-main table.table {
  margin-bottom: 0;
  font-size: 0.84rem;
}

.app-main .table thead th,
.app-main .table thead td {
  color: var(--sp-ui-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sp-ui-line);
}

.app-main .table th,
.app-main .table td {
  padding: 0.42rem 0.55rem;
  line-height: 1.25;
}

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

.app-main .table .btn,
.app-main table .btn {
  --bs-btn-padding-y: 0.22rem;
  --bs-btn-padding-x: 0.48rem;
  --bs-btn-font-size: 0.74rem;
  border-radius: 6px;
}

.app-main .table tfoot th {
  background: var(--sp-ui-soft);
}

.app-main .badge {
  font-weight: 800;
}

.app-main .table-responsive {
  border-radius: 0 0 8px 8px;
}

.app-sidebar.bg-white {
  background: #fff !important;
}

.sidebar-menu .nav-link {
  border-radius: 8px;
}

.sidebar-menu .nav-link.active,
.sidebar-menu .nav-link:hover {
  background: rgba(249, 115, 22, 0.10);
  color: var(--sp-ui-primary);
}

.text-primary,
.link-primary {
  color: var(--sp-ui-primary) !important;
}

.text-bg-primary,
.bg-primary,
.card-primary,
.toast-primary,
.progress-bar,
.list-group-item.active,
.page-item.active .page-link {
  --lte-card-variant-bg: var(--sp-ui-primary);
  --lte-card-variant-bg-rgb: 234, 88, 12;
  --lte-card-variant-color: #fff;
  --lte-card-variant-color-rgb: 255, 255, 255;
  --bs-toast-header-bg: var(--sp-ui-primary);
  --bs-toast-header-border-color: var(--sp-ui-primary);
  --bs-toast-border-color: var(--sp-ui-primary);
  background-color: var(--sp-ui-primary) !important;
  color: #fff !important;
}

.border-primary,
.page-item.active .page-link {
  border-color: var(--sp-ui-primary) !important;
}

.page-link {
  color: var(--sp-ui-primary);
}

.page-link:hover,
.page-link:focus {
  color: #c2410c;
}

.form-check-input:checked {
  background-color: var(--sp-ui-primary);
  border-color: var(--sp-ui-primary);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #fdba74;
  box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.18);
}

.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--sp-ui-primary);
  color: #fff;
}

.direct-chat-primary,
.end > .direct-chat-text {
  --lte-direct-chat-bg: var(--sp-ui-primary);
  --lte-direct-chat-color: #fff;
}

.callout.callout-primary {
  border-left-color: var(--sp-ui-primary);
}

.alert-primary {
  --bs-alert-color: #9a3412;
  --bs-alert-bg: #ffedd5;
  --bs-alert-border-color: #fdba74;
}

.app-header .nav-link:hover,
.app-header .nav-link:focus,
.brand-link:hover,
.brand-link:focus {
  color: var(--sp-ui-primary) !important;
}

.sidebar-brand .brand-text {
  color: var(--sp-ui-primary);
}

@media (max-width: 767.98px) {
  body:not(.salespro-dashboard):not(.pos-page):not(.report-page) .app-content-header > .container-fluid > .row {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1rem;
  }

  .app-main .card-body {
    padding: 0.85rem;
  }
}

body.salespro-auth,
body.salespro-setup,
body.salespro-activation,
body.salespro-tool {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(249, 115, 22, 0.18), transparent 32rem),
    linear-gradient(145deg, #fff7ed 0%, #f8fafc 54%, #f5f7fb 100%) !important;
  color: var(--sp-ui-ink);
}

body.salespro-auth .login-box {
  width: min(430px, calc(100vw - 2rem));
}

body.salespro-auth .login-logo a,
body.salespro-setup .login-logo a {
  color: var(--sp-ui-ink) !important;
  font-weight: 900;
  letter-spacing: 0;
  text-decoration: none;
}

body.salespro-auth .card,
.setup-shell,
.activation-shell,
.barcode-shell {
  border: 1px solid rgba(230, 234, 240, 0.9);
  border-radius: 8px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.12);
}

body.salespro-auth .card-header {
  border-bottom: 1px solid var(--sp-ui-line);
  background: #fff;
}

body.salespro-auth .card-title {
  font-weight: 900;
}

body.salespro-auth .login-card-body {
  padding: 1.35rem;
}

body.salespro-auth .input-group-text {
  border-color: var(--sp-ui-line);
  background: var(--sp-ui-soft);
  color: var(--sp-ui-primary);
}

.setup-shell {
  width: min(880px, calc(100vw - 2rem));
  margin: 4rem auto;
  padding: clamp(1.25rem, 4vw, 2.4rem);
  background: #fff;
}

.setup-step-title {
  margin-bottom: 1.25rem;
  color: var(--sp-ui-ink);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.25;
}

.setup-actions {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.activation-shell {
  margin: 2rem auto;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: rgba(255, 255, 255, 0.94);
}

body.salespro-activation .plan-card {
  cursor: pointer;
  border: 1px solid var(--sp-ui-line);
  border-radius: 8px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

body.salespro-activation .plan-card:hover,
body.salespro-activation .plan-card.selected {
  border-color: var(--sp-ui-primary);
  box-shadow: 0 14px 32px rgba(234, 88, 12, 0.16);
  transform: translateY(-2px);
}

body.salespro-activation .plan-card.selected {
  background: var(--sp-ui-primary-soft);
}

.barcode-shell {
  width: min(620px, calc(100vw - 2rem));
  margin: 4rem auto;
  padding: 1.5rem;
  background: #fff;
}

.barcode-output {
  min-height: 118px;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed var(--sp-ui-line);
  border-radius: 8px;
  background: var(--sp-ui-soft);
  text-align: center;
}

body.salespro-print {
  max-width: 820px;
  margin: 0 auto;
  padding: 1.25rem;
  background: #fff;
  color: #111827;
  font-size: 0.94rem;
}

body.salespro-print .receipt-head {
  padding-bottom: 0.8rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #111827;
  text-align: center;
}

body.salespro-print .receipt-head h1 {
  margin-bottom: 0.2rem;
  font-size: 1.65rem;
  font-weight: 900;
}

body.salespro-print .receipt-meta {
  margin-bottom: 1rem;
  padding: 0.8rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #f9fafb;
}

body.salespro-print table.table th {
  background: #f3f4f6;
}

@media print {
  body.salespro-print {
    max-width: none;
    padding: 0;
  }

  body.salespro-print .receipt-meta {
    border-color: #bbb;
    background: #fff;
  }
}