/* ========================================================
   1. CLEAR & VISIBLE SCROLLBAR (S)
   ======================================================== */
::-webkit-scrollbar {
    width: 12px;
}

/* Light Mode Scrollbar Track */
::-webkit-scrollbar-track {
    background: #cbd5e1; /* Clear Light Grey Track */
}

/* Dark Mode Scrollbar Track */
.dark ::-webkit-scrollbar-track {
    background: #020617; /* Dark Slate Track */
}

/* Scrollbar Button (Thumb) - Vibrant Cyan Color */
::-webkit-scrollbar-thumb {
    background: #06b6d4; /* Bright Cyan Bar */
    border-radius: 6px;
    border: 2px solid transparent;
}

::-webkit-scrollbar-thumb:hover {
    background: #0891b2;
}


/* ========================================================
   2. TOOL PAGE THEME MATCHING (Light & Dark Theme Fix)
   ======================================================== */

/* Light Mode: Tool ke andar wale Cards aur Inputs Light hongay */
.tool-container, 
.tool-box,
.input-card {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

.tool-input-field {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* Dark Mode: Jab Dark mode ON ho to hi dark slate hongay */
.dark .tool-container, 
.dark .tool-box,
.dark .input-card {
    background-color: #0f172a !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
}

.dark .tool-input-field {
    background-color: #020617 !important;
    border: 1px solid #1e293b !important;
    color: #f8fafc !important;
}