@import 'tailwindcss';

@plugin '@tailwindcss/forms' {
  strategy: class;
}

@plugin '@tailwindcss/typography';

@custom-variant dark (&:where(.dark, .dark *));

@source "../views";
@source "../../../extensions/**/*.blade.php";

/* =============================================================================
   FONT DEFINITIONS
   ============================================================================= */

@font-face {
    font-family: 'Figtree';
    src: url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
    unicode-range: U+0000-00FF;
    font-style: normal;
    font-weight: 200 800;
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS - CRITICAL FIXES
   ============================================================================= */

/* Remove excessive GPU layers and fix blur issues */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Remove blanket translateZ(0) that causes blur */
}

/* Only apply GPU acceleration to elements that truly need it */
.needs-gpu-acceleration {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* =============================================================================
   THEME CONFIGURATION
   ============================================================================= */

@theme {
  --font-sans: "Figtree", "Poppins", "Nunito", ui-sans-serif, system-ui, sans-serif;
}

@theme inline {
  /* Branding Colors */
  --color-primary: hsl(var(--color-primary));
  --color-secondary: hsl(var(--color-secondary));
  
  /* Neutral Colors */
  --color-neutral: hsl(var(--color-neutral));
  
  /* Text Colors */
  --color-base: hsl(var(--color-base));
  --color-muted: hsl(var(--color-muted));
  --color-inverted: hsl(var(--color-inverted));
  
  /* State Colors */
  --color-success: hsl(var(--color-success));
  --color-error: hsl(var(--color-error));
  --color-warning: hsl(var(--color-warning));
  --color-inactive: hsl(var(--color-inactive));
  --color-info: hsl(var(--color-info));
  
  /* Background Colors */
  --color-background: hsl(var(--color-background));
  --color-background-secondary: hsl(var(--color-background-secondary));
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

html {
    scroll-behavior: smooth;
}

/* =============================================================================
   UTILITIES - OPTIMIZED
   ============================================================================= */

@utility text-nowrap {
  text-wrap: nowrap;
}

@utility text-wrap {
  text-wrap: wrap;
}

/* Line clamp utilities - removed excessive containment */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

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

.prose ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin: 1rem 0 !important;
}

.prose ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin: 1rem 0 !important;
}

.prose li {
    margin: 0.5rem 0 !important;
    display: list-item !important;
}

/* Untuk dark mode */
.dark .prose ul,
.dark .prose ol {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
}

.dark .prose ol {
    list-style-type: decimal !important;
}

/* Custom scrollbar - simplified */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral) transparent;
}

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

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

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral);
    border-radius: 9999px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease;
}

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

/* =============================================================================
   OPTIMIZED ANIMATION CLASSES - FIXED BLUR ISSUES
   ============================================================================= */

/* Remove excessive will-change and translateZ from animations */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-down { 
    animation: fadeInDown 0.6s ease-out forwards;
}

.animate-fade-in-left { 
    animation: fadeInLeft 0.7s ease-out forwards;
}

.animate-fade-in-right { 
    animation: fadeInRight 0.7s ease-out forwards;
}

.form-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

/* Only apply GPU acceleration to complex animations */
.animated-gradient {
    background-size: 200% 200%;
    animation: gradient-animation 10s ease infinite;
    will-change: background-position;
}

.animate-gradient-flow {
    animation: gradient-flow 3s ease infinite;
}

.cta-breathe {
    animation: breathe 4s ease-in-out infinite;
}

.particle {
    animation: float-particle 8s ease-in-out infinite;
    will-change: transform, opacity;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Animation delays - removed translateZ(0) */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }

.animate-fade-in-up-delay-1 { animation-delay: 0.2s; }
.animate-fade-in-up-delay-2 { animation-delay: 0.4s; }
.animate-fade-in-up-delay-3 { animation-delay: 0.6s; }
.animate-fade-in-up-delay-4 { animation-delay: 0.8s; }

/* =============================================================================
   KEYFRAME ANIMATIONS - SIMPLIFIED
   ============================================================================= */

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

@keyframes fadeInDown {
    from { 
        opacity: 0; 
        transform: translateY(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes fadeInLeft {
    from { 
        opacity: 0; 
        transform: translateX(-20px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

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

@keyframes fade-in {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes gradient-text {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes float-particle {
    0%, 100% { 
        transform: translateY(0) scale(1); 
        opacity: 0.3;
    }
    25% { 
        transform: translateY(-20px) scale(1.2); 
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-10px) scale(0.8); 
        opacity: 0.5;
    }
    75% { 
        transform: translateY(-30px) scale(1.1); 
        opacity: 0.8;
    }
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

@keyframes blob {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

/* =============================================================================
   COMPONENT STYLES - FIXED BLUR & PERFORMANCE
   ============================================================================= */

/* Hero title - removed excessive GPU layers */
.hero-title {
    background: linear-gradient(45deg, hsl(var(--color-primary)), hsl(var(--color-secondary)), hsl(var(--color-primary)));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-text 3s ease-in-out infinite;
}

/* Magnetic effect - simplified */
[data-magnetic] {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Navigation link styles */
x-navigation-link svg {
    vertical-align: middle;
}

/* =============================================================================
   FORM STYLES - SIMPLIFIED
   ============================================================================= */

.form-input-container {
    position: relative;
}

.form-input {
    border: none;
    border-bottom: 2px solid #404040;
    outline: none;
    background: transparent;
    transition: border-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 100%;
    padding: 10px 0;
}

.form-input-label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #a3a3a3;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.form-input:focus + .form-input-label,
.form-input:not(:placeholder-shown) + .form-input-label {
    transform: translateY(-22px);
    font-size: 12px;
    color: hsl(var(--color-background));
}

.form-input:focus {
    border-bottom-color: hsl(var(--color-background));
}

.form-radio:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-radio:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

/* =============================================================================
   HOVER EFFECTS - OPTIMIZED FOR RESPONSIVENESS
   ============================================================================= */

/* Category cards - improved hover without blur */
.category-card {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.category-card:hover {
    transform: translateY(-2px);
}

.category-card:hover .category-icon svg {
    filter: drop-shadow(0 0 10px hsl(var(--color-primary)));
}

.category-card:hover .category-icon {
    transform: scale(1.1) rotate(15deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-card img {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.category-card:hover img {
    transform: scale(1.05);
}

.feature-card {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.feature-card:hover {
    background: linear-gradient(135deg, hsl(var(--color-background-secondary))/50, hsl(var(--color-primary))/5);
    transform: translateY(-2px);
}

/* Group hover effects - simplified */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.group\/btn:hover .group-hover\/btn\:translate-x-1 {
    transform: translateX(0.25rem);
    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.group\/btn:hover .group-hover\/btn\:scale-110 {
    transform: scale(1.1);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.group\/nav:hover .group-hover\/nav\:translate-x-1 {
    transform: translateX(0.25rem);
    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.group\/radio:hover .group-hover\/radio\:translate-x-1 {
    transform: translateX(0.25rem);
    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.group\/radio:hover .group-hover\/radio\:opacity-100 {
    opacity: 1;
    transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* =============================================================================
   BUTTON IMPROVEMENTS - BETTER CLICK HANDLING
   ============================================================================= */

.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-primary:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading state for buttons */
.btn-loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   RESPONSIVE FIXES
   ============================================================================= */

/* Better mobile touch targets */
@media (max-width: 768px) {
    .btn-primary,
    .category-card,
    .feature-card {
        min-height: 44px; /* Better touch target */
    }
    
    /* Reduce complex animations on mobile */
    .particle {
        display: none;
    }
    
    .animated-gradient {
        animation-duration: 15s;
    }
    
    /* Prevent hover states on touch devices */
    .category-card:hover,
    .feature-card:hover {
        transform: none;
    }
}

/* Better desktop interactions */
@media (min-width: 769px) {
    /* Enable smooth hover only on devices that support it */
    @media (hover: hover) {
        .category-card:hover {
            transform: translateY(-4px);
        }
        
        .feature-card:hover {
            transform: translateY(-2px);
        }
    }
}

/* Reduce 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;
        scroll-behavior: auto !important;
    }
    
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }
    
    .particle {
        display: none;
    }
}

/* =============================================================================
   LOADING STATES & SKELETON
   ============================================================================= */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* =============================================================================
   BUTTON LOADING SPINNER
   ============================================================================= */

.loader {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    border: 2px solid currentColor;
    animation:
        loader-clip 0.8s infinite linear alternate,
        loader-rotate 1.6s infinite linear;
}

.loader-sm {
    width: 0.875em;
    height: 0.875em;
}

.loader-lg {
    width: 1.25em;
    height: 1.25em;
    border-width: 3px;
}

@keyframes loader-clip {
    0%    { clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%); }
    12.5% { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%); }
    25%   { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%); }
    50%   { clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); }
    62.5% { clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%); }
    75%   { clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%); }
    100%  { clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%); }
}

@keyframes loader-rotate {
    0%     { transform: scaleY(1) rotate(0deg); }
    49.99% { transform: scaleY(1) rotate(135deg); }
    50%    { transform: scaleY(-1) rotate(0deg); }
    100%   { transform: scaleY(-1) rotate(-135deg); }
}

/* =============================================================================
   CRITICAL PERFORMANCE FIXES
   ============================================================================= */

/* Remove excessive containment and layers */
.category-card, 
.feature-card {
    /* Only add containment where truly needed */
    contain: layout;
}

/* Optimize text rendering */
.hero-title,
h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize images */
img {
    image-rendering: auto;
    -webkit-user-drag: none;
    user-select: none;
}

/* Better scroll performance */
.custom-scrollbar {
    -webkit-overflow-scrolling: touch;
}

/* =============================================================================
   EASYMDE STYLES
   ============================================================================= */

@import './easymde.css';

/* =============================================================================
   ADMINLTE-STYLE CSS FRAMEWORK
   Based on AdminLTE v4 (Bootstrap 5) styling patterns
   https://github.com/ColorlibHQ/AdminLTE
   ============================================================================= */

/* AdminLTE CSS Variables */
:root {
    /* AdminLTE Color Palette */
    --lte-primary: #0d6efd;
    --lte-primary-rgb: 13, 110, 253;
    --lte-secondary: #6c757d;
    --lte-secondary-rgb: 108, 117, 125;
    --lte-success: #198754;
    --lte-success-rgb: 25, 135, 84;
    --lte-info: #0dcaf0;
    --lte-info-rgb: 13, 202, 240;
    --lte-warning: #ffc107;
    --lte-warning-rgb: 255, 193, 7;
    --lte-danger: #dc3545;
    --lte-danger-rgb: 220, 53, 69;
    --lte-light: #f8f9fa;
    --lte-light-rgb: 248, 249, 250;
    --lte-dark: #212529;
    --lte-dark-rgb: 33, 37, 41;
    
    /* AdminLTE Card Shadow */
    --lte-card-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
    --lte-card-shadow-hover: 0 0 2px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.15);
    
    /* AdminLTE Transitions */
    --lte-transition-speed: 0.3s;
    --lte-transition-fn: ease-in-out;
    
    /* AdminLTE Body Colors */
    --lte-body-bg: #f4f6f9;
    --lte-body-color: #212529;
    --lte-border-color: #dee2e6;
    
    /* AdminLTE Card */
    --lte-card-bg: #ffffff;
    --lte-card-border-radius: 0.25rem;
    --lte-card-border-color: rgba(0, 0, 0, 0.125);
    
    /* AdminLTE Input */
    --lte-input-border-color: #ced4da;
    --lte-input-focus-border-color: #86b7fe;
    --lte-input-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Dark mode variables */
.dark, [data-theme="dark"] {
    --lte-body-bg: #343a40;
    --lte-body-color: #e9ecef;
    --lte-border-color: #495057;
    --lte-card-bg: #3c4248;
    --lte-card-border-color: rgba(255, 255, 255, 0.075);
    --lte-input-border-color: #495057;
    --lte-card-shadow: 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* AdminLTE Card Component */
.lte-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--lte-card-bg);
    background-clip: border-box;
    border: 1px solid var(--lte-card-border-color);
    border-radius: var(--lte-card-border-radius);
    box-shadow: var(--lte-card-shadow);
    margin-bottom: 1rem;
    transition: box-shadow var(--lte-transition-speed) var(--lte-transition-fn);
}

.lte-card:hover {
    box-shadow: var(--lte-card-shadow-hover);
}

.lte-card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid var(--lte-card-border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lte-card-header .lte-card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lte-card-header .lte-card-title i,
.lte-card-header .lte-card-title svg {
    font-size: 1.25rem;
}

.lte-card-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lte-card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
}

.lte-card-footer {
    padding: 0.75rem 1.25rem;
    background-color: transparent;
    border-top: 1px solid var(--lte-card-border-color);
}

/* Card Variants */
.lte-card-primary {
    border-top: 3px solid var(--lte-primary);
}

.lte-card-success {
    border-top: 3px solid var(--lte-success);
}

.lte-card-warning {
    border-top: 3px solid var(--lte-warning);
}

.lte-card-danger {
    border-top: 3px solid var(--lte-danger);
}

.lte-card-info {
    border-top: 3px solid var(--lte-info);
}

/* Card Outline Variants */
.lte-card-outline-primary {
    border: 1px solid var(--lte-primary);
    border-top-width: 3px;
}

.lte-card-outline-success {
    border: 1px solid var(--lte-success);
    border-top-width: 3px;
}

.lte-card-outline-warning {
    border: 1px solid var(--lte-warning);
    border-top-width: 3px;
}

.lte-card-outline-danger {
    border: 1px solid var(--lte-danger);
    border-top-width: 3px;
}

/* AdminLTE Buttons */
.lte-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
                border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.lte-btn:focus, .lte-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--lte-primary-rgb), 0.25);
}

.lte-btn:disabled, .lte-btn.disabled {
    opacity: 0.65;
    pointer-events: none;
}

.lte-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

.lte-btn-lg {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

.lte-btn-primary {
    color: #fff;
    background-color: var(--lte-primary);
    border-color: var(--lte-primary);
}

.lte-btn-primary:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.lte-btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--lte-primary-rgb), 0.5);
}

.lte-btn-secondary {
    color: #fff;
    background-color: var(--lte-secondary);
    border-color: var(--lte-secondary);
}

.lte-btn-secondary:hover {
    color: #fff;
    background-color: #5c636a;
    border-color: #565e64;
}

.lte-btn-success {
    color: #fff;
    background-color: var(--lte-success);
    border-color: var(--lte-success);
}

.lte-btn-success:hover {
    color: #fff;
    background-color: #157347;
    border-color: #146c43;
}

.lte-btn-danger {
    color: #fff;
    background-color: var(--lte-danger);
    border-color: var(--lte-danger);
}

.lte-btn-danger:hover {
    color: #fff;
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.lte-btn-warning {
    color: #000;
    background-color: var(--lte-warning);
    border-color: var(--lte-warning);
}

.lte-btn-warning:hover {
    color: #000;
    background-color: #ffca2c;
    border-color: #ffc720;
}

.lte-btn-info {
    color: #000;
    background-color: var(--lte-info);
    border-color: var(--lte-info);
}

.lte-btn-info:hover {
    color: #000;
    background-color: #31d2f2;
    border-color: #25cff2;
}

/* Outline Buttons */
.lte-btn-outline-primary {
    color: var(--lte-primary);
    border-color: var(--lte-primary);
}

.lte-btn-outline-primary:hover {
    color: #fff;
    background-color: var(--lte-primary);
}

.lte-btn-outline-secondary {
    color: var(--lte-secondary);
    border-color: var(--lte-secondary);
}

.lte-btn-outline-secondary:hover {
    color: #fff;
    background-color: var(--lte-secondary);
}

.lte-btn-outline-success {
    color: var(--lte-success);
    border-color: var(--lte-success);
}

.lte-btn-outline-success:hover {
    color: #fff;
    background-color: var(--lte-success);
}

.lte-btn-outline-danger {
    color: var(--lte-danger);
    border-color: var(--lte-danger);
}

.lte-btn-outline-danger:hover {
    color: #fff;
    background-color: var(--lte-danger);
}

/* App Button (AdminLTE specific) */
.lte-btn-app {
    position: relative;
    padding: 15px 5px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    height: 70px;
    text-align: center;
    color: var(--lte-secondary);
    border: 1px solid var(--lte-border-color);
    background-color: var(--lte-light);
    font-size: 12px;
    border-radius: 0.25rem;
}

.lte-btn-app > .lte-icon,
.lte-btn-app > svg {
    font-size: 20px;
    display: block;
}

.lte-btn-app:hover {
    background: var(--lte-primary);
    color: #fff;
    border-color: var(--lte-primary);
}

/* AdminLTE Form Controls */
.lte-form-control {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--lte-body-color);
    background-color: var(--lte-card-bg);
    background-clip: padding-box;
    border: 1px solid var(--lte-input-border-color);
    appearance: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.lte-form-control:focus {
    color: var(--lte-body-color);
    background-color: var(--lte-card-bg);
    border-color: var(--lte-input-focus-border-color);
    outline: 0;
    box-shadow: var(--lte-input-focus-shadow);
}

.lte-form-control::placeholder {
    color: var(--lte-secondary);
    opacity: 1;
}

.lte-form-control:disabled {
    background-color: var(--lte-light);
    opacity: 1;
}

.lte-form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

.lte-form-control-lg {
    min-height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
}

/* AdminLTE Form Select */
.lte-form-select {
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--lte-body-color);
    background-color: var(--lte-card-bg);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: 1px solid var(--lte-input-border-color);
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

.lte-form-select:focus {
    border-color: var(--lte-input-focus-border-color);
    outline: 0;
    box-shadow: var(--lte-input-focus-shadow);
}

/* AdminLTE Input Group */
.lte-input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.lte-input-group > .lte-form-control,
.lte-input-group > .lte-form-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.lte-input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--lte-body-color);
    text-align: center;
    white-space: nowrap;
    background-color: var(--lte-light);
    border: 1px solid var(--lte-input-border-color);
    border-radius: 0.25rem;
}

/* AdminLTE Badges */
.lte-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.lte-badge-primary { background-color: var(--lte-primary); }
.lte-badge-secondary { background-color: var(--lte-secondary); }
.lte-badge-success { background-color: var(--lte-success); }
.lte-badge-danger { background-color: var(--lte-danger); }
.lte-badge-warning { background-color: var(--lte-warning); color: #000; }
.lte-badge-info { background-color: var(--lte-info); color: #000; }
.lte-badge-light { background-color: var(--lte-light); color: #000; }
.lte-badge-dark { background-color: var(--lte-dark); }

/* AdminLTE Alerts */
.lte-alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.lte-alert-primary {
    color: #084298;
    background-color: #cfe2ff;
    border-color: #b6d4fe;
}

.lte-alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.lte-alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.lte-alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.lte-alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

.lte-alert-dismissible {
    padding-right: 3rem;
}

.lte-alert-dismissible .lte-btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 1.25rem 1rem;
}

/* AdminLTE Callout (AdminLTE specific) */
.lte-callout {
    padding: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--lte-border-color);
    border-left-width: 5px;
    border-radius: 0.25rem;
    background-color: var(--lte-card-bg);
}

.lte-callout-primary { border-left-color: var(--lte-primary); }
.lte-callout-success { border-left-color: var(--lte-success); }
.lte-callout-warning { border-left-color: var(--lte-warning); }
.lte-callout-danger { border-left-color: var(--lte-danger); }
.lte-callout-info { border-left-color: var(--lte-info); }

.lte-callout h5 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.lte-callout p:last-child {
    margin-bottom: 0;
}

/* AdminLTE Progress Bars */
.lte-progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: 0.75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.lte-progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: var(--lte-primary);
    transition: width 0.6s ease;
}

.lte-progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.lte-progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}

@keyframes progress-bar-stripes {
    0% { background-position-x: 1rem; }
}

.lte-progress-sm {
    height: 0.5rem;
}

.lte-progress-xs {
    height: 0.25rem;
}

/* AdminLTE Tables */
.lte-table {
    width: 100%;
    margin-bottom: 1rem;
    color: var(--lte-body-color);
    vertical-align: top;
    border-color: var(--lte-border-color);
}

.lte-table > :not(caption) > * > * {
    padding: 0.5rem 0.5rem;
    background-color: transparent;
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px transparent;
}

.lte-table > tbody {
    vertical-align: inherit;
}

.lte-table > thead {
    vertical-align: bottom;
}

.lte-table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.05);
}

.lte-table-hover > tbody > tr:hover > * {
    background-color: rgba(0, 0, 0, 0.075);
}

.lte-table-bordered > :not(caption) > * {
    border-width: 1px 0;
}

.lte-table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
}

/* AdminLTE Small Box (Widget) */
.lte-small-box {
    border-radius: 0.25rem;
    box-shadow: var(--lte-card-shadow);
    display: block;
    margin-bottom: 20px;
    position: relative;
}

.lte-small-box > .lte-inner {
    padding: 10px;
}

.lte-small-box > .lte-inner > h3 {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}

.lte-small-box > .lte-inner > p {
    font-size: 1rem;
    margin-bottom: 0;
}

.lte-small-box > .lte-icon {
    color: rgba(0, 0, 0, 0.15);
    z-index: 0;
}

.lte-small-box > .lte-icon > svg {
    font-size: 90px;
    position: absolute;
    right: 15px;
    top: 15px;
    transition: transform var(--lte-transition-speed) var(--lte-transition-fn);
}

.lte-small-box:hover > .lte-icon > svg {
    transform: scale(1.1);
}

.lte-small-box > .lte-small-box-footer {
    background-color: rgba(0, 0, 0, 0.1);
    color: rgba(255, 255, 255, 0.8);
    display: block;
    padding: 3px 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    z-index: 10;
}

.lte-small-box > .lte-small-box-footer:hover {
    background-color: rgba(0, 0, 0, 0.15);
    color: #fff;
}

/* Small Box Color Variants */
.lte-small-box.bg-primary { background-color: var(--lte-primary) !important; color: #fff; }
.lte-small-box.bg-success { background-color: var(--lte-success) !important; color: #fff; }
.lte-small-box.bg-warning { background-color: var(--lte-warning) !important; color: #000; }
.lte-small-box.bg-danger { background-color: var(--lte-danger) !important; color: #fff; }
.lte-small-box.bg-info { background-color: var(--lte-info) !important; color: #000; }

/* AdminLTE Info Box */
.lte-info-box {
    box-shadow: var(--lte-card-shadow);
    border-radius: 0.25rem;
    background-color: var(--lte-card-bg);
    display: flex;
    margin-bottom: 1rem;
    min-height: 80px;
    padding: 0.5rem;
    position: relative;
    width: 100%;
}

.lte-info-box .lte-info-box-icon {
    border-radius: 0.25rem;
    align-items: center;
    display: flex;
    font-size: 1.875rem;
    justify-content: center;
    text-align: center;
    width: 70px;
}

.lte-info-box .lte-info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.8;
    flex: 1;
    padding: 0 10px;
}

.lte-info-box .lte-info-box-text,
.lte-info-box .lte-progress-description {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lte-info-box .lte-info-box-number {
    display: block;
    font-weight: 700;
    font-size: 1.5rem;
}

/* AdminLTE Modal Overlay */
.lte-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    transition: opacity 0.15s linear;
}

.lte-modal {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.lte-modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

@media (min-width: 576px) {
    .lte-modal-dialog {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}

.lte-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--lte-card-bg);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
}

.lte-modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--lte-border-color);
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

.lte-modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-weight: 500;
    font-size: 1.25rem;
}

.lte-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.lte-modal-footer {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid var(--lte-border-color);
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
    gap: 0.5rem;
}

/* AdminLTE Nav Tabs */
.lte-nav-tabs {
    border-bottom: 1px solid var(--lte-border-color);
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.lte-nav-tabs .lte-nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--lte-body-color);
    text-decoration: none;
    border: 1px solid transparent;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    margin-bottom: -1px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.lte-nav-tabs .lte-nav-link:hover,
.lte-nav-tabs .lte-nav-link:focus {
    border-color: #e9ecef #e9ecef var(--lte-border-color);
    isolation: isolate;
}

.lte-nav-tabs .lte-nav-link.active {
    color: var(--lte-primary);
    background-color: var(--lte-card-bg);
    border-color: var(--lte-border-color) var(--lte-border-color) var(--lte-card-bg);
}

/* AdminLTE Dropdown */
.lte-dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0;
    font-size: 1rem;
    color: var(--lte-body-color);
    text-align: left;
    list-style: none;
    background-color: var(--lte-card-bg);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
}

.lte-dropdown-menu.show {
    display: block;
}

.lte-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    clear: both;
    font-weight: 400;
    color: var(--lte-body-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.lte-dropdown-item:hover,
.lte-dropdown-item:focus {
    color: #1e2125;
    background-color: #e9ecef;
}

.lte-dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

/* AdminLTE Spinner */
.lte-spinner {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

.lte-spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@keyframes spinner-border {
    to { transform: rotate(360deg); }
}

/* AdminLTE Tooltip */
.lte-tooltip {
    position: absolute;
    z-index: 1080;
    display: block;
    margin: 0;
    font-family: inherit;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 0.875rem;
    word-wrap: break-word;
    opacity: 0;
}

.lte-tooltip.show {
    opacity: 0.9;
}

.lte-tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 0.25rem;
}

/* AdminLTE Utilities */
.lte-text-primary { color: var(--lte-primary) !important; }
.lte-text-secondary { color: var(--lte-secondary) !important; }
.lte-text-success { color: var(--lte-success) !important; }
.lte-text-danger { color: var(--lte-danger) !important; }
.lte-text-warning { color: var(--lte-warning) !important; }
.lte-text-info { color: var(--lte-info) !important; }
.lte-text-muted { color: var(--lte-secondary) !important; }

.lte-bg-primary { background-color: var(--lte-primary) !important; }
.lte-bg-secondary { background-color: var(--lte-secondary) !important; }
.lte-bg-success { background-color: var(--lte-success) !important; }
.lte-bg-danger { background-color: var(--lte-danger) !important; }
.lte-bg-warning { background-color: var(--lte-warning) !important; }
.lte-bg-info { background-color: var(--lte-info) !important; }
.lte-bg-light { background-color: var(--lte-light) !important; }
.lte-bg-dark { background-color: var(--lte-dark) !important; }

/* Gradient backgrounds */
.lte-bg-gradient-primary {
    background: linear-gradient(180deg, #4a8eff 0%, var(--lte-primary) 100%) !important;
}

.lte-bg-gradient-success {
    background: linear-gradient(180deg, #28a96c 0%, var(--lte-success) 100%) !important;
}

.lte-bg-gradient-danger {
    background: linear-gradient(180deg, #e85d6c 0%, var(--lte-danger) 100%) !important;
}

.lte-bg-gradient-warning {
    background: linear-gradient(180deg, #ffd966 0%, var(--lte-warning) 100%) !important;
}

.lte-bg-gradient-info {
    background: linear-gradient(180deg, #4ce9ff 0%, var(--lte-info) 100%) !important;
}

/* AdminLTE Transitions & Animations */
.lte-fade-in {
    animation: lte-fade-in 0.3s ease-out;
}

.lte-slide-in-up {
    animation: lte-slide-in-up 0.3s ease-out;
}

.lte-slide-in-down {
    animation: lte-slide-in-down 0.3s ease-out;
}

@keyframes lte-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lte-slide-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lte-slide-in-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* AdminLTE Elevations/Shadows */
.lte-elevation-0 { box-shadow: none !important; }
.lte-elevation-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important; }
.lte-elevation-2 { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12) !important; }
.lte-elevation-3 { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.10) !important; }
.lte-elevation-4 { box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15), 0 5px 10px rgba(0, 0, 0, 0.05) !important; }

/* Direct Chat (AdminLTE specific) */
.lte-direct-chat-messages {
    overflow-y: auto;
    padding: 10px;
    height: 250px;
}

.lte-direct-chat-msg {
    display: flex;
    margin-bottom: 10px;
}

.lte-direct-chat-text {
    border-radius: 5px;
    padding: 5px 10px;
    position: relative;
    background: var(--lte-light);
    border: 1px solid var(--lte-border-color);
    color: var(--lte-body-color);
}

.lte-direct-chat-primary .lte-direct-chat-text {
    background: var(--lte-primary);
    border-color: var(--lte-primary);
    color: #fff;
}

/* AdminLTE Timeline */
.lte-timeline {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lte-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--lte-border-color);
    left: 31px;
    margin: 0;
    border-radius: 2px;
}

.lte-timeline > li {
    position: relative;
    margin-right: 10px;
    margin-bottom: 15px;
}

.lte-timeline > li > .lte-timeline-item {
    margin-left: 60px;
    margin-right: 15px;
    margin-top: 0;
    background: var(--lte-card-bg);
    border: 1px solid var(--lte-border-color);
    border-radius: 3px;
    padding: 0;
    box-shadow: var(--lte-card-shadow);
}

.lte-timeline > li > .lte-fa,
.lte-timeline > li > svg {
    width: 30px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
    position: absolute;
    color: #666;
    background: var(--lte-border-color);
    border-radius: 50%;
    text-align: center;
    left: 18px;
    top: 0;
}

/* AdminLTE Close Button */
.lte-btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
    cursor: pointer;
}

.lte-btn-close:hover {
    color: #000;
    text-decoration: none;
    opacity: 0.75;
}

.lte-btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(var(--lte-primary-rgb), 0.25);
    opacity: 1;
}

/* Dark mode close button */
.dark .lte-btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}