:root {
    --jy-primary: #0d6efd;
    --jy-primary-dark: #0a58ca;
    --jy-accent: #12b886;
    --jy-bg: #f4f6f9;
    --jy-card-radius: 1rem;
    --jy-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--jy-bg);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    color: #1f2937;
    -webkit-tap-highlight-color: transparent;
}

/* Soft fade-in for the page content on every load - takes the edge off full
   server-rendered page reloads and gives a lighter, app-like feel. */
main {
    animation: jy-fade-in .28s var(--jy-ease) both;
}

@keyframes jy-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Smooth, consistent transitions on anything interactive */
a, button, .btn, .card, .card-soft, .stat-tile, .bottom-tab, .form-control,
.form-select, .nav-link, .accordion-button, .badge {
    transition: background-color .18s var(--jy-ease), border-color .18s var(--jy-ease),
        color .18s var(--jy-ease), box-shadow .18s var(--jy-ease),
        transform .18s var(--jy-ease), opacity .18s var(--jy-ease);
}

.btn:active, .bottom-tab:active {
    transform: scale(0.96);
}

a.text-decoration-none .card,
a.text-decoration-none:hover .card {
    transition: transform .2s var(--jy-ease), box-shadow .2s var(--jy-ease);
}

a.text-decoration-none:hover .card,
a.text-decoration-none:active .card {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}

.card-soft:hover {
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.1);
}

.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15);
    border-color: var(--jy-primary);
}

.bottom-tab i {
    transition: transform .18s var(--jy-ease), color .18s var(--jy-ease);
}

.bottom-tab.active i {
    transform: translateY(-2px) scale(1.08);
}

.accordion-button {
    transition: background-color .2s var(--jy-ease), box-shadow .2s var(--jy-ease);
}

.accordion-collapse {
    transition: height .25s var(--jy-ease);
}

.alert {
    animation: jy-fade-in .22s var(--jy-ease) both;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

.navbar-jy {
    background: linear-gradient(90deg, var(--jy-primary) 0%, var(--jy-primary-dark) 100%);
}

.navbar-jy .navbar-brand {
    font-weight: 600;
    letter-spacing: .3px;
    color: #fff;
}

.card-soft {
    border: none;
    border-radius: var(--jy-card-radius);
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
    background: #fff;
}

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top left, #e7f0ff, #f4f6f9 60%);
    padding: 1.5rem;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 10px 40px rgba(13, 110, 253, 0.12);
    backdrop-filter: blur(6px);
}

.auth-card .card-body {
    padding: 2.25rem;
}

.brand-mark {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--jy-primary), var(--jy-accent));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    margin: 0 auto 1rem;
}

.brand-mark-img {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    margin: 0 auto 1rem;
    display: block;
    box-shadow: 0 8px 24px rgba(13, 110, 253, .25);
}

.stat-tile {
    border-radius: var(--jy-card-radius);
    border: none;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
    padding: 1.1rem 1.25rem;
    background: #fff;
}

.stat-tile .stat-value {
    font-size: 1.6rem;
    font-weight: 700;
}

.stat-tile .stat-label {
    font-size: .8rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.btn-primary {
    background: var(--jy-primary);
    border-color: var(--jy-primary);
}

.btn-primary:hover {
    background: var(--jy-primary-dark);
    border-color: var(--jy-primary-dark);
}

@media (max-width: 576px) {
    .auth-card .card-body {
        padding: 1.5rem;
    }
}

/* Mobile ergonomics: larger touch targets, sticky save bar, swipe-friendly tables */
@media (max-width: 767.98px) {
    .btn, .form-control, .form-select {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }

    .sticky-save-bar {
        position: sticky;
        bottom: 0;
        z-index: 1020;
        background: #fff;
        padding: .75rem 1rem;
        margin: 1rem -0.75rem -0.75rem;
        box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.1);
        border-radius: 1rem 1rem 0 0;
    }

    .sticky-save-bar .btn {
        width: 100%;
    }
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

input[type="number"] {
    font-size: 1rem;
}

/* Bottom tab bar - mobile app style navigation for employees */
.has-bottom-nav main {
    padding-bottom: 5.5rem;
}

.bottom-tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    background: #fff;
    box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.1);
    padding-bottom: env(safe-area-inset-bottom, 0);
    border-top: 1px solid rgba(0, 0, 0, .05);
}

.bottom-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    padding: .55rem 0 .45rem;
    color: #6b7280;
    text-decoration: none;
    font-size: .68rem;
    font-weight: 600;
}

.bottom-tab i {
    font-size: 1.25rem;
}

.bottom-tab.active {
    color: var(--jy-primary);
}

@media (min-width: 992px) {
    .bottom-tab-bar {
        display: none;
    }

    .has-bottom-nav main {
        padding-bottom: 1.5rem;
    }
}

/* DPR input page */
.form-control[readonly] {
    background-color: #f1f3f5;
    opacity: .8;
}

.dpr-open-field {
    background-color: #fff9db;
    border-color: #ffe066;
}

.dpr-open-field:focus {
    background-color: #fff9db;
    border-color: #f5c518;
    box-shadow: 0 0 0 .2rem rgba(245, 197, 24, .25);
}

.dpr-close-field {
    background-color: #ebfbee;
    border-color: #8ce99a;
}

.dpr-close-field:focus {
    background-color: #ebfbee;
    border-color: #2f9e44;
    box-shadow: 0 0 0 .2rem rgba(47, 158, 68, .25);
}

.form-control[readonly].dpr-open-field {
    background-color: #f1f3f5 !important;
    border-color: #dee2e6 !important;
}

.dpr-card-header {
    cursor: pointer;
}

.dpr-toggle-icon {
    transition: transform .2s var(--jy-ease, ease);
    color: #6b7280;
}

.dpr-card-header.collapsed .dpr-toggle-icon {
    transform: rotate(-90deg);
}

.dpr-field-legend {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    color: #6b7280;
}

.dpr-field-legend .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dpr-field-locked-badge {
    font-size: .65rem;
    vertical-align: middle;
}

.dpr-progress-wrap .progress-bar {
    transition: width .3s var(--jy-ease, ease);
}

.dpr-diff-badge.is-warning {
    background-color: #f8d7da !important;
    color: #842029 !important;
    border-color: #f5c2c7 !important;
}