/* ============================================================================
   SB Time Tracker — product-specific styles.
   The shared Liquid Glass design system (tokens, orbs, MudBlazor chrome, brand
   lockups, sb-landing auth cards, sb-status pages, dashboard glass) lives in
   Sb.DesignSystem (_content/Sb.DesignSystem/sb.css), linked BEFORE this sheet
   in App.razor. Only Time Tracker feature styles belong here.
   ============================================================================ */

/* -- DropZone (calendar columns) ------------------------------------------ */
.mud-drop-zone-calendar {
    border-radius: 14px !important;
    background: var(--mkt-surface) !important;
    border: 1px solid var(--mkt-border);
    box-shadow: var(--mkt-shadow-card);
    transition: background 0.2s ease;
}

.mud-drop-zone-calendar:hover {
    background: var(--mkt-primary-soft) !important;
}

/* -- Timer (AppBar pill + popover form) ------------------------------------ */
.timer-host {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-right: 6px;
}
.timer-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--mkt-border);
    background: rgba(255, 255, 255, 0.6);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--mkt-text-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.timer-pill:hover {
    color: var(--mkt-primary);
    border-color: rgba(0, 122, 255, 0.35);
}
.timer-pill--running {
    border-color: rgba(52, 199, 89, 0.45);
    background: rgba(52, 199, 89, 0.10);
    color: var(--mkt-text);
}
.timer-elapsed {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.timer-project {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    color: var(--mkt-text-soft);
}
.timer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34C759;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .timer-dot {
        animation: timer-pulse 2s ease-in-out infinite;
    }
}
@keyframes timer-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.timer-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 320px;
    max-width: 92vw;
    padding: 16px;
}
.timer-form-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--mkt-text);
    font-variant-numeric: tabular-nums;
}
.timer-summary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(118, 118, 128, 0.06);
    border: 0.5px solid var(--mkt-border-soft);
}
.timer-summary-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}
.timer-summary-project { font-size: 14px; font-weight: 600; color: var(--mkt-text); }
.timer-summary-desc    { font-size: 13px; color: var(--mkt-text-soft); }
.timer-summary-meta    { font-size: 12px; color: var(--mkt-text-faint); margin-top: 2px; }

@media (max-width: 700px) {
    .timer-project, .timer-pill-label { display: none; }

    /* Tenant switcher (the appbar's only outlined menu button): cap the company
       name so the bell / apps / account menus stay on-screen at phone widths.
       The label goes block so text-overflow can ellipsize its inline content. */
    .mud-appbar .mud-menu .mud-button-outlined { max-width: 128px; }
    .mud-appbar .mud-menu .mud-button-outlined .mud-button-label {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* -- Timesheet segment bar (multi-segment partial submissions) ------------- */
.ts-segment-bar {
    display: inline-flex;
    height: 26px;
    border-radius: 13px;
    overflow: hidden;
    gap: 2px;
    min-width: 200px;
    align-items: stretch;
}

.ts-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    padding: 0 8px;
    color: white;
    white-space: nowrap;
    cursor: default;
}

.ts-seg-open      { background: var(--mud-palette-grey-default, #6b6b6b); color: #f5f5f5; }
.ts-seg-submitted { background: var(--mud-palette-info, #2196F3); }
.ts-seg-approved  { background: var(--mud-palette-success, #4CAF50); }
.ts-seg-rejected  { background: var(--mud-palette-warning, #FF9800); }

/* -- Liquid glass time entry cards ---------------------------------------- */
.glass-entry-card {
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 8px 10px;
    margin-bottom: 4px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.glass-entry-card .mud-typography {
    color: white !important;
}

.glass-entry-card:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}

.glass-entry-card--selected,
.timeline-entry--selected {
    outline: 2px solid #007AFF;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.18);
}

.day-entry-row--selected {
    background: rgba(0, 122, 255, 0.10);
}

/* -- Lock badge ----------------------------------------------------------- */
/* Universal-contrast wrapper for lock icons that sit on project-colored
   entry cards (Week glass-card, Day timeline). The white circle lifts the
   category-colored icon off any background; subtle shadow gives depth.
   Pair with EntryLockVisuals.IconFor / ColorHexFor for the icon inside.
   Use the --sm variant inline within tight rows like the Month pill.
   Not needed on flat surfaces (day-list row, dialog title) — those use
   the icon directly without the badge. */
.entry-lock-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}
.entry-lock-badge .mud-icon-root {
    font-size: 12px !important;
}

.entry-lock-badge--sm {
    position: relative;
    top: auto;
    right: auto;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
.entry-lock-badge--sm .mud-icon-root {
    font-size: 9px !important;
}

/* Note badge — reuses the white-circle lock-badge chrome for contrast over project-colored
   cards, but a quiet muted glyph so it never competes with the colored lock states. */
.entry-note-badge .mud-icon-root {
    color: var(--mkt-text-soft, #6E6E73) !important;
}

/* Badge cluster — top-right group that lays the lock + note badges out in a horizontal row so
   multiple indicators stack side by side instead of overlapping. The cluster owns the absolute
   positioning; badges inside it go relative and flow with the flex gap. */
.entry-badge-cluster {
    position: absolute;
    top: 5px;
    right: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}
.entry-badge-cluster .entry-lock-badge {
    position: relative;
    top: auto;
    right: auto;
}

/* -- Settings > Import & Export reference sidebar lists ------------------- */
.ref-list {
    margin: 0.25rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}
.ref-list li {
    margin-bottom: 0.35rem;
}
.ref-list code {
    font-size: 0.8rem;
    padding: 0 0.25rem;
    border-radius: 3px;
    background: rgba(0,0,0,0.05);
}

/* -- Day column header (today highlight) ---------------------------------- */
.day-header {
    border-radius: 12px;
    padding: 6px 4px;
    text-align: center;
    margin-bottom: 8px;
    transition: background 0.2s ease;
}

.day-header--today {
    background: linear-gradient(180deg, #3395FF 0%, #007AFF 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
}

.day-header--today .mud-typography {
    color: white !important;
}

/* -- Month cell ----------------------------------------------------------- */
.month-cell {
    min-height: 100px;
    background: var(--mkt-surface);
    box-shadow: var(--mkt-shadow-card);
    border-radius: 14px;
    border: 1px solid var(--mkt-border);
    padding: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.month-cell:hover {
    background: var(--mkt-primary-soft);
    transform: translateY(-1px);
}

.month-cell--outside {
    opacity: 0.45;
}

/* Hover-revealed quick-add "+" in a month cell — opens the lightweight quick-add popover. Kept out
   of the way (invisible until hover/focus) so the grid stays calm. */
.month-quickadd-plus {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--mkt-primary);
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}
.month-cell:hover .month-quickadd-plus,
.month-quickadd-plus:focus-visible {
    opacity: 1;
}
.month-quickadd-plus:hover {
    background: rgba(0, 122, 255, 0.10);
}

/* Quick-add popover body (rendered inside the shared MudMenu). */
.month-quickadd-form {
    padding: 12px;
    min-width: 250px;
}

.month-cell--today-badge {
    background: linear-gradient(180deg, #3395FF 0%, #007AFF 100%);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8125rem;
    box-shadow: 0 1px 4px rgba(0, 122, 255, 0.3);
}

/* -- Month entry pill ----------------------------------------------------- */
.month-entry-pill {
    border-radius: 6px;
    padding: 2px 6px;
    margin-bottom: 2px;
    font-size: 0.7rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: white !important;
    font-weight: 500;
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 0.1s ease, filter 0.1s ease;
}

.month-entry-pill:hover {
    filter: brightness(0.97);
}

/* -- Timeline slot -------------------------------------------------------- */
.timeline-slot {
    display: flex;
    min-height: 52px;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.08);
    cursor: pointer;
    transition: background 0.15s ease;
}

.timeline-slot:hover {
    background: rgba(0, 122, 255, 0.03);
}

.timeline-slot-label {
    width: 56px;
    color: var(--mkt-text-faint);
    font-size: 0.75rem;
    font-weight: 500;
    padding-top: 6px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.timeline-entry {
    border-radius: 10px;
    padding: 6px 10px;
    min-width: 120px;
    flex: 1;
    cursor: pointer;
    color: white;
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.timeline-entry .mud-typography,
.timeline-entry * {
    color: white;
}

.timeline-entry:hover {
    transform: translateY(-1px);
    filter: brightness(0.98);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* -- Day view sidebar entry rows ------------------------------------------ */
.day-entry-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.08);
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.day-entry-row:hover {
    background: rgba(0, 122, 255, 0.04);
}

.day-entry-dot {
    width: 4px;
    height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* -- Logged-time box in dialog -------------------------------------------- */
.logged-time-box {
    background: rgba(118, 118, 128, 0.06);
    border: 0.5px solid rgba(60, 60, 67, 0.08);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
}

/* -- Entry editor drawer (right-anchored side panel) ----------------------
   Opened via DialogPosition.CenterRight + Class="time-entry-drawer" from both
   MyTime (self) and Approvals (manager editing a selected employee). Mirrors
   PM's pm-task-drawer: turns the centered modal into a full-height panel flush
   to the right edge. Width is tuned for a single-column EDIT FORM, narrower
   than PM's 760px. */
.mud-dialog-container.mud-dialog-centerright:has(.time-entry-drawer) {
    padding-right: 0;
    align-items: stretch;
}

.time-entry-drawer.mud-dialog {
    margin: 0;
    height: 100dvh;
    max-height: 100dvh;
    width: min(560px, 96vw);
    max-width: 96vw;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    box-shadow: -16px 0 60px rgba(0, 0, 0, 0.16) !important;
}

.time-entry-drawer .mud-dialog-content {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: none !important;
}

.time-entry-drawer .mud-dialog-actions {
    flex: 0 0 auto;
    border-top: 0.5px solid var(--mkt-border);
}

/* -- AI "Draft my week" review rows --------------------------------------- */
.draft-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.draft-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--mkt-border);
    border-radius: var(--sb-radius-control);
    background: var(--mkt-surface);
}

.draft-row--disabled {
    opacity: 0.6;
    background: var(--mkt-bg);
}

.draft-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* -- Week grid container -------------------------------------------------- */
/* minmax(0, 1fr) lets the 7 columns compress to fit the content area instead of a fixed
   min-width forcing horizontal overflow (the last day slid under the scrollbar). Week view
   is desktop-only (mobile is locked to Day), and the day columns already set min-width:0. */
.week-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
}

/* -- Month grid container ------------------------------------------------- */
.month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

/* -- App content shell (MainLayout MudContainer) -------------------------- */
/* Left-align the page content to the drawer and use the full width the drawer already
   reserves, instead of MudBlazor centering the container (which left a large gutter between
   the nav rail and the form). The compound selector beats .mud-container's centering without
   !important. Paired with MaxWidth.ExtraExtraLarge in MainLayout. See W2. */
.mud-container.sb-app-shell {
    margin-left: 0;
    margin-right: auto;
}

/* -- Toolbar -------------------------------------------------------------- */
.glass-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--mkt-surface);
    border: 1px solid var(--mkt-border);
    border-radius: 18px;
    box-shadow: var(--mkt-shadow-card);
}

/* -- My Time command bar + calendar chrome (tc-*) -------------------------- */
/* The period label doubles as the page heading — /time has no separate h1. */
.tc-period-label {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--mkt-text);
    margin: 0 0 0 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Contextual strip shown only while select mode is active — keeps the bulk
   tools out of the everyday toolbar without hiding selection state. */
.tc-select-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: -8px 0 16px;
    padding: 8px 14px;
    border-radius: 14px;
    background: rgba(0, 122, 255, 0.08);
    border: 1px solid rgba(0, 122, 255, 0.25);
}
.tc-select-strip strong {
    font-size: 14px;
    color: var(--mkt-primary);
    font-variant-numeric: tabular-nums;
}

/* Timesheet status strip — anchors the segment bar + submit/approve actions
   as one deliberate band instead of floating controls. */
.ts-status-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    padding: 8px 14px;
    background: var(--mkt-surface);
    border: 1px solid var(--mkt-border);
    box-shadow: var(--mkt-shadow-card);
    border-radius: 14px;
}

/* Split button (Submit + dropdown). The global .mud-button-filled radius is
   !important, so these must be too — inline styles lose that fight (the old
   inline 4px radii silently never applied). */
.tc-split { display: inline-flex; gap: 1px; }
.tc-split > .mud-button-root:first-child { border-radius: 12px 0 0 12px !important; }
.tc-split .mud-menu .mud-button-root { border-radius: 0 12px 12px 0 !important; }

/* Per-day add target (Week view) — quiet dashed affordance, lights up on hover. */
.tc-add-btn.mud-button-root {
    border: 1px dashed var(--mkt-border);
    border-radius: 10px !important;
    color: var(--mkt-text-faint) !important;
    font-weight: 500 !important;
}
.tc-add-btn.mud-button-root:hover {
    border-color: rgba(0, 122, 255, 0.4);
    color: var(--mkt-primary) !important;
    background: rgba(0, 122, 255, 0.04);
}

/* First-run hint when the visible week has no entries at all. */
.tc-empty {
    text-align: center;
    padding: 4px 16px 16px;
    color: var(--mkt-text-faint);
    font-size: 14px;
}

/* Month view "+N more" — drills into the Day view for that date. */
.tc-more-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--mkt-primary);
    cursor: pointer;
}
.tc-more-link:hover { text-decoration: underline; }

/* /my-dashboard — Today & recent rows open the shared entry drawer (EntryEditDialog). */
.dash-entry-row {
    padding: 6px 8px;
    margin: 0 -8px 4px;
    border-radius: 8px;
    cursor: pointer;
    transition: background var(--sb-transition);
}

.dash-entry-row:hover,
.dash-entry-row:focus-visible {
    background: var(--mkt-primary-soft);
}

/* /my-dashboard — running-timer strip atop the Today & recent card (an sb-subpanel row). */
.dash-timer-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
}

.dash-timer-strip-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.dash-timer-strip-project {
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-timer-strip-elapsed {
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mkt-primary);
}

/* /my-dashboard — the consolidated week strip (7 chronological day cells). */
.dash-week-strip {
    display: flex;
    align-items: stretch;
    gap: 6px;
    flex-wrap: wrap;
}

.dash-day-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 60px;
    padding: 6px 10px;
    background: var(--mkt-surface);
    border: 1px solid var(--mkt-border-soft);
    border-radius: 10px;
    font-family: inherit;
    transition: border-color var(--sb-transition), background var(--sb-transition);
}

button.dash-day-cell { cursor: pointer; }

button.dash-day-cell:hover,
button.dash-day-cell:focus-visible {
    border-color: var(--mkt-primary);
    background: var(--mkt-primary-soft);
}

.dash-day-cell--today { border-color: var(--mkt-primary); }
.dash-day-cell--future { opacity: 0.55; }
.dash-day-cell--quiet { min-width: 34px; padding: 6px 4px; opacity: 0.55; }
.dash-day-cell--filled .dash-day-hours { color: var(--mkt-text); }

.dash-day-abbrev {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mkt-text-faint);
    white-space: nowrap;
}

.dash-day-hours {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mkt-text-soft);
    white-space: nowrap;
}

.dash-day-log { color: var(--mkt-primary); }

/* /my-dashboard — Catch up rows (flat rows inside one card; no card-in-card). */
.dash-catchup-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
}

.dash-catchup-row + .dash-catchup-row {
    border-top: 1px solid var(--mkt-border-soft);
}

/* /dashboard (manager) — mobile adjustments */
@media (max-width: 599.98px) {
    /* Reduce row spacing — mb-4 (32px) → 16px between sections on mobile. */
    .manager-dashboard .mud-grid.mb-4 {
        margin-bottom: 16px !important;
    }
}

/* /time — mobile is locked to Day view; hide desktop-only chrome. */
@media (max-width: 959.98px) {
    .my-time-desktop-only { display: none !important; }

    /* Tighten the glass toolbar on mobile and let it wrap cleanly. */
    .my-time-toolbar {
        padding: 8px 10px;
        gap: 6px;
    }
    .my-time-toolbar > .mud-button,
    .my-time-toolbar > .mud-icon-button {
        flex: 0 0 auto;
    }
    .tc-period-label {
        font-size: 15px;
        white-space: normal;
    }
}

/* /invoices — list grid: progressive column collapse (row click reaches full detail) */
@media (max-width: 959.98px) {
    .inv-col-date { display: none !important; }
}
@media (max-width: 599.98px) {
    .inv-col-due, .inv-col-number { display: none !important; }
    .inv-row-cta { display: none !important; } /* MoreVert menu carries Finalise/Send/Mark-as-sent */
    /* Filters: two per row on phones; !important beats the inline min-widths
       (MudTextField puts its inline Style on the inner .mud-input, not the root). */
    .invoices-filter-row > * { flex: 1 1 calc(50% - 8px); min-width: 0 !important; }
    .invoices-filter-row .mud-input { min-width: 0 !important; max-width: 100%; }
}

/* /invoices/{id} — secondary header actions collapse into the overflow menu on phones */
.invoice-actions-overflow { display: none; }
@media (max-width: 599.98px) {
    .invoice-detail-header .invoice-action-secondary { display: none !important; }
    .invoice-actions-overflow { display: inline-flex !important; }
}

/* -- Projects list card (mirrors PM's pm-project-card) ---------------------- */
.project-card {
    cursor: pointer;
    height: 100%;
    background: var(--mkt-surface) !important;
    border: 1px solid var(--mkt-border) !important;
    box-shadow: var(--mkt-shadow-card) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.project-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07) !important;
}