// =============================================================================
// ADOXEDU - MAIN CONSOLIDATED SCSS FILE
// =============================================================================
// This file contains all styles from the application consolidated into one file.
// Organized by: Variables > Base > Components > Layouts > Pages > Utilities > Dark Mode
// =============================================================================

// =============================================================================
// 1. VARIABLES
// =============================================================================

// Colors - Primary Palette
$color-primary: #1a1a1a;
$color-primary-hover: #333;
$color-success: #22c55e;
$color-warning: #f59e0b;
$color-danger: #ef4444;
$color-info: #3b82f6;
$color-purple: #7c3aed;
$color-pink: #f472b6;
$color-cyan: #06b6d4;

// Colors - Background
$bg-body: #f8f9fa;
$bg-light: #f3f4f6;
$bg-muted: #f0f0f0;

// Colors - Text
$text-primary: #374151;
$text-muted: #6b7280;
$text-meta: #9ca3af;

// Colors - Border
$border-color: #e5e7eb;
$border-color-light: #d1d5db;

// Colors - Labels (Light Mode)
$label-success-bg: #dcfce7;
$label-success-color: #166534;
$label-warning-bg: #fef3c7;
$label-warning-color: #92400e;
$label-danger-bg: #fee2e2;
$label-danger-color: #991b1b;
$label-primary-bg: #dbeafe;
$label-primary-color: #1e40af;
$label-secondary-bg: #f3f4f6;
$label-secondary-color: #374151;

// Dark Mode Colors
$dark-bg-primary: #0f172a;
$dark-bg-secondary: #1e293b;
$dark-bg-card: #1e293b;
$dark-text-primary: #f8fafc;
$dark-text-secondary: #94a3b8;
$dark-border-color: #334155;
$dark-link-color: #60a5fa;
$dark-link-hover: #93c5fd;

// Spacing
$spacing-xs: 2px;
$spacing-sm: 4px;
$spacing-md: 8px;
$spacing-lg: 12px;
$spacing-xl: 16px;
$spacing-2xl: 20px;
$spacing-3xl: 40px;

// Border Radius
$radius-sm: 4px;
$radius-md: 8px;
$radius-lg: 12px;
$radius-xl: 16px;
$radius-round: 50%;

// Font Sizes
$font-size-xs: 9px;
$font-size-sm: 10px;
$font-size-base: 11px;
$font-size-md: 13px;
$font-size-lg: 14px;
$font-size-xl: 16px;
$font-size-2xl: 18px;
$font-size-3xl: 20px;

// Z-Index
$z-dropdown: 1000;
$z-sticky: 1020;
$z-fixed: 1030;
$z-modal-backdrop: 1040;
$z-modal: 1050;
$z-toast: 10000;
$z-skip-link: 10001;
$z-page-loader: 10002;

// =============================================================================
// 1.5 THEME IMPORTS
// =============================================================================
// Import the skinning/theming system for client-specific brand themes
@import 'themes/index';

// =============================================================================
// 2. CSS CUSTOM PROPERTIES
// =============================================================================

:root {
  --color-primary: #{$color-primary};
  --color-success: #{$color-success};
  --color-warning: #{$color-warning};
  --color-danger: #{$color-danger};
}

// =============================================================================
// 3. BASE STYLES
// =============================================================================

html {
  background: inherit;
}

body {
  background-color: $bg-body;
  min-height: 100vh;
}

// =============================================================================
// 4. UIKIT OVERRIDES
// =============================================================================

// Dropdown z-index fix - must be higher than other elements
.uk-dropdown {
  z-index: 1050 !important;
}

// Cards
.uk-card {
  border-radius: $radius-lg;
  border: 1px solid $border-color;
  box-shadow: none;
  overflow: visible; // Changed from hidden to allow dropdowns to show
}

.uk-card-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

// Tabs
.uk-tab > li > a {
  border-radius: $radius-md;
  padding: $spacing-md $spacing-xl;
}

.uk-tab > li.uk-active > a {
  background: $bg-light;
  border-color: transparent;
}

// Labels
.uk-label {
  border-radius: $radius-sm;
  font-size: $font-size-base;
  padding: $spacing-xs $spacing-md;
}

.uk-label-success {
  background: $label-success-bg;
  color: $label-success-color;
}

.uk-label-warning {
  background: $label-warning-bg;
  color: $label-warning-color;
}

.uk-label-danger {
  background: $label-danger-bg;
  color: $label-danger-color;
}

.uk-label-primary {
  background: $label-primary-bg;
  color: $label-primary-color;
}

.uk-label-secondary {
  background: $label-secondary-bg;
  color: $label-secondary-color;
}

// Subnav
.uk-subnav {
  margin-left: -$spacing-xl;

  > * {
    padding-left: $spacing-xl;
  }

  > li > a {
    color: $text-muted;
    font-size: $font-size-md;
    padding: $spacing-md $spacing-lg;
    transition: color 0.15s ease;

    &:hover {
      color: $text-primary;
    }
  }

  > li.uk-active > a {
    color: $color-primary;
  }
}

// Subnav Pill
.uk-subnav-pill {
  > li > a {
    background: transparent;
    border-radius: $radius-md;
    padding: $spacing-md $spacing-xl;

    &:hover {
      background: $bg-light;
      color: $text-primary;
    }
  }

  > li.uk-active > a {
    background: $color-primary;
    color: white;
  }
}

// Subnav Divider
.uk-subnav-divider > :nth-child(n+2):not(.uk-first-column)::before {
  border-left-color: $border-color;
}

// Progress
.uk-progress {
  height: $spacing-md;
  border-radius: $radius-sm;
}

// Buttons
.uk-button-primary {
  background: $color-primary;
  border-radius: $radius-md;

  &:hover {
    background: $color-primary-hover;
  }
}

.uk-button-default {
  border-radius: $radius-md;
}

// Form Elements
.uk-input,
.uk-select,
.uk-textarea {
  border-radius: $radius-md;
}

// =============================================================================
// 5. COMPONENT STYLES
// =============================================================================

// -----------------------------------------------------------------------------
// 5.1 Toast Notifications
// -----------------------------------------------------------------------------
.toast-container {
  position: fixed;
  top: $spacing-2xl;
  right: $spacing-2xl;
  z-index: $z-toast;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 350px;
}

.toast {
  padding: $spacing-lg $spacing-xl;
  border-radius: $radius-md;
  background: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideIn 0.3s ease;
  border-left: 4px solid $color-primary;

  &.success,
  &-success {
    border-left-color: $color-success;
  }

  &.error,
  &-error {
    border-left-color: $color-danger;
  }

  &.warning,
  &-warning {
    border-left-color: $color-warning;
  }

  &.info,
  &-info {
    border-left-color: $color-info;
  }

  &.hiding {
    animation: slideOut 0.3s ease forwards;
  }

  &-close {
    margin-left: auto;
    cursor: pointer;
    opacity: 0.5;

    &:hover {
      opacity: 1;
    }
  }
}

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

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

// -----------------------------------------------------------------------------
// 5.2 Skeleton Loaders
// -----------------------------------------------------------------------------
.skeleton {
  background: linear-gradient(90deg, $bg-muted 25%, #e0e0e0 50%, $bg-muted 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: $radius-sm;
}

.skeleton-text {
  height: $font-size-lg;
  margin-bottom: $spacing-md;
}

.skeleton-title {
  height: $font-size-3xl;
  width: 60%;
  margin-bottom: $spacing-lg;
}

.skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: $radius-round;
}

.skeleton-button {
  height: 32px;
  width: 80px;
}

.skeleton-card {
  height: 120px;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

// -----------------------------------------------------------------------------
// 5.3 Empty States
// -----------------------------------------------------------------------------
.empty-state {
  text-align: center;
  padding: $spacing-3xl $spacing-2xl;

  &-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto $spacing-xl;
    background: $bg-light;
    border-radius: $radius-round;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: $text-meta;
  }

  &-title {
    font-size: $font-size-2xl;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: $spacing-md;
  }

  &-description,
  &-text {
    color: $text-muted;
    margin-bottom: $spacing-xl;
  }
}

// -----------------------------------------------------------------------------
// 5.4 Back to Top Button
// -----------------------------------------------------------------------------
.back-to-top {
  position: fixed;
  bottom: $spacing-2xl;
  right: $spacing-2xl;
  width: 40px;
  height: 40px;
  border-radius: $radius-round;
  background: $color-primary;
  color: white;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);

  &.visible {
    opacity: 1;
    visibility: visible;
  }

  &:hover {
    background: $color-primary-hover;
    transform: translateY(-2px);
  }
}

// -----------------------------------------------------------------------------
// 5.5 Page Loading Indicator
// -----------------------------------------------------------------------------
.page-loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, $color-info, $color-purple, $color-info);
  background-size: 200% 100%;
  animation: loading 1s linear infinite;
  z-index: $z-page-loader;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

// -----------------------------------------------------------------------------
// 5.6 Skip Link (Accessibility)
// -----------------------------------------------------------------------------
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: $color-primary;
  color: white;
  padding: $spacing-md $spacing-xl;
  z-index: $z-skip-link;
  transition: top 0.3s;

  &:focus {
    top: 0;
  }
}

// -----------------------------------------------------------------------------
// 5.7 HTMX Loading Indicator
// -----------------------------------------------------------------------------
.htmx-indicator {
  display: none;
  opacity: 0;
  transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
  opacity: 1;
}

// -----------------------------------------------------------------------------
// 5.8 Keyboard Shortcut Hints
// -----------------------------------------------------------------------------
.kbd {
  display: inline-block;
  padding: $spacing-xs 6px;
  font-size: $font-size-base;
  font-family: monospace;
  background: $bg-light;
  border: 1px solid $border-color-light;
  border-radius: $radius-sm;
  box-shadow: 0 1px 0 $border-color-light;
}

// -----------------------------------------------------------------------------
// 5.9 Progress Steps (Student Portal)
// -----------------------------------------------------------------------------
.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: $spacing-2xl;
}

.progress-step {
  flex: 1;
  text-align: center;
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: $border-color;
  }

  &:last-child::after {
    display: none;
  }

  &-icon {
    width: 30px;
    height: 30px;
    border-radius: $radius-round;
    background: $border-color;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
  }

  &.active .progress-step-icon {
    background: $color-primary;
    color: white;
  }

  &.completed .progress-step-icon {
    background: $color-success;
    color: white;
  }

  &.completed::after {
    background: $color-success;
  }
}

// Tooltip improvements
[uk-tooltip] {
  cursor: help;
}

// =============================================================================
// 6. LAYOUT STYLES
// =============================================================================

// -----------------------------------------------------------------------------
// 6.1 Messages Container
// -----------------------------------------------------------------------------
.messages-container {
  min-height: 400px;
}

.messages-sidebar {
  &.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: $z-dropdown;
    background: white;
    overflow-y: auto;
  }
}

// =============================================================================
// 7. AUTH PAGES
// =============================================================================

// -----------------------------------------------------------------------------
// 7.1 Auth Page Body Centering
// -----------------------------------------------------------------------------
// Applied when body contains login-card, register-card, or forgot-password elements
body:has(.login-card),
body:has(.register-card),
body:has(.forgot-password-container) {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

body:has(.register-card) {
  padding: 40px 20px;
}

// Fallback for browsers without :has() support - auth pages
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

// Forgot password specific container
.forgot-password-container {
  width: 100%;
  max-width: 400px;
}

// -----------------------------------------------------------------------------
// 7.2 Login Card
// -----------------------------------------------------------------------------
.login-card {
  max-width: 400px;
  width: 100%;
  border-radius: $radius-xl;
  border: 1px solid $border-color;
  margin: 0 auto;
}

// -----------------------------------------------------------------------------
// 7.3 Register Card
// -----------------------------------------------------------------------------
.register-card {
  max-width: 500px;
  width: 100%;
  border-radius: $radius-xl;
  border: 1px solid $border-color;
  margin: 0 auto;
}

// -----------------------------------------------------------------------------
// 7.4 Theme Toggle Button
// -----------------------------------------------------------------------------
.theme-toggle {
  position: absolute;
  top: $spacing-2xl;
  right: $spacing-2xl;
}

// -----------------------------------------------------------------------------
// 7.5 Logo Badge (Auth Pages)
// -----------------------------------------------------------------------------
.auth-logo-badge {
  width: 32px;
  height: 32px;
  background: $color-primary;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.auth-logo-badge-lg {
  width: 48px;
  height: 48px;
  background: $color-primary;
  color: white;
  font-size: $font-size-xl;
  font-weight: 600;
}

// =============================================================================
// 8. ADMIN PORTAL STYLES
// =============================================================================

// -----------------------------------------------------------------------------
// 8.1 Admin Activity Feed
// -----------------------------------------------------------------------------
.admin-activity-feed {
  // Activity feed specific styles
}

// -----------------------------------------------------------------------------
// 8.2 Admin Stat Cards
// -----------------------------------------------------------------------------
.admin-stat-card {
  // Stat card specific styles
}

// -----------------------------------------------------------------------------
// 8.3 Admin Notifications Settings
// -----------------------------------------------------------------------------
.admin-notifications-settings {
  // Notification settings specific styles
}

// =============================================================================
// 9. STUDENT PORTAL STYLES
// =============================================================================

// -----------------------------------------------------------------------------
// 9.1 Student Messages
// -----------------------------------------------------------------------------
.student-messages {
  .conversation-card {
    cursor: pointer;
  }

  .message-time {
    flex-shrink: 0;
  }
}

// -----------------------------------------------------------------------------
// 9.2 Student Chat Modal
// -----------------------------------------------------------------------------
.student-chat-modal {
  .chat-body {
    height: 300px;
    overflow-y: auto;
  }
}

// =============================================================================
// 10. COUNSELOR PORTAL STYLES
// =============================================================================

// -----------------------------------------------------------------------------
// 10.1 Counselor Schedule/Calendar
// -----------------------------------------------------------------------------
.counselor-calendar {
  .calendar-day {
    height: 80px;
    vertical-align: top;
    cursor: pointer;

    &.selected,
    &.today {
      background: $bg-muted;
    }
  }

  .calendar-meeting-label {
    font-size: $font-size-xs;
    padding: $spacing-xs $spacing-sm;
  }

  .calendar-meeting-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    min-width: 6px;
  }
}

.counselor-meeting-time {
  min-width: 50px;
  flex-shrink: 0;
}

.counselor-meeting-time-lg {
  min-width: 60px;
}

// =============================================================================
// 11. CHANCELLOR PORTAL STYLES
// =============================================================================

// -----------------------------------------------------------------------------
// 11.1 Chancellor System Alerts
// -----------------------------------------------------------------------------
.chancellor-alert-card {
  border-left: 4px solid $color-danger;
}

// -----------------------------------------------------------------------------
// 11.2 Chancellor Network Stats
// -----------------------------------------------------------------------------
.chancellor-network-in {
  background: $label-primary-bg;
}

.chancellor-network-out {
  background: $label-danger-bg;
}

// -----------------------------------------------------------------------------
// 11.3 Chancellor Logo Badge
// -----------------------------------------------------------------------------
.chancellor-logo-badge {
  width: 32px;
  height: 32px;
  background: $color-purple;
  color: white;
  font-size: $font-size-lg;
}

// =============================================================================
// 12. UTILITY CLASSES
// =============================================================================

// -----------------------------------------------------------------------------
// 12.1 Responsive Utilities
// -----------------------------------------------------------------------------
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.min-w-0 {
  min-width: 0;
}

// -----------------------------------------------------------------------------
// 12.2 Flexbox Utilities
// -----------------------------------------------------------------------------
.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-column {
  flex-direction: column;
}

// -----------------------------------------------------------------------------
// 12.3 Dimension Utilities
// -----------------------------------------------------------------------------
.w-32 {
  width: 32px;
}

.h-32 {
  height: 32px;
}

.w-40 {
  width: 40px;
}

.h-40 {
  height: 40px;
}

.w-48 {
  width: 48px;
}

.h-48 {
  height: 48px;
}

.w-200 {
  width: 200px;
}

.max-h-400 {
  max-height: 400px;
  overflow-y: auto;
}

// -----------------------------------------------------------------------------
// 12.4 Color Utilities
// -----------------------------------------------------------------------------
.bg-primary-dark {
  background: $color-primary;
  color: white;
}

.bg-light-blue {
  background: $label-primary-bg;
}

.bg-light-red {
  background: $label-danger-bg;
}

.bg-light-green {
  background: $label-success-bg;
}

.bg-light-yellow {
  background: $label-warning-bg;
}

// -----------------------------------------------------------------------------
// 12.5 Badge Utilities
// -----------------------------------------------------------------------------
.notification-badge {
  font-size: $font-size-sm;
  padding: $spacing-xs 5px;
}

// -----------------------------------------------------------------------------
// 12.6 Focus States (Accessibility)
// -----------------------------------------------------------------------------
*:focus-visible {
  outline: 2px solid $color-info;
  outline-offset: 2px;
}

.uk-button:focus-visible,
.uk-input:focus-visible,
.uk-select:focus-visible,
.uk-textarea:focus-visible {
  outline: 2px solid $color-info;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

// =============================================================================
// 13. RESPONSIVE STYLES
// =============================================================================

// -----------------------------------------------------------------------------
// 13.1 Tablet (max-width: 959px)
// -----------------------------------------------------------------------------
@media (max-width: 959px) {
  // Header/Navbar
  header {
    .uk-navbar {
      min-height: 56px;
    }

    .uk-navbar-item {
      padding: 0 $spacing-md;
    }

    .uk-logo {
      font-size: $font-size-lg;

      span:first-child {
        width: 28px !important;
        height: 28px !important;
        font-size: $font-size-sm !important;
      }
    }

    // Hide profile text on tablet
    .uk-visible\@m {
      display: none !important;
    }

    .uk-icon-link {
      padding: $spacing-md;
    }
  }

  .uk-tab {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;

    > li {
      flex-shrink: 0;

      > a {
        white-space: nowrap;
        padding: 6px $spacing-lg;
        font-size: $font-size-lg;
      }
    }
  }

  // Subnav scrollable
  .uk-subnav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;

    > li > a {
      white-space: nowrap;
    }
  }

  .uk-heading-small {
    font-size: 1.5rem;
  }

  .uk-container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .uk-navbar-center {
    display: none;
  }

  // Dropdowns
  .uk-dropdown {
    min-width: 180px;
  }

  // Table mobile improvements
  .uk-table th,
  .uk-table td {
    padding: $spacing-md 10px;
    font-size: $font-size-md;
    white-space: nowrap;
  }

  .uk-table th:first-child,
  .uk-table td:first-child {
    padding-left: 0;
  }

  .uk-table th:last-child,
  .uk-table td:last-child {
    padding-right: 0;
  }

  // Messages responsive
  .messages-sidebar {
    display: none;
  }

  .messages-main {
    width: 100% !important;
  }
}

// -----------------------------------------------------------------------------
// 13.2 Mobile (max-width: 639px)
// -----------------------------------------------------------------------------
@media (max-width: 639px) {
  // Header/Navbar
  header {
    .uk-navbar {
      min-height: 50px;
      padding: 0;
    }

    .uk-navbar-left {
      padding-left: $spacing-md;
    }

    .uk-navbar-right {
      padding-right: $spacing-md;
    }

    .uk-navbar-item {
      padding: 0 $spacing-sm;
    }

    .uk-logo {
      font-size: $font-size-md;

      // Hide app name on mobile
      .uk-margin-small-left {
        display: none;
      }

      span:first-child {
        width: 26px !important;
        height: 26px !important;
        font-size: $font-size-xs !important;
      }
    }

    // Smaller icons
    .uk-icon-link {
      padding: $spacing-sm;

      [uk-icon] {
        width: 18px;
        height: 18px;
      }
    }

    // Smaller badge
    .uk-badge {
      font-size: $font-size-xs;
      padding: 1px 4px;
    }
  }

  // Full-width dropdowns on mobile
  .uk-dropdown {
    min-width: 100%;
    left: 0 !important;
    right: 0 !important;
    margin: 0;
    border-radius: 0;
  }

  .uk-dropdown-nav > li > a {
    padding: $spacing-md $spacing-xl;
  }

  .mobile-stack {
    flex-direction: column !important;
    align-items: stretch !important;

    > * {
      width: 100% !important;
    }
  }

  .mobile-full {
    width: 100% !important;
  }

  .mobile-hide {
    display: none !important;
  }

  .mobile-text-center {
    text-align: center !important;
  }

  .mobile-mb {
    margin-bottom: 10px !important;
  }

  h3 {
    font-size: 1.2rem;
  }

  // Subnav on mobile
  .uk-subnav > li > a {
    font-size: $font-size-sm;
    padding: $spacing-sm $spacing-md;
  }

  .uk-subnav-pill > li > a {
    padding: $spacing-sm $spacing-lg;
  }

  .uk-button-small {
    padding: 0 $spacing-lg;
    font-size: $font-size-md;
  }

  .uk-card-body {
    padding: 15px;
  }

  .uk-modal-body {
    padding: 15px;
  }

  .uk-modal-header,
  .uk-modal-footer {
    padding: 10px 15px;
  }
}

// =============================================================================
// 14. DARK MODE SUPPORT
// =============================================================================

[data-theme="dark"] {
  // CSS Variables
  --bg-primary: #{$dark-bg-primary};
  --bg-secondary: #{$dark-bg-secondary};
  --bg-card: #{$dark-bg-card};
  --text-primary: #{$dark-text-primary};
  --text-secondary: #{$dark-text-secondary};
  --border-color: #{$dark-border-color};

  // Body
  body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
  }

  // Cards
  .uk-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
  }

  .uk-card-title {
    color: var(--text-primary);
  }

  // Backgrounds
  .uk-background-default {
    background: var(--bg-secondary) !important;
  }

  // Text
  .uk-text-muted,
  .uk-text-meta,
  .uk-link-muted {
    color: var(--text-secondary) !important;
  }

  .uk-text-bold {
    color: var(--text-primary);
  }

  // Headings
  .uk-heading-small,
  h1, h2, h3, h4 {
    color: var(--text-primary);
  }

  // Form Elements
  .uk-input,
  .uk-select,
  .uk-textarea {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
  }

  .uk-input::placeholder,
  .uk-textarea::placeholder {
    color: var(--text-secondary);
  }

  .uk-form-label {
    color: var(--text-primary);
  }

  // Dropdowns
  .uk-dropdown {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-color);
  }

  .uk-dropdown-nav > li > a {
    color: var(--text-primary) !important;

    &:hover {
      background: var(--bg-primary);
    }
  }

  // Navigation
  .uk-nav-header {
    color: var(--text-secondary) !important;
  }

  .uk-nav-divider {
    border-color: var(--border-color) !important;
  }

  // Modals
  .uk-modal-dialog {
    background: var(--bg-card);
    color: var(--text-primary);
  }

  .uk-modal-header,
  .uk-modal-footer {
    background: var(--bg-secondary);
    border-color: var(--border-color);
  }

  .uk-modal-title {
    color: var(--text-primary);
  }

  // Tabs
  .uk-tab > li > a {
    color: var(--text-secondary);
  }

  .uk-tab > li.uk-active > a {
    background: var(--bg-primary);
    color: var(--text-primary);
  }

  .uk-tab > li:hover > a {
    color: var(--text-primary);
  }

  // Tables
  .uk-table th,
  .uk-table td {
    border-color: var(--border-color);
    color: var(--text-primary);
  }

  .uk-table-hover > tbody > tr:hover {
    background: var(--bg-primary);
  }

  // Buttons
  .uk-button-default {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);

    &:hover {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
  }

  .uk-button-primary {
    background: $color-info;

    &:hover {
      background: #2563eb;
    }
  }

  // Links
  .uk-card a,
  p a,
  .uk-text-primary,
  a {
    color: $dark-link-color;

    &:hover {
      color: $dark-link-hover;
    }
  }

  .uk-navbar a,
  .uk-tab a {
    color: inherit;
  }

  // Icons
  .uk-icon-link {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Code
  code {
    background: var(--bg-primary);
    color: $color-pink;
  }

  // Alerts
  .uk-alert {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }

  .uk-alert-success {
    background: #064e3b;
    color: #6ee7b7;
  }

  .uk-alert-danger {
    background: #7f1d1d;
    color: #fca5a5;
  }

  // Labels (Dark Mode)
  .uk-label-success {
    background: #064e3b;
    color: #6ee7b7;
  }

  .uk-label-warning {
    background: #78350f;
    color: #fcd34d;
  }

  .uk-label-danger {
    background: #7f1d1d;
    color: #fca5a5;
  }

  .uk-label-primary {
    background: #1e3a5f;
    color: #93c5fd;
  }

  .uk-label-secondary {
    background: var(--bg-primary);
    color: var(--text-secondary);
  }

  // Toast
  .toast {
    background: var(--bg-card);
    color: var(--text-primary);
  }

  // Pagination
  .uk-pagination > li > a {
    color: var(--text-secondary);
  }

  .uk-pagination > li.uk-active > a {
    background: $color-info;
    color: white;
  }

  // Horizontal Rule
  hr {
    border-color: var(--border-color);
  }

  // Messages Sidebar
  .messages-sidebar.active {
    background: var(--bg-card);
  }

  // Empty State
  .empty-state-icon {
    background: var(--bg-secondary);
  }

  .empty-state-title {
    color: var(--text-primary);
  }

  // Progress Steps
  .progress-step-icon {
    background: var(--bg-secondary);
  }

  .progress-step::after {
    background: var(--border-color);
  }

  // Keyboard Shortcut Hints
  .kbd {
    background: #374151;
    border-color: #4b5563;
    box-shadow: 0 1px 0 #4b5563;
  }

  // Paragraph text
  p {
    color: var(--text-secondary);
  }

  // Icon buttons (theme toggle)
  .uk-icon-button {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);

    &:hover {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
  }

  // Form icons (password reveal)
  .uk-form-icon {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Checkboxes
  .uk-checkbox {
    background: var(--bg-primary);
    border-color: var(--border-color);
  }

  // Background muted
  .uk-background-muted {
    background: var(--bg-secondary) !important;
  }

  // Badge
  .uk-badge {
    background: $color-info;
    color: white;
  }

  // List items
  .uk-list > li {
    color: var(--text-primary);
  }

  // Navbar
  .uk-navbar-nav > li > a {
    color: var(--text-primary);
  }

  // Close button
  .uk-close {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Modal close button
  .uk-modal-close-default {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Progress bar - track and value
  .uk-progress {
    background: var(--border-color);

    &::-webkit-progress-bar {
      background: var(--border-color);
    }

    &::-webkit-progress-value {
      background: $color-info;
    }

    &::-moz-progress-bar {
      background: $color-info;
    }
  }

  // Notification
  .uk-notification-message {
    background: var(--bg-card);
    color: var(--text-primary);
  }

  // Breadcrumb
  .uk-breadcrumb > li > a {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Subnav
  .uk-subnav > li > a {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Text colors that need explicit override
  .uk-text-primary {
    color: $dark-link-color !important;
  }

  .uk-text-success {
    color: #6ee7b7 !important;
  }

  .uk-text-warning {
    color: #fcd34d !important;
  }

  .uk-text-danger {
    color: #fca5a5 !important;
  }

  // Login/Register card specific
  .login-card,
  .register-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);

    h3 {
      color: var(--text-primary);
    }

    .uk-form-label {
      color: var(--text-primary);
    }
  }

  // Select dropdown options (some browsers)
  .uk-select option {
    background: var(--bg-card);
    color: var(--text-primary);
  }

  // Inline styled elements that need dark mode support
  // GP logo badges with inline styles
  [style*="background: #1a1a1a"] {
    background: $color-info !important;
  }

  // Light background cards in chancellor
  [style*="background: #dbeafe"] {
    background: #1e3a5f !important;
  }

  [style*="background: #fee2e2"] {
    background: #7f1d1d !important;
  }

  [style*="background: #f0f0f0"] {
    background: var(--bg-secondary) !important;
  }

  // Text small
  .uk-text-small {
    color: var(--text-secondary);
  }

  // Accordion
  .uk-accordion-title {
    color: var(--text-primary);

    &:hover {
      color: $dark-link-color;
    }
  }

  .uk-accordion-content {
    color: var(--text-secondary);
  }

  // Offcanvas
  .uk-offcanvas-bar {
    background: var(--bg-card);
    color: var(--text-primary);
  }

  // Tooltip
  .uk-tooltip {
    background: var(--bg-card);
    color: var(--text-primary);
  }

  // Lightbox
  .uk-lightbox {
    background: rgba(15, 23, 42, 0.95);
  }

  // Dotnav
  .uk-dotnav > li > a {
    background: var(--border-color);

    &:hover {
      background: var(--text-secondary);
    }
  }

  .uk-dotnav > li.uk-active > a {
    background: var(--text-primary);
  }

  // Slidenav
  .uk-slidenav {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Search
  .uk-search-input {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);

    &::placeholder {
      color: var(--text-secondary);
    }
  }

  // Toggle
  .uk-toggle {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Sortable
  .uk-sortable-placeholder {
    background: var(--bg-secondary);
    border-color: var(--border-color);
  }

  // Comment
  .uk-comment-header {
    color: var(--text-primary);
  }

  .uk-comment-body {
    color: var(--text-secondary);
  }

  // Description list
  .uk-description-list > dt {
    color: var(--text-primary);
  }

  .uk-description-list > dd {
    color: var(--text-secondary);
  }

  // Divider
  .uk-divider-icon,
  .uk-divider-small {
    border-color: var(--border-color);
  }

  // Leader
  .uk-leader-fill::after {
    color: var(--text-secondary);
  }

  // Marker
  .uk-marker {
    background: var(--bg-secondary);
    color: var(--text-primary);
  }

  // Totop
  .uk-totop {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Alert variants
  .uk-alert-warning {
    background: #78350f;
    color: #fcd34d;
  }

  .uk-alert-primary {
    background: #1e3a5f;
    color: #93c5fd;
  }

  // Section
  .uk-section-default {
    background: var(--bg-primary);
  }

  .uk-section-muted {
    background: var(--bg-secondary);
  }

  // Tile
  .uk-tile-default {
    background: var(--bg-card);
  }

  .uk-tile-muted {
    background: var(--bg-secondary);
  }

  // Article
  .uk-article-title {
    color: var(--text-primary);
  }

  .uk-article-meta {
    color: var(--text-secondary);
  }

  // Placeholder
  .uk-placeholder {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
  }

  // Spinner
  .uk-spinner > svg {
    color: var(--text-primary);
  }

  // Iconnav
  .uk-iconnav > li > a {
    color: var(--text-secondary);

    &:hover {
      color: var(--text-primary);
    }
  }

  // Grid divider
  .uk-grid-divider > :not(.uk-first-column)::before {
    border-color: var(--border-color);
  }

  // Table striped
  .uk-table-striped > tbody > tr:nth-of-type(odd) {
    background: var(--bg-secondary);
  }

  // Width medium (forgot password page)
  .uk-width-medium {
    h2, h3 {
      color: var(--text-primary);
    }
  }

  // Fix links that might appear with wrong color
  .uk-link,
  .uk-link-text {
    color: $dark-link-color;

    &:hover {
      color: $dark-link-hover;
    }
  }

  // Ensure all headings are visible
  h5, h6 {
    color: var(--text-primary);
  }

  // Fix container backgrounds
  .uk-container {
    color: var(--text-primary);
  }

  // Calendar day active/today styling
  .calendar-day {
    &.uk-background-primary,
    &[style*="background: #f0f0f0"] {
      background: var(--bg-secondary) !important;
    }
  }

  // Table cells with background
  td[style*="background: #f0f0f0"],
  td[style*="background:#f0f0f0"] {
    background: var(--bg-secondary) !important;
  }

  // Button secondary/default variants
  .uk-button-secondary {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);

    &:hover {
      background: var(--bg-primary);
      color: var(--text-primary);
    }
  }

  // Button text visibility
  .uk-button {
    color: var(--text-primary);
  }

  // Ensure primary buttons stay visible
  .uk-button-primary {
    color: white;

    &:hover {
      color: white;
    }
  }

  // Danger button
  .uk-button-danger {
    background: #dc2626;
    color: white;

    &:hover {
      background: #b91c1c;
      color: white;
    }
  }

  // Link button
  .uk-button-link {
    color: $dark-link-color;

    &:hover {
      color: $dark-link-hover;
    }
  }

  // Icon within buttons
  .uk-button [uk-icon],
  .uk-button .uk-icon {
    color: inherit;
  }

  // Modal body scrollable areas
  .uk-modal-body {
    &[style*="overflow-y: auto"],
    &[style*="max-height"] {
      scrollbar-color: var(--border-color) var(--bg-secondary);
    }
  }

  // Custom scrollbar for dark mode
  * {
    scrollbar-color: var(--border-color) var(--bg-primary);
  }

  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: var(--bg-primary);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;

    &:hover {
      background: var(--text-secondary);
    }
  }

  // SVG icons color
  svg {
    color: inherit;
  }

  // Card hover states
  .uk-card-hover:hover {
    background: var(--bg-secondary);
  }

  // Form custom elements
  .uk-form-custom {
    .uk-button {
      color: var(--text-primary);
    }
  }

  // Dropdown nav items with icons
  .uk-dropdown-nav .uk-icon {
    color: inherit;
  }

  // List striped - for Track Status modal
  .uk-list-striped > li {
    background: transparent;

    &:nth-of-type(odd) {
      background: var(--bg-secondary);
    }
  }

  // List divider
  .uk-list-divider > li:nth-child(n+2) {
    border-top-color: var(--border-color);
  }

  // Links styled as buttons (View Details)
  a.uk-button {
    &.uk-button-primary {
      color: white !important;

      &:hover {
        color: white !important;
      }
    }

    &.uk-button-default {
      color: var(--text-primary) !important;

      &:hover {
        color: var(--text-primary) !important;
      }
    }
  }

  // Modal list content
  .uk-modal-body {
    .uk-list > li {
      color: var(--text-primary);
    }

    // Spans within list items
    .uk-list span {
      color: inherit;
    }
  }

  // Text bold within various contexts
  .uk-text-bold,
  strong,
  b {
    color: var(--text-primary);
  }

  // Checkbox labels
  label {
    color: var(--text-primary);
  }

  // Form label in modal
  .uk-modal-body .uk-form-label {
    color: var(--text-primary);
  }

  // Icon colors within text - inherit by default
  [uk-icon] {
    color: inherit;
  }

  // Specific icon color classes should override
  .uk-text-success [uk-icon],
  [uk-icon].uk-text-success,
  .uk-text-success.uk-icon {
    color: #6ee7b7 !important;
  }

  .uk-text-warning [uk-icon],
  [uk-icon].uk-text-warning,
  .uk-text-warning.uk-icon {
    color: #fcd34d !important;
  }

  .uk-text-danger [uk-icon],
  [uk-icon].uk-text-danger,
  .uk-text-danger.uk-icon {
    color: #fca5a5 !important;
  }

  // h4 headings in cards
  .uk-card h4,
  .uk-card-body h4 {
    color: var(--text-primary);
  }

  // Text meta
  .uk-text-meta {
    color: var(--text-secondary) !important;
  }
}

// =============================================================================
// 15. PAGE-SPECIFIC INLINE STYLE REPLACEMENTS
// =============================================================================

// These classes replace common inline styles found throughout the application

// -----------------------------------------------------------------------------
// 15.1 Avatar/Badge Sizes
// -----------------------------------------------------------------------------
.avatar-sm {
  width: 32px;
  height: 32px;
  background: $color-primary;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.avatar-md {
  width: 40px;
  height: 40px;
}

.avatar-lg {
  width: 48px;
  height: 48px;
  background: $color-primary;
  color: white;
  font-size: 16px;
  font-weight: 600;
}

// -----------------------------------------------------------------------------
// 15.2 Calendar Day Cell
// -----------------------------------------------------------------------------
.calendar-cell {
  height: 80px;
  vertical-align: top;
}

.calendar-cell-highlight {
  background: $bg-muted;
}

// -----------------------------------------------------------------------------
// 15.3 Modal Body Scroll
// -----------------------------------------------------------------------------
.modal-body-scroll {
  max-height: 400px;
  overflow-y: auto;
}

// -----------------------------------------------------------------------------
// 15.4 Chat Modal Body
// -----------------------------------------------------------------------------
.chat-modal-body {
  height: 300px;
  overflow-y: auto;
}

// -----------------------------------------------------------------------------
// 15.5 Alert Borders
// -----------------------------------------------------------------------------
.alert-border-danger {
  border-left: 4px solid $color-danger;
}

.alert-border-success {
  border-left: 4px solid $color-success;
}

.alert-border-warning {
  border-left: 4px solid $color-warning;
}

.alert-border-info {
  border-left: 4px solid $color-info;
}

// -----------------------------------------------------------------------------
// 15.6 Input Width Utilities
// -----------------------------------------------------------------------------
.input-w-150 {
  width: 150px;
}

.input-w-200 {
  width: 200px;
}

.input-w-250 {
  width: 250px;
}

// -----------------------------------------------------------------------------
// 15.7 Text Size Utilities
// -----------------------------------------------------------------------------
.text-xs {
  font-size: $font-size-xs;
}

.text-sm {
  font-size: $font-size-sm;
}

// -----------------------------------------------------------------------------
// 15.8 Rounded Background Colors
// -----------------------------------------------------------------------------
.bg-rounded-muted {
  border-radius: $radius-md;
}

// =============================================================================
// END OF MAIN SCSS FILE
// =============================================================================