/* ============================================
   Xboard Theme — Professional UI Overrides
   Targets Naive UI (css-render injected styles)
   All overrides use !important where needed
   ============================================ */

/* ------------------------------------------
   1. Global Typography & Reset
   ------------------------------------------ */
body {
  font-family: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  font-feature-settings: 'tnum' 'cv01' !important;
}

/* ------------------------------------------
   2. Card Styles
   ------------------------------------------ */
.n-card {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.n-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

.n-card .n-card-header {
  font-weight: 600 !important;
}

/* ------------------------------------------
   3. Sidebar / Navigation
   ------------------------------------------ */
.n-layout-sider {
  border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
  transition: background-color 0.25s ease, width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.n-menu-item-content {
  border-radius: 8px !important;
  margin: 2px 8px !important;
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s ease !important;
}

.n-menu-item-content--selected,
.n-menu-item-content--selected:hover {
  font-weight: 500 !important;
}

.n-menu-item-content--selected::before {
  border-radius: 8px !important;
}

.n-menu-item-content--selected::after {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--n-item-color-active);
}

/* ------------------------------------------
   4. Dashboard Stat Cards
   ------------------------------------------ */
.n-statistic .n-statistic-value {
  font-weight: 700 !important;
  font-feature-settings: 'tnum' !important;
  font-variant-numeric: tabular-nums !important;
}

.n-statistic .n-statistic-value__content {
  font-feature-settings: 'tnum' !important;
}

/* ------------------------------------------
   5. Data Tables
   ------------------------------------------ */
.n-data-table {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.n-data-table .n-data-table-wrapper {
  border-radius: 12px !important;
}

.n-data-table .n-data-table-thead {
  font-weight: 600 !important;
}

.n-data-table .n-data-table-th {
  background-color: rgba(0, 0, 0, 0.02) !important;
  font-size: 13px !important;
  text-transform: none !important;
}

.n-data-table .n-data-table-tr:hover .n-data-table-td {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

.n-data-table .n-data-table-td {
  transition: background-color 0.15s ease !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* ------------------------------------------
   6. Form Elements
   ------------------------------------------ */
.n-input {
  border-radius: 8px !important;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.n-input:focus-within {
  box-shadow: 0 0 0 2px rgba(24, 160, 88, 0.15) !important;
}

.n-select .n-base-selection {
  border-radius: 8px !important;
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.n-select .n-base-selection:focus-within {
  box-shadow: 0 0 0 2px rgba(24, 160, 88, 0.15) !important;
}

/* ------------------------------------------
   7. Buttons
   ------------------------------------------ */
.n-button {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: transform 0.15s ease,
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.2s ease,
              border-color 0.2s ease !important;
}

.n-button--primary-type {
  box-shadow: 0 1px 3px rgba(24, 160, 88, 0.3) !important;
}

.n-button--primary-type:hover {
  box-shadow: 0 2px 8px rgba(24, 160, 88, 0.35) !important;
}

.n-button:active {
  transform: scale(0.98);
}

/* ------------------------------------------
   8. Global Transitions & Animations
   ------------------------------------------ */
.n-layout-content {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.n-tag {
  border-radius: 6px !important;
  font-weight: 500 !important;
}

.n-dialog {
  border-radius: 14px !important;
}

.n-drawer-body-content-wrapper {
  animation: slideIn 0.25s ease-out;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ------------------------------------------
   9. Scrollbar
   ------------------------------------------ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------
   10. Login Page
   ------------------------------------------ */
.n-card[style*="max-width"],
.n-card[style*="width: 400"],
.n-card[style*="width: 380"],
.n-card[style*="width:400"],
.n-card[style*="width:380"] {
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(20px) !important;
}

/* ============================================
   11. Dark Mode Overrides
   ============================================ */
html.dark body {
  background-color: #1a1a2e !important;
}

html.dark .n-layout {
  background-color: #1a1a2e !important;
}

html.dark .n-layout-sider {
  background-color: #16162a !important;
  border-right-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .n-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

html.dark .n-card:hover {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html.dark .n-data-table .n-data-table-th {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

html.dark .n-data-table .n-data-table-tr:hover .n-data-table-td {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

html.dark .n-data-table .n-data-table-td {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html.dark .n-input:focus-within {
  box-shadow: 0 0 0 2px rgba(24, 160, 88, 0.25) !important;
}

html.dark .n-select .n-base-selection:focus-within {
  box-shadow: 0 0 0 2px rgba(24, 160, 88, 0.25) !important;
}

/* Dark scrollbar */
html.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Dark mode gradient border on stat cards */
html.dark .n-statistic {
  position: relative;
}

/* Dark login page */
html.dark .n-card[style*="max-width"],
html.dark .n-card[style*="width: 400"],
html.dark .n-card[style*="width: 380"],
html.dark .n-card[style*="width:400"],
html.dark .n-card[style*="width:380"] {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
}

/* Improve text contrast in dark mode */
html.dark .n-text {
  opacity: 0.92;
}

/* Dropdown / popover in dark mode */
html.dark .n-popover {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html.dark .n-modal-body-wrapper .n-card {
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}