/* TimeTracker — custom styles layered on top of MudBlazor */

:root {
    --dzk-navy: #002F6F;
}

html, body, #app {
    height: 100%;
}

/* ── Bottom navigation (mobile) ── */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    display: flex;
    align-items: stretch;
    z-index: 1200;
    box-shadow: 0 -1px 6px rgba(0,0,0,.10);
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: color 0.15s;
    padding-top: 6px;
    text-decoration: none;
    border: none;
    background: transparent;
}

.bottom-nav-item .mud-icon-root {
    font-size: 24px !important;
    transition: transform 0.15s;
}

.bottom-nav-item .nav-label {
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.bottom-nav-item.active {
    color: var(--mud-palette-primary);
}

.bottom-nav-item.active .mud-icon-root {
    transform: translateY(-1px);
}

/* ── FAB (floating action button) — above bottom nav on mobile ── */
.tt-fab {
    position: fixed;
    bottom: calc(62px + 16px);
    right: 16px;
    z-index: 1300;
}

/* FAB uses Material Design 3 border-radius (16px) */
.tt-fab .mud-fab {
    border-radius: 16px !important;
}

@media (min-width: 960px) {
    .bottom-nav {
        display: none;
    }

    .tt-fab {
        bottom: 24px;
        right: 24px;
    }
}

/* ── Spacer so content clears the bottom nav on mobile ── */
.bottom-nav-spacer {
    height: 78px;
}

@media (min-width: 960px) {
    .bottom-nav-spacer {
        display: none;
    }
}

/* ── Project colour dot ── */
.project-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

/* ── Timer hero card gradient ── */
.timer-card-running {
    background: linear-gradient(135deg, #002F6F 0%, #013a86 60%, #0068CD 130%) !important;
    color: #fff !important;
}

/* ── Pulse dot (live indicator) ── */
.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff5252;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(255,82,82,.6);
    animation: pulse-anim 1.6s infinite;
}

@keyframes pulse-anim {
    0%   { box-shadow: 0 0 0 0 rgba(255,82,82,.55); }
    70%  { box-shadow: 0 0 0 7px rgba(255,82,82,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,82,82,0); }
}

/* ── Tabular numbers ── */
.tabnum {
    font-variant-numeric: tabular-nums;
}

/* ── Filter tab bar (Entries page) ── */
.tt-filter-tabs {
    display: flex;
    position: relative;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
}

.tt-filter-tab {
    flex: 1;
    text-align: center;
    padding: 13px 8px;
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--mud-palette-text-secondary);
    position: relative;
    border: none;
    background: transparent;
    transition: color .15s, background .15s;
    user-select: none;
}

.tt-filter-tab:hover {
    background: var(--mud-palette-action-default-hover);
    color: var(--mud-palette-text-primary);
}

.tt-filter-tab.active {
    color: var(--mud-palette-primary);
}

.tt-filter-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--mud-palette-primary);
}

/* ── MudNavMenu — nav link styles matching mockup ── */
.mud-nav-link {
    border-radius: 6px !important;
    margin: 2px 8px !important;
    font-weight: 600 !important;
    min-height: 46px;
}

.mud-nav-link:hover {
    background: rgba(0,0,0,0.06) !important;
    border-radius: 6px !important;
}

.mud-nav-link.active {
    background: rgba(0,104,205,0.10) !important;
    color: var(--mud-palette-primary) !important;
    border-radius: 6px !important;
}

.mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

/* ── Nav rail — hide text and centre icons in mini/closed state ── */
/* MudBlazor's built-in selector requires NavMenu as direct child of .mud-drawer-content,
   which our wrapper div breaks — so we apply a permissive override instead */
.mud-drawer--closed.mud-drawer-mini .mud-nav-link-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.mud-drawer--closed.mud-drawer-mini .mud-nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}

/* ── Nav rail — hide mini drawer on mobile to prevent flash before JS sets Persistent variant ── */
@media (max-width: 959px) {
    .mud-drawer-mini {
        display: none !important;
    }
}

/* ── Entry sheet — bottom sheet ── */
.entry-sheet .mud-drawer-content {
    max-height: 92vh;
    overflow-y: auto;
}
.entry-sheet .mud-drawer-header {
    border-bottom: none !important;
}

/* ── Grip pill (drag handle at top of bottom sheet) ── */
.sheet-grip-pill {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,.18);
    margin: 10px auto 4px;
    flex-shrink: 0;
}

/* ── KPI grid ── */
.kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* ── Summary card (navy background) ── */
.summary-card {
    background: #002F6F !important;
    color: #fff !important;
    border-radius: 12px !important;
}

/* ── Today's progress bar — rounded, correct track/fill colours ── */
.tt-progress {
    height: 8px !important;
    border-radius: 99px !important;
    background: rgba(0,0,0,.07) !important;
}
.tt-progress .mud-progress-linear-bar1,
.tt-progress .mud-progress-linear-bar2 {
    border-radius: 99px !important;
}

/* ── Outlined input label — primary colour when floating (field has value) ── */
.mud-input-outlined.mud-input-label-animated .mud-input-label-animated {
    color: var(--mud-palette-primary) !important;
}
label.mud-input-label.mud-input-label-animated.mud-input-label-inputcontrol {
    color: var(--mud-palette-primary) !important;
}

/* ── Archived items ── */
.archived-item {
    opacity: 0.68;
}

/* ── Project avatar (square) ── */
.avatar-sq {
    border-radius: 6px !important;
}

/* ── Rate chip (cyan tint) ── */
.rate-chip-cyan {
    background: rgba(31,172,242,0.14) !important;
    color: #0a6ea3 !important;
}

/* ── Calendar: prevent day-number link from consuming full cell height ── */
.mud-cal-month-link {
    height: auto !important;
}

/* ── Calendar: value bars stack below day number ── */
.mud-cal-month-cell-header {
    padding: 2px 4px;
}

/* ── Calendar: hide totals column on mobile ── */
@media (max-width: 768px) {
    .mud-cal-total-cell {
        display: none !important;
    }
    .mud-cal-month-grid-header .mud-cal-month-header:last-child {
        display: none !important;
    }
    .mud-cal-month-cell:not(.mud-cal-total-cell) {
        width: calc(100% / 7) !important;
    }
}