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;
}

/* Begin Register */
/* Fade + slide down animation for company selector */
#companySelectWrapper.fade-slide {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height 280ms cubic-bezier(.22,.9,.29,1), opacity 200ms ease 40ms, transform 220ms cubic-bezier(.22,.9,.29,1);
}

#companySelectWrapper.fade-slide.visible {
    /* max-height set large enough to accommodate the inner select + label */
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
}

/*
    Remove the browser green-valid indicator and make invalid controls show red.
    - Many browsers show a green "valid" UI when an input is considered valid.
    - We remove that visual (background-image) and rely on Bootstrap's invalid styles.
*/
input.form-control::-webkit-validation-bubble {
    display: none;
}
/* no-op for compat */
input.form-control:valid {
    /* remove green check icon on WebKit/Chromium */
    background-image: none !important;
    box-shadow: none !important;
}

/* Ensure invalid controls get Bootstrap's red border when form has .was-validated */
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    box-shadow: none;
    background-image: none;
}

/* Optional: make the invalid-feedback + aria visible */
.was-validated .form-control:invalid ~ .invalid-feedback {
    display: block;
}

/* Password toggle styles */
.form-floating {
    position: relative;
}

.password-with-toggle {
    padding-right: 2.5rem; /* make room for the toggle button */
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: .5rem;
    border: none;
    background: transparent;
    padding: .25rem;
    color: #495057;
    z-index: 2;
}

.password-toggle-btn:focus {
    outline: none;
    box-shadow: none;
}

/* End Register */

/* Begin Company */
/* Two-color alternating rows: light blue and light grey */
.company-table tbody tr:nth-child(odd) {
    background-color: #e8f6ff; /* light blue */
}

.company-table tbody tr:nth-child(even) {
    background-color: #f3f3f3; /* light grey */
}

/* Slightly stronger hover to improve discoverability */
.company-table tbody tr:hover {
    background-color: #d6efff !important;
}

/* Keep header readable — subtle blue tint */
.company-table thead {
    background-color: #cfeefc;
}

/* Ensure action buttons remain visible on colored backgrounds */
.company-table .btn {
    z-index: 1;
}

/* Clickable row styling */
.company-table tbody tr.clickable-row {
    cursor: pointer;
}

/* Focus outline for keyboard users (on <tr> when tabbable) */
.company-table tbody tr.clickable-row:focus {
    outline: 3px solid rgba(37,140,251,0.25);
    outline-offset: -3px;
}

/* End Company */

/* Start Home */
/* Modern card + inputs styling */
.timer-card {
    max-width: 720px;
    margin: 2.5rem auto;
    padding: 1.75rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(245,247,250,0.95));
    box-shadow: 0 10px 30px rgba(20,30,60,0.08);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(200,210,220,0.45);
}

.timer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 720px) {
    .timer-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.input-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.label-muted {
    font-size: 0.9rem;
    color: #6b7280;
}

.duration {
    font-weight: 600;
    font-size: 1.1rem;
    color: #0f172a;
}

.btn-modern {
    background: linear-gradient(90deg,#6366f1,#8b5cf6);
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(139,92,246,0.16);
}

.validation {
    color: #dc2626;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}
/* End Home */

/* Start Header */
/* Modern navbar tweaks */
    .navbar-modern {
        background: linear-gradient(180deg, #ffffff, #fbfdff);
        border-radius: 10px;
        padding: 0.35rem 1rem;
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
    }

    .navbar-modern .navbar-brand {
        font-weight: 700;
        letter-spacing: .2px;
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        color: #0f172a;
    }

    .navbar-modern .nav-link {
        color: #374151;
        padding: .45rem .65rem;
        border-radius: .45rem;
    }

        .navbar-modern .nav-link:hover {
            background: rgba(99,102,241,0.08);
            color: #111827;
        }

    .navbar-modern .form-control.search-input {
        min-width: 220px;
        max-width: 360px;
        border-radius: 999px;
        padding-left: .9rem;
        padding-right: 2.5rem;
        box-shadow: none;
        border: 1px solid rgba(15,23,42,0.06);
    }

    .navbar-modern .search-wrap {
        position: relative;
    }

    .navbar-modern .search-wrap .bi-search {
        position: absolute;
        right: .8rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6b7280;
    }

    @media (max-width: 767.98px) {
        .navbar-modern .form-control.search-input {
            display: none;
        }
    }
/* End Header */