/* ------------------------------------------------------------------
 * TimeTik · Custom overrides on top of Tabler
 * Loaded AFTER tabler.min.css. Strict rule: only what Tabler doesn't cover.
 * ----------------------------------------------------------------- */

/* Brand color override (BRAND_COLOR from config/config.php).
   Tabler exposes its primary palette as CSS custom properties; overriding
   --tblr-primary-* here repaints buttons, links, badges, focus rings, etc. */
:root,
[data-bs-theme="light"] {
    --tblr-primary: #0f79f3;
    --tblr-primary-rgb: 15, 121, 243;
    --tblr-primary-fg: #ffffff;
    --tblr-primary-lt: #e7f1fe;
    --tblr-primary-darken: #0d6cdb;
    --tblr-link-color: #0f79f3;
    --tblr-link-color-rgb: 15, 121, 243;
    --horizontal-nav-border: rgba(110,117,130,.28);
}
[data-bs-theme="dark"] {
    --tblr-primary: #3b94f6;
    --tblr-primary-rgb: 59, 148, 246;
    --tblr-primary-fg: #ffffff;
    --tblr-primary-lt: rgba(59, 148, 246, .12);
    --tblr-link-color: #3b94f6;
    --tblr-link-color-rgb: 59, 148, 246;
    --horizontal-nav-border: rgba(110,117,130,.42);
}

/* IconProfile bridge: lib/IconProfile::generateSVG() emits an inline
   <svg class="icon-profile-svg"> with a circle + 2-letter initials.
   Tabler's <span class="avatar"> wrappers expect <img> or background;
   make our SVG fit naturally inside them. */
.avatar > .icon-profile-svg,
.avatar .icon-profile-svg {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    display: block;
}

/* Day-type icon badge (EmployeesController::buildDayTypeIcon).
   Small colored square wrapping a Tabler icon, white glyph on bg-* fill. */
.day_type_icon {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
}
.day_type_icon > i {
    font-size: 14px;
    line-height: 1;
}

/* Light/dark logo swap on auth pages.
   Default (no data-bs-theme yet): show light logo only. */
#logo-dark                        { display: none !important; }
[data-bs-theme="dark"] #logo-dark { display: block !important; }
[data-bs-theme="dark"] #logo-light{ display: none !important; }



.horizontal-nav-scroll {
    overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;

    border-bottom: var(--tblr-border-width) var(--tblr-border-style) var(--horizontal-nav-border);

}
.horizontal-nav-scroll::-webkit-scrollbar { display: none; }
.horizontal-nav-scroll .nav-link:not(.active) { color: var(--tblr-body-color); opacity: .9; }
.horizontal-nav-scroll { border-bottom-width: 1px; }
.horizontal-nav-scroll .nav-link.active {  }
.horizontal-nav-scroll .nav-link { border-radius: var(--tblr-border-radius) var(--tblr-border-radius) 0 0; font-weight: 400;}
.horizontal-nav-scroll .nav-link:hover { background-color: var(--tblr-nav-link-hover-bg); opacity: 1; }
.horizontal-nav-wrapper { position: relative; }
.horizontal-nav-fade {
    position: absolute;
    top: 4px; bottom: 8px;
    width: 20px;
    transition: opacity 0.2s;
    z-index: 2;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.horizontal-nav-fade.fade-right {
    right: 0;
    background: var(--tblr-bg-surface, #fff);
    justify-content: flex-end;
    padding-right: 6px;
}
.horizontal-nav-fade.fade-left {
    left: 0;
    background: var(--tblr-bg-surface, #fff);
    justify-content: flex-start;
    padding-left: 6px;
}
.horizontal-nav-fade.fade-right::after {
    content: '';
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid var(--tblr-muted, #adb5bd);
}
.horizontal-nav-fade.fade-left::after {
    content: '';
    width: 0; height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 6px solid var(--tblr-muted, #adb5bd);
}
.horizontal-nav-fade.hidden { opacity: 0; }




@media (max-width: 767.98px) { 
    /* Notifications dropdown: full width on mobile, anchored to viewport */
    .navbar .dropdown-menu-card {
        position: fixed !important;
        top: 3.5rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
    .navbar .dropdown-menu-card.dropdown-menu-arrow::before,
        .navbar .dropdown-menu-card.dropdown-menu-arrow::after {
        inset-inline-end: 6.5rem;
    }

    #navbar-menu .navbar .navbar-nav .nav-link .badge {
        transform: inherit !important;
    }

    #navbar-menu .dropdown-toggle::after {
        content: "";
        display: inline-block;
        vertical-align: .255em;
        width: .3em;
        height: .3em;
        border-bottom: 1px var(--tblr-border-style);
        border-inline-start: 1px var(--tblr-border-style);
        margin-inline-end: .6em;

    }
}

@media (max-width: 575.98px) {
    .navbar .navbar-nav .nav-link {
        min-width: 2.2rem;
    }
    .navbar .dropdown-menu-card.dropdown-menu-arrow::before,
    .navbar .dropdown-menu-card.dropdown-menu-arrow::after {
        inset-inline-end: 5.8rem;
    }

}