/* Panel app layer — applies to every authenticated page via indexOpen */

body.pl-body {
  font-family: iransans, Tahoma, sans-serif;
  font-synthesis: none;
}

/* Soft ambient canvas behind page content */
.main-content {
  background:
    radial-gradient(ellipse 55% 40% at 100% 0%, color-mix(in srgb, var(--brand-primary, #2f6fed) 10%, transparent), transparent 58%),
    radial-gradient(ellipse 45% 35% at 0% 20%, color-mix(in srgb, var(--brand-accent, #0d9f7a) 8%, transparent), transparent 55%),
    var(--body-bg, var(--pl-bg, #06080d)) !important;
  min-height: 100vh;
}

.main-content > .page-content,
.main-content .mp-page {
  animation: pl-page-in 0.28s ease;
}
@keyframes pl-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* Content rhythm */
.main-content .page-content {
  padding-top: 1.15rem !important;
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 992px) {
  .main-content .page-content {
    padding-top: 1.35rem !important;
    padding-bottom: 2.5rem !important;
  }
}

.main-content .mp-container,
.main-content .container-fluid {
  max-width: 1180px;
}

/* Page head — panel-wide */
.main-content .mp-page-head {
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--mp-border, var(--pl-border)) 90%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary, #2f6fed) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--mp-surface, var(--pl-surface-2)) 88%, transparent);
  box-shadow: var(--mp-shadow-sm, 0 8px 24px rgba(0, 0, 0, 0.18));
  position: relative;
  overflow: hidden;
}
.main-content .mp-page-head::before {
  content: "";
  position: absolute;
  inset-inline-end: -40px;
  top: -50px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-accent, #0d9f7a) 12%, transparent);
  pointer-events: none;
}
.main-content .mp-page-head::after {
  margin-top: 0;
  height: 0;
  background: none;
}
.main-content .mp-page-head h1 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--mp-text, var(--pl-text));
  position: relative;
}
.main-content .mp-page-head h1 i {
  color: var(--brand-accent, #0d9f7a);
  opacity: 0.95;
}
.main-content .mp-page-head .mp-hint {
  position: relative;
  color: var(--mp-muted, var(--pl-muted));
  font-size: 0.84rem;
  margin-top: 0.25rem !important;
}

/* Panels & cards */
.main-content .mp-panel,
.main-content .mp-cart-summary {
  border-radius: 16px !important;
  border-color: color-mix(in srgb, var(--mp-border, var(--pl-border)) 92%, transparent) !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mp-surface-2, #171f2b) 55%, transparent), transparent 40%),
    var(--mp-surface, var(--pl-surface-2)) !important;
  box-shadow: var(--mp-shadow-sm, 0 8px 22px rgba(0, 0, 0, 0.16));
}
.main-content .mp-panel > h2,
.main-content .mp-panel > h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.main-content .mp-stat-grid {
  gap: 0.85rem;
}
.main-content .mp-stat-card {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--mp-border) 90%, transparent);
  background: color-mix(in srgb, var(--mp-surface) 92%, transparent);
  box-shadow: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.main-content .mp-stat-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--mp-border));
  transform: translateY(-1px);
}
.main-content .mp-stat-card strong.accent,
.main-content .mp-stat-card .accent {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-content .mp-order-card {
  border-radius: 14px !important;
  border: 1px solid color-mix(in srgb, var(--mp-border) 92%, transparent) !important;
  background: color-mix(in srgb, var(--mp-surface-2, var(--mp-surface)) 70%, transparent) !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.main-content .mp-order-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--mp-border)) !important;
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--mp-surface)) !important;
}

/* Buttons in panel */
.main-content .mp-btn {
  border-radius: 11px;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.main-content .mp-btn-accent {
  background: linear-gradient(135deg, var(--brand-primary, #2f6fed), var(--brand-accent, #0d9f7a)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-accent) 25%, transparent);
}
.main-content .mp-btn-accent:hover {
  filter: brightness(1.06);
}
.main-content .mp-btn-outline {
  border-color: color-mix(in srgb, var(--mp-border-strong, var(--mp-border)) 90%, transparent) !important;
}

/* Empty / hint */
.main-content .mp-empty {
  border-radius: 16px;
  border: 1px dashed color-mix(in srgb, var(--mp-border) 95%, transparent);
  background: color-mix(in srgb, var(--mp-surface) 50%, transparent);
  padding: 2rem 1.25rem;
}

/* Forms / tables (theme tokens) */
.main-content .form-control,
.main-content .form-select,
.main-content input.form-control,
.main-content textarea.form-control,
.main-content select.form-select {
  border-radius: 12px !important;
  border-color: var(--mp-border, var(--pl-border)) !important;
  background: var(--mp-bg-elevated, var(--mp-surface)) !important;
  color: var(--mp-text, var(--pl-text)) !important;
  box-shadow: none !important;
}
.main-content .form-control:focus,
.main-content .form-select:focus {
  border-color: color-mix(in srgb, var(--brand-accent) 50%, var(--mp-border)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-accent) 16%, transparent) !important;
}

.main-content .table,
.main-content .table-dark {
  --bs-table-bg: transparent;
  --bs-table-color: var(--mp-text, var(--pl-text));
  --bs-table-border-color: var(--mp-border, var(--pl-border));
  --bs-table-striped-bg: color-mix(in srgb, var(--mp-surface-2, #171f2b) 55%, transparent);
  --bs-table-hover-bg: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  color: var(--mp-text, var(--pl-text)) !important;
  border-color: var(--mp-border) !important;
}
.main-content .table > :not(caption) > * > * {
  background: transparent !important;
  color: inherit !important;
  border-bottom-color: var(--mp-border) !important;
  padding: 0.75rem 0.85rem;
}
.main-content .table thead th {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mp-muted) !important;
  border-bottom-width: 1px !important;
}
.main-content .table-responsive {
  border-radius: 14px;
  border: 1px solid var(--mp-border);
  background: var(--mp-surface);
  overflow: hidden;
}

/* Bootstrap cards inside panel */
.main-content .card {
  background: var(--mp-surface) !important;
  border: 1px solid var(--mp-border) !important;
  border-radius: 16px !important;
  color: var(--mp-text) !important;
  box-shadow: var(--mp-shadow-sm) !important;
}
.main-content .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--mp-border) !important;
  color: var(--mp-text) !important;
}
.main-content .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--mp-border) !important;
}

/* Badges / alerts */
.main-content .badge {
  border-radius: 999px;
  font-weight: 750;
}
.main-content .alert {
  border-radius: 14px;
  border-width: 1px;
}

/* Hide Skote footer noise if present */
.main-content .footer,
#layout-wrapper > footer {
  display: none !important;
}

/* Light theme refinements */
html[data-theme="light"] .main-content {
  background:
    radial-gradient(ellipse 50% 35% at 100% 0%, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 55%),
    radial-gradient(ellipse 40% 30% at 0% 15%, color-mix(in srgb, var(--brand-accent) 7%, transparent), transparent 50%),
    var(--body-bg, #f3f5f8) !important;
}
html[data-theme="light"] .main-content .form-control,
html[data-theme="light"] .main-content .form-select,
html[data-theme="light"] .main-content textarea.form-control,
html[data-theme="light"] .main-content .input-group-text {
  background: #fff !important;
  color: #0f172a !important;
  border-color: rgba(15, 23, 42, 0.14) !important;
}
html[data-theme="light"] .main-content .mp-page-head {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 8%, #fff), #fff 60%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

/* Status chips already themed; ensure readability */
.main-content .mp-status {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.01em;
}