/*
 * ManageGuard Dark Theme
 * A comprehensive dark theme for ManageGuard components
 */

:root {
  /* Base colors */
  --rz-white: #ffffff;
  --rz-black: #000000;
  --rz-base-50: #1e1e1e;
  --rz-base-100: #252525;
  --rz-base-200: #2a2a2a;
  --rz-base-300: #333333;
  --rz-base-400: #3d3d3d;
  --rz-base-500: #474747;
  --rz-base-600: #5c5c5c;
  --rz-base-700: #858585;
  --rz-base-800: #1e1e1e;
  --rz-base-900: #121212;
  /* Text colors */
  --mk-text: #eae9fc;
  --mk-text-color: var(--mk-text);
  --mk-background: #010104;
  --mk-black-color: #2a2a2a;
  /* Border and focus colors */
  --mk-border-color: var(--mk-base-200);
  --mk-focus-border-color: var(--mk-primary-color);
  /* Primary colors - Blue */
  --mk-primary: #2a4e8f;
  --mk-primary-color: var(--mk-primary);
  --mk-primary-light: #3a60a6;
  --mk-primary-lighter: #4b72bd;
  --mk-primary-dark: #1a3c78;
  --mk-primary-darker: #0c2a61;
  /* Secondary colors - Green */
  --mk-secondary: #259472;
  --mk-secondary-color: var(--mk-secondary);
  --mk-secondary-light: #30ab89;
  --mk-secondary-lighter: #3cc2a0;
  --mk-secondary-dark: #1a7d5a;
  --mk-secondary-darker: #146548;
  /* Accent/Tertiary colors - Amber */
  --mk-accent: #e29f3c;
  --mk-tertiary-color: var(--mk-accent);
  --mk-accent-light: #eab254;
  --mk-accent-lighter: #f2c56c;
  --mk-accent-dark: #d68c23;
  --mk-tertiary-dark: var(--mk-accent-dark);
  --mk-accent-darker: #b8771d;
  /* Scrollbar colors - Dark mode */
  --mk-scrollbar-track: #1e1e1e;
  --mk-scrollbar-thumb: #e0e0e0;
  --mk-scrollbar-thumb-hover: #ffffff;
  --mk-scrollbar-thumb-active: #ffffff;
  /* Scrollbar dimensions */
  --mk-scrollbar-width: 12px;
  --mk-scrollbar-thumb-width: 4px;
  --mk-scrollbar-thumb-height: 80px;
  --mk-scrollbar-border-radius: 4px;
  --mk-scrollbar-transition: all 0.2s ease;
  /* Sidebar */
  --mk-sidebar-active-background: rgba(75, 114, 189, 0.2);
  --mk-sidebar-active-color: var(--mk-primary-light);
  /* Radzen overrides */
  --rz-primary: var(--mk-primary) !important;
  --rz-grid-border-radius: calc(var(--rz-border-radius) * 3) !important;
  --rz-border-radius: 4px !important;
  --rz-panel-menu-item-active-background-color: var(--mk-sidebar-active-background);
  --rz-panel-menu-item-active-color: var(--mk-sidebar-active-color);
  --rz-panel-menu-item-color: var(--rz-text-secondary-color) !important;
  --rz-grid-header-background-color: #1b1d20 !important;
  --rz-grid-header-color: white;
  --rz-grid-filter-background-color: #cccccc;
  --rz-text-color: white;
}

/* Radzen Material Dark Theme Overrides */
.rz-layout.rz-material-dark {
  --rz-grid-filter-background-color: #cccccc;
  --rz-grid-header-color: white;
  --rz-grid-header-background-color: #1b1d20 !important;
  --rz-text-color: white;
  --rzborder-radius: 12px;
  --rzpadding: 25px;
  --rzborder: 1px solid #e0e0e0;
  --rzoverflow: hidden;
  --rzanimation: fadeIn 0.5s ease-in-out;
  --rzfont-family: "Poppins", sans-serif;
}

  .rz-layout.rz-material-dark .rz-data-row:hover {
    background: #2a2a2a;
  }

  /* Selected row background */
  .rz-layout.rz-material-dark tr.rz-state-highlight.rz-data-row {
    background: #2a4e8f33;
  }

  /* Selected row text */
  .rz-layout.rz-material-dark .rz-selectable tbody tr.rz-data-row.rz-state-highlight .rz-cell-data {
    color: #eae9fc;
  }

/* Dialog styling */
.rz-material-dark .rz-dialog {
  --rz-background: radial-gradient(circle, #252525, #1e1e1e);
  --rz-box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
  --rz-border-radius: 12px;
  --rz-padding: 25px;
  --rz-border: 1px solid #333333;
  --rz-overflow: hidden;
  --rz-animation: fadeIn 0.5s ease-in-out;
  --rz-font-family: "Poppins", sans-serif;
}

/* Bootstrap overrides */
.rz-material-dark .modal-backdrop.show {
  opacity: 0 !important;
}

.rz-material-dark .text-black {
  color: var(--mk-black-color) !important;
}

.rz-material-dark .text-primary {
  color: var(--mk-primary-color) !important;
}

.rz-material-dark .text-secondary {
  color: var(--mk-secondary-color) !important;
}

.rz-material-dark .text-tertiary {
  color: var(--mk-tertiary-color) !important;
}

.rz-material-dark .text-sm {
  font-size: 0.65rem !important;
}

.rz-material-dark .btn-primary {
  background: var(--mk-primary-color) !important;
}

/* Nav pills customization */
.rz-material-dark .nav-pills {
  border: 2px solid var(--mk-primary-color);
}

  .rz-material-dark .nav-pills .nav-link {
    border-radius: 30px !important;
    width: auto;
    color: var(--mk-primary-light);
    background: transparent;
  }

    .rz-material-dark .nav-pills .nav-link:hover {
      color: var(--mk-primary-lighter);
    }

    .rz-material-dark .nav-pills .nav-link.active,
    .rz-material-dark .nav-pills .show > .nav-link {
      color: var(--mk-text);
      background: var(--mk-primary-color) !important;
      border-bottom: none;
    }

/* Button styling */
.rz-material-dark .btn {
  font-size: 1.03rem;
  padding: 0.55rem auto !important;
  outline: none;
  border: 1px solid var(--mk-primary-color) !important;
}

  .rz-material-dark .btn:focus,
  .rz-material-dark .btn:active,
  .rz-material-dark .btn.active:focus {
    outline: none;
    box-shadow: none !important;
  }

/* Form field styling */
.rz-material-dark .mk-form-field-content label {
  margin-bottom: 0.2rem;
  color: var(--mk-text);
}

.rz-material-dark .mk-form-field-content input {
  caret-color: white !important;
}

.rz-material-dark .mk-form-field-content .form-control {
  background: var(--mk-base-800);
  color: white !important;
  border: 2px solid var(--mk-border-color) !important;
}

  .rz-material-dark .mk-form-field-content .form-control:focus,
  .rz-material-dark .mk-form-field-content .form-control:active,
  .rz-material-dark .mk-form-field-content .form-control.active:focus {
    outline: none;
    box-shadow: none !important;
    border: 2px solid var(--mk-focus-border-color) !important;
  }

.rz-material-dark .form-check-input:focus,
.rz-material-dark .form-check-input:active,
.rz-material-dark .form-check-input.active:focus {
  outline: none;
  box-shadow: none !important;
  border: 2px solid var(--mk-primary-color) !important;
}

.rz-material-dark .form-control:focus,
.rz-material-dark .form-control:active,
.rz-material-dark .form-control.active:focus {
  outline: none;
  box-shadow: none !important;
  border: 2px solid var(--mk-focus-border-color) !important;
}

/* Scrollbar styling for Firefox */
.rz-material-dark * {
  scrollbar-width: thin;
  scrollbar-color: var(--mk-scrollbar-thumb) var(--mk-scrollbar-track);
}

/* Scrollbar styling for Webkit browsers */
.rz-material-dark ::-webkit-scrollbar {
  width: var(--mk-scrollbar-width);
  height: var(--mk-scrollbar-width);
  transition: var(--mk-scrollbar-transition);
}

.rz-material-dark ::-webkit-scrollbar-track {
  background: var(--mk-scrollbar-track);
  transition: var(--mk-scrollbar-transition);
}

.rz-material-dark ::-webkit-scrollbar-thumb {
  background: var(--mk-scrollbar-thumb);
  border-radius: var(--mk-scrollbar-border-radius);
  transition: var(--mk-scrollbar-transition);
  /* Center the thumb in the track */
  border-left: calc((var(--mk-scrollbar-width) - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
  border-right: calc((var(--mk-scrollbar-width) - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
  background-clip: content-box;
  /* Minimum height for the thumb */
  min-height: var(--mk-scrollbar-thumb-height);
}

  .rz-material-dark ::-webkit-scrollbar-thumb:hover {
    background: var(--mk-scrollbar-thumb-hover);
    background-clip: content-box;
  }

  .rz-material-dark ::-webkit-scrollbar-thumb:active {
    background: var(--mk-scrollbar-thumb-active);
    background-clip: content-box;
  }

/* Hide scrollbar buttons */
.rz-material-dark ::-webkit-scrollbar-button {
  display: none;
}

/* Scrollbar corner styling */
.rz-material-dark ::-webkit-scrollbar-corner {
  background: var(--mk-scrollbar-track);
}

/* Horizontal scrollbar styling */
.rz-material-dark ::-webkit-scrollbar:horizontal {
  height: 8px;
}

/* Utility classes for scrollbar styling */
.rz-material-dark .force-dark-scrollbar {
  --mk-scrollbar-track: #1e1e1e !important;
  --mk-scrollbar-thumb: #e0e0e0 !important;
  --mk-scrollbar-thumb-hover: #ffffff !important;
  --mk-scrollbar-thumb-active: #ffffff !important;
}

.rz-material-dark .force-light-scrollbar {
  --mk-scrollbar-track: #f0f0f0 !important;
  --mk-scrollbar-thumb: #c0c0c0 !important;
  --mk-scrollbar-thumb-hover: #a0a0a0 !important;
  --mk-scrollbar-thumb-active: #909090 !important;
}

/* Hide scrollbar while maintaining functionality */
.rz-material-dark .hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.rz-material-dark .hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Thin scrollbar variant */
.rz-material-dark .thin-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.rz-material-dark .thin-scrollbar::-webkit-scrollbar-thumb {
  --mk-scrollbar-thumb-width: 2px;
  border-left: calc((8px - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
  border-right: calc((8px - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
}

/* Thick scrollbar variant */
.rz-material-dark .thick-scrollbar::-webkit-scrollbar {
  width: 16px;
}

.rz-material-dark .thick-scrollbar::-webkit-scrollbar-thumb {
  --mk-scrollbar-thumb-width: 6px;
  border-left: calc((16px - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
  border-right: calc((16px - var(--mk-scrollbar-thumb-width)) / 2) solid transparent;
}


/* Responsive adjustments */

/* Global body styling for dark theme */
.dark body {
  background-color: var(--mk-background) ;
  color: var(--mk-text-color);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark theme component isolation */
::deep .dark .mk-component {
  background-color: var(--mk-background);
  color: var(--mk-text-color);
}

/* Dark theme dropdown improvements */
::deep .dark .mk-dropdown-panel,
::deep .dark .mk-dropdown-content {
  background-color: var(--mk-background-secondary);
  border-color: var(--mk-border-color);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* Dark theme scrollbar improvements */
::deep .dark ::-webkit-scrollbar-thumb {
  background: var(--mk-scrollbar-thumb);
}

  ::deep .dark ::-webkit-scrollbar-thumb:hover {
    background: var(--mk-scrollbar-thumb-hover);
  }

/* Dark theme form controls */
::deep .dark input,
::deep .dark select,
::deep .dark textarea {
  background-color: var(--mk-background-secondary);
  color: var(--mk-text-color);
  border-color: var(--mk-border-color);
}

  ::deep .dark input:focus,
  ::deep .dark select:focus,
  ::deep .dark textarea:focus {
    border-color: var(--mk-focus-border-color);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }