/* ============================================================
   static/css/custom.css — Indexapay Web
   Estilos complementares ao Tailwind CSS
============================================================ */

/* --- Scrollbar customizada (apenas browsers Webkit/Blink) --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #161b22; /* dark-800 */
}
::-webkit-scrollbar-thumb {
    background: #30363d; /* dark-500 */
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #17b19b; /* brand-500 */
}

/* --- Transição suave nos inputs ao receber foco --- */
input, select, textarea {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --- Seleção de texto na cor da marca --- */
::selection {
    background-color: rgba(23, 177, 155, 0.3);
    color: white;
}

/* --- Remove as setas de incremento dos inputs number no Chrome --- */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* --- Animação de shimmer para skeleton loading (uso futuro) --- */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #1c2333 25%, #21262d 50%, #1c2333 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* --- Toast de notificação (uso futuro) --- */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    animation: slideUp 0.4s ease-out;
}