/**
 * Platform High-End – One place for premium feel across the entire product.
 * Super ultra high-end by default: entire platform uses luxury tokens, statement headers,
 * 600ms motion, hairline borders, sharp CTAs. No compromise.
 *
 * Applied to: tenant portal, tenant backend, superadmin, marketing, admin, login,
 * every sidebar, every dashboard, every card, every chart and data visualization.
 *
 * Load after design-tokens.css and design-tokens-luxury.css where available.
 */

/* ========== Platform-wide super ultra high-end (default experience) ========== */
body {
  color: var(--luxury-text, #1A1A1A);
  transition: color var(--luxury-motion-duration, 600ms) var(--luxury-motion-ease, ease-out);
}
html[data-theme="dark"] body,
html[data-bs-theme="dark"] body,
body.portal-backend-dark,
body.control-plane-shell {
  color: var(--luxury-text, #F5F5F5);
}
#main-content,
.portal-main-col,
.cp-main-col,
.mkt-main,
main[role="main"] {
  background-color: var(--luxury-surface-subtle, var(--luxury-gallery-white, #FDFDFD));
}

/* ========== Premium design tokens (used by all surfaces) ========== */
:root {
  --platform-premium-radius: 14px;
  --platform-premium-radius-sm: 10px;
  --platform-premium-shadow: 0 12px 28px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.04);
  --platform-premium-shadow-hover: 0 20px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(15, 23, 42, 0.06);
  --platform-premium-shadow-dark: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --platform-premium-shadow-dark-hover: 0 20px 44px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --platform-sidebar-radius: 12px;
  --platform-sidebar-padding: 1rem 1.25rem;
  --platform-card-radius: var(--platform-premium-radius);
  --platform-chart-radius: var(--platform-premium-radius);
}

/* Dark / backend dark: use elevated dark shadows */
html[data-theme="dark"],
html[data-bs-theme="dark"],
body.portal-backend-dark {
  --platform-premium-shadow: var(--platform-premium-shadow-dark);
  --platform-premium-shadow-hover: var(--platform-premium-shadow-dark-hover);
}

/* ========== Premium polish – selection, focus, motion ========== */
/* Refined text selection (all surfaces) */
::selection {
  background: rgba(13, 110, 253, 0.2);
  color: inherit;
}
.control-plane-shell ::selection,
body.portal-backend-dark ::selection,
html[data-theme="dark"] ::selection {
  background: rgba(212, 175, 55, 0.25);
  color: inherit;
}
/* Consistent focus-visible: high contrast, never clip */
*:focus-visible {
  outline-offset: 2px;
}

/* ========== Sidebars – every sidebar on the platform ========== */

/* Portal / tenant backend sidebar (partials/portal_sidebar) */
.portal-sidebar-col .sidebar {
  border-radius: var(--platform-sidebar-radius);
  border: 1px solid var(--portal-border, rgba(15, 23, 42, 0.08));
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
html[data-bs-theme="dark"] .portal-sidebar-col .sidebar,
body.portal-backend-dark .portal-sidebar-col .sidebar {
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.sidebar-header,
[data-sidebar-nav="true"] {
  padding-inline: 0.5rem;
}
.sidebar-header {
  border-radius: var(--platform-sidebar-radius);
  padding-block: 0.875rem;
}
.sidebar-section-title {
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--portal-text-muted);
}
.nav-link.nav-pill {
  border-radius: var(--platform-premium-radius-sm);
  padding: 0.6rem 0.875rem !important;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.nav-link.nav-pill:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.nav-link.nav-pill.active,
.nav-link.nav-pill[aria-current="page"] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.sidebar-avatar {
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Control plane sidebar (partials/control_plane_sidebar) – scroll controlled by manager-control-plane.css */
.cp-sidebar-inner {
  border-radius: var(--platform-premium-radius) !important;
  box-shadow: var(--platform-premium-shadow-dark);
}
.cp-sidebar-nav .nav-link {
  border-radius: var(--platform-premium-radius-sm);
  padding: 0.55rem 0.75rem;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.cp-sidebar-nav .nav-link:hover {
  background: rgba(212, 175, 55, 0.12);
  color: #f1f5f9;
}
.cp-sidebar-nav .nav-link:focus-visible {
  outline: 2px solid var(--platform-gold, #d4af37);
  outline-offset: 2px;
}
.control-plane-shell .cp-sidebar-nav .nav-item .border-top {
  border-color: rgba(125, 152, 187, 0.25) !important;
}

/* Admin (Unfold) sidebar – use premium radius for logo and nav items */
#nav-sidebar .admin-sidebar-link,
#nav-sidebar .admin-sidebar-model-link,
#nav-sidebar .admin-sidebar-app-title a {
  border-radius: var(--platform-premium-radius-sm);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* ========== Dashboards – all dashboard pages and cards ========== */

/* Cards: consistent premium radius and shadow (all dashboards) */
#dashboard-layout .card,
.dashboard-layout-unified .card,
[data-dashboard-page] .card,
.dashboard-chart-card,
.finance-dashboard-widgets .card,
.analytics-dashboard-widgets .card,
.payroll-dashboard-widgets .card,
.emis-dashboard-widgets .card,
.compliance-dashboard .card,
.parent-dashboard .card,
.teacher-shell .card,
.control-plane-shell .card,
.cp-panel,
.stat-card,
.app-card {
  border-radius: var(--platform-card-radius) !important;
  box-shadow: var(--platform-premium-shadow);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
#dashboard-layout .card:hover,
.dashboard-layout-unified .card:hover,
[data-dashboard-page] .card:hover,
.dashboard-chart-card:hover,
.finance-dashboard-widgets .card:hover,
.analytics-dashboard-widgets .card:hover,
.control-plane-shell .card:hover,
.stat-card:hover,
.app-card:hover {
  box-shadow: var(--platform-premium-shadow-hover);
}
html[data-bs-theme="dark"] #dashboard-layout .card:hover,
[data-theme="dark"] .card:hover,
body.portal-backend-dark .card:hover,
.control-plane-shell .card:hover {
  box-shadow: var(--platform-premium-shadow-dark-hover);
}

/* Dashboard chart cards and data visualization containers */
.dashboard-chart-card,
.dashboard-chart-container {
  overflow: hidden;
}
.dashboard-chart-card .card-body,
.dashboard-chart-container {
  padding: 1.25rem 1.5rem;
}
.dashboard-chart-wrapper {
  border-radius: var(--platform-premium-radius-sm);
  overflow: hidden;
  background: var(--admin-content-bg, #f8fafc);
}
.dashboard-chart-container {
  border-radius: var(--platform-card-radius);
  box-shadow: var(--platform-premium-shadow);
}
html[data-bs-theme="dark"] .dashboard-chart-wrapper,
[data-theme="dark"] .dashboard-chart-wrapper,
body.portal-backend-dark .dashboard-chart-wrapper {
  background: var(--admin-content-surface, #1e293b);
}

/* Control plane panels and hero blocks */
.cp-hero {
  border-radius: var(--platform-premium-radius) !important;
  box-shadow: var(--platform-premium-shadow-dark);
}
.cp-panel,
.control-plane-shell [class^="cp-"] .card {
  border-radius: var(--platform-card-radius);
}
.cp-overview-card {
  border-radius: var(--platform-premium-radius-sm);
  border: 1px solid rgba(125, 152, 187, 0.2);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.cp-overview-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  border-color: rgba(212, 175, 55, 0.35);
}

/* Admin index and tenant dashboard headers */
.dashboard-header {
  border-radius: var(--platform-premium-radius);
  box-shadow: var(--platform-premium-shadow);
}
body.portal-backend-dark .dashboard-header,
html[data-bs-theme="dark"] .dashboard-header {
  box-shadow: var(--platform-premium-shadow-dark);
}

/* Stat cards and app cards (admin index, tenant dashboards) */
.stat-card,
.app-card {
  border-radius: var(--platform-card-radius) !important;
}
.stat-item,
.app-card .app-actions .app-btn {
  border-radius: var(--platform-premium-radius-sm);
}

/* ========== Tables and data lists – premium feel ========== */
#dashboard-layout .table,
[data-dashboard-page] .table,
.dashboard-layout-unified .table {
  border-collapse: separate;
  border-spacing: 0;
}
#dashboard-layout .table thead th,
[data-dashboard-page] .table thead th {
  border-radius: var(--platform-premium-radius-sm) var(--platform-premium-radius-sm) 0 0;
  padding: 0.875rem 1rem;
}
.control-plane-shell .table thead th {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(125, 152, 187, 0.2);
}

/* ========== Buttons and form controls – consistent radius ========== */
.control-plane-shell .btn {
  border-radius: var(--platform-premium-radius-sm);
}
.control-plane-shell .btn-primary {
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
}
.control-plane-shell .btn-primary:hover {
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}
.form-control,
.form-select {
  border-radius: var(--platform-premium-radius-sm);
}

/* ========== Page headers and section titles ========== */
[data-dashboard-page] h1,
#dashboard-layout h1,
.dashboard-layout-unified h1,
.control-plane-shell h1 {
  letter-spacing: -0.02em;
  font-weight: 700;
}
[data-dashboard-page] .dashboard-subtitle,
[data-dashboard-page] .section-title,
.cp-hero-copy {
  color: var(--portal-text-muted, var(--cp-muted));
  max-width: 60ch;
}

/* ========== Alerts and badges – subtle elevation ========== */
.alert {
  border-radius: var(--platform-premium-radius-sm);
  border-width: 1px;
}
.badge.rounded-pill {
  border-radius: 999px;
  padding: 0.35rem 0.65rem;
  font-weight: 600;
}

/* ========== Setup Studio and first-login – premium cards ========== */
.setup-studio-shell .card,
.first-login-checklist-card {
  border-radius: var(--platform-card-radius) !important;
  box-shadow: var(--platform-premium-shadow);
}
.setup-studio-shell .card:hover,
.first-login-checklist-card:hover {
  box-shadow: var(--platform-premium-shadow-hover);
}
.contextual-quick-actions .card {
  border-radius: var(--platform-card-radius) !important;
  box-shadow: var(--platform-premium-shadow);
}

/* Empty states: same radius and padding as cards */
.backend-v2-panel--empty,
.cp-panel .card-body:empty + .card-footer {
  border-radius: var(--platform-premium-radius-sm);
}
.backend-v2-panel--empty .card-body {
  padding: 1.25rem 1.5rem;
}

/* ========== Main content area – consistent padding ========== */
#main-content,
.portal-main-col,
.cp-main-col {
  padding-block: 1.25rem;
}
@media (min-width: 992px) {
  #main-content,
  .portal-main-col,
  .cp-main-col {
    padding-block: 1.5rem;
  }
}

/* ========== High-end UI/UX – no exceptions (all pages) ========== */
/* Minimum vertical rhythm so no page feels cramped */
.page-wrap,
#main-content > .page-wrap,
.cp-content-wrap {
  min-height: 50vh;
}
/* Typography scale: consistent heading hierarchy */
#main-content h1, .portal-main-col h1, .cp-main-col h1 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.75rem);
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.25;
}
#main-content h2, .portal-main-col h2, .cp-main-col h2 {
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}
#main-content .section-title,
[data-dashboard-page] .section-title {
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* Global reach footnote (footer) */
.brand-global-reach {
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
/* Ensure all form pages and list pages get card consistency */
#main-content .card .card-body,
.portal-main-col .card .card-body,
.cp-main-col .card .card-body {
  padding: 1.25rem 1.5rem;
}
@media (min-width: 768px) {
  #main-content .card .card-body,
  .portal-main-col .card .card-body,
  .cp-main-col .card .card-body {
    padding: 1.5rem 1.75rem;
  }
}

/* ========== Ultra high-end UI/UX – no compromise (all pages, dashboards, flows) ========== */
/* Uses luxury tokens when design-tokens-luxury.css is loaded; fallbacks otherwise */

/* Spatial luxury – 2x breathing room where tokens exist */
:root {
  --luxury-section-padding: var(--luxury-section-padding, 3rem);
  --luxury-gap: var(--luxury-gap, 2rem);
  --luxury-motion-duration: var(--luxury-motion-duration, 600ms);
  --luxury-motion-ease: var(--luxury-motion-ease, ease-out);
  --luxury-btn-radius: var(--luxury-btn-radius, 2px);
}

/* CTAs – sharp or 2px radius; hover invert/fill (high-end) */
#main-content .btn-primary,
.portal-main-col .btn-primary,
.cp-main-col .btn-primary,
[data-dashboard-page] .btn-primary,
.control-plane-shell .btn-primary,
.btn.btn-primary {
  border-radius: var(--luxury-btn-radius) !important;
  font-weight: var(--luxury-btn-weight, 600);
  letter-spacing: 0.02em;
  transition: background-color var(--luxury-motion-duration) var(--luxury-motion-ease),
              color var(--luxury-motion-duration) var(--luxury-motion-ease),
              box-shadow var(--luxury-motion-duration) var(--luxury-motion-ease);
}
#main-content .btn-primary:hover,
.portal-main-col .btn-primary:hover,
[data-dashboard-page] .btn-primary:hover,
.btn.btn-primary:hover {
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.15);
}

/* Secondary/outline: hover invert (dark bg → light text) */
.btn-outline-primary,
.btn-outline-dark,
.btn-outline-secondary {
  border-radius: var(--luxury-btn-radius) !important;
  transition: background-color var(--luxury-motion-duration) var(--luxury-motion-ease),
              color var(--luxury-motion-duration) var(--luxury-motion-ease),
              border-color var(--luxury-motion-duration) var(--luxury-motion-ease);
}

/* Hairline borders and tonal sections (quiet interface) */
.card,
.cp-panel,
.dashboard-chart-card,
.stat-card,
.app-card {
  border-width: 1px;
  border-color: var(--luxury-border, rgba(10, 10, 10, 0.08));
}
html[data-theme="dark"] .card,
html[data-bs-theme="dark"] .card,
body.portal-backend-dark .card,
.control-plane-shell .card {
  border-color: var(--luxury-border, rgba(255, 255, 255, 0.1));
}

/* Motion – 600ms ease-out for surfaces (reveal, not pop) */
#main-content .card,
.portal-main-col .card,
[data-dashboard-page] .card,
.dashboard-chart-card,
.stat-card,
.app-card,
.alert,
.modal-content {
  transition: box-shadow var(--luxury-motion-duration) var(--luxury-motion-ease),
              transform var(--luxury-motion-duration) var(--luxury-motion-ease),
              border-color var(--luxury-motion-duration) var(--luxury-motion-ease);
}

/* Form controls – refined radius and focus */
.form-control,
.form-select {
  border-radius: var(--luxury-btn-radius) !important;
  transition: border-color var(--luxury-motion-duration) var(--luxury-motion-ease),
              box-shadow var(--luxury-motion-duration) var(--luxury-motion-ease);
}

/* Remove cheap defaults: no bright blue links where we use luxury palette */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--luxury-text, #1A1A1A);
}
html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item),
body.portal-backend-dark a:not(.btn):not(.nav-link):not(.dropdown-item) {
  color: var(--luxury-text, #F5F5F5);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
  color: var(--luxury-primary, #0A0A0A);
  transition: color var(--luxury-motion-duration) var(--luxury-motion-ease);
}

/* All-caps labels – letter-spacing (luxury typography) */
.text-uppercase.btn,
[data-dashboard-page] .section-title.text-uppercase,
.sidebar-section-title {
  letter-spacing: var(--luxury-letter-spacing-caps, 0.1em);
}