/* ============================================================================
   TyreKhata - tyre-shop theme
   Loaded AFTER site.css, so it only overrides. Remove the link in Site.Master / Login.aspx to revert.
   Palette: asphalt (near-black), road yellow (the "warning line" on a tyre shop floor), rubber grey.
   ============================================================================ */

:root {
    --sidebar-bg: #14171b;
    --sidebar-text: #c7ced6;
    --sidebar-active: #ffc20e;

    --boutique-blush: #fff6d6;
    --boutique-blush-deep: #f5c94d;
    --boutique-gold: #ffc20e;
    --boutique-gold-dark: #d99a00;
    --boutique-cream: #fffdf6;
    --boutique-charcoal: #22272e;
    --boutique-muted: #6b7380;

    --tyre-asphalt: #14171b;
    --tyre-rubber: #22272e;
    --tyre-yellow: #ffc20e;
    --tyre-yellow-deep: #e0a100;
    --tyre-steel: #5b6470;
}

body {
    background-color: #eef1f4;
}

/* ---------------- Page entrance (opacity only: a transform here would trap fixed modals) ---------------- */
@keyframes tyre-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.main-content > * {
    animation: tyre-fade .45s ease-out both;
}
.main-content > *:nth-child(2) { animation-delay: .05s; }
.main-content > *:nth-child(3) { animation-delay: .10s; }
.main-content > *:nth-child(4) { animation-delay: .15s; }
.main-content > *:nth-child(n+5) { animation-delay: .20s; }

/* ---------------- Top bar: a tread stripe along the bottom edge ---------------- */
.topbar {
    position: sticky;
    background: #ffffff;
    border-bottom: 0;
    box-shadow: 0 2px 10px rgba(20, 23, 27, .08);
}
.topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: repeating-linear-gradient(90deg, var(--tyre-yellow) 0 18px, var(--tyre-asphalt) 18px 24px);
}

/* ---------------- Sidebar: asphalt with a tread-patterned brand block ---------------- */
.sidebar {
    background: linear-gradient(180deg, #1b1f25 0%, #14171b 100%);
}
.sidebar-brand {
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px),
        #14171b;
    border-bottom: 3px solid var(--tyre-yellow);
}
.sidebar-brand-text {
    letter-spacing: .04em;
}
.sidebar-menu a {
    transition: background .2s ease, padding-left .2s ease, color .2s ease;
}
.sidebar-menu a:hover {
    padding-left: 1.35rem;
}
/* Yellow active item needs dark text to stay readable */
.sidebar-menu a.active {
    color: var(--tyre-asphalt);
    font-weight: 600;
}

/* ---------------- Cards and KPI tiles ---------------- */
.card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(20, 23, 27, .06);
}
.kpi-card {
    border-radius: 16px;
    transition: transform .2s ease, box-shadow .2s ease;
    animation: tyre-fade .5s ease-out both;
}
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(20, 23, 27, .14);
}

/* ---------------- Buttons: yellow primary, tactile hover and press ---------------- */
.btn {
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease;
}
.btn:hover {
    transform: translateY(-1px);
}
.btn:active {
    transform: scale(.97);
}
.btn-primary {
    background: linear-gradient(135deg, #ffc820 0%, #f0a500 100%);
    border-color: transparent;
    color: var(--tyre-asphalt);
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 194, 14, .35);
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #ffd34d 0%, #ffb000 100%);
    color: var(--tyre-asphalt);
    box-shadow: 0 6px 16px rgba(255, 194, 14, .45);
}
.btn-primary:disabled {
    background: #d9dde2;
    color: #6b7380;
    box-shadow: none;
}
.btn-outline-secondary:hover {
    background: var(--tyre-rubber);
    border-color: var(--tyre-rubber);
    color: #ffffff;
}

/* ---------------- Form fields: yellow focus ring ---------------- */
.form-control:focus,
.form-select:focus {
    border-color: var(--tyre-yellow);
    box-shadow: 0 0 0 .2rem rgba(255, 194, 14, .28);
}
.form-check-input:checked {
    background-color: var(--tyre-asphalt);
    border-color: var(--tyre-asphalt);
}

/* ---------------- Tables: steel header, yellow row highlight ---------------- */
.table thead th {
    background: var(--tyre-rubber);
    color: #f4f6f8;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 0;
}
.table tbody tr {
    transition: background-color .2s ease, box-shadow .2s ease;
}
.table tbody tr:hover {
    background-color: #fff8dc;
    box-shadow: inset 4px 0 0 var(--tyre-yellow);
}

/* ---------------- Modals: rubber header with the yellow warning line ---------------- */
.modal-header {
    background: var(--tyre-rubber);
    color: #ffffff;
    border-bottom: 3px solid var(--tyre-yellow);
}
.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ---------------- Loaders: yellow wheel spinner ---------------- */
.spinner-border {
    color: var(--tyre-yellow);
    animation-duration: .7s;
}

/* ---------------- Login page: the side panel gets a tread pattern ---------------- */
.boutique-visual-panel {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 14px, transparent 14px 28px),
        linear-gradient(160deg, #22272e 0%, #14171b 100%) !important;
}

.boutique-login-panel {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 194, 14, .10) 0, transparent 45%),
        radial-gradient(circle at 88% 82%, rgba(20, 23, 27, .06) 0, transparent 50%),
        #fffdf6;
}
.boutique-login-panel::before {
    background-image: radial-gradient(rgba(20, 23, 27, .10) 1px, transparent 1px);
}

/* ---------------- Respect "reduce motion" ---------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}