/* ============================================
   PalletOS Custom Styles
   Global styles for dashboard and website
   ============================================ */

/* ============================================
   SCROLLBAR STYLES
   ============================================ */

/* Body/Page Scrollbar (Dark theme with gray thumb) */
html,
body {
    --sb-track-color: #232E33;
    --sb-thumb-color: #808080;
    --sb-size: 16px;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: var(--sb-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
    transition: background 0.2s ease;
}

html::-webkit-scrollbar-track:hover,
body::-webkit-scrollbar-track:hover {
    background: #2a3540;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
    transition: background 0.2s ease;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button {
    display: block;
    height: 20px;
    background: var(--sb-track-color);
}

/* Up arrow - at TOP */
html::-webkit-scrollbar-button:vertical:decrement,
body::-webkit-scrollbar-button:vertical:decrement {
    background: var(--sb-track-color);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23808080" d="M8 5l5 6H3z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.2s ease;
}

html::-webkit-scrollbar-button:vertical:decrement:hover,
body::-webkit-scrollbar-button:vertical:decrement:hover {
    background-color: #3a4550;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23aaaaaa" d="M8 5l5 6H3z"/></svg>');
}

/* Down arrow - at BOTTOM */
html::-webkit-scrollbar-button:vertical:increment,
body::-webkit-scrollbar-button:vertical:increment {
    background: var(--sb-track-color);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23808080" d="M8 11l5-6H3z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.2s ease;
}

html::-webkit-scrollbar-button:vertical:increment:hover,
body::-webkit-scrollbar-button:vertical:increment:hover {
    background-color: #3a4550;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23aaaaaa" d="M8 11l5-6H3z"/></svg>');
}

/* Hide duplicate buttons */
html::-webkit-scrollbar-button:vertical:start:increment,
body::-webkit-scrollbar-button:vertical:start:increment {
    display: none;
}

html::-webkit-scrollbar-button:vertical:end:decrement,
body::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

/* Firefox Body Scrollbar */
@supports not selector(::-webkit-scrollbar) {
    html,
    body {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

/* Dashboard Scrollbar (Matches body scrollbar exactly) */
.dashboard-scrollbar {
    --sb-track-color: #232E33;
    --sb-thumb-color: #808080;
    --sb-size: 16px;
}

.dashboard-scrollbar::-webkit-scrollbar {
    width: var(--sb-size);
}

.dashboard-scrollbar::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.dashboard-scrollbar::-webkit-scrollbar-track:hover {
    background: #2a3540;
}

.dashboard-scrollbar::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.dashboard-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

.dashboard-scrollbar::-webkit-scrollbar-button {
    display: block;
    height: 20px;
    background: var(--sb-track-color);
}

/* Up arrow - at TOP */
.dashboard-scrollbar::-webkit-scrollbar-button:vertical:decrement {
    background: var(--sb-track-color);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23808080" d="M8 5l5 6H3z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.2s ease;
}

.dashboard-scrollbar::-webkit-scrollbar-button:vertical:decrement:hover {
    background-color: #3a4550;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23aaaaaa" d="M8 5l5 6H3z"/></svg>');
}

/* Down arrow - at BOTTOM */
.dashboard-scrollbar::-webkit-scrollbar-button:vertical:increment {
    background: var(--sb-track-color);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23808080" d="M8 11l5-6H3z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    transition: background-color 0.2s ease;
}

.dashboard-scrollbar::-webkit-scrollbar-button:vertical:increment:hover {
    background-color: #3a4550;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="%23aaaaaa" d="M8 11l5-6H3z"/></svg>');
}

/* Hide duplicate buttons */
.dashboard-scrollbar::-webkit-scrollbar-button:vertical:start:increment {
    display: none;
}

.dashboard-scrollbar::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
}

/* Firefox Scrollbar - Dashboard */
@supports not selector(::-webkit-scrollbar) {
    .dashboard-scrollbar {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Smooth transitions for theme switching */
.theme-transition {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Custom focus rings */
.focus-sage:focus {
    outline: 2px solid #6B8E23;
    outline-offset: 2px;
}

/* ============================================
   ELEVATED CARD DESIGN
   Use tactfully for modals, cards, and key UI elements
   ============================================ */

/* Elevated Card - Clean modern look with subtle depth */
.elevated-card {
    border-radius: 16px;
    box-shadow: 
        0 10px 25px -5px rgba(0, 0, 0, 0.1),
        0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dark .elevated-card {
    box-shadow: 
        0 10px 25px -5px rgba(0, 0, 0, 0.4),
        0 8px 10px -6px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Elevated Card Hover State */
.elevated-card:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 20px 35px -5px rgba(0, 0, 0, 0.15),
        0 12px 15px -6px rgba(0, 0, 0, 0.15);
}

.dark .elevated-card:hover {
    box-shadow: 
        0 20px 35px -5px rgba(0, 0, 0, 0.5),
        0 12px 15px -6px rgba(0, 0, 0, 0.4);
}

/* Hide scrollbar for horizontal scroll */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* Subtle Elevation - For smaller elements */
.elevated-subtle {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.dark .elevated-subtle {
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.3),
        0 2px 4px -2px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Pressed/Inset Effect - For active buttons */
.elevated-pressed {
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(1px);
}

.dark .elevated-pressed {
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ============================================
   CUSTOM ANIMATIONS
   ============================================ */

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

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    /* Hide scrollbars when printing */
    ::-webkit-scrollbar {
        display: none;
    }
    
    /* Ensure good contrast for printing */
    body {
        background: white !important;
        color: black !important;
    }
}