/**
 * ==========================================================================
 * UDENUA - UNIFIED CSS FILE
 * ==========================================================================
 * Tüm CSS dosyaları tek bir dosyada birleştirildi
 * 
 * İçerik: none;
 * 1. Variables
 * 2. Normalize
 * 3. Typography
 * 4. Layout
 * 5. Utilities
 * 6. Vendor Styles
 * 7. Main Style
 * 8. Custom Components
 * 9. Theme Manager
 * 10. Common Theme Variables
 * 11. Light Theme
 * 12. Dark Theme
 * 13. Sidebar
 * 14. Header
 * 15. Footer
 * 16. UI Components
 * 17. Loader
 * 18. Fixes
 * 19. App CSS
 * ==========================================================================
 */
/**
 * Core Variables
 * Design tokens for the design system
 */
:root {
  /* ========================================
     Color Palette (Functional)
     ======================================== */
  /* Renkler theme-manager tarafından veya main-style tarafından atanır. 
     Burada sadece layout ve shape değişkenleri tutulacak. */
  /* ========================================
     Spacing Scale - Modern Minimal (larger spacing)
     ======================================== */
  --spacing-0: 0;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-4xl: 128px;
  /* UI Space Aliases (for backward compatibility) */
  --ui-space-1: var(--spacing-xs);
  --ui-space-2: var(--spacing-xs);
  --ui-space-3: var(--spacing-sm);
  --ui-space-4: var(--spacing-md);
  --ui-space-6: var(--spacing-lg);
  /* UI Text Aliases */
  --ui-text-xs: var(--font-size-xs);
  --ui-text-sm: var(--font-size-sm);
  --ui-text-base: var(--font-size-base);
  --ui-text-lg: var(--font-size-lg);
  --ui-text-xl: var(--font-size-xl);
  --ui-text-2xl: var(--font-size-2xl);
  --ui-text-3xl: var(--font-size-3xl);
  /* UI Font Aliases */
  --ui-font-light: var(--font-weight-light);
  --ui-font-normal: var(--font-weight-normal);
  --ui-font-medium: var(--font-weight-medium);
  --ui-font-semibold: var(--font-weight-semibold);
  --ui-font-bold: var(--font-weight-bold);
  /* UI Radius Aliases */
  --ui-radius-sm: var(--radius-sm);
  --ui-radius-md: var(--radius-md);
  --ui-radius-lg: var(--radius-lg);
  --ui-radius-xl: var(--radius-xl);
  /* ========================================
     Border Radius - Minimal (less rounded)
     ======================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  /* ========================================
     Responsive Breakpoints
     ======================================== */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  /* ========================================
     Layout Dimensions
     ======================================== */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 80px;
  --header-height: 80px;
  --container-max-width: 100%;
  /* Full width by default */
  /* ========================================
     Transitions
     ======================================== */
  --transition-none: none;
  --transition-fast: 150ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 700ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Transition Properties */
  /* Transitions removed for minimal design */
  /* ========================================
     Z-Index Layers
     ======================================== */
  --z-negative: -1;
  --z-normal: 1;
  --z-header: 100;
  --z-sidebar: 200;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-tooltip: 1100;
  /* ========================================
     Shadows - Minimal (reduced for modern minimal design)
     ======================================== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  --shadow-none: none;
  /* ========================================
     Typography Scale
     ======================================== */
  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */
  --font-size-4xl: 2.25rem;
  /* 36px */
  --font-size-5xl: 3rem;
  /* 48px */
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  /* Font Families */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  --font-family-display: 'EvelinaHeart', cursive;
  /* Line Heights - Modern Minimal (more breathing room) */
  --line-height-none: 1;
  --line-height-tight: 1.4;
  --line-height-snug: 1.5;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;
  --line-height-loose: 2;
  /* Letter Spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  /* ========================================
     Performance Optimizations
     ======================================== */
  --gpu-accelerated: translateZ(0);
  --will-change-opacity: opacity;
  --will-change-scroll: scroll-position;
}

/**
 * Minimal Normalize
 * Sadece gerekli normalize kuralları
 * Reset CSS'in aşırı agresif kuralları yerine minimal yaklaşım
 */
/* Box-sizing: border-box for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* HTML & Body base styles */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--color-mode-bg, #f8fafc);
}

body {
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  background-color: var(--color-mode-bg, #f8fafc);
  color: var(--color-mode-text, #0f172a);
  font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
}

/* Dark mode body styles removed - themes should only change colors, not layout */
/* Media elements */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Button base styles */
button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

/* Links inherit color by default (theme will override) */
a {
  text-decoration: none;
  color: inherit;
}

/* Lists - only remove default if needed (not all lists) */
ul[class],
ol[class] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove default margins for headings and paragraphs */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

/* Remove default styles for form elements */
fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

/**
 * Typography System
 * Modern, accessible typography with improved hierarchy
 * 
 * Note: EvelinaHeart font tanımı header.php'de dinamik olarak yapılıyor
 */
/* Font Size Variables */
:root {
  --font-size-xs: 0.75rem;
  /* 12px */
  --font-size-sm: 0.875rem;
  /* 14px */
  --font-size-base: 1rem;
  /* 16px */
  --font-size-lg: 1.125rem;
  /* 18px */
  --font-size-xl: 1.25rem;
  /* 20px */
  --font-size-2xl: 1.5rem;
  /* 24px */
  --font-size-3xl: 1.875rem;
  /* 30px */
  --font-size-4xl: 2.25rem;
  /* 36px */
  --font-size-5xl: 3rem;
  /* 48px */
  /* Font Weight Variables */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  /* Font Family Variables */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  --font-family-display: 'EvelinaHeart', cursive;
  /* Line Height Variables */
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;
  /* Letter Spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
}

/* Base Typography */
body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-mode-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Heading Hierarchy */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-mode-text);
  margin-top: 0;
  margin-bottom: var(--spacing-md);
  letter-spacing: var(--letter-spacing-tight);
}

h1,
h2,
h3 {
  margin-bottom: var(--spacing-lg);
}

h4,
h5,
h6 {
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-lg);
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-lg);
  letter-spacing: var(--letter-spacing-tight);
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  margin-bottom: var(--spacing-md);
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
}

h5 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
}

h6 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-sm);
  letter-spacing: var(--letter-spacing-wide);
  font-size: var(--font-size-sm);
}

/* Paragraphs */
p {
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-relaxed);
}

p:last-child {
  margin-bottom: 0;
}

/* Links */
a {
  color: var(--color-mode-link);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}

/* Link hover removed */

a:focus {
  outline: 2px solid var(--color-mode-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

a:active {
  opacity: 0.8;
}

/* Code */
code {
  font-family: var(--font-family-mono);
  font-size: 0.9em;
  background: var(--color-mode-bg-secondary);
  color: var(--color-mode-text);
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-mode-border);
}

pre {
  font-family: var(--font-family-mono);
  background: var(--color-mode-bg-secondary);
  color: var(--color-mode-text);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  border: 1px solid var(--color-mode-border);
  line-height: var(--line-height-relaxed);
}

pre code {
  background: transparent;
  padding: 0;
  border: none;
  font-size: 0.875em;
}

/* Lists */
ul,
ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

li {
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-relaxed);
}

/* Blockquote */
blockquote {
  margin: var(--spacing-lg) 0;
  padding-left: var(--spacing-lg);
  border-left: 4px solid var(--color-mode-accent);
  color: var(--color-mode-text-secondary);
  font-style: italic;
}

/* Text Utilities */
.text-xs {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
}

.text-sm {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.text-base {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.text-xl {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-relaxed);
}

.text-2xl {
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
}

.text-3xl {
  font-size: var(--font-size-3xl);
  line-height: var(--line-height-tight);
}

.text-4xl {
  font-size: var(--font-size-4xl);
  line-height: var(--line-height-tight);
}

.text-5xl {
  font-size: var(--font-size-5xl);
  line-height: var(--line-height-tight);
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-extrabold {
  font-weight: var(--font-weight-extrabold);
}

.leading-tight {
  line-height: var(--line-height-tight);
}

.leading-snug {
  line-height: var(--line-height-snug);
}

.leading-normal {
  line-height: var(--line-height-normal);
}

.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

.leading-loose {
  line-height: var(--line-height-loose);
}

.tracking-tighter {
  letter-spacing: var(--letter-spacing-tighter);
}

.tracking-tight {
  letter-spacing: var(--letter-spacing-tight);
}

.tracking-normal {
  letter-spacing: var(--letter-spacing-normal);
}

.tracking-wide {
  letter-spacing: var(--letter-spacing-wide);
}

.tracking-wider {
  letter-spacing: var(--letter-spacing-wider);
}

.tracking-widest {
  letter-spacing: var(--letter-spacing-widest);
}

/* Text Colors */
.text-primary {
  color: var(--color-mode-text);
}

.text-secondary {
  color: var(--color-mode-text-secondary);
}

.text-muted {
  color: var(--color-mode-text-muted);
}

.text-accent {
  color: var(--color-mode-accent);
}

.text-success {
  color: var(--color-mode-success);
}

.text-error {
  color: var(--color-mode-error);
}

.text-warning {
  color: var(--color-mode-warning);
}

.text-info {
  color: var(--color-mode-info);
}

/* Text Alignment */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

/* Text Transform */
.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

/* Text Decoration */
.underline {
  text-decoration: underline;
}

.line-through {
  text-decoration: line-through;
}

.no-underline {
  text-decoration: none;
}

/* Truncate */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive Typography */
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
  }

  h4 {
    font-size: var(--font-size-lg);
  }
}

/**
 * Layout
 * Base layout structures with responsive breakpoints
 */
/* Responsive Breakpoints - Moved to variables.css for consistency */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

@media (max-width: 640px) {
  .container {
    padding: 0 var(--spacing-sm);
  }
}

/* Main-wrapper ve main-content kuralları layout-fix bölümünde tanımlı */
.main-content>*:first-child {
  margin-top: 0;
}

.main-content>*:last-child {
  margin-bottom: 0;
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Responsive Grid - Mobile First */
/* Default: 1 column on mobile */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Tablet (md: 768px+) */
@media (min-width: 768px) {
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Override base classes on tablet */
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop (lg: 1024px+) */
@media (min-width: 1024px) {
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Override base classes on desktop */
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

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

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

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

/* Width & Height Utilities */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-auto {
  width: auto;
}

.h-auto {
  height: auto;
}

/* Display Utilities */
.hidden {
  display: none;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.inline-flex {
  display: inline-flex;
}

/* Responsive Display */
@media (max-width: 768px) {
  .hidden-mobile {
    display: none;
  }

  .block-mobile {
    display: block;
  }
}

@media (min-width: 769px) {
  .hidden-desktop {
    display: none;
  }
}

/* Spacing Utilities */
.p-0 {
  padding: 0;
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.p-2xl {
  padding: var(--spacing-2xl);
}

.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.px-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

.m-0 {
  margin: 0;
}

.m-xs {
  margin: var(--spacing-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

.m-2xl {
  margin: var(--spacing-2xl);
}

.mt-auto {
  margin-top: auto;
}

.mb-auto {
  margin-bottom: auto;
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

/* Space Between Utilities */
.space-y-xs>*+* {
  margin-top: var(--spacing-xs);
}

.space-y-sm>*+* {
  margin-top: var(--spacing-sm);
}

.space-y-md>*+* {
  margin-top: var(--spacing-md);
}

.space-y-lg>*+* {
  margin-top: var(--spacing-lg);
}

.space-y-xl>*+* {
  margin-top: var(--spacing-xl);
}

.space-x-xs>*+* {
  margin-left: var(--spacing-xs);
}

.space-x-sm>*+* {
  margin-left: var(--spacing-sm);
}

.space-x-md>*+* {
  margin-left: var(--spacing-md);
}

.space-x-lg>*+* {
  margin-left: var(--spacing-lg);
}

.space-x-xl>*+* {
  margin-left: var(--spacing-xl);
}

/* ========================================
   UTILITY CLASSES - TailwindCSS Replacement
   Sadece gerekli utility'ler
   ======================================== */
/* Spacing Utilities */
.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 0.25rem;
}

.m-2 {
  margin: 0.5rem;
}

.m-3 {
  margin: 0.75rem;
}

.m-4 {
  margin: 1rem;
}

.m-6 {
  margin: 1.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

/* Grid & Flexbox utilities moved to comprehensive utilities section (line ~5327) */
/* Display Utilities */
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.hidden {
  display: none;
}

/* Width & Height */
.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.w-4 {
  width: 1rem;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

.h-4 {
  height: 1rem;
}

.min-h-screen {
  min-height: 100vh;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-7xl {
  max-width: 80rem;
}

/* Text Utilities */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Colors - Using CSS Variables */
.bg-gray-50 {
  background-color: var(--color-mode-bg);
}

.bg-white {
  background-color: var(--color-mode-bg-card);
}

.bg-gray-800 {
  background-color: var(--color-mode-bg-tertiary);
}

.bg-gray-900 {
  background-color: var(--color-mode-bg);
}

.bg-blue-50 {
  background-color: var(--color-mode-accent);
  opacity: 0.1;
}

.bg-blue-600 {
  background-color: var(--color-mode-button-bg);
}

.bg-blue-700 {
  background-color: var(--color-mode-button-hover);
}

.bg-red-50 {
  background-color: var(--color-mode-error);
  opacity: 0.1;
}

.bg-green-50 {
  background-color: var(--color-mode-success);
  opacity: 0.1;
}

.text-gray-500 {
  color: var(--color-mode-text-muted);
}

.text-gray-600 {
  color: var(--color-mode-text-secondary);
}

.text-gray-700 {
  color: var(--color-mode-text);
}

.text-gray-900 {
  color: var(--color-mode-text);
}

.text-white {
  color: var(--color-mode-text-inverse);
}

.text-blue-600 {
  color: var(--color-mode-accent);
}

.text-blue-800 {
  color: var(--color-mode-accent-dark);
}

.text-blue-900 {
  color: var(--color-mode-accent-dark);
}

.text-red-600 {
  color: var(--color-mode-error);
}

.text-green-600 {
  color: var(--color-mode-success);
}

/* Border Utilities */
.border {
  border-width: 1px;
  border-style: solid;
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-gray-200 {
  border-color: var(--color-mode-border);
}

.border-gray-300 {
  border-color: var(--color-mode-border);
}

.border-gray-600 {
  border-color: var(--color-mode-border-strong);
}

.border-gray-700 {
  border-color: var(--color-mode-border-strong);
}

.border-blue-200 {
  border-color: var(--color-mode-accent);
  opacity: 0.3;
}

.border-red-200 {
  border-color: var(--color-mode-error);
  opacity: 0.3;
}

.border-green-200 {
  border-color: var(--color-mode-success);
  opacity: 0.3;
}

/* Border Radius */
.rounded {
  border-radius: 0.25rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

/* Shadow */
.shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Hover States removed */

/* Focus States */
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  box-shadow: 0 0 0 3px var(--color-mode-accent);
  opacity: 0.3;
}

.focus\:ring-blue-500:focus {
  box-shadow: 0 0 0 3px var(--color-mode-accent);
  opacity: 0.3;
}

.focus\:ring-offset-2:focus {
  outline-offset: 2px;
}

.focus\:border-transparent:focus {
  border-color: transparent;
}

/* Transitions */
.transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

/* List Styles */
.list-disc {
  list-style-type: disc;
}

.list-inside {
  list-style-position: inside;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .dark\:bg-gray-700 {
    background-color: var(--color-mode-bg-tertiary);
  }

  .dark\:bg-gray-800 {
    background-color: var(--color-mode-bg-tertiary);
  }

  .dark\:bg-gray-900 {
    background-color: var(--color-mode-bg);
  }

  .dark\:text-white {
    color: var(--color-mode-text-inverse);
  }

  .dark\:text-gray-300 {
    color: var(--color-mode-text-secondary);
  }

  .dark\:text-gray-400 {
    color: var(--color-mode-text-muted);
  }

  .dark\:text-blue-200 {
    color: var(--color-mode-accent-light);
  }

  .dark\:text-blue-300 {
    color: var(--color-mode-accent-light);
  }

  .dark\:text-red-400 {
    color: var(--color-mode-error);
  }

  .dark\:text-green-400 {
    color: var(--color-mode-success);
  }

  .dark\:border-gray-600 {
    border-color: var(--color-mode-border);
  }

  .dark\:border-gray-700 {
    border-color: var(--color-mode-border-strong);
  }

  .dark\:border-blue-800 {
    border-color: var(--color-mode-accent-dark);
  }

  .dark\:border-red-800 {
    border-color: var(--color-mode-error);
    opacity: 0.5;
  }

  .dark\:border-green-800 {
    border-color: var(--color-mode-success);
    opacity: 0.5;
  }

  /* Dark mode hovers removed */
}

/* Responsive Utilities */
@media (min-width: 640px) {
  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ========================================
   NEW UTILITY CLASSES
   ======================================== */
/* Opacity */
.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

.cursor-wait {
  cursor: wait;
}

.cursor-move {
  cursor: move;
}

/* Overflow */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* Position */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.static {
  position: static;
}

/* Top, Right, Bottom, Left */
.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

/* Z-Index */
.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

/* Object Fit */
.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}

.object-fill {
  object-fit: fill;
}

.object-none {
  object-fit: none;
}

/* Pointer Events */
.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* User Select */
.select-none {
  user-select: none;
}

.select-text {
  user-select: text;
}

.select-all {
  user-select: all;
}

.select-auto {
  user-select: auto;
}

/* Transform utilities removed - animations disabled for minimal design */
/* Will Change (Performance) */
.will-change-auto {
  will-change: auto;
}

.will-change-scroll {
  will-change: scroll-position;
}

.will-change-contents {
  will-change: contents;
}

.will-change-transform {
  will-change: transform;
}

/* Backdrop Filter */
.backdrop-blur-none {
  backdrop-filter: none;
}

.backdrop-blur-sm {
  backdrop-filter: blur(4px);
}

.backdrop-blur {
  backdrop-filter: blur(8px);
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
  backdrop-filter: blur(16px);
}

.backdrop-blur-xl {
  backdrop-filter: blur(24px);
}

.backdrop-blur-2xl {
  backdrop-filter: blur(40px);
}

/* Aspect Ratio */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.aspect-3-2 {
  aspect-ratio: 3 / 2;
}

/* Scroll Behavior */
.scroll-smooth {
  scroll-behavior: smooth;
}

.scroll-auto {
  scroll-behavior: auto;
}

/* Isolation */
.isolate {
  isolation: isolate;
}

.isolation-auto {
  isolation: auto;
}

/* ===================================================================
   VENDOR STYLES - Kütüphane ve 3. Parti CSS'ler
   Bu dosya harici kütüphanelerin stillerini içerir
   ================================================================= */
/* ===== Font Import ===== */
/* Google Fonts CDN kaldırıldı - yerel fontlar kullanılıyor */
/* ===== JsVectorMap Styles ===== */
/* ===== Flatpickr Styles (Date Picker) ===== */
/* ===== Dropzone Styles (File Upload) ===== */
/* Animation utilities removed - animations disabled for minimal design */
/* Stagger Animation for Lists */
.stagger-item {
  opacity: 0;
}

.stagger-item:nth-child(1) {
  animation-delay: 0.05s;
}

.stagger-item:nth-child(2) {
  animation-delay: 0.1s;
}

.stagger-item:nth-child(3) {
  animation-delay: 0.15s;
}

.stagger-item:nth-child(4) {
  animation-delay: 0.2s;
}

.stagger-item:nth-child(5) {
  animation-delay: 0.25s;
}

.stagger-item:nth-child(6) {
  animation-delay: 0.3s;
}

.stagger-item:nth-child(7) {
  animation-delay: 0.35s;
}

.stagger-item:nth-child(8) {
  animation-delay: 0.4s;
}

.stagger-item:nth-child(9) {
  animation-delay: 0.45s;
}

.stagger-item:nth-child(10) {
  animation-delay: 0.5s;
}

/* ===== Layout Components ===== */
.sidebar-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0;
}

.sidebar-header img {
  width: 150px;
  height: auto;
  display: block;
}

.logo img {
  width: 150px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  text-align: center;
}

/* ===== Glass Effect ===== */
.glass-box {
  border-radius: 1rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}

/* ===== Mobile Bottom Navigation ===== */
@media (min-width: 1024px) {
  .mobile-bottom-nav {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .mobile-bottom-nav {
    display: flex !important;
  }
}

.mobile-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1rem 0.6rem 1rem;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ===== User Panel Dropdown ===== */
.user-panel-dropdown {
  position: absolute !important;
  bottom: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-bottom: 0.5rem !important;
  z-index: 9999 !important;
}

/* ===== Form Elements ===== */
.form-check-input:checked~.box {
  border-width: 6px;
}

.form-check-input:checked~.box span {
  opacity: 100%;
}

.taskCheckbox:checked~.box span {
  opacity: 100%;
}

.taskCheckbox:checked~p {
  text-decoration-line: line-through;
}

.taskCheckbox:checked~.box {
  border-width: 6px;
}

/* ===== Task Components ===== */
.task.is-dragging {
  border-radius: 0.75rem;
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  opacity: 0.8;
  cursor: grabbing;
}

/* ===== Carousel ===== */
.carouselThree .swiper-pagination-bullet-active,
.carouselFour .swiper-pagination-bullet-active {
  width: calc(0.25rem * 6.5);
  border-radius: 0.75rem;
}

/* ===== Responsive Utilities ===== */
@media (min-width: 640px) {
  .sm\\:gap-6 {
    gap: 1.5rem;
  }
}

@media (min-width: 768px) {
  .md\\:p-6 {
    padding: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .lg\:w-\[90px\] {
    width: 90px;
  }
}

/* ===== Transitions ===== */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ===== Custom Scrollbar ===== */
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  opacity: 0.8;
}

/* ===== No Scrollbar ===== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== Sidebar Specific ===== */
/* Note: Sidebar has
  -webkit-appearance: none;
}
/* ===== Flatpickr Wrapper ===== */
.flatpickr-wrapper {
  width: 100%;
}

/* ===================================================================
   CUSTOM COMPONENTS - Özel Bileşen Stilleri
   Bu dosya projeye özel custom component stillerini içerir
   ================================================================= */
/* ===== Sidebar Hover Effects ===== */
/* Note: Sidebar has
}
/* Legacy sidebar hover removed */
*/

/* ===== Custom Scrollbar ===== */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: var(--color-mode-scrollbar-track);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: var(--color-mode-scrollbar-thumb);
}

/* Scrollbar thumb hover removed */

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-mode-scrollbar-thumb);
}

/* ===== No Scrollbar ===== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===== Table Checkbox ===== */
.tableCheckbox:checked~span span {
  opacity: 100%;
}

.tableCheckbox:checked~span {
  border-color: var(--color-mode-accent);
  background-color: var(--color-mode-accent);
}

/* ===== Task Checkbox ===== */
.taskCheckbox:checked~.box span {
  opacity: 100%;
}

.taskCheckbox:checked~p {
  color: var(--color-mode-text-muted);
  text-decoration-line: line-through;
}

.taskCheckbox:checked~.box {
  border-color: var(--color-mode-accent);
  background-color: var(--color-mode-accent);
}

/* ===== Task Dragging ===== */
.task.is-dragging {
  border-radius: 0.75rem;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
  opacity: 0.8;
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ===== Form Check Input ===== */
.form-check-input:checked~span {
  border-style: solid;
  border-width: 6px;
  border-color: var(--color-mode-accent);
}

.theme-dark .form-check-input:checked~span,
.form-check-input:checked~span {
  border-color: var(--color-mode-accent);
}

/* ===== Date Input Icon ===== */
.input-date-icon::-webkit-calendar-picker-indicator {
  opacity: 0;
  -webkit-appearance: none;
}

/* ===== Swiper Navigation Buttons ===== */
.swiper-button-prev svg,
.swiper-button-next svg {
  height: auto !important;
  width: auto !important;
}

/* ===== ApexCharts Custom Styles ===== */
.apexcharts-legend-text {
  color: var(--color-mode-text) !important;
}

.theme-dark .apexcharts-legend-text,
.apexcharts-legend-text {
  color: var(--color-mode-text-muted) !important;
}

.apexcharts-text {
  fill: var(--color-mode-text) !important;
}

.theme-dark .apexcharts-text,
.apexcharts-text {
  fill: var(--color-mode-text-muted) !important;
}

.apexcharts-gridline {
  stroke: var(--color-mode-bg-secondary) !important;
}

.theme-dark .apexcharts-gridline,
.apexcharts-gridline {
  stroke: var(--color-mode-bg-tertiary) !important;
}

/* ===== JVM Map Custom Styles ===== */
.jvm-container {
  background-color: var(--color-mode-bg-tertiary) !important;
}

.theme-dark .jvm-container,
.jvm-container {
  background-color: var(--color-mode-bg) !important;
}

.jvm-region.jvm-element {
  fill: var(--color-mode-border) !important;
}

.jvm-region.jvm-element:hover {
  fill: var(--color-mode-accent) !important;
}

.theme-dark .jvm-region.jvm-element,
.jvm-region.jvm-element {
  fill: var(--color-mode-border-strong) !important;
}

.jvm-marker.jvm-element {
  stroke: var(--color-mode-border-light) !important;
}

.theme-dark .jvm-marker.jvm-element,
.jvm-marker.jvm-element {
  stroke: var(--color-mode-border-strong) !important;
}

/* ===================================================================
   THEME MANAGER - Professional Theme Management System
   Version: 2.0
   Description: Centralized theme management for all color modes
   ================================================================= */
/* NOT: Tema modları artık ayrı ayrı yükleniyor (theme-config.php'de)
   Bu dosya sadece tema yönetim mantığını içerir */
/* ===== Global Theme Application ===== */
/* Theme colors are defined in theme files - no need for theme-specific selectors here */
/* All elements use CSS variables that change based on theme */
/* ===== Background Overrides ===== */
.theme-light .bg-white,
.theme-dark .bg-white,
.bg-white,
.bg-white,
.bg-white,
.bg-white,
.bg-white {
  background-color: var(--color-mode-bg-card) !important;
}

.dark\:bg-white\/\[0\.03\] {
  background-color: var(--color-mode-bg-secondary) !important;
}

.bg-gray-50 {
  background-color: var(--color-mode-bg-tertiary) !important;
}

/* ===== Text Color Overrides ===== */
.theme-light .text-gray-800,
.theme-dark .text-gray-800,
.text-gray-800,
.text-gray-800,
.text-gray-800,
.text-gray-800,
.text-gray-800 {
  color: var(--color-mode-text) !important;
}

.theme-light .dark\\:text-white,
.theme-dark .dark\\:text-white,
.dark\\:text-white,
.dark\\:text-white,
.dark\\:text-white,
.dark\\:text-white,
.dark\\:text-white {
  color: var(--color-mode-text) !important;
}

.theme-light .text-gray-500,
.theme-dark .text-gray-500,
.text-gray-500,
.text-gray-500,
.text-gray-500,
.text-gray-500,
.text-gray-500 {
  color: var(--color-mode-text-secondary) !important;
}

.theme-light .dark\\:text-gray-400,
.theme-dark .dark\\:text-gray-400,
.dark\\:text-gray-400,
.dark\\:text-gray-400,
.dark\\:text-gray-400,
.dark\\:text-gray-400,
.dark\\:text-gray-400 {
  color: var(--color-mode-text-secondary) !important;
}

.theme-light .text-gray-400,
.theme-dark .text-gray-400,
.text-gray-400,
.text-gray-400,
.text-gray-400,
.text-gray-400,
.text-gray-400 {
  color: var(--color-mode-text-muted) !important;
}

/* ===== Border Color Overrides ===== */
.theme-light .border-gray-200,
.theme-dark .border-gray-200,
.border-gray-200,
.border-gray-200,
.border-gray-200,
.border-gray-200,
.border-gray-200 {
  border-color: var(--color-mode-border) !important;
}

.theme-light .dark\\:border-gray-800,
.theme-dark .dark\\:border-gray-800,
.dark\\:border-gray-800,
.dark\\:border-gray-800,
.dark\\:border-gray-800,
.dark\\:border-gray-800,
.dark\\:border-gray-800 {
  border-color: var(--color-mode-border) !important;
}

.theme-light .border-gray-300,
.theme-dark .border-gray-300,
.border-gray-300,
.border-gray-300,
.border-gray-300,
.border-gray-300,
.border-gray-300 {
  border-color: var(--color-mode-border-strong) !important;
}

/* ===== Component-Specific Styles ===== */
/* Sidebar */
.theme-light .sidebar,
.theme-dark .sidebar,
.sidebar,
.sidebar,
.sidebar,
.sidebar,
.sidebar {
  background: var(--color-mode-bg-card);

  border-color: var(--color-mode-border) !important;
}

/* Menu Items */
.theme-light .menu-item,
.theme-dark .menu-item,
.menu-item,
.menu-item,
.menu-item,
.menu-item,
.menu-item {
  color: var(--color-mode-text) !important;
}

/* Menu item hover removed */

.theme-light .menu-item-active,
.theme-dark .menu-item-active,
.menu-item-active,
.menu-item-active,
.menu-item-active,
.menu-item-active,
.menu-item-active {
  background-color: var(--color-mode-accent) !important;
  color: var(--text-active) !important;
}

/* Active Menu Item Icon - Yeni sistem */
.theme-light .menu-item-active svg,
.theme-dark .menu-item-active svg,
.menu-item-active svg,
.menu-item-active svg,
.menu-item-active svg,
.menu-item-active svg,
.menu-item-active svg,
.theme-light .menu-item-active .menu-item-icon-active,
.theme-dark .menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active {
  color: var(--text-active) !important;
  fill: var(--text-active) !important;
  stroke: var(--text-active) !important;
}

/* Active Menu Item PNG Icon - Yeni sistem */
.theme-light .menu-item-active .png-icon,
.theme-dark .menu-item-active .png-icon,
.menu-item-active .png-icon,
.menu-item-active .png-icon,
.menu-item-active .png-icon,
.menu-item-active .png-icon,
.menu-item-active .png-icon,
.theme-light .menu-item-icon-active,
.theme-dark .menu-item-icon-active,
.menu-item-icon-active,
.menu-item-icon-active,
.menu-item-icon-active,
.menu-item-icon-active,
.menu-item-icon-active,
.theme-light .menu-item-active .menu-item-icon-active,
.theme-dark .menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active,
.menu-item-active .menu-item-icon-active {
  background: var(--icon-active) !important;
  fill: var(--icon-active) !important;
}

/* Cards and Containers */
.theme-light .rounded-2xl,
.theme-dark .rounded-2xl,
.rounded-2xl,
.rounded-2xl,
.rounded-2xl,
.rounded-2xl,
.rounded-2xl {
  background-color: var(--color-mode-bg-card) !important;
  border-color: var(--color-mode-border) !important;
  box-shadow: 0 1px 3px var(--color-mode-shadow) !important;
}

/* Buttons */
.theme-light .btn-primary,
.theme-dark .btn-primary,
.btn-primary,
.btn-primary,
.btn-primary,
.btn-primary,
.btn-primary {
  background-color: var(--color-mode-accent) !important;
  color: var(--color-mode-text-inverse) !important;
  border-color: var(--color-mode-accent) !important;
}

/* Btn primary hover removed */

/* Icons */
.theme-light .icon,
.theme-dark .icon,
.icon,
.icon,
.icon,
.icon,
.icon {
  color: var(--color-mode-text-secondary) !important;
}

.theme-light .icon-active,
.theme-dark .icon-active,
.icon-active,
.icon-active,
.icon-active,
.icon-active,
.icon-active {
  color: var(--color-mode-accent) !important;
}

/* Glass Effect */
.theme-light .glass-box,
.theme-dark .glass-box,
.glass-box,
.glass-box,
.glass-box,
.glass-box,
.glass-box {
  background: var(--color-mode-bg-secondary) !important;
  border: 1px solid var(--color-mode-border) !important;
}

/* Mobile Bottom Nav */
.theme-light .mobile-bottom-nav,
.theme-dark .mobile-bottom-nav,
.mobile-bottom-nav,
.mobile-bottom-nav,
.mobile-bottom-nav,
.mobile-bottom-nav,
.mobile-bottom-nav {
  background: var(--color-mode-bg-secondary) !important;
  border-top: 1px solid var(--color-mode-border) !important;
}

/* ===== Typography ===== */
.theme-light h1,
.theme-light h2,
.theme-light h3,
.theme-light h4,
.theme-light h5,
.theme-light h6,
.theme-dark h1,
.theme-dark h2,
.theme-dark h3,
.theme-dark h4,
.theme-dark h5,
.theme-dark h6,
h1,
h2,
h3,
h4,
h5,
h6,
h1,
h2,
h3,
h4,
h5,
h6,
h1,
h2,
h3,
h4,
h5,
h6,
h1,
h2,
h3,
h4,
h5,
h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-mode-text) !important;
}

.theme-light p,
.theme-light span,
.theme-light div,
.theme-dark p,
.theme-dark span,
.theme-dark div,
p,
span,
div,
p,
span,
div,
p,
span,
div,
p,
span,
div,
p,
span,
div {
  color: var(--color-mode-text) !important;
}

/* ===== Form Elements ===== */
.theme-light input,
.theme-dark input,
input,
input,
input,
input,
input {
  background-color: var(--color-mode-bg-card) !important;
  color: var(--color-mode-text) !important;
  border-color: var(--color-mode-border) !important;
}

.theme-light input:focus,
.theme-dark input:focus,
input:focus,
input:focus,
input:focus,
input:focus,
input:focus {
  border-color: var(--color-mode-accent) !important;
  box-shadow: 0 0 0 3px var(--color-mode-shadow) !important;
}

/* ===== Scrollbar Styling ===== */
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-mode-border-strong) !important;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background-color: var(--color-mode-bg-secondary) !important;
}

/* ===== Additional Tailwind Overrides ===== */
/* Background Color Overrides - Comprehensive */
.theme-light .bg-gray-100,
.theme-dark .bg-gray-100,
.bg-gray-100,
.bg-gray-100,
.bg-gray-100,
.bg-gray-100,
.bg-gray-100 {
  background-color: var(--color-mode-bg-secondary) !important;
}

.theme-light .bg-gray-200,
.theme-dark .bg-gray-200,
.bg-gray-200,
.bg-gray-200,
.bg-gray-200,
.bg-gray-200,
.bg-gray-200 {
  background-color: var(--color-mode-bg-tertiary) !important;
}

/* Dark Mode Variants */
.theme-light .dark\\:bg-gray-900,
.theme-dark .dark\\:bg-gray-900,
.dark\\:bg-gray-900,
.dark\\:bg-gray-900,
.dark\\:bg-gray-900,
.dark\\:bg-gray-900,
.dark\\:bg-gray-900 {
  background-color: var(--color-mode-bg) !important;
}

.theme-light .dark\\:bg-gray-800,
.theme-dark .dark\\:bg-gray-800,
.dark\\:bg-gray-800,
.dark\\:bg-gray-800,
.dark\\:bg-gray-800,
.dark\\:bg-gray-800,
.dark\\:bg-gray-800 {
  background-color: var(--color-mode-bg-card) !important;
}

.theme-light .dark\\:bg-gray-700,
.theme-dark .dark\\:bg-gray-700,
.dark\\:bg-gray-700,
.dark\\:bg-gray-700,
.dark\\:bg-gray-700,
.dark\\:bg-gray-700,
.dark\\:bg-gray-700 {
  background-color: var(--color-mode-bg-secondary) !important;
}

/* Hover Background Overrides removed */

/* Text Color Overrides - Additional */
.theme-light .text-gray-600,
.theme-dark .text-gray-600,
.text-gray-600,
.text-gray-600,
.text-gray-600,
.text-gray-600,
.text-gray-600 {
  color: var(--color-mode-text-secondary) !important;
}

.theme-light .text-gray-700,
.theme-dark .text-gray-700,
.text-gray-700,
.text-gray-700,
.text-gray-700,
.text-gray-700,
.text-gray-700 {
  color: var(--color-mode-text) !important;
}

.theme-light .text-gray-900,
.theme-dark .text-gray-900,
.text-gray-900,
.text-gray-900,
.text-gray-900,
.text-gray-900,
.text-gray-900 {
  color: var(--color-mode-text) !important;
}

.theme-light .dark\\:text-gray-200,
.theme-dark .dark\\:text-gray-200,
.dark\\:text-gray-200,
.dark\\:text-gray-200,
.dark\\:text-gray-200,
.dark\\:text-gray-200,
.dark\\:text-gray-200 {
  color: var(--color-mode-text) !important;
}

.theme-light .dark\\:text-gray-300,
.theme-dark .dark\\:text-gray-300,
.dark\\:text-gray-300,
.dark\\:text-gray-300,
.dark\\:text-gray-300,
.dark\\:text-gray-300,
.dark\\:text-gray-300 {
  color: var(--color-mode-text-secondary) !important;
}

.theme-light .dark\:text-white\/90,
.theme-dark .dark\:text-white\/90,
.dark\:text-white\/90,
.dark\:text-white\/90,
.dark\:text-white\/90,
.dark\:text-white\/90,
.dark\:text-white\/90 {
  color: var(--color-mode-text) !important;
}

.theme-light .dark\:text-white\/80,
.theme-dark .dark\:text-white\/80,
.dark\:text-white\/80,
.dark\:text-white\/80,
.dark\:text-white\/80,
.dark\:text-white\/80,
.dark\:text-white\/80 {
  color: var(--color-mode-text-secondary) !important;
}

/* Border Color Overrides - Additional */
.theme-light .border-gray-100,
.theme-dark .border-gray-100,
.border-gray-100,
.border-gray-100,
.border-gray-100,
.border-gray-100,
.border-gray-100 {
  border-color: var(--color-mode-border-light) !important;
}

.theme-light .dark\\:border-gray-700,
.theme-dark .dark\\:border-gray-700,
.dark\\:border-gray-700,
.dark\\:border-gray-700,
.dark\\:border-gray-700,
.dark\\:border-gray-700,
.dark\\:border-gray-700 {
  border-color: var(--color-mode-border) !important;
}

.theme-light .dark\\:border-gray-600,
.theme-dark .dark\\:border-gray-600,
.dark\\:border-gray-600,
.dark\\:border-gray-600,
.dark\\:border-gray-600,
.dark\\:border-gray-600,
.dark\\:border-gray-600 {
  border-color: var(--color-mode-border-strong) !important;
}

/* Link Overrides */
.theme-light a,
.theme-dark a,
a,
a,
a,
a,
a {
  color: var(--color-mode-link) !important;
}

a:hover,
a:focus {
  text-decoration: underline;
}

/* ===== Button Specific Overrides ===== */
/* Button base styles */
.theme-light button,
.theme-dark button,
button,
button,
button,
button,
button,
.theme-light input[type="submit"],
.theme-dark input[type="submit"],
input[type="submit"],
input[type="submit"],
input[type="submit"],
input[type="submit"],
input[type="submit"] {
  background-color: var(--color-mode-bg-card) !important;
  color: var(--color-mode-text) !important;
  border-color: var(--color-mode-border) !important;
}

/* Button with bg-white class */
.theme-light button.bg-white,
.theme-dark button.bg-white,
button.bg-white,
button.bg-white,
button.bg-white,
button.bg-white,
button.bg-white {
  background-color: var(--color-mode-bg-card) !important;
}

/* Hover effect removed */

/* Hover effect removed */

/* Hover effect removed */

/* Button hover removed */

/* Brand colored buttons and inputs */
.theme-light .bg-brand-500,
.theme-dark .bg-brand-500,
.bg-brand-500,
.bg-brand-500,
.bg-brand-500,
.bg-brand-500,
.bg-brand-500,
.theme-light input[type="submit"].bg-brand-500,
.theme-dark input[type="submit"].bg-brand-500,
input[type="submit"].bg-brand-500,
input[type="submit"].bg-brand-500,
input[type="submit"].bg-brand-500,
input[type="submit"].bg-brand-500,
input[type="submit"].bg-brand-500 {
  background-color: var(--color-mode-accent) !important;
  color: var(--color-mode-text-inverse) !important;
}

/* Brand hover removed */

/* Gradient hover removed */

/* ===== Global Transition ===== */
/* Transitions removed - animations disabled for minimal design */
/**
 * Common Theme Variables
 * Shared variables across all themes
 */
:root {
  /* Color mappings - will be overridden by theme files */
  --color-primary: var(--color-mode-accent);
  --color-primary-hover: var(--color-mode-accent-light);
  --color-primary-active: var(--color-mode-accent-dark);
  --color-bg: var(--color-mode-bg);
  --color-bg-secondary: var(--color-mode-bg-secondary);
  --color-bg-tertiary: var(--color-mode-bg-tertiary);
  --color-bg-card: var(--color-mode-bg-card);
  --color-text: var(--color-mode-text);
  --color-text-secondary: var(--color-mode-text-secondary);
  --color-text-muted: var(--color-mode-text-muted);
  --color-text-inverse: var(--color-mode-text-inverse);
  --color-border: var(--color-mode-border);
  --color-border-light: var(--color-mode-border-light);
  --color-border-strong: var(--color-mode-border-strong);
  --color-button-bg: var(--color-mode-button-bg);
  --color-button-text: var(--color-mode-button-text);
  --color-button-hover: var(--color-mode-button-hover);
  --color-button-active: var(--color-mode-button-active);
  --color-icon: var(--color-mode-icon);
  --color-icon-hover: var(--color-mode-icon-hover);
  --color-icon-active: var(--color-mode-icon-active);
  --color-active-bg: var(--color-mode-active-bg);
  --color-active-text: var(--color-mode-active-text);
  --color-active-border: var(--color-mode-active-border);
  --color-hover: var(--color-mode-hover);
  --color-hover-light: var(--color-mode-hover-light);
  --color-success: var(--color-mode-success);
  --color-warning: var(--color-mode-warning);
  --color-error: var(--color-mode-error);
  --color-info: var(--color-mode-info);
  --color-input-bg: var(--color-mode-input-bg);
  --color-input-border: var(--color-mode-input-border);
  --color-input-focus: var(--color-mode-input-focus);
  --color-input-text: var(--color-mode-input-text);
  --color-input-placeholder: var(--color-mode-input-placeholder);
  --color-link: var(--color-mode-link);
  --color-link-hover: var(--color-mode-link-hover);
  --color-link-active: var(--color-mode-link-active);
  --color-scrollbar-track: var(--color-mode-scrollbar-track);
  --color-scrollbar-thumb: var(--color-mode-scrollbar-thumb);
  --color-scrollbar-thumb-hover: var(--color-mode-scrollbar-thumb-hover);
  /* UI Component Variables (for sidebar, header, etc.) */
  --ui-card-bg: var(--color-mode-bg-card);
  --ui-bg: var(--color-mode-bg);
  --ui-border: var(--color-mode-border);
  --ui-border-hover: var(--color-mode-border-strong);
  --ui-primary: var(--color-mode-accent);
  --ui-text: var(--color-mode-text);
  --ui-text-secondary: var(--color-mode-text-secondary);
  --ui-text-muted: var(--color-mode-text-muted);
  --ui-success: var(--color-mode-success);
  --ui-error: var(--color-mode-error);
  --ui-warning: var(--color-mode-warning);
  --ui-info: var(--color-mode-info);
  /* Legacy color mappings for backward compatibility */
  --color-brand-500: var(--color-mode-accent);
  --color-gray-200: var(--color-mode-border-light);
  --color-gray-300: var(--color-mode-border);
  --color-gray-400: var(--color-mode-text-muted);
}

/* Apply theme based on data-theme attribute */
/* Theme variables are defined in theme-specific CSS files */
/* Theme selectors use CSS variables - no empty rulesets needed */
/* Removed: oled-dark, orange-light, orange-dark, purple-light, purple-dark themes */
/* Only light and dark themes are supported */
/* Theme color definitions are now in separate files: uinart/css/themes/light.css and uinart/css/themes/dark.css */
/* This ensures themes only change colors, not layout/UI structure */
/* Theme definitions removed from all.css to prevent conflicts - use theme files instead */
/**
 * Sidebar Component
 * Fixed vertical navigation with oval design
 * Layout-fix kuralları ile entegre edildi
 */
.sidebar,
.ui-sidebar {
  position: fixed;
  left: 16px;
  top: 10px;
  bottom: 10px;
  width: 80px;
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border-light);
  border-radius: 50px;
  display: flex;
  flex-direction: column;
  z-index: var(--z-sidebar);
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  height: calc(100vh - 20px);
}

/* Sidebar hover shadow removed */

.sidebar.expanded,
.ui-sidebar.expanded {
  width: 280px;
  padding: 20px;
}

/* Sidebar Scrollbar - Disabled */
.sidebar-nav::-webkit-scrollbar {
  display: none;
  width: 0;
}

.sidebar-nav {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Logo Section */
.sidebar-logo {
  height: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--spacing-md);
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 0;
  padding: 0;
  position: relative;
}

.sidebar.expanded .sidebar-logo {
  justify-content: flex-start;
  padding-left: 10px;
}

/* Logo Text (Full Logo - Expanded) */
.sidebar-logo-text {
  display: none;
  font-family: 'EvelinaHeart', cursive;
  font-size: 3rem;
  font-weight: 500;
  -webkit-text-stroke: 0;
  line-height: 1;
  flex-shrink: 0;
  white-space: nowrap;
}

.sidebar.expanded .sidebar-logo-text {
  display: flex;
  align-items: center;
}

.sidebar:not(.expanded) .sidebar-logo-text {
  display: none !important;
}

.logo-u {
  background: linear-gradient(135deg, #c97b4a, #8b5a9f, #5a9ea8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.logo-rest {
  background: linear-gradient(135deg, #8b5a9f, #5a9ea8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-left: 2px;
}

/* Logo Icon (Collapsed - Only "U" letter) */
.sidebar-logo-icon {
  display: none;
  font-family: 'EvelinaHeart', cursive;
  font-size: 3rem;
  font-weight: 500;
  -webkit-text-stroke: 0;
  line-height: 1;
  background: linear-gradient(135deg, #c97b4a, #8b5a9f, #5a9ea8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  user-select: none;
}

.sidebar-logo-icon:hover {
  transform: scale(1.1);
  opacity: 0.9;
}

.sidebar-logo-icon:active {
  transform: scale(0.95);
}

.sidebar:not(.expanded) .sidebar-logo-icon {
  display: flex;
}

.sidebar.expanded .sidebar-logo-icon {
  display: none !important;
}

/* Sidebar Search */
.sidebar-search {
  padding: 0 var(--spacing-sm) var(--spacing-sm);
  display: block;
  flex-shrink: 0;
}

.sidebar-search-input {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar.expanded .sidebar-search-input {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sidebar:not(.expanded) .sidebar-search-icon {
  cursor: pointer;
}

.sidebar:not(.expanded) .sidebar-search-wrapper {
  cursor: pointer;
}

/* Search wrapper hover removed */

.sidebar-search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 32px;
  justify-content: center;
}

.sidebar.expanded .sidebar-search-wrapper {
  justify-content: flex-start;
}

.sidebar-search-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-mode-text-muted);
  font-size: 14px;
  pointer-events: none;
  z-index: 2;
  transition: all 0.3s ease;
}

.sidebar.expanded .sidebar-search-icon {
  left: 10px;
  transform: translateY(-50%);
}

.sidebar-search-input {
  width: 100%;
  height: 32px;
  padding: 6px 32px 6px 32px;
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  background: var(--color-mode-bg-card);
  color: var(--color-mode-text);
  font-size: 12px;
  outline: none;
  transition: all 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.sidebar-search-input:focus {
  border-color: var(--color-mode-accent);
  background: var(--color-mode-bg-secondary);
}

.sidebar-search-input::placeholder {
  color: var(--color-mode-text-muted);
}

.sidebar-search-clear {
  position: absolute;
  right: 6px;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--color-mode-text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 10px;
  z-index: 1;
}

/* Search clear hover removed */

/* Navigation Items */
.sidebar-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow: visible;
  overflow-y: visible;
  overflow-x: hidden;
  padding: var(--spacing-xs) 0;
  max-height: none;
}

/* Nav Categories */
.nav-category {
  margin-bottom: var(--spacing-xs);
}

.nav-category:last-child {
  margin-bottom: 0;
}

.nav-category-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  min-height: 24px;
}

.sidebar.expanded .nav-category-header {
  opacity: 1;
  visibility: visible;
}

.nav-category-icon {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--color-mode-text-muted);
  margin-right: var(--spacing-xs);
  flex-shrink: 0;
}

.nav-category-title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-mode-text-muted);
}

.nav-category-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Favorites Section */
.nav-favorites {
  margin-bottom: var(--spacing-xs);
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-mode-border);
  flex-shrink: 0;
}

.nav-favorites .nav-category-header {
  opacity: 0;
  visibility: hidden;
}

.sidebar.expanded .nav-favorites .nav-category-header {
  opacity: 1;
  visibility: visible;
}

/* No Results Message */
.nav-no-results {
  padding: var(--spacing-xl) var(--spacing-md);
  text-align: center;
  color: var(--color-mode-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
}

.nav-no-results i {
  font-size: 32px;
  opacity: 0.5;
}

.nav-no-results p {
  margin: 0;
  font-size: 14px;
}

.nav-item {
  display: flex;
  align-items: center;
  min-height: 40px;
  height: 40px;
  padding: 0 10px;
  color: var(--color-mode-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  position: relative;
  margin-bottom: 4px;
  background: transparent;
  transition: all 0.2s ease;
}

/* Nav item hover removed */

/* Nav icon hover removed */

.nav-item:focus {
  outline: none;
  color: var(--color-mode-accent);
}

.nav-item:focus .nav-item-icon {
  color: var(--color-mode-accent);
}

.nav-item.active {
  color: var(--color-mode-accent);
  background: transparent;
  font-weight: 600;
}

.nav-item.active .nav-item-icon {
  color: var(--color-mode-accent);
}

.nav-item-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.nav-item-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-item:hover .nav-item-actions {
  opacity: 1;
  visibility: visible;
}

.sidebar.expanded .nav-item-actions {
  opacity: 1;
  visibility: visible;
}

.nav-item-favorite-btn {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--color-mode-text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 10px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
}

.sidebar.expanded .nav-item-favorite-btn {
  opacity: 1;
  visibility: visible;
}

/* Favorite hover removed */

.nav-item.favorite .nav-item-favorite-btn {
  color: var(--color-mode-warning);
  opacity: 1;
}

.nav-item.favorite .nav-item-favorite-btn i {
  font-weight: 900;
}

/* Collapsed sidebar - keep structure, hide text */
.sidebar:not(.expanded) .nav-category-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Collapsed sidebar - center nav items */
.sidebar:not(.expanded) .nav-item {
  justify-content: flex-start;
  padding: 0 10px;
}

.sidebar:not(.expanded) .nav-item-wrapper {
  justify-content: flex-start;
}

/* Smooth transitions */
.nav-category,
.nav-item {
  transition: all 0.2s ease;
}

.nav-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  color: inherit;
  transition: all 0.2s ease;
}

.nav-item-text {
  margin-left: 16px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  opacity: 0;
  visibility: hidden;
  flex: 1;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sidebar.expanded .nav-item-text {
  opacity: 1;
  visibility: visible;
}

.nav-item-badge {
  background: var(--color-mode-error);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}

.sidebar.expanded .nav-item-badge {
  opacity: 1;
  visibility: visible;
}

.nav-item.active .nav-item-badge {
  background: rgba(255, 255, 255, 0.3);
  color: var(--color-mode-text-inverse);
}

/* Tooltip for collapsed sidebar */
.sidebar:not(.expanded) .nav-item {
  position: relative;
}

.sidebar:not(.expanded) .nav-item::after {
  content: attr(data-title);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-mode-bg-card);
  color: var(--color-mode-text);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--color-mode-border);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 1000;
}

/* Tooltip hover delay removed */
.sidebar:not(.expanded) .nav-item:hover::after {
  opacity: 1;
  visibility: visible;
}

/* User Section (Bottom) */
.sidebar-footer {
  margin-top: auto;
  padding-top: var(--spacing-sm);
  border-top: 1px solid var(--color-mode-border);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  height: 48px;
  padding: 0 4px;
  border-radius: var(--radius-md);
  cursor: pointer;
  position: relative;
  width: 100%;
  transition: all 0.3s ease;
  overflow: hidden;
}

.sidebar-user:hover {
  background: var(--color-mode-bg-hover);
}

.sidebar-user.expanded {
  height: auto;
  min-height: 48px;
  padding: 8px 4px;
  background: var(--color-mode-bg-hover);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0;
  align-items: start;
  overflow: visible;
}

.sidebar-user.expanded .sidebar-user-avatar-wrapper {
  grid-row: 1;
  grid-column: 1;
}

.sidebar-user.expanded .sidebar-user-info {
  grid-row: 1;
  grid-column: 2;
  margin-left: var(--spacing-md);
}

.sidebar-user.expanded .sidebar-user-tools {
  grid-row: 2;
  grid-column: 1 / -1;
}

.sidebar.expanded .sidebar-user {
  padding-left: 4px;
}

.sidebar:not(.expanded) .sidebar-user {
  justify-content: flex-start;
  padding: 0 4px;
}

.sidebar-user-avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.sidebar-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-mode-accent), var(--color-mode-accent-light));
  color: var(--color-mode-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}

.sidebar-user-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--color-mode-success);
  border: 2px solid var(--color-mode-bg-card);
  border-radius: 50%;
}

.sidebar-user-info {
  margin-left: var(--spacing-md);
  opacity: 0;
  visibility: hidden;
  flex: 1;
  min-width: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar.expanded .sidebar-user-info {
  opacity: 1;
  visibility: visible;
}

.sidebar-user.expanded .sidebar-user-info {
  opacity: 1;
  visibility: visible;
}

.sidebar-user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mode-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  font-size: var(--font-size-xs);
  color: var(--color-mode-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* User Profile Tools */
.sidebar-user-tools {
  display: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar.expanded .sidebar-user-tools {
  display: flex;
  opacity: 1;
}

.sidebar-user.expanded .sidebar-user-tools {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--color-mode-border) !important;
  justify-content: space-around !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* Ensure tools are visible even when sidebar is collapsed */
.sidebar:not(.expanded) .sidebar-user.expanded .sidebar-user-tools {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  width: 100% !important;
}

.sidebar-tool-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-mode-text-muted);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
  text-decoration: none;
}

.sidebar-tool-btn-text {
  display: none;
}

.sidebar-user.expanded .sidebar-tool-btn {
  flex: 1;
  width: auto;
  height: 36px;
  padding: 0 var(--spacing-sm);
  gap: var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.sidebar-user.expanded .sidebar-tool-btn-text {
  display: inline;
}

.sidebar-user.expanded .sidebar-tool-btn:hover {
  background: var(--color-mode-bg);
  color: var(--color-mode-text);
}

.sidebar-user.expanded .sidebar-tool-btn.logout:hover {
  background: var(--color-mode-error-light);
  color: var(--color-mode-error);
}

/* Sidebar tool btn hover removed */

/* Sidebar tool logout hover removed */

.sidebar-user-menu-btn {
  display: none !important;
}

.sidebar-user-dropdown {
  position: absolute;
  bottom: calc(100% + var(--spacing-sm));
  left: 0;
  right: 0;
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-xs);
  display: none;
  flex-direction: column;
  z-index: 1000;
  margin-bottom: var(--spacing-sm);
}

.sidebar-user-dropdown.show {
  display: flex;
}

.sidebar-user-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-mode-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
}

/* Sidebar dropdown item hover removed */

.sidebar-user-dropdown-item.logout {
  color: var(--color-mode-error);
}

/* Sidebar dropdown logout hover removed */

.sidebar-user-dropdown-divider {
  height: 1px;
  background: var(--color-mode-border);
  margin: var(--spacing-xs) 0;
}

.sidebar-close-btn {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--color-mode-bg-secondary);
  color: var(--color-mode-text);
  border-radius: var(--radius-md);
  cursor: pointer;
  z-index: 10;
}

/* Sidebar close btn hover removed */

@media (max-width: 768px) {
  .sidebar-close-btn {
    display: flex;
  }
}

/* ========================================
   Mobile Responsive
   ======================================== */
/* Mobile: Sidebar overlay olarak göster */
@media (max-width: 768px) {

  .sidebar,
  .ui-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    z-index: 9999;
    border-radius: 0;
    border-left: none;
    border-top: none;
    border-bottom: none;
  }

  .sidebar.expanded,
  .ui-sidebar.expanded,
  .sidebar.mobile-open .sidebar-logo-text,
  .ui-sidebar.mobile-open .sidebar-logo-text {
    display: block;
  }

  .sidebar.mobile-open .sidebar-logo-icon,
  .ui-sidebar.mobile-open .sidebar-logo-icon {
    display: none;
  }

  /* Sidebar backdrop overlay */
  .sidebar-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
  }

  .sidebar-backdrop.active {
    opacity: 1;
    pointer-events: all;
  }

  /* Nav items - touch target minimum 44px */
  .nav-item {
    min-height: 44px;
    height: auto;
    padding: 12px;
    font-size: 16px;
    /* Minimum readable font size */
  }

  .nav-item-icon {
    width: 24px;
    font-size: 20px;
  }

  .nav-item-text {
    font-size: 16px;
    opacity: 1;
    /* Always visible on mobile */
  }

  /* Sidebar user section */
  .sidebar-user {
    min-height: 60px;
    padding: 12px;
  }

  .sidebar-user-avatar {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }

  .sidebar-user-info {
    display: block;
    /* Always visible on mobile */
  }

  .sidebar-user-name {
    font-size: 16px;
  }

  .sidebar-user-role {
    font-size: 14px;
  }
}

/* Touch target improvements for all interactive elements */
@media (hover: none) and (pointer: coarse) {

  .nav-item,
  .header-btn,
  .header-user-btn,
  button,
  .btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Increase font size for better readability on touch devices */
  body {
    font-size: 16px;
    /* Prevent zoom on iOS */
  }

  input,
  textarea,
  select {
    font-size: 16px;
    /* Prevent zoom on iOS */
  }
}

/**
 * Header Component
 * Modern, glassmorphism header with unified container
 */
.header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 24px;
  background: var(--color-mode-bg-card);
  /* Solid color */
  border: none;
  border-image: none;
  border-radius: 25px;
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  /* Glassmorphism removed */
  box-sizing: border-box;
  z-index: var(--z-header);
  gap: var(--spacing-md);
}

#header {
  flex-wrap: wrap;
  border: none;
  border-image: none;
  border-color: rgba(0, 0, 0, 0);
  border-width: 0px;
  border-style: none;
  border-radius: 25px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
}

/* Left Section: Hamburger + Title & Breadcrumb */
.header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
  min-width: 0;
}

/* Hamburger Menu Button */
.hamburger-menu {
  display: none;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--color-mode-text);
  cursor: pointer;
  border-radius: var(--radius-md);
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  transition: background-color 0.2s;
}

/* Hamburger menu hover removed */

@media (max-width: 768px) {
  .hamburger-menu {
    display: flex;
  }
}

/* Title Section */
.header-title-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.header-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-mode-text);
  margin: 0;
  line-height: 1.2;
}

.header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--font-size-sm);
  color: var(--color-mode-text-muted);
}

.breadcrumb-item {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

/* Breadcrumb hover removed */

.breadcrumb-separator {
  color: var(--color-mode-text-muted);
  font-size: var(--font-size-xs);
}

.breadcrumb-item.active {
  color: var(--color-mode-text);
  font-weight: var(--font-weight-medium);
}

/* Right Section: Actions */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  justify-content: flex-end;
}

/* Common Header Button Style */
.header-btn {
  background: var(--color-mode-bg-secondary);
  border: 1px solid var(--color-mode-border);
  color: var(--color-mode-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
}

/* Header btn hover removed */

/* User Profile Button */
.header-user-btn {
  background: var(--color-mode-bg-secondary);
  border: 1px solid var(--color-mode-border);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

/* Header user btn hover removed */

.header-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-mode-accent), var(--color-mode-accent-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
  }

  .header-left {
    flex: 1;
    min-width: 0;
    /* Allow text truncation */
  }

  .header-title {
    font-size: 18px;
    line-height: 1.3;
  }

  .header-breadcrumb {
    font-size: 12px;
    display: none;
    /* Hide breadcrumb on mobile to save space */
  }

  .header-right {
    flex-shrink: 0;
    gap: 6px;
  }

  .header-icon-btn {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .header-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .header-user-btn {
    height: 40px;
    padding: 4px 8px;
  }

  .header-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .dropdown-menu {
    width: calc(100vw - 32px);
    max-width: 320px;
    right: 0;
  }

  .dropdown-notifications,
  .dropdown-messages {
    width: calc(100vw - 32px);
    max-width: 340px;
  }

  /* Hide user name on very small screens */
  @media (max-width: 480px) {
    .header-user-btn .header-user-name {
      display: none;
    }

    .header-right {
      gap: 4px;
    }

    .header-icon-btn {
      width: 36px;
      height: 36px;
      font-size: 15px;
    }
  }
}

/**
 * Footer Component
 * Modern oval footer matching header and sidebar styling
 */
.footer {
  margin-top: var(--spacing-2xl);
  padding: 24px;
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  color: var(--color-mode-text-muted);
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.footer-link {
  color: var(--color-mode-text-muted);
  text-decoration: none;
}

/* Footer link hover removed */

.footer-version {
  padding: 2px 8px;
  background: var(--color-mode-bg-tertiary);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-mode-text-secondary);
}

@media (max-width: 640px) {
  .footer {
    flex-direction: column;
    gap: var(--spacing-md);
    text-align: center;
  }
}

/* ========================================
   BOTTOM NAVIGATION (MOBILE ONLY)
   ======================================== */
.bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: var(--color-mode-bg-card);
    border-top: 1px solid var(--color-mode-border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    /* Safe area for iOS notch */
  }

  .bottom-nav-items {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: stretch;
    gap: 8px;
    padding: 0 12px;
    max-width: 600px;
    margin: 0 auto;
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-mode-text-muted);
    text-decoration: none;
    font-size: 12px;
    gap: 6px;
    padding: 10px 8px;
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 64px;
    /* Minimum touch target 64px for better UX */
    -webkit-tap-highlight-color: transparent;
    /* Remove default tap highlight */
  }

  .bottom-nav-item:active {
    transform: scale(0.96);
    background: var(--color-mode-bg-hover);
  }

  .bottom-nav-item.active {
    color: var(--color-mode-accent);
    background: var(--color-mode-bg-secondary);
  }

  .bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 4px;
    background: var(--color-mode-accent);
    border-radius: 0 0 4px 4px;
  }

  .bottom-nav-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    /* Larger touch target */
  }

  .bottom-nav-item i {
    font-size: 26px;
    transition: all 0.2s ease;
  }

  .bottom-nav-item.active i {
    transform: scale(1.15);
    color: var(--color-mode-accent);
  }

  .bottom-nav-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
    letter-spacing: 0.2px;
  }

  .bottom-nav-item.active .bottom-nav-label {
    color: var(--color-mode-accent);
    font-weight: 700;
  }

  .bottom-nav-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-mode-error);
    color: var(--color-mode-text-inverse);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-mode-bg-card);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    z-index: 1;
    line-height: 1;
  }

  /* Hide footer on mobile if bottom nav is present to save space */
  .footer {
    padding-bottom: 80px;
    /* Ensure content is visible above nav */
  }

  /* Main content padding for mobile bottom nav */
  .main-wrapper {
    padding-bottom: 80px;
  }

  /* Better spacing for very small screens */
  @media (max-width: 360px) {
    .bottom-nav-items {
      gap: 4px;
      padding: 0 8px;
    }

    .bottom-nav-item {
      padding: 8px 4px;
      gap: 4px;
    }

    .bottom-nav-item i {
      font-size: 24px;
    }

    .bottom-nav-label {
      font-size: 11px;
    }
  }
}

/* Tablet and larger - hide bottom nav */
@media (min-width: 769px) {
  .bottom-nav {
    display: none !important;
  }
}

/**
 * UI Components - Udenua
 * Modern, yeniden kullanılabilir UI bileşenleri
 * Tailwind bağımlılığı kaldırıldı - Tema sistemi ile uyumlu
 */
/* ========================================
   BUTTONS
   ======================================== */
.btn {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  border: 1px solid transparent;
  outline: none;
  min-height: 44px;
  position: relative;
  overflow: hidden;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-mode-bg-card), 0 0 0 4px var(--color-mode-accent);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--color-mode-accent);
  color: var(--color-mode-text-inverse);
  border-color: var(--color-mode-accent);
}

/* Btn primary hover removed */

.btn-primary:active {
  background: var(--color-mode-accent-dark);
}

.btn-primary:focus {
  box-shadow: 0 0 0 2px var(--color-mode-bg-card), 0 0 0 4px var(--color-mode-accent);
}

.btn-secondary {
  background: var(--color-mode-bg-secondary);
  color: var(--color-mode-text);
  border: 1px solid var(--color-mode-border);
}

/* Btn secondary hover removed */

.btn-secondary:active {
  background: var(--color-mode-hover);
}

.theme-dark .btn-secondary,
.btn-secondary {
  background: var(--color-mode-bg-tertiary);
  border-color: var(--color-mode-border);
}

/* Theme dark btn secondary hover removed */

.btn-success {
  background: var(--color-mode-success);
  color: var(--color-mode-text-inverse);
  box-shadow: var(--shadow-md);
}

/* Btn success hover removed */

.btn-success:focus {
  box-shadow: 0 0 0 2px var(--color-mode-bg-card), 0 0 0 4px var(--color-mode-success);
}

.btn-danger {
  background: var(--color-mode-error);
  color: var(--color-mode-text-inverse);
  box-shadow: var(--shadow-md);
}

/* Btn danger hover removed */

.btn-danger:focus {
  box-shadow: 0 0 0 2px var(--color-mode-bg-card), 0 0 0 4px var(--color-mode-error);
}

.btn-ghost {
  background: transparent;
  color: var(--color-mode-text);
}

/* Ghost button hover removed */

/* Theme dark ghost button hover removed */

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: var(--font-size-lg);
}

.btn-icon {
  padding: 0.5rem;
  border-radius: var(--radius-md);
}

.btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-right-color: transparent;
  color: var(--color-mode-text);
}

/* ========================================
   CARDS - Modern Design
   ======================================== */
.card {
  background: var(--color-mode-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-mode-border);
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

.card:last-child {
  margin-bottom: 0;
}

/* Glassmorphism Card Variant */
.card-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.theme-dark .card-glass,
.card-glass {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Card Hover Effects - Minimal (no animations) */
.card-hover {
  cursor: pointer;
}

/* Card hover removed */

.card-hover:active {
  background: var(--color-mode-bg-secondary);
}

/* Interactive Card - Minimal (no animations) */
.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  border-color: var(--color-mode-accent);
}

.card-interactive:active {
  background: var(--color-mode-bg-secondary);
}

/* Theme dark card interactive hover removed */

/* Card with Gradient Border */
.card-gradient {
  position: relative;
  background: var(--color-mode-bg-card);
  border-radius: var(--radius-lg);
  padding: 2px;
}

.card-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  padding: 2px;
  background: linear-gradient(135deg, var(--color-mode-accent), var(--color-mode-accent-dark));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.card-gradient .card-content {
  background: var(--color-mode-bg-card);
  border-radius: calc(var(--radius-lg) - 2px);
  padding: 1.25rem;
}

/* Card Header */
.card-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-mode-border);
  background: var(--color-mode-bg-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mode-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.card-header-icon {
  color: var(--color-mode-accent);
  font-size: var(--font-size-lg);
}

.card-header-action {
  color: var(--color-mode-text-muted);
  cursor: pointer;
}

/* Card header action hover removed */

/* Card Body - Modern Minimal (larger padding) */
.card-body {
  padding: var(--spacing-lg);
  color: var(--color-mode-text);
  background: transparent;
}

.card-body:first-child {
  padding-top: var(--spacing-lg);
}

.card-body:last-child {
  padding-bottom: var(--spacing-lg);
}

/* Card Body Spacing Improvements */
.card-body>*:first-child {
  margin-top: 0;
}

.card-body>*:last-child {
  margin-bottom: 0;
}

/* Card Footer */
.card-footer {
  padding: 1.25rem;
  border-top: 1px solid var(--color-mode-border);
  background: var(--color-mode-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
}

.theme-dark .card-footer,
.card-footer {
  background: var(--color-mode-bg-tertiary);
}

/* Card Variants */
.card-compact {
  padding: 0.75rem;
}

.card-compact .card-header,
.card-compact .card-body,
.card-compact .card-footer {
  padding: 0.75rem;
}

.card-spacious {
  padding: 2rem;
}

.card-spacious .card-header,
.card-spacious .card-body,
.card-spacious .card-footer {
  padding: 2rem;
}

/* Stat Card Icon */
.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Removed transform animation for minimal design */
.stat-icon-primary {
  background: rgba(79, 70, 229, 0.1);
  color: var(--color-mode-accent);
}

.stat-icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-mode-success);
}

.stat-icon-warning {
  background: rgba(251, 191, 36, 0.1);
  color: var(--color-mode-warning);
}

.stat-icon-info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-mode-info);
}

/* Quick Access Icon */
.quick-access-icon {
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.quick-access-icon-primary {
  background: rgba(79, 70, 229, 0.1);
  color: var(--color-mode-accent);
}

.quick-access-icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-mode-success);
}

.quick-access-icon-warning {
  background: rgba(251, 191, 36, 0.1);
  color: var(--color-mode-warning);
}

.quick-access-icon-info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-mode-info);
}

/* Activity Icon */
.activity-icon {
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.activity-icon-primary {
  background: rgba(79, 70, 229, 0.1);
  color: var(--color-mode-accent);
}

.activity-icon-success {
  background: rgba(34, 197, 94, 0.1);
  color: var(--color-mode-success);
}

.activity-icon-warning {
  background: rgba(251, 191, 36, 0.1);
  color: var(--color-mode-warning);
}

.activity-icon-info {
  background: rgba(59, 130, 246, 0.1);
  color: var(--color-mode-info);
}

/* User Avatar */
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
  color: var(--color-mode-text-inverse);
}

.user-avatar-primary {
  background: linear-gradient(135deg, var(--color-mode-accent), var(--color-mode-accent-dark));
}

.user-avatar-success {
  background: linear-gradient(135deg, var(--color-mode-success), #16a34a);
}

.user-avatar-error {
  background: linear-gradient(135deg, var(--color-mode-error), #dc2626);
}

.user-avatar-info {
  background: linear-gradient(135deg, var(--color-mode-info), #1e40af);
}

/* Event Date */
.event-date {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-lg);
  background: var(--color-mode-bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.event-day {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-mode-text);
}

.event-month {
  font-size: var(--font-size-xs);
  color: var(--color-mode-text-muted);
}

/* Progress Bar */
.progress-bar {
  height: 10px;
  background: var(--color-mode-bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  min-width: 0;
  width: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.progress-fill-primary {
  background: var(--color-mode-accent);
}

.progress-fill-success {
  background: var(--color-mode-success);
}

.progress-fill-warning {
  background: var(--color-mode-warning);
}

.progress-fill-error {
  background: var(--color-mode-error);
}

/* Border Utilities */
.border-b {
  border-bottom: 1px solid var(--color-mode-border);
}

.border-t {
  border-top: 1px solid var(--color-mode-border);
}

/* Text Size Utilities */
.text-xs {
  font-size: var(--font-size-xs);
}

/* Card with Image */
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.card-image-top {
  margin: -1px -1px 0 -1px;
}

/* Card Badge */
.card-badge {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  background: var(--color-mode-accent);
  color: var(--color-mode-text-inverse);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  z-index: 1;
}

/* Card Loading State */
.card-loading {
  position: relative;
  overflow: hidden;
}

.card-loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.1),
      transparent);
}

.theme-dark .card-loading::after,
.card-loading::after {
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.05),
      transparent);
}

/* ========================================
   INPUTS - Enhanced Form Elements
   ======================================== */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-mode-input-border);
  background: var(--color-mode-input-bg);
  color: var(--color-mode-input-text);
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--color-mode-input-placeholder);
  opacity: 0.7;
}

.input:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-mode-input-focus);
  box-shadow: 0 0 0 4px rgba(var(--color-mode-input-focus-rgb, 99, 102, 241), 0.1);
  background: var(--color-mode-input-bg);
}

/* Input hover removed */

.input:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--color-mode-bg-secondary);
}

/* Input Sizes */
.input-sm,
input.input-sm {
  padding: 0.5rem 0.75rem;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.input-lg,
input.input-lg {
  padding: 1rem 1.25rem;
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

/* Input States */
.input-error,
input.input-error,
textarea.input-error {
  border-color: var(--color-mode-error);
  background: rgba(var(--color-mode-error-rgb, 239, 68, 68), 0.05);
}

.input-error:focus,
input.input-error:focus,
textarea.input-error:focus {
  box-shadow: 0 0 0 4px rgba(var(--color-mode-error-rgb, 239, 68, 68), 0.1);
  border-color: var(--color-mode-error);
}

.input-success,
input.input-success,
textarea.input-success {
  border-color: var(--color-mode-success);
  background: rgba(var(--color-mode-success-rgb, 34, 197, 94), 0.05);
}

.input-success:focus,
input.input-success:focus,
textarea.input-success:focus {
  box-shadow: 0 0 0 4px rgba(var(--color-mode-success-rgb, 34, 197, 94), 0.1);
  border-color: var(--color-mode-success);
}

.input-warning,
input.input-warning,
textarea.input-warning {
  border-color: var(--color-mode-warning);
  background: rgba(var(--color-mode-warning-rgb, 251, 191, 36), 0.05);
}

.input-warning:focus,
input.input-warning:focus,
textarea.input-warning:focus {
  box-shadow: 0 0 0 4px rgba(var(--color-mode-warning-rgb, 251, 191, 36), 0.1);
  border-color: var(--color-mode-warning);
}

/* Input Group */
.input-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.input-group-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-mode-text);
  margin-bottom: var(--spacing-xs);
}

.input-group-hint {
  font-size: var(--font-size-xs);
  color: var(--color-mode-text-muted);
  margin-top: var(--spacing-xs);
}

.input-group-error {
  font-size: var(--font-size-xs);
  color: var(--color-mode-error);
  margin-top: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.input-group-success {
  font-size: var(--font-size-xs);
  color: var(--color-mode-success);
  margin-top: var(--spacing-xs);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* Input with Icons */
.input-icon-left {
  padding-left: 3rem;
}

.input-icon-right {
  padding-right: 3rem;
}

.input-icon {
  position: absolute;
  top: 50%;
  color: var(--color-mode-text-muted);
  pointer-events: none;
  z-index: 1;
}

.input-icon-left-pos {
  left: 1rem;
}

.input-icon-right-pos {
  right: 1rem;
}

.input:focus~.input-icon,
input:focus~.input-icon {
  color: var(--color-mode-accent);
}

/* Textarea */
textarea {
  min-height: 120px;
  resize: vertical;
  font-family: var(--font-family-base);
  line-height: var(--line-height-relaxed);
}

textarea.input-sm {
  min-height: 80px;
}

textarea.input-lg {
  min-height: 160px;
}

/* Select */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236366f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: var(--color-mode-accent);
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
  outline: 2px solid var(--color-mode-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

input[type="radio"] {
  border-radius: 50%;
}

/* File Input */
input[type="file"] {
  padding: 0.5rem;
  border: 2px dashed var(--color-mode-border);
  background: var(--color-mode-bg-secondary);
  cursor: pointer;
}

input[type="file"]:hover {
  border-color: var(--color-mode-accent);
  background: var(--color-mode-hover-light);
}

input[type="file"]:focus {
  border-color: var(--color-mode-accent);
  box-shadow: 0 0 0 4px rgba(var(--color-mode-accent-rgb, 99, 102, 241), 0.1);
}

/* ========================================
   BADGES
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}

.badge-primary {
  background: var(--color-mode-accent);
  color: var(--color-mode-text-inverse);
  opacity: 0.9;
}

.theme-dark .badge-primary,
.badge-primary {
  background: var(--color-mode-accent-light);
  opacity: 0.8;
}

.badge-secondary {
  background: var(--color-mode-bg-secondary);
  color: var(--color-mode-text);
}

.theme-dark .badge-secondary,
.badge-secondary {
  background: var(--color-mode-bg-tertiary);
}

.badge-success {
  background: var(--color-mode-success);
  color: var(--color-mode-text-inverse);
  opacity: 0.9;
}

.badge-danger {
  background: var(--color-mode-error);
  color: var(--color-mode-text-inverse);
  opacity: 0.9;
}

.badge-warning {
  background: var(--color-mode-warning);
  color: var(--color-mode-text-inverse);
  opacity: 0.9;
}

.badge-info {
  background: var(--color-mode-info);
  color: var(--color-mode-text-inverse);
  opacity: 0.9;
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
  padding: 1rem;
  border-radius: var(--radius-md);
  border: 1px solid;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.alert-success {
  background: rgba(34, 197, 94, 0.1);
  border-color: var(--color-mode-success);
  border-left-width: 4px;
  color: var(--color-mode-success);
}

.theme-dark .alert-success,
.alert-success {
  background: rgba(34, 197, 94, 0.15);
  border-color: var(--color-mode-success);
  color: var(--color-mode-success);
}

.alert-error {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--color-mode-error);
  border-left-width: 4px;
  color: var(--color-mode-error);
}

.theme-dark .alert-error,
.alert-error {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--color-mode-error);
  color: var(--color-mode-error);
}

.alert-warning {
  background: rgba(251, 191, 36, 0.1);
  border-color: var(--color-mode-warning);
  border-left-width: 4px;
  color: var(--color-mode-warning);
}

.theme-dark .alert-warning,
.alert-warning {
  background: rgba(251, 191, 36, 0.15);
  border-color: var(--color-mode-warning);
  color: var(--color-mode-warning);
}

.alert-info {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--color-mode-info);
  border-left-width: 4px;
  color: var(--color-mode-info);
}

.theme-dark .alert-info,
.alert-info {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--color-mode-info);
  color: var(--color-mode-info);
}

/* ========================================
   SKELETON LOADERS
   ======================================== */
.skeleton {
  background: var(--color-mode-bg-secondary);
  border-radius: var(--radius-md);
}

.theme-dark .skeleton,
.skeleton {
  background: var(--color-mode-bg-tertiary);
}

.skeleton-text {
  height: 1rem;
}

.skeleton-title {
  height: 1.5rem;
}

.skeleton-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-full);
}

.skeleton-image {
  width: 100%;
  height: 12rem;
}

.skeleton-shimmer {
  background: linear-gradient(90deg,
      var(--color-mode-bg-secondary) 0%,
      var(--color-mode-bg-tertiary) 50%,
      var(--color-mode-bg-secondary) 100%);
  background-size: 200% 100%;
}

/* ========================================
   TRANSITIONS & ANIMATIONS
   ======================================== */
/* Animation utilities removed - animations disabled for minimal design */
.hover-glow:hover {
  box-shadow: var(--shadow-sm), 0 0 20px var(--color-mode-accent);
  opacity: 0.5;
}

/* Ripple Effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.ripple:active::after {
  width: 300px;
  height: 300px;
}

/* Animation utilities removed - animations disabled for minimal design */
/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-gradient {
  background: linear-gradient(135deg, var(--color-mode-button-bg), var(--color-mode-button-hover));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.glass-effect {
  background: var(--color-mode-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-mode-border);
  opacity: 0.8;
}

.theme-dark .glass-effect,
.glass-effect {
  background: var(--color-mode-bg-tertiary);
  opacity: 0.9;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: var(--color-mode-scrollbar-track);
  border-radius: var(--radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-mode-scrollbar-thumb);
  border-radius: var(--radius-full);
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-mode-scrollbar-thumb-hover);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Focus Visible */
.focus-visible {
  outline: none;
}

.focus-visible:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-mode-bg-card), 0 0 0 4px var(--color-mode-accent);
}

.theme-dark .focus-visible:focus,
.focus-visible:focus {
  box-shadow: 0 0 0 2px var(--color-mode-bg-tertiary), 0 0 0 4px var(--color-mode-accent);
}

/* Truncate Text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

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

.line-clamp-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* ========================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ======================================== */
/* Form elements - full width on mobile, prevent zoom on iOS */
@media (max-width: 768px) {

  .input,
  textarea,
  select {
    width: 100%;
    font-size: 16px;
    /* Prevent zoom on iOS */
    padding: 0.875rem 1rem;
    min-height: 44px;
    /* Touch target */
  }

  .input-sm {
    font-size: 16px;
    /* Still readable on mobile */
    padding: 0.75rem 0.875rem;
  }

  .input-lg {
    font-size: 18px;
    padding: 1.125rem 1.375rem;
  }

  /* Buttons - full width on mobile for better UX */
  .btn {
    width: 100%;
    min-height: 44px;
    font-size: 16px;
    padding: 0.75rem 1rem;
  }

  .btn-sm {
    min-height: 40px;
    font-size: 15px;
  }

  .btn-lg {
    min-height: 48px;
    font-size: 18px;
  }

  /* Cards - better spacing on mobile */
  .card {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-md);
  }

  /* Badges - larger on mobile for readability */
  .badge {
    font-size: 13px;
    padding: 0.25rem 0.75rem;
    min-height: 24px;
  }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {

  /* All interactive elements should have minimum touch target */
  .btn,
  .nav-item,
  .header-btn,
  .header-user-btn,
  button,
  a[role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Increase tap target spacing */
  .btn+.btn,
  .header-btn+.header-btn {
    margin-left: var(--spacing-sm);
  }
}

#loader-wrapper {
  width: 100%;
  height: 100%;
  background: #EDEDED;
}

#loader-logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  width: 200px;
}

.loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
  width: 75px;
  height: 100px;
}

#loader-wrapper .loader__bar {
  position: absolute;
  left: 25%;
  right: 50%;
  top: 50%;
  bottom: 50%;
  bottom: 0;
  width: 10px;
  height: 50%;
  background: #ff9000;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

#loader-wrapper .loader__bar:nth-child(1) {
  left: 0px;
}

#loader-wrapper .loader__bar:nth-child(2) {
  left: 15px;
}

#loader-wrapper .loader__bar:nth-child(3) {
  left: 30px;
}

#loader-wrapper .loader__bar:nth-child(4) {
  left: 45px;
}

#loader-wrapper .loader__bar:nth-child(5) {
  left: 60px;
}

#loader-wrapper .loader__ball {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 10px;
  height: 10px;
  background: #ff9000;
  border-radius: 50%;
}

/**
 * Critical UI Fixes
 * Bu dosya kritik UI sorunlarını düzeltir
 */
/* Body ve HTML temel stilleri */
html {
  background-color: var(--color-mode-bg, #f8fafc);
}

body {
  min-height: 100vh;
  background-color: var(--color-mode-bg, #f8fafc);
  color: var(--color-mode-text, #0f172a);
  margin: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}

/* Dark mode body styles removed - themes should only change colors, not layout */
/* Main Content */
/* Kartların görünürlüğü */
.card {
  background: var(--color-mode-bg-card) !important;
  border: 1px solid var(--color-mode-border) !important;
  color: var(--color-mode-text) !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Text renkleri */
.text-secondary {
  color: var(--color-mode-text-secondary) !important;
}

.text-muted {
  color: var(--color-mode-text-muted) !important;
}

.text-success {
  color: var(--color-mode-success) !important;
}

.text-error {
  color: var(--color-mode-error) !important;
}

/* Butonlar */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Grid sistem */
.grid {
  display: grid !important;
}

.flex {
  display: flex !important;
}

/* Spacing utilities */
.mb-xs {
  margin-bottom: var(--spacing-xs) !important;
}

.mb-sm {
  margin-bottom: var(--spacing-sm) !important;
}

.mb-md {
  margin-bottom: var(--spacing-md) !important;
}

.mb-lg {
  margin-bottom: var(--spacing-lg) !important;
}

.mb-xl {
  margin-bottom: var(--spacing-xl) !important;
}

.gap-xs {
  gap: var(--spacing-xs) !important;
}

.gap-sm {
  gap: var(--spacing-sm) !important;
}

.gap-md {
  gap: var(--spacing-md) !important;
}

.gap-lg {
  gap: var(--spacing-lg) !important;
}

.gap-xl {
  gap: var(--spacing-xl) !important;
}

/* Font utilities */
.text-xs {
  font-size: var(--font-size-xs) !important;
}

.text-sm {
  font-size: var(--font-size-sm) !important;
}

.text-base {
  font-size: var(--font-size-base) !important;
}

.text-lg {
  font-size: var(--font-size-lg) !important;
}

.text-xl {
  font-size: var(--font-size-xl) !important;
}

.text-2xl {
  font-size: var(--font-size-2xl) !important;
}

.text-3xl {
  font-size: var(--font-size-3xl) !important;
}

.font-bold {
  font-weight: var(--font-weight-bold) !important;
}

.font-semibold {
  font-weight: var(--font-weight-semibold) !important;
}

.font-medium {
  font-weight: var(--font-weight-medium) !important;
}

.font-normal {
  font-weight: var(--font-weight-normal) !important;
}

/* Flex utilities */
.flex-1 {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

.items-center {
  align-items: center !important;
}

.items-start {
  align-items: flex-start !important;
}

/* Space utilities */
.space-y-sm>*+* {
  margin-top: var(--spacing-sm) !important;
}

.space-y-md>*+* {
  margin-top: var(--spacing-md) !important;
}

.space-y-lg>*+* {
  margin-top: var(--spacing-lg) !important;
}

/* Border utilities */
.border-b {
  border-bottom: 1px solid var(--color-mode-border) !important;
}

.border-t {
  border-top: 1px solid var(--color-mode-border) !important;
}

/* Width utilities */
.w-full {
  width: 100% !important;
}

/* ==========================================================================
   UINART MONOLITHIC CSS - v2.1 (PREMIUM UI EDITION)
   Unified Design System with Advanced Interactions & Polish
   ========================================================================== */
/* --------------------------------------------------------------------------
   1. VARIABLES & DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Spacing Scale - Consistent Rhythm */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  /* Layout Dimensions */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --header-height: 70px;
  --container-max-width: 1600px;
  /* Border Radius (OVAL & SMOOTH) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: var(--radius-md);
  /* Signature UI Element */
  --radius-full: 9999px;
  /* Z-Index Layers */
  --z-sidebar: 100;
  --z-header: 90;
  --z-modal: 1000;
  --z-tooltip: 1100;
  /* Animations & Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* --------------------------------------------------------------------------
   2. GLOBAL RESET & BASE STYLES
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  outline: none;
  /* We handle focus manually */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: var(--color-mode-text-muted);
}

/* Text Selection */
::selection {
  background: var(--color-mode-primary);
  color: #ffffff;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-mode-text);
  background-color: var(--color-mode-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-mode-text);
  margin-top: 0;
  margin-bottom: var(--spacing-sm);
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Tighter headings */
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Focus Ring (Accessibility + Aesthetic) */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-mode-bg), 0 0 0 5px var(--color-mode-primary);
}

/* --------------------------------------------------------------------------
   3. LAYOUT & STRUCTURE
   -------------------------------------------------------------------------- */
/* Main-wrapper ve sidebar kuralları layout-fix bölümünde tanımlı */
.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
  width: 100%;
}

@media (max-width: 1200px) {
  .content-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   4. COMPONENTS: SIDEBAR
   -------------------------------------------------------------------------- */
/* Sidebar kuralları layout-fix bölümünde tanımlı */
#sidebar {
  border-radius: 50px;
}

.sidebar-logo {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -1px;
  background: linear-gradient(135deg, var(--color-mode-primary), var(--color-mode-accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--spacing-md);
}

.sidebar-menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--spacing-xs);
  overflow-y: auto;
}

.menu-item {
  border-radius: var(--radius-md);
  color: var(--color-mode-text-secondary);
  font-weight: 500;
  position: relative;
  overflow: hidden;
}

.menu-item:hover {
  color: var(--color-mode-primary);
  background: var(--color-mode-bg-hover);
}

.menu-item.active {
  background: var(--color-mode-accent);
  color: var(--color-mode-text-inverse);
}

.menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  /* Ensure flex for centering */
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-right: 14px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   5. COMPONENTS: HEADER
   -------------------------------------------------------------------------- */
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-header);
  min-height: 64px;
  box-sizing: border-box;
}

.header-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-mode-text);
}

.header-icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-mode-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.header-icon-btn:hover {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-primary);
}

.header-icon-btn.active {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-accent);
}

.header-icon-btn {
  position: relative;
  transition: all 0.2s ease;
  outline: none;
}

.header-icon-btn:focus-visible {
  outline: 2px solid var(--color-mode-accent);
  outline-offset: 2px;
}

.header-action-item {
  position: relative;
}

/* Header Badge (Notification/Message Counter) */
.header-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--color-mode-error, #ef4444);
  color: white;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-mode-bg-card, #ffffff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

.header-badge:empty {
  display: none;
}

/* Keyboard Shortcut Hint */
.header-keyboard-hint {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--color-mode-text-muted);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.header-icon-btn:hover .header-keyboard-hint {
  opacity: 0.6;
}

@media (max-width: 768px) {
  .header-keyboard-hint {
    display: none;
  }
}

/* Dropdowns & Modals (FIXED) */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-user,
.header-theme-toggle,
.header-action-item {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 0;
  display: none;
  /* Hidden by default */
  flex-direction: column;
  z-index: var(--z-modal);
  margin-top: 8px;
  overflow: hidden;
  animation: dropdownSlideDown 0.2s ease-out;
}

@keyframes dropdownSlideDown {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-menu-right {
  right: 0;
  left: auto;
}

.dropdown-menu.show {
  display: flex !important;
}

.dropdown-header {
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-mode-text);
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-mode-border);
  background: var(--color-mode-bg-secondary);
}

.dropdown-header-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mode-accent);
  text-decoration: none;
  transition: color 0.2s;
}

.dropdown-header-link:hover {
  color: var(--color-mode-accent-dark);
}

.dropdown-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-header-action-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-mode-text-muted);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
}

.dropdown-header-action-btn:hover {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-accent);
}

.dropdown-tabs {
  display: flex;
  padding: 8px;
  gap: 4px;
  border-bottom: 1px solid var(--color-mode-border);
  background: var(--color-mode-bg-secondary);
}

.dropdown-tab {
  flex: 1;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--color-mode-text-muted);
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
}

.dropdown-tab:hover {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-text);
}

.dropdown-tab.active {
  background: var(--color-mode-accent);
  color: var(--color-mode-text-inverse);
}

.dropdown-body {
  padding: 4px 0;
  background: var(--color-mode-bg-card);
  max-height: 400px;
  overflow-y: auto;
}

.notification-action-btn,
.note-action-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-mode-text-muted);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  font-size: 12px;
  flex-shrink: 0;
}

.dropdown-notification-item:hover .notification-action-btn,
.dropdown-note-item:hover .note-action-btn {
  opacity: 1;
}

.notification-action-btn:hover,
.note-action-btn:hover {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-error);
}

.dropdown-footer-btn {
  padding: 6px 12px;
  border: 1px solid var(--color-mode-border);
  background: var(--color-mode-bg-card);
  color: var(--color-mode-text);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.dropdown-footer-btn:hover {
  background: var(--color-mode-bg-hover);
  border-color: var(--color-mode-accent);
  color: var(--color-mode-accent);
}

.dropdown-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--color-mode-border);
  background: var(--color-mode-bg-secondary);
}

.dropdown-footer-link {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mode-accent);
  text-decoration: none;
  padding: 8px;
  border-radius: var(--radius-md);
  transition: background 0.2s;
}

.dropdown-footer-link:hover {
  background: var(--color-mode-bg-hover);
}

.dropdown-empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--color-mode-text-muted);
  font-size: 14px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  color: var(--color-mode-text);
  font-size: 14px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  gap: 12px;
  transition: background 0.15s ease;
}

.dropdown-item i {
  width: 18px;
  text-align: center;
  color: var(--color-mode-text-muted);
  font-size: 16px;
}

.dropdown-item:hover {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-text);
}

.dropdown-item:hover i {
  color: var(--color-mode-accent);
}

.dropdown-item.dropdown-item-danger {
  color: var(--color-mode-error);
}

.dropdown-item.dropdown-item-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-mode-error);
}

.dropdown-divider {
  height: 1px;
  background: var(--color-mode-border);
  margin: 6px 0;
}

/* Notifications Dropdown */
.dropdown-notifications {
  width: 360px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
}

.dropdown-notifications-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}

.dropdown-notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  position: relative;
  background: transparent;
  transition: background 0.2s;
}

.dropdown-notification-item:hover {
  background: var(--color-mode-bg-hover);
}

.dropdown-notification-item.unread {
  background: var(--color-mode-bg-secondary);
}

.dropdown-notification-item.unread:hover {
  background: var(--color-mode-bg-hover);
}

.dropdown-notification-item.unread::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--color-mode-accent);
  border-radius: 50%;
}

.notification-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  background: var(--color-mode-bg-secondary);
  color: var(--color-mode-text-muted);
}

.notification-icon i {
  color: inherit;
}

.notification-icon-success {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.notification-icon-info {
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
}

.notification-icon-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.notification-icon-primary {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mode-text);
  margin-bottom: 4px;
  line-height: 1.4;
}

.notification-text {
  font-size: 13px;
  color: var(--color-mode-text-muted);
  line-height: 1.4;
  margin-bottom: 4px;
}

.notification-time {
  font-size: 12px;
  color: var(--color-mode-text-muted);
}

/* Messages Dropdown */
.dropdown-messages {
  width: 340px;
  max-height: 480px;
  display: flex;
  flex-direction: column;
}

.dropdown-messages-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}

.dropdown-message-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  position: relative;
  background: transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}

.dropdown-message-item:hover {
  background: var(--color-mode-bg-hover);
  text-decoration: none;
  color: inherit;
}

.dropdown-message-item.unread {
  background: var(--color-mode-bg-secondary);
}

.dropdown-message-item.unread:hover {
  background: var(--color-mode-bg-hover);
}

.dropdown-message-item.unread::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: var(--color-mode-accent);
  border-radius: 50%;
}

.message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-mode-accent), var(--color-mode-accent-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.message-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-mode-text);
}

.message-sender {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-mode-text);
}

.message-time {
  font-size: 12px;
  color: var(--color-mode-text-muted);
}

.message-text {
  font-size: 13px;
  color: var(--color-mode-text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-preview {
  font-size: 13px;
  color: var(--color-mode-text-muted);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* User Dropdown Enhancements */
.dropdown-user {
  width: 280px;
}

/* Recent Pages Dropdown */
.dropdown-recent-pages {
  width: 300px;
}

.dropdown-recent-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 4px 0;
}

.dropdown-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.dropdown-recent-item i {
  width: 20px;
  text-align: center;
  color: var(--color-mode-text-muted);
  font-size: 16px;
}

.recent-content {
  flex: 1;
  min-width: 0;
}

.recent-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-mode-text);
  margin-bottom: 2px;
}

.recent-time {
  font-size: 12px;
  color: var(--color-mode-text-muted);
}

/* Quick Notes Dropdown */
.dropdown-quick-notes {
  width: 320px;
  max-height: 480px;
}

.dropdown-notes-list {
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 0;
}

.dropdown-note-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  position: relative;
}

.note-content {
  flex: 1;
  min-width: 0;
}

.note-text {
  font-size: 14px;
  color: var(--color-mode-text);
  line-height: 1.5;
  margin-bottom: 4px;
}

.note-time {
  font-size: 11px;
  color: var(--color-mode-text-muted);
}

/* User Status Indicator */
.user-status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-mode-bg-card);
  background: var(--color-mode-text-muted);
}

.user-status-indicator.online {
  background: #10b981;
}

.user-status-indicator.away {
  background: #f59e0b;
}

.user-status-indicator.offline {
  background: var(--color-mode-text-muted);
}

.dropdown-header-avatar {
  position: relative;
}

.user-status-text {
  font-size: 11px;
  color: var(--color-mode-text-muted);
  margin-left: 4px;
}

.dropdown-header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: transparent;
  border-bottom: 1px solid var(--color-mode-border);
}

.dropdown-header-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-mode-accent), var(--color-mode-accent-dark));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}

.dropdown-header-info {
  flex: 1;
  min-width: 0;
}

.dropdown-header-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-mode-text);
  margin-bottom: 2px;
}

.dropdown-header-role {
  font-size: 12px;
  color: var(--color-mode-text-muted);
}

/* Search Modal (FIXED) */
.search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
  /* Hidden by default */
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.search-modal.show {
  display: flex;
}

.search-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.search-modal-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: var(--color-mode-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  z-index: 2001;
}

.search-modal-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-mode-border);
  display: flex;
  align-items: center;
}

.search-modal-header {
  gap: 8px;
}

.search-modal-header input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--color-mode-text);
  padding: 0 12px;
  outline: none;
}

.search-modal-filters {
  display: flex;
  gap: 4px;
}

.search-filter-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-mode-border);
  background: var(--color-mode-bg-card);
  color: var(--color-mode-text-muted);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
}

.search-filter-btn:hover {
  background: var(--color-mode-bg-hover);
  border-color: var(--color-mode-accent);
  color: var(--color-mode-accent);
}

.search-filter-btn.active {
  background: var(--color-mode-accent);
  border-color: var(--color-mode-accent);
  color: white;
}

.search-result-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-mode-text-muted);
}

.search-modal-body {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.search-section {
  margin-bottom: 24px;
}

.search-section:last-child {
  margin-bottom: 0;
}

.search-section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-mode-text-muted);
  margin-bottom: 8px;
  padding: 0 4px;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  color: var(--color-mode-text);
  text-decoration: none;
  transition: background 0.15s;
  margin-bottom: 4px;
}

.search-result-item:hover {
  background: var(--color-mode-bg-hover);
}

.search-result-item i {
  width: 20px;
  text-align: center;
  color: var(--color-mode-text-muted);
  font-size: 16px;
}

.search-result-item span:not(.search-result-type) {
  flex: 1;
}

.search-result-type {
  font-size: 11px;
  color: var(--color-mode-text-muted);
  background: var(--color-mode-bg-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-modal-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--color-mode-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 11px;
  color: var(--color-mode-text-muted);
  background: var(--color-mode-bg-secondary);
}

.search-modal-footer span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.search-modal-footer kbd {
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  font-family: monospace;
}

/* Quick Note Modal */
.quick-note-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
}

.quick-note-modal.show {
  display: flex;
}

.quick-note-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.quick-note-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  background: var(--color-mode-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 2101;
  overflow: hidden;
}

.quick-note-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-mode-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-mode-bg-secondary);
}

.quick-note-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-mode-text);
}

.quick-note-close {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-mode-text-muted);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-note-close:hover {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-text);
}

.quick-note-body {
  padding: 20px;
}

.quick-note-body textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  background: var(--color-mode-bg-card);
  color: var(--color-mode-text);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}

.quick-note-body textarea:focus {
  border-color: var(--color-mode-accent);
}

.quick-note-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-mode-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  background: var(--color-mode-bg-secondary);
}

.quick-note-footer .btn {
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.quick-note-footer .btn-secondary {
  background: var(--color-mode-bg-card);
  color: var(--color-mode-text);
  border: 1px solid var(--color-mode-border);
}

.quick-note-footer .btn-secondary:hover {
  background: var(--color-mode-bg-hover);
}

.quick-note-footer .btn-primary {
  background: var(--color-mode-accent);
  color: white;
}

.quick-note-footer .btn-primary:hover {
  background: var(--color-mode-accent-dark);
}

/* --------------------------------------------------------------------------
   6. COMPONENTS: CARDS & WIDGETS
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  padding: var(--radius-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-lg);
  position: relative;
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-mode-border-strong);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Stat Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

@media (max-width: 1400px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.stat-card {
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  cursor: default;
}

.stat-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-mode-primary);
}

.stat-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-primary);
}

.stat-card:hover .stat-card-icon {
  background: var(--color-mode-primary);
  color: white;
}

.stat-card-value {
  font-size: var(--radius-md);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.stat-card-label {
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.5px;
  color: var(--color-mode-text-muted);
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   7. INTERACTIVE ELEMENTS (Buttons & Lists)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-mode-primary);
  color: white;
  box-shadow: 0 4px 10px -2px rgba(99, 102, 241, 0.3);
}

.btn-primary:hover {
  background: var(--color-mode-accent-dark);
  box-shadow: 0 6px 15px -3px rgba(99, 102, 241, 0.4);
}

.btn-secondary {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-text);
  border: 1px solid var(--color-mode-border);
}

.btn-secondary:hover {
  background: var(--color-mode-border);
  border-color: var(--color-mode-text-muted);
}

.btn-ghost {
  background: transparent;
  color: var(--color-mode-text-muted);
}

.btn-ghost:hover {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-primary);
}

/* List Items (Activity / Users) */
.user-item,
.activity-item {
  border-radius: var(--radius-md);
  margin: 0 -8px;
  padding: 12px 20px;
}

.user-item:hover,
.activity-item:hover {
  background: var(--color-mode-bg-hover);
}

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  margin-top: auto;
  padding: 20px 24px;
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-mode-text-muted);
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   9. UTILITIES
   -------------------------------------------------------------------------- */
.text-center {
  text-align: center;
}

.w-full {
  width: 100%;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.is-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.badge {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.5px;
}

.badge-success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.badge-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.badge-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.badge-primary {
  background: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}

/* --------------------------------------------------------------------------
   10. ANIMATIONS (Entrance)
   -------------------------------------------------------------------------- */
/* Animation utilities removed - animations disabled for minimal design */
.stats-grid .stat-card:nth-child(1) {
  animation-delay: 0.05s;
}

.stats-grid .stat-card:nth-child(2) {
  animation-delay: 0.1s;
}

.stats-grid .stat-card:nth-child(3) {
  animation-delay: 0.15s;
}

.stats-grid .stat-card:nth-child(4) {
  animation-delay: 0.2s;
}

/* ==========================================================================
   UI IMPROVEMENTS - Clean & Understandable Interface
   ========================================================================== */
/* ========================================
   ENHANCED CARD SYSTEM
   ======================================== */
.card {
  background: var(--color-mode-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-mode-border);
  overflow: hidden;
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
}

.card-body {
  padding: var(--spacing-lg);
}

.card-header {
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-mode-border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-mode-bg-card);
}

.card-header-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mode-text);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0;
}

.card-header-icon {
  color: var(--color-mode-accent);
  font-size: 1.1em;
}

.card-footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-mode-border-light);
  background: var(--color-mode-bg-secondary);
}

/* ========================================
   IMPROVED SPACING SYSTEM
   ======================================== */
.mb-xs {
  margin-bottom: var(--spacing-xs) !important;
}

.mb-sm {
  margin-bottom: var(--spacing-sm) !important;
}

.mb-md {
  margin-bottom: var(--spacing-md) !important;
}

.mb-lg {
  margin-bottom: var(--spacing-lg) !important;
}

.mb-xl {
  margin-bottom: var(--spacing-xl) !important;
}

.mt-xs {
  margin-top: var(--spacing-xs) !important;
}

.mt-sm {
  margin-top: var(--spacing-sm) !important;
}

.mt-md {
  margin-top: var(--spacing-md) !important;
}

.mt-lg {
  margin-top: var(--spacing-lg) !important;
}

.mt-xl {
  margin-top: var(--spacing-xl) !important;
}

.gap-xs {
  gap: var(--spacing-xs) !important;
}

.gap-sm {
  gap: var(--spacing-sm) !important;
}

.gap-md {
  gap: var(--spacing-md) !important;
}

.gap-lg {
  gap: var(--spacing-lg) !important;
}

.gap-xl {
  gap: var(--spacing-xl) !important;
}

/* ========================================
   ENHANCED TYPOGRAPHY
   ======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-mode-text);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-base);
}

p {
  color: var(--color-mode-text-secondary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--spacing-md);
}

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

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

.text-muted {
  color: var(--color-mode-text-muted) !important;
}

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

/* ========================================
   IMPROVED BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
  cursor: pointer;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-mode-button-bg);
  color: var(--color-mode-button-text);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-mode-button-hover);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--color-mode-bg-secondary);
  color: var(--color-mode-text);
  border: 1px solid var(--color-mode-border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-mode-bg-hover);
  border-color: var(--color-mode-accent);
}

/* ========================================
   IMPROVED BADGES
   ======================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.badge-primary {
  background: var(--color-mode-accent);
  color: var(--color-mode-text-inverse);
}

.badge-success {
  background: var(--color-mode-success);
  color: var(--color-mode-text-inverse);
}

.badge-warning {
  background: var(--color-mode-warning);
  color: var(--color-mode-text-inverse);
}

.badge-danger {
  background: var(--color-mode-error);
  color: var(--color-mode-text-inverse);
}

.badge-secondary {
  background: var(--color-mode-bg-secondary);
  color: var(--color-mode-text);
  border: 1px solid var(--color-mode-border);
}

/* ========================================
   IMPROVED STAT CARDS
   ======================================== */
.stat-card {
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.stat-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-mode-accent);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-icon-primary {
  background: rgba(var(--color-mode-accent-rgb, 99, 102, 241), 0.1);
  color: var(--color-mode-accent);
}

.stat-icon-success {
  background: rgba(var(--color-mode-success-rgb, 34, 197, 94), 0.1);
  color: var(--color-mode-success);
}

.stat-icon-warning {
  background: rgba(var(--color-mode-warning-rgb, 245, 158, 11), 0.1);
  color: var(--color-mode-warning);
}

.stat-icon-info {
  background: rgba(var(--color-mode-info-rgb, 59, 130, 246), 0.1);
  color: var(--color-mode-info);
}

/* ========================================
   IMPROVED GRID SYSTEM
   ======================================== */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ========================================
   IMPROVED RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
  .card-body {
    padding: var(--spacing-md);
  }

  .card-header {
    padding: var(--spacing-sm) var(--spacing-md);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
  }

  h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
  }

  h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
  }

  .welcome-avatar {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }
}

/* ========================================
   IMPROVED VISUAL HIERARCHY
   ======================================== */
/* Main-wrapper kuralları layout-fix bölümünde tanımlı */
/* Main content padding is handled by main-wrapper */
.main-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
}

@media (max-width: 768px) {
  .main-wrapper {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .main-content {
    padding: 0;
  }
}

.welcome-header {
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.welcome-avatar {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-mode-accent), var(--color-mode-accent-dark));
  color: var(--color-mode-text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: var(--font-weight-bold);
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}

/* ========================================
   IMPROVED QUICK ACCESS
   ======================================== */
.quick-access-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.quick-access-icon-primary {
  background: rgba(var(--color-mode-accent-rgb, 99, 102, 241), 0.1);
  color: var(--color-mode-accent);
}

.quick-access-icon-success {
  background: rgba(var(--color-mode-success-rgb, 34, 197, 94), 0.1);
  color: var(--color-mode-success);
}

.quick-access-icon-warning {
  background: rgba(var(--color-mode-warning-rgb, 245, 158, 11), 0.1);
  color: var(--color-mode-warning);
}

.quick-access-icon-info {
  background: rgba(var(--color-mode-info-rgb, 59, 130, 246), 0.1);
  color: var(--color-mode-info);
}

/* ========================================
   IMPROVED USER AVATAR
   ======================================== */
.user-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-mode-text-inverse);
  flex-shrink: 0;
}

.user-avatar-primary {
  background: linear-gradient(135deg, var(--color-mode-accent), var(--color-mode-accent-dark));
}

.user-avatar-success {
  background: linear-gradient(135deg, var(--color-mode-success), #16a34a);
}

.user-avatar-error {
  background: linear-gradient(135deg, var(--color-mode-error), #dc2626);
}

.user-avatar-info {
  background: linear-gradient(135deg, var(--color-mode-info), #2563eb);
}

/* ========================================
   IMPROVED PROGRESS BAR
   ======================================== */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--color-mode-bg-secondary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  width: 0;
}

/* Chart SVG Styles */
.chart-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-sm);
  color: var(--color-mode-text-muted);
  font-size: var(--font-size-xs);
}

/* Select Auto Width */
.select-auto-width {
  width: auto;
  min-width: 120px;
}

.progress-fill-primary {
  background: var(--color-mode-accent);
}

.progress-fill-success {
  background: var(--color-mode-success);
}

.progress-fill-warning {
  background: var(--color-mode-warning);
}

.progress-fill-error {
  background: var(--color-mode-error);
}

/* ========================================
   IMPROVED EVENT DATE
   ======================================== */
.event-date {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-md);
  background: var(--color-mode-bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid var(--color-mode-border);
}

.event-day {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-mode-text);
  line-height: 1;
}

.event-month {
  font-size: var(--font-size-xs);
  color: var(--color-mode-text-muted);
  text-transform: none;
  margin-top: 2px;
}

/* ========================================
   IMPROVED FLEX UTILITIES
   ======================================== */
.flex {
  display: flex;
}

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

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

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.flex-1 {
  flex: 1;
  min-width: 0;
}

.flex-wrap {
  flex-wrap: wrap;
}

/* ========================================
   IMPROVED SPACE UTILITIES
   ======================================== */
.space-y-xs>*+* {
  margin-top: var(--spacing-xs);
}

.space-y-sm>*+* {
  margin-top: var(--spacing-sm);
}

.space-y-md>*+* {
  margin-top: var(--spacing-md);
}

.space-y-lg>*+* {
  margin-top: var(--spacing-lg);
}

.space-y-xl>*+* {
  margin-top: var(--spacing-xl);
}

.space-x-xs>*+* {
  margin-left: var(--spacing-xs);
}

.space-x-sm>*+* {
  margin-left: var(--spacing-sm);
}

.space-x-md>*+* {
  margin-left: var(--spacing-md);
}

.space-x-lg>*+* {
  margin-left: var(--spacing-lg);
}

.space-x-xl>*+* {
  margin-left: var(--spacing-xl);
}

/* ========================================
   IMPROVED WIDTH UTILITIES
   ======================================== */
.w-full {
  width: 100%;
}

.w-auto {
  width: auto;
}

.h-full {
  height: 100%;
}

.h-auto {
  height: auto;
}

/* Border utilities moved to comprehensive utilities section */
/* Text & Font utilities moved to comprehensive utilities section */

/* ==========================================================================
   COMPREHENSIVE UTILITY CLASSES SYSTEM
   Bootstrap/Tailwind benzeri ama bağımsız utility sınıfları
   Tüm sayfalarda tutarlı kullanım için
   ========================================================================== */

/* ========================================
   GRID SYSTEM - Responsive Grid
   ======================================== */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.gap-0 {
  gap: var(--spacing-0);
}

.gap-xs {
  gap: var(--spacing-xs);
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.gap-xl {
  gap: var(--spacing-xl);
}

.gap-2xl {
  gap: var(--spacing-2xl);
}

@media (min-width: 640px) {
  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
}

/* ========================================
   FLEXBOX UTILITIES
   ======================================== */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

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

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

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

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

.flex-grow {
  flex-grow: 1;
}

/* ========================================
   SPACING UTILITIES - Margin
   ======================================== */
.m-0 {
  margin: var(--spacing-0);
}

.m-xs {
  margin: var(--spacing-xs);
}

.m-sm {
  margin: var(--spacing-sm);
}

.m-md {
  margin: var(--spacing-md);
}

.m-lg {
  margin: var(--spacing-lg);
}

.m-xl {
  margin: var(--spacing-xl);
}

.m-2xl {
  margin: var(--spacing-2xl);
}

.m-auto {
  margin: auto;
}

.mt-0 {
  margin-top: var(--spacing-0);
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

.mt-2xl {
  margin-top: var(--spacing-2xl);
}

.mt-auto {
  margin-top: auto;
}

.mr-0 {
  margin-right: var(--spacing-0);
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.mr-xl {
  margin-right: var(--spacing-xl);
}

.mr-auto {
  margin-right: auto;
}

.mb-0 {
  margin-bottom: var(--spacing-0);
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.mb-auto {
  margin-bottom: auto;
}

.ml-0 {
  margin-left: var(--spacing-0);
}

.ml-xs {
  margin-left: var(--spacing-xs);
}

.ml-sm {
  margin-left: var(--spacing-sm);
}

.ml-md {
  margin-left: var(--spacing-md);
}

.ml-lg {
  margin-left: var(--spacing-lg);
}

.ml-xl {
  margin-left: var(--spacing-xl);
}

.ml-auto {
  margin-left: auto;
}

.mx-0 {
  margin-left: var(--spacing-0);
  margin-right: var(--spacing-0);
}

.mx-xs {
  margin-left: var(--spacing-xs);
  margin-right: var(--spacing-xs);
}

.mx-sm {
  margin-left: var(--spacing-sm);
  margin-right: var(--spacing-sm);
}

.mx-md {
  margin-left: var(--spacing-md);
  margin-right: var(--spacing-md);
}

.mx-lg {
  margin-left: var(--spacing-lg);
  margin-right: var(--spacing-lg);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-0 {
  margin-top: var(--spacing-0);
  margin-bottom: var(--spacing-0);
}

.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.my-md {
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.my-lg {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.my-xl {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* ========================================
   SPACING UTILITIES - Padding
   ======================================== */
.p-0 {
  padding: var(--spacing-0);
}

.p-xs {
  padding: var(--spacing-xs);
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.p-xl {
  padding: var(--spacing-xl);
}

.p-2xl {
  padding: var(--spacing-2xl);
}

.pt-0 {
  padding-top: var(--spacing-0);
}

.pt-xs {
  padding-top: var(--spacing-xs);
}

.pt-sm {
  padding-top: var(--spacing-sm);
}

.pt-md {
  padding-top: var(--spacing-md);
}

.pt-lg {
  padding-top: var(--spacing-lg);
}

.pt-xl {
  padding-top: var(--spacing-xl);
}

.pr-0 {
  padding-right: var(--spacing-0);
}

.pr-xs {
  padding-right: var(--spacing-xs);
}

.pr-sm {
  padding-right: var(--spacing-sm);
}

.pr-md {
  padding-right: var(--spacing-md);
}

.pr-lg {
  padding-right: var(--spacing-lg);
}

.pr-xl {
  padding-right: var(--spacing-xl);
}

.pb-0 {
  padding-bottom: var(--spacing-0);
}

.pb-xs {
  padding-bottom: var(--spacing-xs);
}

.pb-sm {
  padding-bottom: var(--spacing-sm);
}

.pb-md {
  padding-bottom: var(--spacing-md);
}

.pb-lg {
  padding-bottom: var(--spacing-lg);
}

.pb-xl {
  padding-bottom: var(--spacing-xl);
}

.pl-0 {
  padding-left: var(--spacing-0);
}

.pl-xs {
  padding-left: var(--spacing-xs);
}

.pl-sm {
  padding-left: var(--spacing-sm);
}

.pl-md {
  padding-left: var(--spacing-md);
}

.pl-lg {
  padding-left: var(--spacing-lg);
}

.pl-xl {
  padding-left: var(--spacing-xl);
}

.px-0 {
  padding-left: var(--spacing-0);
  padding-right: var(--spacing-0);
}

.px-xs {
  padding-left: var(--spacing-xs);
  padding-right: var(--spacing-xs);
}

.px-sm {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

.px-md {
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

.px-lg {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.px-xl {
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-xl);
}

.py-0 {
  padding-top: var(--spacing-0);
  padding-bottom: var(--spacing-0);
}

.py-xs {
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.py-sm {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

.py-md {
  padding-top: var(--spacing-md);
  padding-bottom: var(--spacing-md);
}

.py-lg {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.py-xl {
  padding-top: var(--spacing-xl);
  padding-bottom: var(--spacing-xl);
}

/* ========================================
   TYPOGRAPHY UTILITIES
   ======================================== */
.text-xs {
  font-size: var(--font-size-xs);
}

.text-sm {
  font-size: var(--font-size-sm);
}

.text-base {
  font-size: var(--font-size-base);
}

.text-lg {
  font-size: var(--font-size-lg);
}

.text-xl {
  font-size: var(--font-size-xl);
}

.text-2xl {
  font-size: var(--font-size-2xl);
}

.text-3xl {
  font-size: var(--font-size-3xl);
}

.text-4xl {
  font-size: var(--font-size-4xl);
}

.text-5xl {
  font-size: var(--font-size-5xl);
}

.font-light {
  font-weight: var(--font-weight-light);
}

.font-normal {
  font-weight: var(--font-weight-normal);
}

.font-medium {
  font-weight: var(--font-weight-medium);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

.font-bold {
  font-weight: var(--font-weight-bold);
}

.font-extrabold {
  font-weight: var(--font-weight-extrabold);
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.normal-case {
  text-transform: none;
}

.leading-none {
  line-height: var(--line-height-none);
}

.leading-tight {
  line-height: var(--line-height-tight);
}

.leading-snug {
  line-height: var(--line-height-snug);
}

.leading-normal {
  line-height: var(--line-height-normal);
}

.leading-relaxed {
  line-height: var(--line-height-relaxed);
}

.leading-loose {
  line-height: var(--line-height-loose);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.break-words {
  word-wrap: break-word;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-normal {
  white-space: normal;
}

/* ========================================
   DISPLAY UTILITIES
   ======================================== */
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

/* ========================================
   POSITION UTILITIES
   ======================================== */
.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

/* ========================================
   WIDTH & HEIGHT UTILITIES
   ======================================== */
.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

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

.w-max {
  width: max-content;
}

.w-fit {
  width: fit-content;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.h-min {
  height: min-content;
}

.h-max {
  height: max-content;
}

.h-fit {
  height: fit-content;
}

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

.min-w-full {
  min-width: 100%;
}

.max-w-full {
  max-width: 100%;
}

.max-w-screen {
  max-width: 100vw;
}

.min-h-0 {
  min-height: 0;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.max-h-full {
  max-height: 100%;
}

.max-h-screen {
  max-height: 100vh;
}

/* ========================================
   BORDER UTILITIES
   ======================================== */
.border {
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-mode-border);
}

.border-0 {
  border-width: 0;
}

.border-2 {
  border-width: 2px;
}

.border-4 {
  border-width: 4px;
}

.border-t {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: var(--color-mode-border);
}

.border-r {
  border-right-width: 1px;
  border-right-style: solid;
  border-right-color: var(--color-mode-border);
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--color-mode-border);
}

.border-l {
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: var(--color-mode-border);
}

.rounded-none {
  border-radius: 0;
}

.rounded-sm {
  border-radius: var(--radius-sm);
}

.rounded-md {
  border-radius: var(--radius-md);
}

.rounded-lg {
  border-radius: var(--radius-lg);
}

.rounded-xl {
  border-radius: var(--radius-xl);
}

.rounded-full {
  border-radius: var(--radius-full);
}

.rounded-t {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.rounded-r {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.rounded-b {
  border-bottom-left-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

.rounded-l {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

/* ========================================
   BACKGROUND UTILITIES
   ======================================== */
.bg-transparent {
  background-color: transparent;
}

.bg-current {
  background-color: currentColor;
}

.bg-white {
  background-color: #ffffff;
}

.bg-black {
  background-color: #000000;
}

/* ========================================
   TEXT COLOR UTILITIES
   ======================================== */
.text-current {
  color: currentColor;
}

.text-white {
  color: #ffffff;
}

.text-black {
  color: #000000;
}

.text-inherit {
  color: inherit;
}

/* ========================================
   CARD UTILITIES - Tutarlı Kart Yapısı
   ======================================== */
.card {
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding-bottom: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  border-bottom: 1px solid var(--color-mode-border);
}

.card-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mode-text);
  margin: 0;
}

.card-body {
  padding: 0;
}

.card-footer {
  padding-top: var(--spacing-md);
  margin-top: var(--spacing-md);
  border-top: 1px solid var(--color-mode-border);
}

.card-hover {
  cursor: pointer;
}

.card-hover:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-mode-accent);
}

.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  border-color: var(--color-mode-accent);
}

.card-compact {
  padding: var(--spacing-md);
}

.card-spacious {
  padding: var(--spacing-xl);
}

/* ========================================
   OVERFLOW UTILITIES
   ======================================== */
.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

/* ========================================
   CURSOR UTILITIES
   ======================================== */
.cursor-auto {
  cursor: auto;
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.cursor-text {
  cursor: text;
}

.cursor-move {
  cursor: move;
}

.cursor-not-allowed {
  cursor: not-allowed;
}

/* ========================================
   OPACITY UTILITIES
   ======================================== */
.opacity-0 {
  opacity: 0;
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-75 {
  opacity: 0.75;
}

.opacity-100 {
  opacity: 1;
}

/* ========================================
   POINTER EVENTS UTILITIES
   ======================================== */
.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

/* ========================================
   USER SELECT UTILITIES
   ======================================== */
.select-none {
  user-select: none;
}

.select-text {
  user-select: text;
}

.select-all {
  user-select: all;
}

.select-auto {
  user-select: auto;
}

/* ========================================
   OBJECT FIT UTILITIES
   ======================================== */
.object-contain {
  object-fit: contain;
}

.object-cover {
  object-fit: cover;
}

.object-fill {
  object-fit: fill;
}

.object-none {
  object-fit: none;
}

.object-scale-down {
  object-fit: scale-down;
}

/* ========================================
   ERROR PAGE STYLES
   ======================================== */
.error-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  background: var(--color-mode-bg);
}

.error-page-container {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.error-illustration {
  margin-bottom: var(--spacing-xl);
}

.error-code {
  font-size: 8rem;
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
  color: var(--color-mode-accent);
  margin-bottom: var(--spacing-md);
}

.error-illustration-icon {
  font-size: 4rem;
  color: var(--color-mode-text-muted);
  margin-top: var(--spacing-md);
}

.error-content {
  margin-bottom: var(--spacing-xl);
}

.error-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-mode-text);
  margin-bottom: var(--spacing-md);
}

.error-message {
  font-size: var(--font-size-lg);
  color: var(--color-mode-text-muted);
  margin-bottom: var(--spacing-xl);
  line-height: var(--line-height-relaxed);
}

.error-actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-xl);
}

.error-search {
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 1px solid var(--color-mode-border);
}

.error-search-label {
  font-size: var(--font-size-sm);
  color: var(--color-mode-text-muted);
  margin-bottom: var(--spacing-md);
}

.error-search-form {
  display: flex;
  gap: var(--spacing-sm);
  max-width: 400px;
  margin: 0 auto;
}

.error-search-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.error-search-input-wrapper i {
  position: absolute;
  left: var(--spacing-sm);
  color: var(--color-mode-text-muted);
  pointer-events: none;
}

.error-search-input {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 2.5rem;
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  background: var(--color-mode-bg-card);
  color: var(--color-mode-text);
  font-size: var(--font-size-base);
}

.error-search-input:focus {
  outline: none;
  border-color: var(--color-mode-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-mode-accent-rgb, 99, 102, 241), 0.1);
}

/* ========================================
   AUTH CONTAINER STYLES
   ======================================== */
.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  background: var(--color-mode-bg);
}

.auth-card {
  width: 100%;
  max-width: 480px;
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
}

.auth-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.verification-status {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--spacing-lg);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
}

.verification-status.verified {
  background: rgba(var(--color-mode-success-rgb, 34, 197, 94), 0.1);
  color: var(--color-mode-success);
}

.verification-status.error {
  background: rgba(var(--color-mode-error-rgb, 239, 68, 68), 0.1);
  color: var(--color-mode-error);
}

.verification-status.pending {
  background: rgba(var(--color-mode-info-rgb, 59, 130, 246), 0.1);
  color: var(--color-mode-info);
}

.auth-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-mode-text);
  margin-bottom: var(--spacing-sm);
}

.auth-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-mode-text-muted);
  line-height: var(--line-height-relaxed);
}

.verification-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.auth-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  color: var(--color-mode-accent);
  text-decoration: none;
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-md);
}

.auth-link:hover {
  text-decoration: underline;
}


/* ========================================
   TEXT COLOR UTILITIES (Theme-aware)
   ======================================== */
.text-accent {
  color: var(--color-mode-accent);
}

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

.text-secondary {
  color: var(--color-mode-text-muted);
}

.text-muted {
  color: var(--color-mode-text-muted);
}

.text-success {
  color: var(--color-mode-success);
}

.text-error {
  color: var(--color-mode-error);
}

.text-warning {
  color: var(--color-mode-warning);
}

.text-info {
  color: var(--color-mode-info);
}

/* ========================================
   MARGIN UTILITIES (Additional)
   ======================================== */
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mr-0 {
  margin-right: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.ml-0 {
  margin-left: 0;
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.mr-xs {
  margin-right: var(--spacing-xs);
}

.mr-sm {
  margin-right: var(--spacing-sm);
}

.mr-md {
  margin-right: var(--spacing-md);
}

.mr-lg {
  margin-right: var(--spacing-lg);
}

.ml-auto {
  margin-left: auto;
}

.mr-auto {
  margin-right: auto;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mt-xs {
  margin-top: var(--spacing-xs);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mt-xl {
  margin-top: var(--spacing-xl);
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 768px) {
  .error-code {
    font-size: 6rem;
  }

  .error-title {
    font-size: var(--font-size-2xl);
  }

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

  .error-search-form {
    flex-direction: column;
  }

  .auth-card {
    padding: var(--spacing-lg);
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  main {
    padding: var(--spacing-lg) var(--spacing-md) !important;
  }
}


/* ========================================
   ADDITIONAL UTILITY CLASSES
   ======================================== */
.text-accent {
  color: var(--color-mode-accent);
}

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

.text-secondary {
  color: var(--color-mode-text-muted);
}

.text-muted {
  color: var(--color-mode-text-muted);
}

.text-success {
  color: var(--color-mode-success);
}

.text-error {
  color: var(--color-mode-error);
}

.text-warning {
  color: var(--color-mode-warning);
}

.text-info {
  color: var(--color-mode-info);
}

.bg-secondary {
  background-color: var(--color-mode-bg-secondary);
}

.bg-card {
  background-color: var(--color-mode-bg-card);
}

.bg-hover {
  background-color: var(--color-mode-bg-hover);
}

.border-hover {
  border-color: var(--color-mode-border-hover);
}

/* ========================================
   PAGE HEADER COMPONENT
   ======================================== */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.page-header-content {
  flex: 1;
  min-width: 0;
}

.page-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-mode-text);
  margin-bottom: var(--spacing-xs);
  line-height: var(--line-height-tight);
}

.page-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-mode-text-muted);
  line-height: var(--line-height-relaxed);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
  }

  .page-header-actions {
    width: 100%;
  }

  .page-header-actions .btn {
    flex: 1;
  }
}

/* ========================================
   ADDITIONAL COMPONENT STYLES
   ======================================== */
.welcome-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-mode-accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

/* ==========================================================================
   EXPLORE PAGE STYLES
   ========================================================================== */

/* ========================================
   EXPLORE HEADER
   ======================================== */
.explore-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.explore-header-content {
  flex: 1;
  min-width: 0;
}

.explore-main-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-mode-text);
  margin-bottom: var(--spacing-xs);
}

.explore-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-mode-text-secondary);
}

.explore-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

/* ========================================
   EXPLORE SEARCH
   ======================================== */
.explore-search {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs) var(--spacing-md);
  min-width: 300px;
}

.explore-search i {
  color: var(--color-mode-text-muted);
  margin-right: var(--spacing-xs);
}

.explore-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--color-mode-text);
  font-size: var(--font-size-base);
  outline: none;
}

.explore-search-input::placeholder {
  color: var(--color-mode-text-muted);
}

.explore-search-clear {
  display: none;
  background: transparent;
  border: none;
  color: var(--color-mode-text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  margin-left: var(--spacing-xs);
}

.explore-search-clear:hover {
  color: var(--color-mode-text);
}

.explore-search-input:not(:placeholder-shown)~.explore-search-clear {
  display: block;
}

/* ========================================
   VIEW TOGGLE
   ======================================== */
.explore-view-toggle {
  display: flex;
  gap: var(--spacing-xs);
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs);
}

.view-toggle-btn {
  background: transparent;
  border: none;
  color: var(--color-mode-text-muted);
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  transition: background-color 0.2s, color 0.2s;
}

.view-toggle-btn:hover {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-text);
}

.view-toggle-btn.active {
  background: var(--color-mode-accent);
  color: #ffffff;
}

/* ========================================
   EXPLORE CATEGORIES
   ======================================== */
.explore-categories {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
  overflow-x: auto;
  padding-bottom: var(--spacing-xs);
  scrollbar-width: thin;
}

.explore-category-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  color: var(--color-mode-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.explore-category-btn:hover {
  background: var(--color-mode-bg-hover);
  color: var(--color-mode-text);
}

.explore-category-btn.active {
  background: var(--color-mode-accent);
  color: #ffffff;
  border-color: var(--color-mode-accent);
}

/* ========================================
   FEATURED SECTION
   ======================================== */
.explore-featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.featured-main {
  display: flex;
}

.featured-side {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.featured-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.featured-large {
  width: 100%;
  min-height: 400px;
}

.featured-small {
  flex: 1;
  min-height: 190px;
}

.featured-image {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featured-badge {
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mode-text);
  z-index: 2;
}

.featured-badge.trending {
  background: rgba(255, 107, 107, 0.95);
  color: #ffffff;
}

.featured-badge.new {
  background: rgba(99, 102, 241, 0.95);
  color: #ffffff;
}

.featured-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  color: var(--color-mode-text);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
}

.featured-card:hover .featured-play-btn {
  opacity: 1;
}

.featured-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: var(--spacing-lg);
  color: #ffffff;
}

.featured-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.featured-category {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  opacity: 0.9;
}

.featured-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.featured-small .featured-title {
  font-size: var(--font-size-lg);
}

.featured-description {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  margin-top: var(--spacing-xs);
}

.featured-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--spacing-md);
}

.featured-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.featured-author-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.featured-stats {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.featured-stats span {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* ========================================
   EXPLORE SECTION
   ======================================== */
.explore-section {
  margin-bottom: var(--spacing-xl);
}

.explore-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.explore-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mode-text);
}

.explore-section-title i {
  color: var(--color-mode-accent);
}

/* ========================================
   EXPLORE GRID
   ======================================== */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.explore-card {
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.explore-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.explore-card-image {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.explore-card-type {
  position: absolute;
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-mode-text);
  z-index: 2;
}

.explore-card-badge {
  position: absolute;
  top: var(--spacing-sm);
  left: var(--spacing-sm);
  width: 32px;
  height: 32px;
  background: rgba(255, 215, 0, 0.95);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-mode-text);
  z-index: 2;
}

.explore-card-actions-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  opacity: 0;
  transition: opacity 0.2s;
}

.explore-card:hover .explore-card-actions-overlay {
  opacity: 1;
}

.explore-action-btn {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-mode-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, transform 0.2s;
}

.explore-action-btn:hover {
  background: #ffffff;
  transform: scale(1.1);
}

.explore-action-btn.like-btn.active i {
  color: #ff4757;
}

.explore-card-content {
  padding: var(--spacing-md);
}

.explore-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

.explore-card-category {
  font-size: var(--font-size-xs);
  color: var(--color-mode-accent);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.explore-card-views {
  font-size: var(--font-size-xs);
  color: var(--color-mode-text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.explore-card-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mode-text);
  margin-bottom: var(--spacing-md);
  line-height: var(--line-height-snug);
}

.explore-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.explore-card-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.explore-author-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-mode-accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.explore-author-name {
  font-size: var(--font-size-sm);
  color: var(--color-mode-text);
  font-weight: var(--font-weight-medium);
}

.explore-card-stats {
  display: flex;
  gap: var(--spacing-md);
}

.explore-stat {
  font-size: var(--font-size-xs);
  color: var(--color-mode-text-muted);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

/* ========================================
   EXPLORE LOAD MORE
   ======================================== */
.explore-load-more {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-xl);
}

/* ========================================
   TRENDING TAGS
   ======================================== */
.trending-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.trending-tag {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-md);
  color: var(--color-mode-text);
  text-decoration: none;
  transition: all 0.2s;
}

.trending-tag:hover {
  background: var(--color-mode-bg-hover);
  border-color: var(--color-mode-accent);
  color: var(--color-mode-accent);
}

.tag-name {
  font-weight: var(--font-weight-semibold);
}

.tag-count {
  font-size: var(--font-size-xs);
  color: var(--color-mode-text-muted);
}

/* ========================================
   SUGGESTED CREATORS
   ======================================== */
.suggested-creators {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.creator-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-mode-bg-card);
  border: 1px solid var(--color-mode-border);
  border-radius: var(--radius-lg);
}

.creator-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-mode-accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}

.creator-info {
  flex: 1;
  min-width: 0;
}

.creator-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mode-text);
  margin-bottom: var(--spacing-xs);
}

.creator-role {
  font-size: var(--font-size-sm);
  color: var(--color-mode-text-secondary);
  margin-bottom: var(--spacing-xs);
}

.creator-stats {
  display: flex;
  gap: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-mode-text-muted);
}

.creator-stats span {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.creator-follow-btn {
  flex-shrink: 0;
}

/* ========================================
   EXPLORE QUICK VIEW MODAL
   ======================================== */
.explore-quick-view .modal-body {
  padding: 0;
}

.quick-view-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
}

.quick-view-image {
  background: var(--color-mode-bg-secondary);
  min-height: 500px;
}

.quick-view-info {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.quick-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quick-view-category {
  font-size: var(--font-size-xs);
  color: var(--color-mode-accent);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.quick-view-date {
  font-size: var(--font-size-xs);
  color: var(--color-mode-text-muted);
}

.quick-view-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-mode-text);
  margin: 0;
}

.quick-view-author {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.quick-view-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-mode-accent);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.quick-view-author-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-mode-text);
}

.quick-view-author-role {
  font-size: var(--font-size-sm);
  color: var(--color-mode-text-secondary);
}

.quick-view-stats {
  display: flex;
  gap: var(--spacing-lg);
  font-size: var(--font-size-base);
  color: var(--color-mode-text-secondary);
}

.quick-view-stats span {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.quick-view-actions {
  display: flex;
  gap: var(--spacing-md);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
  .explore-featured {
    grid-template-columns: 1fr;
  }

  .featured-side {
    flex-direction: row;
  }

  .featured-small {
    min-height: 200px;
  }

  .quick-view-content {
    grid-template-columns: 1fr;
  }

  .quick-view-image {
    min-height: 300px;
  }
}

@media (max-width: 768px) {
  .explore-header {
    flex-direction: column;
  }

  .explore-header-actions {
    width: 100%;
  }

  .explore-search {
    min-width: auto;
    flex: 1;
  }

  .explore-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
  }

  .suggested-creators {
    grid-template-columns: 1fr;
  }

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

/* ==========================================================================
   RESPONSIVE UTILITIES - ENHANCED
   ========================================================================== */

/* Mobile First Breakpoints */
/* xs: 0-479px (mobile portrait) */
/* sm: 480-639px (mobile landscape) */
/* md: 640-767px (tablet portrait) */
/* lg: 768-1023px (tablet landscape) */
/* xl: 1024-1279px (desktop) */
/* 2xl: 1280px+ (large desktop) */

/* Display Utilities */
.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.grid {
  display: grid !important;
}

/* Responsive Display */
@media (max-width: 479px) {
  .xs\:hidden {
    display: none !important;
  }

  .xs\:block {
    display: block !important;
  }

  .xs\:flex {
    display: flex !important;
  }

  .xs\:grid {
    display: grid !important;
  }
}

@media (min-width: 480px) and (max-width: 639px) {
  .sm\:hidden {
    display: none !important;
  }

  .sm\:block {
    display: block !important;
  }

  .sm\:flex {
    display: flex !important;
  }

  .sm\:grid {
    display: grid !important;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .md\:hidden {
    display: none !important;
  }

  .md\:block {
    display: block !important;
  }

  .md\:flex {
    display: flex !important;
  }

  .md\:grid {
    display: grid !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .lg\:hidden {
    display: none !important;
  }

  .lg\:block {
    display: block !important;
  }

  .lg\:flex {
    display: flex !important;
  }

  .lg\:grid {
    display: grid !important;
  }
}

@media (min-width: 1024px) {
  .xl\:hidden {
    display: none !important;
  }

  .xl\:block {
    display: block !important;
  }

  .xl\:flex {
    display: flex !important;
  }

  .xl\:grid {
    display: grid !important;
  }
}

/* Responsive Padding */
@media (max-width: 767px) {
  .card {
    padding: var(--spacing-sm);
  }

  .card-body {
    padding: var(--spacing-sm);
  }

  .main-content {
    padding: var(--spacing-sm);
  }

  .container {
    padding: 0 var(--spacing-sm);
  }
}

/* Responsive Grid */
@media (max-width: 479px) {

  .grid-cols-1,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 480px) and (max-width: 767px) {

  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Responsive Text */
@media (max-width: 767px) {
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
  }

  .text-responsive-lg {
    font-size: var(--font-size-lg);
  }

  .text-responsive-xl {
    font-size: var(--font-size-xl);
  }

  .text-responsive-2xl {
    font-size: var(--font-size-2xl);
  }
}

/* Mobile Sidebar Adjustments */
@media (max-width: 1023px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.active {
    transform: translateX(0);
  }

  .main-wrapper {
    margin-left: 0 !important;
  }

  .header {
    left: 0 !important;
    width: 100% !important;
  }
}

/* Touch-friendly sizes for mobile */
@media (max-width: 767px) {

  .btn,
  .header-icon-btn,
  .dropdown-item {
    min-height: 44px;
    min-width: 44px;
  }

  .input,
  .select,
  .textarea {
    min-height: 44px;
    font-size: 16px;
    /* Prevents zoom on iOS */
  }
}

/* Landscape mode optimizations */
@media (max-width: 767px) and (orientation: landscape) {
  .header {
    height: 60px;
  }

  .sidebar {
    width: 200px;
  }
}

/* Print styles */
@media print {

  .sidebar,
  .header,
  .footer,
  .btn,
  .dropdown-menu,
  .modal {
    display: none !important;
  }

  .main-wrapper {
    margin-left: 0 !important;
  }

  .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {

  .card,
  .btn,
  .input {
    border-width: 2px;
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
  }
}

/* ==========================================================================
   SMART FEATURES - ENHANCED
   ========================================================================== */

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Focus visible for keyboard navigation */
:focus-visible {
  outline: 2px solid var(--color-mode-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Better text selection */
::selection {
  background-color: var(--color-mode-accent);
  color: #ffffff;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-mode-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-mode-border);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-mode-text-muted);
}

/* Loading states */
.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--color-mode-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg,
      var(--color-mode-bg-secondary) 0%,
      var(--color-mode-bg-hover) 50%,
      var(--color-mode-bg-secondary) 100%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

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

  100% {
    background-position: -200% 0;
  }
}

/* Pulse animation */
.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Fade in animation */
.fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Slide in animations */
.slide-in-up {
  animation: slideInUp 0.3s ease-out;
}

.slide-in-down {
  animation: slideInDown 0.3s ease-out;
}

.slide-in-left {
  animation: slideInLeft 0.3s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Bounce animation */
.bounce {
  animation: bounce 1s infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Shake animation */
.shake {
  animation: shake 0.5s;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-5px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(5px);
  }
}

/* ==========================================================================
   UTILITY CLASSES - ENHANCED
   ========================================================================== */

/* Visibility */
.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

/* Overflow */
.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

/* Position */
.static {
  position: static !important;
}

.fixed {
  position: fixed !important;
}

.absolute {
  position: absolute !important;
}

.relative {
  position: relative !important;
}

.sticky {
  position: sticky !important;
}

/* Z-index */
.z-0 {
  z-index: 0 !important;
}

.z-10 {
  z-index: 10 !important;
}

.z-20 {
  z-index: 20 !important;
}

.z-30 {
  z-index: 30 !important;
}

.z-40 {
  z-index: 40 !important;
}

.z-50 {
  z-index: 50 !important;
}

.z-auto {
  z-index: auto !important;
}

/* Cursor */
.cursor-auto {
  cursor: auto !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-wait {
  cursor: wait !important;
}

.cursor-text {
  cursor: text !important;
}

.cursor-move {
  cursor: move !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

/* Pointer events */
.pointer-events-none {
  pointer-events: none !important;
}

.pointer-events-auto {
  pointer-events: auto !important;
}

/* User select */
.select-none {
  user-select: none !important;
}

.select-text {
  user-select: text !important;
}

.select-all {
  user-select: all !important;
}

.select-auto {
  user-select: auto !important;
}

/* Opacity */
.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* ==========================================================================
   LAYOUT FIXES - Responsive & Layout Overrides
   ========================================================================== */
/**
 * UDENUA Layout Fix v3 - RESPONSIVE
 * Ultra aggressive layout fix - overrides everything
 * Supports all devices: Desktop, Tablet, Mobile (including old devices)
 * Minimum support: iOS 9+, Android 4.4+, IE11+, Chrome 49+, Safari 9+
 */

/* Force box-sizing on everything */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  position: relative;
  background: var(--color-mode-bg, #ffffff);
  color: var(--color-mode-text, #0f172a);
  /* Prevent text size adjustment on orientation change */
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Sidebar - Fixed Left - Enhanced positioning */
.sidebar {
  position: fixed;
  top: 10px;
  left: 16px;
  bottom: 10px;
  width: 80px;
  background: var(--color-mode-bg-card, #ffffff);
  border: 1px solid var(--color-mode-border, #e2e8f0);
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  transition: width 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 20px);
  padding: 20px 10px;
}

.sidebar:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sidebar.expanded {
  width: 280px;
  padding: 20px;
}

/* Main Wrapper - Clean and simple */
.main-wrapper {
  position: relative;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  padding: 0;
  padding-left: 90px;
  /* 80px sidebar + 10px gap */
  padding-right: 10px;
  margin: 0;
  transition: padding-left 0.3s ease;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  background: var(--color-mode-bg, #f8f9fa);
}

body.sidebar-expanded .main-wrapper,
.sidebar.expanded~.main-wrapper {
  padding-left: 290px;
  /* 280px sidebar + 10px gap */
  padding-right: 10px;
}

/* Header - Fixed Top */
.main-wrapper>.header,
.header {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  align-self: stretch;
  background: var(--color-mode-bg-card, #ffffff);
  border: 1px solid var(--color-mode-border, #e2e8f0);
  border-radius: 20px;
  padding: 16px 24px;
  margin: 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  min-height: 80px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 100;
  box-sizing: border-box;
}

/* Header hover removed */

/* Main Content - Spacious & Clean */
.main-wrapper>.main-content,
.main-content {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  box-sizing: border-box;
}

/* All children of main-content should be full width */
.main-content>* {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Footer - Full Width */
.main-wrapper>.footer,
.footer {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  align-self: stretch;
  background: var(--color-mode-bg-card, #ffffff);
  border: 1px solid var(--color-mode-border, #e2e8f0);
  border-radius: 16px;
  padding: 24px;
  margin: 0;
  margin-top: 32px;
  box-sizing: border-box;
}

/* Cards - Modern & Elevated */
/* Cards - Unified Standard */
.card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  background: var(--color-mode-bg-card, #ffffff);
  border: 1px solid var(--color-mode-border, #e2e8f0);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

/* Card hover removed */

.card-body {
  padding: 24px;
  box-sizing: border-box;
}

/* Grid System */
.grid {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

/* Header children */
.header-left,
.header-right {
  box-sizing: border-box;
  min-width: 0;
  flex-shrink: 1;
}

/* ========================================
   RESPONSIVE DESIGN - ALL DEVICES
   ======================================== */

/* Extra Large Desktops (1920px+) */
@media (min-width: 1920px) {
  .main-wrapper {
    max-width: 1920px;
    margin: 0 auto;
  }
}

/* Large Desktops (1440px - 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {
  .main-wrapper {
    padding-left: 126px;
    padding-right: 20px;
  }

  body.sidebar-expanded .main-wrapper,
  .sidebar.expanded~.main-wrapper {
    padding-left: 326px;
  }
}

/* Standard Desktops (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  .main-wrapper {
    padding-left: 116px;
    padding-right: 16px;
  }

  body.sidebar-expanded .main-wrapper,
  .sidebar.expanded~.main-wrapper {
    padding-left: 306px;
  }

  .sidebar {
    width: 70px;
  }

  .sidebar.expanded {
    width: 260px;
  }
}

/* Tablets & Small Laptops (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar {
    width: 70px;
    left: 10px;
  }

  .sidebar.expanded {
    width: 240px;
  }

  .main-wrapper {
    padding-left: 90px;
    padding-right: 10px;
    padding-top: 10px;
  }

  body.sidebar-expanded .main-wrapper,
  .sidebar.expanded~.main-wrapper {
    padding-left: 260px;
  }

  .header {
    padding: 12px 16px;
    flex-wrap: wrap;
  }

  .header-left,
  .header-right {
    gap: 8px;
  }

  .card-body {
    padding: 16px;
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile Landscape & Small Tablets (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 240px;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1001;
    margin: 0;
  }

  .sidebar.expanded,
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .main-wrapper {
    padding: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 70px;
  }

  body.sidebar-expanded .main-wrapper,
  .sidebar.expanded~.main-wrapper {
    padding-left: 10px;
  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    border-radius: 0;
    padding: 10px 12px;
    min-height: 60px;
  }

  .hamburger-menu {
    display: flex;
  }

  .card-body {
    padding: 12px;
  }

  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Mobile Portrait (320px - 599px) - INCLUDING OLD PHONES */
@media (max-width: 599px) {

  /* Sidebar - Overlay Mode */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    border-radius: 0;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1001;
    margin: 0;
  }

  .sidebar.expanded,
  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* Main Wrapper - Full Width */
  .main-wrapper {
    padding: 8px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 68px;
    width: 100%;
  }

  body.sidebar-expanded .main-wrapper,
  .sidebar.expanded~.main-wrapper {
    padding-left: 8px;
  }

  /* Header - Fixed Top */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    margin: 0;
    border-radius: 0;
    padding: 8px 10px;
    min-height: 56px;
    gap: 8px;
  }

  /* Hamburger Menu */
  .hamburger-menu {
    display: flex;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Header Items */
  .header-left {
    flex: 1;
    min-width: 0;
  }

  .header-right {
    gap: 4px;
  }

  .header-icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    font-size: 18px;
  }

  .header-title {
    font-size: 16px;
    line-height: 1.2;
  }

  .header-breadcrumb {
    display: none;
  }

  /* Cards */
  .card {
    border-radius: 12px;
  }

  .card-body {
    padding: 12px;
  }

  /* Buttons - Touch Friendly */
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    font-size: 14px;
  }

  .btn-sm {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 13px;
  }

  /* Grid - Single Column */
  .grid-cols-1,
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .md\:grid-cols-2,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
  }

  /* Footer */
  .footer {
    padding: 12px;
    border-radius: 0;
  }

  /* Font Sizes */
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 20px;
  }

  h2 {
    font-size: 18px;
  }

  h3 {
    font-size: 16px;
  }

  h4 {
    font-size: 14px;
  }
}

/* Very Small Devices (iPhone SE, Galaxy S3, etc - 320px) */
@media (max-width: 374px) {
  .main-wrapper {
    padding: 6px;
    padding-top: 64px;
  }

  .header {
    padding: 6px 8px;
    min-height: 52px;
  }

  .header-title {
    font-size: 14px;
  }

  .header-icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    font-size: 16px;
  }

  .hamburger-menu {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .card-body {
    padding: 10px;
  }

  .btn {
    min-height: 40px;
    padding: 8px 12px;
    font-size: 13px;
  }

  body {
    font-size: 13px;
  }
}

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {

  .sidebar-overlay.active,
  body.sidebar-open .sidebar-overlay {
    display: block;
    opacity: 1;
  }
}

/* Touch-Friendly Improvements */
@media (hover: none) and (pointer: coarse) {

  /* Touch devices */
  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  .btn,
  .header-icon-btn,
  .nav-item,
  .card-hover {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  /* Larger touch targets */
  a,
  button,
  .btn,
  .nav-item {
    min-height: 44px;
    min-width: 44px;
  }

  /* Better scroll */
  .main-content,
  .sidebar-nav {
    -webkit-overflow-scrolling: touch;
  }
}

/* Prevent zoom on input focus (iOS) */
input,
textarea,
select {
  font-size: 16px;
}

@media (max-width: 767px) {

  input,
  textarea,
  select {
    font-size: 16px;
    /* Prevents iOS zoom */
  }
}

/* Landscape Mode for Phones */
@media (max-width: 896px) and (orientation: landscape) {
  .main-wrapper {
    padding-top: 60px;
  }

  .header {
    min-height: 52px;
    padding: 6px 10px;
  }

  .sidebar {
    width: 200px;
    max-width: 50vw;
  }
}

/* Utility Classes */
.flex {
  display: flex;
}

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

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-md {
  gap: 16px;
}

.gap-lg {
  gap: 24px;
}

.mb-lg {
  margin-bottom: 24px;
}

.w-full {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}

/* Force remove any centering */
.main-wrapper,
.main-wrapper>*,
.main-content,
.main-content>* {
  margin-left: 0;
  margin-right: 0;
}

/* Explore page specific fixes removed */

/* ==========================================================================
   END OF FILE
   ========================================================================== */