/**
 * Med-Calculator - Hlavní CSS stylopis
 */

/* Zajištění hladkého posouvání a fontů */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Lékařský gradient a vizuální akcenty */
.bg-medical-gradient {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
}

.dark .bg-medical-gradient {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
}

/* Stylizace posuvníků (range inputs) pro snadné ovládání na mobilech */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
    background: #e2e8f0;
    height: 0.5rem;
    border-radius: 0.25rem;
}

.dark input[type="range"]::-webkit-slider-runnable-track {
    background: #334155;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -0.375rem;
    background-color: #0284c7;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease-in-out;
}

.dark input[type="range"]::-webkit-slider-thumb {
    background-color: #38bdf8;
    border-color: #0f172a;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

/* Stupnice výsledků (Gauge gradient) */
.scale-gradient {
    background: linear-gradient(to right, #38bdf8 0%, #10b981 30%, #eab308 60%, #f97316 80%, #ef4444 100%);
}

/* Indikátor polohy na stupnici */
.gauge-pointer {
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Karty s jemným přechodem při hoveru */
.calc-card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.calc-card-hover:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(2, 132, 199, 0.1), 0 8px 10px -6px rgba(2, 132, 199, 0.1);
}

.dark .calc-card-hover:hover {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
}