/*
 * Premium UI Overlay — Apple-Quality Design System
 * Loaded AFTER style.css to override visual properties only.
 * Zero functionality changes.
 */


/* ═══════════════════════════════════════════
   1. DESIGN TOKENS (CSS Custom Properties)
   ═══════════════════════════════════════════ */

:root {
  /* Typography */
  --premium-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --premium-tracking: -0.011em;
  --premium-tracking-tight: -0.02em;

  /* Neutrals */
  --premium-bg: #f5f5f7;
  --premium-surface: #ffffff;
  --premium-border: #e5e5ea;
  --premium-border-subtle: #f0f0f2;
  --premium-text-primary: #1d1d1f;
  --premium-text-secondary: #86868b;
  --premium-text-tertiary: #aeaeb2;

  /* Accent */
  --premium-accent: #6366f1;
  --premium-accent-hover: #5558e6;
  --premium-accent-light: rgba(99, 102, 241, 0.08);
  --premium-accent-focus: rgba(99, 102, 241, 0.24);

  /* Shadows */
  --premium-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --premium-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --premium-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --premium-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);

  /* Radii */
  --premium-radius-sm: 8px;
  --premium-radius-md: 12px;
  --premium-radius-lg: 16px;
  --premium-radius-xl: 20px;

  /* Spacing */
  --premium-space-1: 4px;
  --premium-space-2: 8px;
  --premium-space-3: 12px;
  --premium-space-4: 16px;
  --premium-space-5: 24px;
  --premium-space-6: 32px;
  --premium-space-8: 48px;

  /* Transitions */
  --premium-transition: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --premium-transition-fast: 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ═══════════════════════════════════════════
   2. GLOBAL TYPOGRAPHY & BODY
   ═══════════════════════════════════════════ */

body {
  font-family: var(--premium-font) !important;
  letter-spacing: var(--premium-tracking);
  color: var(--premium-text-primary);
  background-color: var(--premium-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--premium-font) !important;
  letter-spacing: var(--premium-tracking-tight);
  color: var(--premium-text-primary);
  font-weight: 600;
}

h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.625rem; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

p, span, a, label, td, th, li, small {
  font-family: var(--premium-font) !important;
}

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

a {
  color: var(--premium-accent);
  transition: color var(--premium-transition-fast);
}

a:hover {
  color: var(--premium-accent-hover);
}

::placeholder {
  color: var(--premium-text-tertiary) !important;
  opacity: 1 !important;
}


/* ═══════════════════════════════════════════
   3. CARDS
   ═══════════════════════════════════════════ */

.card {
  border: 1px solid var(--premium-border-subtle) !important;
  border-radius: var(--premium-radius-lg) !important;
  box-shadow: var(--premium-shadow-sm) !important;
  transition: box-shadow var(--premium-transition), transform var(--premium-transition);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--premium-shadow-md) !important;
}

.card-body {
  padding: var(--premium-space-5) !important;
}

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--premium-border-subtle);
  padding: var(--premium-space-4) var(--premium-space-5);
}

.radius-10 {
  border-radius: var(--premium-radius-lg) !important;
}

.radius-30 {
  border-radius: 30px;
}


/* ═══════════════════════════════════════════
   4. BUTTONS
   ═══════════════════════════════════════════ */

.btn {
  font-family: var(--premium-font) !important;
  font-weight: 500;
  letter-spacing: var(--premium-tracking);
  border-radius: var(--premium-radius-sm) !important;
  padding: 0.5rem 1.25rem;
  transition: all var(--premium-transition);
  border-width: 1px;
  font-size: 0.875rem;
}

.btn-primary {
  --bs-btn-bg: var(--premium-accent) !important;
  --bs-btn-border-color: var(--premium-accent) !important;
  --bs-btn-hover-bg: var(--premium-accent-hover) !important;
  --bs-btn-hover-border-color: var(--premium-accent-hover) !important;
  --bs-btn-active-bg: #4f46e5 !important;
  --bs-btn-active-border-color: #4f46e5 !important;
  --bs-btn-disabled-bg: var(--premium-accent) !important;
  --bs-btn-disabled-border-color: var(--premium-accent) !important;
  background-color: var(--premium-accent) !important;
  border-color: var(--premium-accent) !important;
}

.btn-primary:hover {
  background-color: var(--premium-accent-hover) !important;
  border-color: var(--premium-accent-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-primary {
  --bs-btn-color: var(--premium-accent) !important;
  --bs-btn-border-color: var(--premium-accent) !important;
  --bs-btn-hover-bg: var(--premium-accent) !important;
  --bs-btn-hover-border-color: var(--premium-accent) !important;
  --bs-btn-active-bg: var(--premium-accent) !important;
  --bs-btn-active-border-color: var(--premium-accent) !important;
  color: var(--premium-accent) !important;
  border-color: var(--premium-accent) !important;
}

.btn-outline-primary:hover {
  color: #fff !important;
  background-color: var(--premium-accent) !important;
}

.btn-light {
  background-color: var(--premium-bg) !important;
  border-color: var(--premium-border) !important;
  color: var(--premium-text-primary) !important;
}

.btn-light:hover {
  background-color: #ececee !important;
  border-color: #d1d1d6 !important;
}

.btn-success {
  background-color: #34c759 !important;
  border-color: #34c759 !important;
}

.btn-success:hover {
  background-color: #2db84e !important;
  border-color: #2db84e !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}


/* ═══════════════════════════════════════════
   5. FORM CONTROLS
   ═══════════════════════════════════════════ */

.form-control,
.form-select {
  font-family: var(--premium-font) !important;
  border: 1px solid var(--premium-border) !important;
  border-radius: var(--premium-radius-sm) !important;
  padding: 0.6rem 0.875rem;
  font-size: 0.875rem;
  color: var(--premium-text-primary);
  background-color: var(--premium-surface);
  transition: border-color var(--premium-transition-fast), box-shadow var(--premium-transition-fast);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--premium-accent) !important;
  box-shadow: 0 0 0 3px var(--premium-accent-focus) !important;
  outline: none;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--premium-bg) !important;
  opacity: 0.7;
}

.form-label,
.col-form-label {
  font-weight: 500;
  font-size: 0.8125rem;
  color: var(--premium-text-secondary);
  letter-spacing: 0;
}

.form-check-input {
  border-radius: 4px;
  border-color: var(--premium-border);
  transition: all var(--premium-transition-fast);
}

.form-check-input:checked {
  background-color: var(--premium-accent);
  border-color: var(--premium-accent);
}

.form-check-input:focus {
  box-shadow: 0 0 0 3px var(--premium-accent-focus);
  border-color: var(--premium-accent);
}

.input-group-text {
  border: 1px solid var(--premium-border) !important;
  border-radius: var(--premium-radius-sm) !important;
  background-color: var(--premium-bg) !important;
  font-size: 0.875rem;
  color: var(--premium-text-secondary);
}


/* ═══════════════════════════════════════════
   6. SIDEBAR
   ═══════════════════════════════════════════ */

.sidebar-wrapper {
  background-color: var(--premium-surface) !important;
  border-right: 1px solid var(--premium-border-subtle) !important;
  box-shadow: none !important;
}

.sidebar-wrapper .sidebar-header {
  background-color: var(--premium-surface) !important;
  border-right: 1px solid var(--premium-border-subtle) !important;
  border-bottom: none !important;
  height: 64px;
}

.sidebar-wrapper .sidebar-header .logo-text {
  font-family: var(--premium-font) !important;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--premium-accent) !important;
  letter-spacing: -0.02em;
}

.sidebar-wrapper .metismenu {
  padding: var(--premium-space-3);
}

.sidebar-wrapper .metismenu a {
  font-family: var(--premium-font) !important;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--premium-text-secondary);
  padding: 8px 12px;
  border-radius: var(--premium-radius-sm) !important;
  border: none !important;
  transition: all var(--premium-transition-fast);
  letter-spacing: 0;
}

.sidebar-wrapper .metismenu a:hover {
  color: var(--premium-text-primary) !important;
  background-color: var(--premium-bg) !important;
}

.sidebar-wrapper .metismenu .mm-active > a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus {
  color: var(--premium-accent) !important;
  background-color: var(--premium-accent-light) !important;
}

.sidebar-wrapper .metismenu ul {
  background: transparent !important;
  border: none !important;
  padding-left: var(--premium-space-2);
}

.sidebar-wrapper .metismenu ul a {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--premium-text-secondary);
  padding: 6px 12px 6px 16px;
}

.sidebar-wrapper .metismenu ul a:hover {
  color: var(--premium-text-primary) !important;
}

.sidebar-wrapper .metismenu li + li {
  margin-top: 2px;
}

.menu-label {
  font-family: var(--premium-font) !important;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--premium-text-tertiary) !important;
  padding: var(--premium-space-5) var(--premium-space-3) var(--premium-space-2) var(--premium-space-3);
}


/* ═══════════════════════════════════════════
   7. TOP HEADER
   ═══════════════════════════════════════════ */

.top-header {
  background-color: var(--premium-surface) !important;
  border-bottom: 1px solid var(--premium-border-subtle) !important;
  box-shadow: var(--premium-shadow-xs) !important;
  height: 64px;
}

.top-header .navbar .top-navbar-right .nav-item {
  background-color: transparent !important;
  border-radius: var(--premium-radius-sm);
  width: 36px;
  height: 36px;
  transition: background-color var(--premium-transition-fast);
}

.top-header .navbar .top-navbar-right .nav-item:hover {
  background-color: var(--premium-bg) !important;
}

.top-header .navbar .top-navbar-right .nav-link {
  color: var(--premium-text-secondary) !important;
  font-size: 18px;
}

.toggle-icon {
  color: var(--premium-text-secondary) !important;
  border-radius: var(--premium-radius-sm);
  transition: all var(--premium-transition-fast);
}

.toggle-icon:hover {
  background-color: var(--premium-bg) !important;
  color: var(--premium-text-primary) !important;
}


/* ═══════════════════════════════════════════
   8. DROPDOWNS
   ═══════════════════════════════════════════ */

.dropdown-menu {
  border: 1px solid var(--premium-border-subtle) !important;
  border-radius: var(--premium-radius-md) !important;
  box-shadow: var(--premium-shadow-lg) !important;
  padding: var(--premium-space-2) !important;
  animation: premiumDropIn 0.2s ease-out;
}

@keyframes premiumDropIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-item {
  font-family: var(--premium-font) !important;
  font-size: 0.875rem;
  border-radius: var(--premium-radius-sm) !important;
  padding: 0.5rem 0.75rem;
  transition: background-color var(--premium-transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--premium-bg) !important;
  color: var(--premium-text-primary) !important;
}

.dropdown-divider {
  border-color: var(--premium-border-subtle);
  margin: var(--premium-space-1) 0;
}

.dropdown-user-setting .dropdown-menu {
  border-radius: var(--premium-radius-md) !important;
  width: 240px;
}

/* Hide the triangle caret on dropdowns for cleaner look */
.top-header .navbar .dropdown-menu::after,
.top-header .navbar .dropdown-user-setting .dropdown-menu::after,
.top-header .navbar .dropdown-large .dropdown-menu::after {
  display: none !important;
}


/* ═══════════════════════════════════════════
   9. TABLES
   ═══════════════════════════════════════════ */

.table {
  font-family: var(--premium-font) !important;
  font-size: 0.8125rem;
  border-color: var(--premium-border-subtle);
}

.table th {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--premium-text-secondary);
  padding: 0.875rem 1rem;
  border-bottom-width: 1px;
}

.table td {
  padding: 0.875rem 1rem;
  vertical-align: middle;
  color: var(--premium-text-primary);
  border-bottom: 1px solid var(--premium-border-subtle);
}

.table-light {
  --bs-table-bg: var(--premium-bg) !important;
  --bs-table-color: var(--premium-text-secondary);
  border-color: var(--premium-border-subtle);
}

.table-hover tbody tr {
  transition: background-color var(--premium-transition-fast);
}

.table-hover tbody tr:hover {
  --bs-table-hover-bg: rgba(99, 102, 241, 0.03);
}


/* ═══════════════════════════════════════════
   10. PROGRESS BARS
   ═══════════════════════════════════════════ */

.progress {
  height: 4px !important;
  border-radius: 2px;
  background-color: var(--premium-border) !important;
  overflow: hidden;
}

.progress-bar {
  border-radius: 2px;
  transition: width 0.6s ease;
}


/* ═══════════════════════════════════════════
   11. ALERTS
   ═══════════════════════════════════════════ */

.alert {
  border-radius: var(--premium-radius-md) !important;
  font-size: 0.875rem;
  border: none !important;
  box-shadow: none;
}

.alert-danger {
  background-color: #fef2f2 !important;
  color: #dc2626 !important;
}


/* ═══════════════════════════════════════════
   12. BREADCRUMBS
   ═══════════════════════════════════════════ */

.breadcrumb-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--premium-text-primary);
  border-right: 1px solid var(--premium-border) !important;
}

.page-breadcrumb .breadcrumb li a {
  font-size: 0.875rem;
  color: var(--premium-text-secondary);
}

.page-breadcrumb .breadcrumb li.breadcrumb-item {
  font-size: 0.875rem;
}


/* ═══════════════════════════════════════════
   13. PAGE LAYOUT
   ═══════════════════════════════════════════ */

.wrapper .page-content {
  padding: var(--premium-space-6) !important;
}

.wrapper .page-content-wrapper {
  margin-top: 64px;
}


/* ═══════════════════════════════════════════
   14. FOOTER
   ═══════════════════════════════════════════ */

.footer {
  background-color: var(--premium-bg) !important;
  border-top: 1px solid var(--premium-border-subtle) !important;
  color: var(--premium-text-tertiary);
  font-size: 0.8125rem;
}


/* ═══════════════════════════════════════════
   15. BACK TO TOP
   ═══════════════════════════════════════════ */

.back-to-top {
  background-color: var(--premium-accent) !important;
  border-radius: var(--premium-radius-sm);
  box-shadow: var(--premium-shadow-md);
  transition: all var(--premium-transition);
}

.back-to-top:hover {
  transform: translateY(-2px);
  box-shadow: var(--premium-shadow-lg);
}


/* ═══════════════════════════════════════════
   16. SWITCHER
   ═══════════════════════════════════════════ */

.btn-switcher {
  background-color: var(--premium-accent) !important;
  border-color: var(--premium-accent) !important;
  border-radius: var(--premium-radius-sm) 0 0 var(--premium-radius-sm) !important;
}


/* ═══════════════════════════════════════════
   17. BADGES & MISC
   ═══════════════════════════════════════════ */

.bg-primary {
  background-color: var(--premium-accent) !important;
}

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

.border-primary {
  border-color: var(--premium-accent) !important;
}

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

/* Semantic colors - softer palette */
.bg-success { background-color: #34c759 !important; }
.bg-danger { background-color: #ff3b30 !important; }
.bg-warning { background-color: #ff9500 !important; }
.bg-info { background-color: #5ac8fa !important; }

.text-success { color: #34c759 !important; }
.text-danger { color: #ff3b30 !important; }
.text-warning { color: #ff9500 !important; }
.text-info { color: #5ac8fa !important; }

.border-success { border-color: #34c759 !important; }
.border-danger { border-color: #ff3b30 !important; }
.border-warning { border-color: #ff9500 !important; }
.border-info { border-color: #5ac8fa !important; }


/* ═══════════════════════════════════════════
   18. LOGIN PAGE
   ═══════════════════════════════════════════ */

.bg-theme.bg-theme2 {
  background: linear-gradient(145deg, #f5f5f7 0%, #e8e8ed 100%) !important;
}


/* ═══════════════════════════════════════════
   19. WIDGET ICONS
   ═══════════════════════════════════════════ */

.widget-icon,
.widget-icon-2 {
  border-radius: var(--premium-radius-md) !important;
  background-color: var(--premium-bg) !important;
}

.icon-badge {
  border-radius: var(--premium-radius-md) !important;
}


/* ═══════════════════════════════════════════
   20. SELECT2 REFINEMENTS (if used)
   ═══════════════════════════════════════════ */

.form-select {
  background-size: 14px 10px;
  padding-right: 2.25rem !important;
  min-width: 5rem;
}


/* ═══════════════════════════════════════════
   21. MICRO-INTERACTIONS
   ═══════════════════════════════════════════ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background-color: var(--premium-accent-light);
  color: var(--premium-text-primary);
}

/* Focus outline for accessibility */
*:focus-visible {
  outline: 2px solid var(--premium-accent);
  outline-offset: 2px;
}

/* Smooth image rendering */
img {
  image-rendering: -webkit-optimize-contrast;
}


/* ═══════════════════════════════════════════
   22. OFFCANVAS (Theme Switcher)
   ═══════════════════════════════════════════ */

.offcanvas {
  border-radius: var(--premium-radius-lg) 0 0 var(--premium-radius-lg);
}

.offcanvas-header {
  border-bottom: 1px solid var(--premium-border-subtle) !important;
}

.offcanvas-title {
  font-weight: 600;
  font-size: 1rem;
}