/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* ---------- TimeTracker Theming ---------- */
body.bg-light {
    background: var(--tt-body-bg, #f8f9fa) !important;
}

.tt-header .navbar-brand,
.tt-header .nav-link,
.tt-header .navbar-text,
.tt-header .dropdown-item,
.tt-header .dropdown-toggle,
.tt-header .offcanvas-title {
    color: var(--tt-header-text, #212529) !important;
}

.tt-header .dropdown-menu {
    background: var(--tt-menu-bg, #ffffff) !important;
    color: var(--tt-menu-text, #212529) !important;
}

.tt-header {
    background: var(--tt-header-bg, #ffffff) !important;
    color: var(--tt-header-text, #212529) !important;
}

.tt-footer {
    background: var(--tt-footer-bg, #ffffff) !important;
    color: var(--tt-footer-text, #6c757d) !important;
}

    .tt-footer a {
        color: var(--tt-footer-text, #6c757d) !important;
    }

/* Offcanvas menu theming */
.tt-menu {
    background: var(--tt-menu-bg, #ffffff) !important;
    color: var(--tt-menu-text, #212529) !important;
}

.tt-menu .nav-link,
.tt-menu .dropdown-item,
.tt-menu .offcanvas-title {
    color: var(--tt-menu-text, #212529) !important;
}

/* Bridge Bootstrap component colors to branding vars */
.btn-primary {
    --bs-btn-bg: var(--bs-primary) !important;
    --bs-btn-border-color: var(--bs-primary) !important;
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary) !important;
    --bs-btn-border-color: var(--bs-secondary) !important;
}

.btn-success {
    --bs-btn-bg: var(--bs-success) !important;
    --bs-btn-border-color: var(--bs-success) !important;
}

.btn-warning {
    --bs-btn-bg: var(--bs-warning) !important;
    --bs-btn-border-color: var(--bs-warning) !important;
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger) !important;
    --bs-btn-border-color: var(--bs-danger) !important;
}

.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success { color: var(--bs-success) !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-danger { color: var(--bs-danger) !important; }

a,
.link-primary {
    color: var(--bs-primary);
}

a:hover,
.link-primary:hover {
    color: var(--bs-primary);
    filter: brightness(.92);
}

/* ---------- Segments / Pills / Badges ----------

   Default segment badge uses TimeTracker vars.
   Type-specific badges fall back to Bootstrap pale
   colors if no theme override is set.
-------------------------------------------------- */

.tt-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .5rem;
    border-radius: 999px;
    font-size: .875rem;
    line-height: 1.1;
    background: var(--tt-seg-default-bg, #e9ecef);
    color: var(--tt-seg-default-text, #212529);
}

    .tt-badge .tt-dot {
        width: .55rem;
        height: .55rem;
        border-radius: 50%;
        background: currentColor;
        opacity: .75;
    }

.tt-badge-vacation {
    background: var(--tt-seg-vac-bg, #e7f1ff);
    color: var(--tt-seg-vac-text, #0d6efd);
}

.tt-badge-sickleave {
    background: var(--tt-seg-sick-bg, #fdecea);
    color: var(--tt-seg-sick-text, #dc3545);
}

.tt-badge-buak {
    background: var(--tt-seg-buak-bg, #eaf7ee);
    color: var(--tt-seg-buak-text, #198754);
}

/* Segment badges used in Day/Edit and admin preview */
.tt-segment,
.tt-seg-work,
.tt-seg-drive,
.tt-seg-break,
.tt-seg-vacation,
.tt-seg-sick,
.tt-seg-buak {
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 500;
}

.tt-segment,
.tt-seg-work {
    background: var(--tt-seg-default-bg, #e9ecef) !important;
    color: var(--tt-seg-default-text, #212529) !important;
}

.tt-seg-drive {
    background: color-mix(in srgb, var(--bs-secondary) 14%, white) !important;
    color: var(--bs-secondary) !important;
}

.tt-seg-break {
    background: color-mix(in srgb, var(--bs-warning) 18%, white) !important;
    color: #7a5a00 !important;
}

.tt-seg-vacation {
    background: var(--tt-seg-vac-bg, #e7f1ff) !important;
    color: var(--tt-seg-vac-text, #0d6efd) !important;
}

.tt-seg-sick {
    background: var(--tt-seg-sick-bg, #fdecea) !important;
    color: var(--tt-seg-sick-text, #dc3545) !important;
}

.tt-seg-buak {
    background: var(--tt-seg-buak-bg, #eaf7ee) !important;
    color: var(--tt-seg-buak-text, #198754) !important;
}

/* Admin branding preview */
.tt-preview {
    background: var(--tt-body-bg, #f8f9fa);
    color: var(--tt-header-text, #212529);
}

.tt-preview-header {
    background: var(--tt-header-bg, #ffffff);
    color: var(--tt-header-text, #212529);
}

.tt-preview-footer {
    background: var(--tt-footer-bg, #ffffff);
    color: var(--tt-footer-text, #6c757d);
}

/* Logo */
.brand-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
}

/* Touch friendly navbar spacing */
.nav-touch .nav-link,
.nav-touch .dropdown-item {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

/* ---------- Navigation / Admin Dropdown (mobile-friendly) ---------- */
.tt-menu .dropdown-menu {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* On small screens, keep dropdown within offcanvas flow and allow scrolling */
@media (max-width: 991.98px) {
    .tt-menu .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        margin-top: 0.25rem;
    }

    .tt-menu .dropdown-item,
    .tt-menu .dropdown-header {
        white-space: normal;
    }
}

/* Dropdown should never clip off-screen */
.tt-header .dropdown-menu {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

/* ---------- Mobile usability hardening ---------- */
:root {
    --tt-touch-target: 44px;
}

@media (max-width: 991.98px) {
    .btn,
    .form-control,
    .form-select,
    .input-group-text {
        min-height: var(--tt-touch-target);
    }

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

    .navbar-toggler {
        min-width: var(--tt-touch-target);
        min-height: var(--tt-touch-target);
    }

    .card-body {
        padding: 0.9rem;
    }
}

/* Sticky day actions become fixed on phones */
@media (max-width: 768px) {
    .tt-sticky-actions {
        position: fixed !important;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040 !important;
        padding: 0 .5rem calc(env(safe-area-inset-bottom) + .4rem);
    }

    .tt-sticky-actions .card {
        border-radius: .9rem .9rem .5rem .5rem;
    }

    body.tt-has-sticky-actions main {
        padding-bottom: 6.5rem;
    }
}

/* Improve status/readability */
.badge.bg-secondary {
    background-color: #5b6470 !important;
}

.alert-warning {
    color: #4f3e00;
}

/* Global loading overlay */
.tt-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(33, 37, 41, .35);
    backdrop-filter: blur(1px);
}

.tt-loading-overlay.is-visible {
    display: flex;
}

.tt-loading-overlay-card {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 0.5rem 1.1rem rgba(0,0,0,.18);
    padding: .85rem 1rem;
    min-width: 200px;
    text-align: center;
}