@charset "UTF-8";

/* ===== CSS CUSTOM PROPERTIES (ROOT VARIABLES) ===== */
:root {
    /* ===== COLOR SYSTEM ===== */
    /* Primary Brand Colors - Meghalaya Inspired Greens */
    --hs-green-50: #f2f8f1;
    --hs-green-100: #e1f2df;
    --hs-green-200: #c5e6c2;
    --hs-green-300: #9ad495;
    --hs-green-400: #6cbd66;
    --hs-green-500: #58ad47;
    --hs-green-600: #3f8a31;
    --hs-green-700: #326d27;
    --hs-green-800: #2a5721;
    --hs-green-900: #23471c;

    /* Neutral Grays */
    --hs-gray-50: #f9fafb;
    --hs-gray-100: #f3f4f6;
    --hs-gray-200: #e5e7eb;
    --hs-gray-300: #d1d5db;
    --hs-gray-400: #9ca3af;
    --hs-gray-500: #6b7280;
    --hs-gray-600: #4b5563;
    --hs-gray-700: #374151;
    --hs-gray-800: #1f2937;
    --hs-gray-900: #111827;

    /* Semantic Colors */
    --hs-white: #ffffff;
    --hs-black: #000000;
    --hs-red-500: #ef4444;
    --hs-red-600: #dc2626;
    --hs-blue-500: #3b82f6;
    --hs-blue-600: #2563eb;
    --hs-yellow-500: #f59e0b;
    --hs-yellow-600: #d97706;
    --hs-purple-500: #8b5cf6;
    --hs-purple-600: #9333ea;

    --hs-blue: #0d6efd;
    --hs-indigo: #6610f2;
    --hs-purple: #6f42c1;
    --hs-pink: #d63384;
    --hs-red: #dc3545;
    --hs-orange: #fd7e14;
    --hs-yellow: #ffc107;
    --hs-green: #198754;
    --hs-teal: #20c997;
    --hs-cyan: #0dcaf0;
    --hs-gray: #6c757d;
    --hs-gray-dark: #343a40;
    --hs-primary: #0d6efd;
    --hs-secondary: #6c757d;
    --hs-success: #198754;
    --hs-info: #0dcaf0;
    --hs-warning: #ffc107;
    --hs-danger: #dc3545;
    --hs-light: #f8f9fa;
    --hs-dark: #212529;

    /* ===== PREMIUM GOLD SYSTEM ===== */
    --hs-gold-50: #fffbeb;
    --hs-gold-100: #fef3c7;
    --hs-gold-200: #fde68a;
    --hs-gold-300: #fcd34d;
    --hs-gold-400: #fbbf24;
    --hs-gold-500: #f59e0b;
    --hs-gold-600: #d97706;
    --hs-gold-700: #b45309;
    --hs-gold-800: #92400e;
    --hs-gold-900: #78350f;

    /* Gold Gradients */
    --hs-gradient-premium: linear-gradient(135deg, var(--hs-gold-400) 0%, var(--hs-gold-500) 50%, var(--hs-gold-600) 100%);
    --hs-gradient-premium-light: linear-gradient(135deg, var(--hs-gold-100) 0%, var(--hs-gold-200) 50%, var(--hs-gold-300) 100%);
    --hs-gradient-premium-dark: linear-gradient(135deg, var(--hs-gold-600) 0%, var(--hs-gold-700) 50%, var(--hs-gold-800) 100%);

    /* Gold Shadows */
    --hs-shadow-gold: 0 10px 15px -3px rgba(251, 191, 36, 0.3), 0 4px 6px -2px rgba(251, 191, 36, 0.2);
    --hs-shadow-gold-intense: 0 20px 25px -5px rgba(251, 191, 36, 0.4), 0 10px 10px -5px rgba(251, 191, 36, 0.3);
    --hs-shadow-gold-glow: 0 0 20px rgba(251, 191, 36, 0.5), 0 0 40px rgba(251, 191, 36, 0.3);

    /* ===== TYPOGRAPHY ===== */
    --hs-font-family-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --hs-font-family-secondary: 'Poppins', sans-serif;
    --hs-font-family-display: 'Playfair Display', serif;
    
    /* Font Sizes */
    --hs-text-xs: 0.75rem;     /* 12px */
    --hs-text-sm: 0.875rem;    /* 14px */
    --hs-text-base: 1rem;      /* 16px */
    --hs-text-lg: 1.125rem;    /* 18px */
    --hs-text-xl: 1.25rem;     /* 20px */
    --hs-text-2xl: 1.5rem;     /* 24px */
    --hs-text-3xl: 1.875rem;   /* 30px */
    --hs-text-4xl: 2.25rem;    /* 36px */
    --hs-text-5xl: 3rem;       /* 48px */

    /* Font Weights */
    --hs-font-light: 300;
    --hs-font-normal: 400;
    --hs-font-medium: 500;
    --hs-font-semibold: 600;
    --hs-font-bold: 700;

    /* Line Heights */
    --hs-leading-tight: 1.25;
    --hs-leading-normal: 1.5;
    --hs-leading-relaxed: 1.75;

    /* ===== SPACING ===== */
    --hs-space-1: 0.25rem;   /* 4px */
    --hs-space-2: 0.5rem;    /* 8px */
    --hs-space-3: 0.75rem;   /* 12px */
    --hs-space-4: 1rem;      /* 16px */
    --hs-space-5: 1.25rem;   /* 20px */
    --hs-space-6: 1.5rem;    /* 24px */
    --hs-space-8: 2rem;      /* 32px */
    --hs-space-10: 2.5rem;   /* 40px */
    --hs-space-12: 3rem;     /* 48px */
    --hs-space-16: 4rem;     /* 64px */
    --hs-space-20: 5rem;     /* 80px */

    /* ===== BORDERS & RADIUS ===== */
    --hs-border-width: 1px;
    --hs-border-radius-sm: 0.25rem;   /* 4px */
    --hs-border-radius: 0.5rem;      /* 8px */
    --hs-border-radius-md: 0.75rem;  /* 12px */
    --hs-border-radius-lg: 1rem;     /* 16px */
    --hs-border-radius-xl: 1.5rem;   /* 24px */
    --hs-border-radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --hs-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --hs-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --hs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --hs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --hs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --hs-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* ===== TRANSITIONS ===== */
    --hs-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --hs-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --hs-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Z-INDEX ===== */
    --hs-z-dropdown: 1000;
    --hs-z-sticky: 1020;
    --hs-z-fixed: 1030;
    --hs-z-modal-backdrop: 1040;
    --hs-z-modal: 1050;
    --hs-z-popover: 1060;
    --hs-z-tooltip: 1070;
    --hs-z-toast: 1080;

    --hs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --hs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --hs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

/* ===== DEFAULT THEME ===== */
/* This is the base theme that applies to all variants */
[data-theme="default"] {
    /* Background Colors */
    --hs-bg-primary: var(--hs-white);
    --hs-bg-secondary: var(--hs-gray-50);
    --hs-bg-tertiary: var(--hs-gray-100);
    --hs-bg-inverse: var(--hs-gray-900);

    /* Text Colors */
    --hs-text-primary: var(--hs-gray-900);
    --hs-text-secondary: var(--hs-gray-700);
    --hs-text-tertiary: var(--hs-gray-500);
    --hs-text-inverse: var(--hs-white);
    --hs-text-muted: var(--hs-gray-400);

    /* Border Colors */
    --hs-border-primary: var(--hs-gray-200);
    --hs-border-secondary: var(--hs-gray-300);
    --hs-border-tertiary: var(--hs-gray-100);

    /* Component Specific */
    --hs-header-bg: rgba(255, 255, 255, 0.95);
    --hs-sidebar-bg: linear-gradient(to bottom, var(--hs-white) 0%, var(--hs-green-50) 100%);
    --hs-card-bg: var(--hs-white);
    --hs-input-bg: var(--hs-white);
    --hs-button-primary-bg: var(--hs-green-500);
    --hs-button-primary-text: var(--hs-white);
    --hs-button-secondary-bg: var(--hs-gray-100);
    --hs-button-secondary-text: var(--hs-gray-700);
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    /* Background Colors */
    --hs-bg-primary: var(--hs-white);
    --hs-bg-secondary: var(--hs-gray-50);
    --hs-bg-tertiary: var(--hs-gray-100);
    --hs-bg-inverse: var(--hs-gray-900);

    /* Text Colors */
    --hs-text-primary: var(--hs-gray-900);
    --hs-text-secondary: var(--hs-gray-700);
    --hs-text-tertiary: var(--hs-gray-500);
    --hs-text-inverse: var(--hs-white);
    --hs-text-muted: var(--hs-gray-400);

    /* Border Colors */
    --hs-border-primary: var(--hs-gray-200);
    --hs-border-secondary: var(--hs-gray-300);
    --hs-border-tertiary: var(--hs-gray-100);

    /* Component Specific */
    --hs-header-bg: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(242, 248, 241, 0.95) 100%);
    --hs-sidebar-bg: linear-gradient(to bottom, var(--hs-white) 0%, var(--hs-green-50) 100%);
    --hs-card-bg: var(--hs-white);
    --hs-input-bg: var(--hs-white);
    --hs-button-primary-bg: var(--hs-green-500);
    --hs-button-primary-text: var(--hs-white);
    --hs-button-secondary-bg: var(--hs-gray-100);
    --hs-button-secondary-text: var(--hs-gray-700);

    /* Light Theme Specific Enhancements */
    --hs-shadow-color: rgba(0, 0, 0, 0.1);
    --hs-glass-bg: rgba(255, 255, 255, 0.8);
    --hs-glass-border: rgba(255, 255, 255, 0.2);
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
    /* Background Colors */
    --hs-bg-primary: var(--hs-gray-900);
    --hs-bg-secondary: var(--hs-gray-800);
    --hs-bg-tertiary: var(--hs-gray-700);
    --hs-bg-inverse: var(--hs-white);

    /* Text Colors */
    --hs-text-primary: var(--hs-gray-100);
    --hs-text-secondary: var(--hs-gray-300);
    --hs-text-tertiary: var(--hs-gray-400);
    --hs-text-inverse: var(--hs-gray-900);
    --hs-text-muted: var(--hs-gray-500);

    /* Border Colors */
    --hs-border-primary: var(--hs-gray-700);
    --hs-border-secondary: var(--hs-gray-600);
    --hs-border-tertiary: var(--hs-gray-800);

    /* Component Specific */
    --hs-header-bg: linear-gradient(to right, rgba(17, 24, 39, 0.95) 0%, rgba(35, 71, 28, 0.95) 100%);
    --hs-sidebar-bg: linear-gradient(to bottom, var(--hs-gray-900) 0%, var(--hs-green-900) 100%);
    --hs-card-bg: var(--hs-gray-800);
    --hs-input-bg: var(--hs-gray-700);
    --hs-button-primary-bg: var(--hs-green-600);
    --hs-button-primary-text: var(--hs-white);
    --hs-button-secondary-bg: var(--hs-gray-700);
    --hs-button-secondary-text: var(--hs-gray-200);

    /* Dark Theme Specific Enhancements */
    --hs-shadow-color: rgba(0, 0, 0, 0.3);
    --hs-glass-bg: rgba(31, 41, 55, 0.8);
    --hs-glass-border: rgba(75, 85, 99, 0.2);

    /* Dark Theme Gold Adjustments */
    --hs-gold-400: #fcd34d;
    --hs-gold-500: #fbbf24;
    --hs-gold-600: #f59e0b;
    --hs-gradient-premium: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
    --hs-shadow-gold: 0 10px 15px -3px rgba(252, 211, 77, 0.4), 0 4px 6px -2px rgba(252, 211, 77, 0.3);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--hs-font-sans-serif);
  /*font-size: 1rem;*/
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
}

hr:not([size]) {
  height: 1px;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-bs-original-title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small, .small {
  font-size: 0.875em;
}

mark, .mark {
  padding: 0.2em;
  background-color: #fcf8e3;
}

sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  /*color: #0d6efd;*/
  /*text-decoration: underline;*/
}
a:hover {
  /*color: #0a58ca;*/
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

pre,
code,
kbd,
samp {
  font-family: var(--hs-font-monospace);
  font-size: 1em;
  direction: ltr 
  unicode-bidi: bidi-override;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: #d63384;
  word-wrap: break-word;
}
a > code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 0.875em;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
  font-weight: 700;
}

figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

a {
  /*color: #337ab7;*/
  text-decoration: none
}

a:focus,
a:hover {
  /*color: #23527c;*/
  /*text-decoration: underline*/
}

a:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]::-webkit-calendar-picker-indicator {
  display: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

textarea {
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
  -webkit-appearance: textfield;
}

/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::file-selector-button {
  font: inherit;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

summary {
  display: list-item;
  cursor: pointer;
}

progress {
  vertical-align: baseline;
}

[hidden] {
  display: none !important;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}

.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}

.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}

.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}

.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}

.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

.list-inline {
  padding-left: 0;
  list-style: none;
}

.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}

.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}

.blockquote {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}
.blockquote-footer::before {
  content: "— ";
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.figure {
  display: inline-block;
}

.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}

.figure-caption {
  font-size: 0.875em;
  color: #6c757d;
}

/*
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--hs-gutter-x, 5px);
  padding-left: var(--hs-gutter-x, 5px);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}


/* ===== STICKY SETTINGS SIDEBAR ===== */

/* Container for sticky positioning */
.sticky-sidebar-wrapper {
    position: relative;
    height: 100%;
}

/* Main sticky container */
.settings-navigation {
    position: sticky;
    top: var(--hs-space-6);
    z-index: var(--hs-z-sticky);
    height: fit-content;
    max-height: calc(100vh - var(--hs-space-12));
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--hs-border-primary) transparent;
}

/* Custom scrollbar for sidebar */
.settings-navigation::-webkit-scrollbar {
    width: 4px;
}

.settings-navigation::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--hs-border-radius-full);
}

.settings-navigation::-webkit-scrollbar-thumb {
    background: var(--hs-border-primary);
    border-radius: var(--hs-border-radius-full);
}

.settings-navigation::-webkit-scrollbar-thumb:hover {
    background: var(--hs-green-500);
}

/* Enhanced Settings Sidebar */
.settings-sidebar {
    background: var(--hs-card-bg);
    border-radius: var(--hs-border-radius-lg);
    box-shadow: var(--hs-shadow);
    border: 1px solid var(--hs-border-primary);
    overflow: hidden;
    transition: all var(--hs-transition);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.settings-sidebar:hover {
    /*box-shadow: var(--hs-shadow-md);*/
    /*border-color: var(--hs-green-500);*/
}

/* Ensure content doesn't overflow */
.settings-sidebar-content {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding-right: var(--hs-space-2);
}

/* Smooth scroll behavior */
@media (prefers-reduced-motion: no-preference) {
    .settings-navigation {
        scroll-behavior: smooth;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .settings-navigation {
        position: static;
        max-height: none;
        margin-bottom: var(--hs-space-6);
    }
    
    .settings-sidebar {
        border-radius: var(--hs-border-radius);
    }
    
    .settings-sidebar-content {
        max-height: none;
        overflow-y: visible;
    }
}

/* Tablet portrait */
@media (min-width: 769px) and (max-width: 1024px) {
    .settings-navigation {
        /*top: var(--hs-space-4);*/

        max-height: calc(100vh - var(--hs-space-8));
    }
}

/* Large screens */
@media (min-width: 1025px) {
    .settings-navigation {
        top: var(--hs-space-8);
    }
}

/* Print styles */
@media print {
    .settings-navigation {
        position: static;
        break-inside: avoid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .settings-navigation {
        scroll-behavior: auto;
    }
    
    .settings-sidebar {
        transition: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .settings-sidebar {
        border: 2px solid currentColor;
    }
    
    .settings-navigation::-webkit-scrollbar-thumb {
        background: currentColor;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .settings-navigation {
        scrollbar-width: none; /* Hide scrollbar on touch devices */
    }
    
    .settings-navigation::-webkit-scrollbar {
        display: none;
    }
    
    .settings-sidebar {
        border: 2px solid var(--hs-border-primary);
    }
}

/* Dark theme specific adjustments */
[data-theme="dark"] .settings-sidebar {
    background: var(--hs-card-bg);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-color: var(--hs-border-primary);
}

[data-theme="dark"] .settings-sidebar:hover {
    /*border-color: var(--hs-green-400);*/
    /*box-shadow: 0 4px 20px rgba(88, 173, 71, 0.15);*/
}

/* Mobile-specific sidebar behavior */
@media (max-width: 768px) {
    /* Make sidebar full width on mobile */
    .sticky-sidebar-wrapper {
        width: 100%;
    }
    
    .settings-sidebar {
        width: 100%;
        max-width: 100%;
    }
    
    /* Add bottom spacing for mobile */
    .settings-navigation {
        margin-bottom: var(--hs-space-8);
    }
}

/* Desktop sidebar collapse/expand */
.sidebar-toggle {
    display: none;
    position: fixed;
    bottom: var(--hs-space-6);
    right: var(--hs-space-6);
    width: 40px;
    height: 40px;
    background: var(--hs-green-500);
    color: var(--hs-white);
    border-radius: var(--hs-border-radius-full);
    border: none;
    cursor: pointer;
    z-index: var(--hs-z-fixed);
    box-shadow: var(--hs-shadow-lg);
    transition: all var(--hs-transition);
}

.sidebar-toggle:hover {
    transform: scale(1.1);
    background: var(--hs-green-600);
}

@media (max-width: 1024px) {
    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .settings-navigation.collapsed {
        transform: translateX(-100%);
        opacity: 0;
        pointer-events: none;
    }
    
    .settings-navigation:not(.collapsed) {
        transform: translateX(0);
        opacity: 1;
        pointer-events: all;
    }
}

/* Add smooth transitions for sidebar */
.settings-navigation {
  margin-top: 40px;
  z-index: 10;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Ensure sidebar doesn't overlap header */
.header-fixed + .container .settings-navigation {
    top: calc(var(--header-height, 80px) + var(--hs-space-6));
}

/* For browsers that support scrollbar-gutter */
@supports (scrollbar-gutter: stable) {
    .settings-sidebar-content {
        scrollbar-gutter: stable;
    }
}

/* Loading state for sidebar */
.settings-navigation.loading {
    opacity: 0.6;
    pointer-events: none;
}

.settings-navigation.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid var(--hs-border-primary);
    border-top-color: var(--hs-green-500);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



.hs-text-sm {
  font-size: 10px!important ;
}