/* ==========================================================================
   Work log, hold guidance and performance pages (loaded after app.css)
   ========================================================================== */

/* Choice cards (hold vs reassign, finished vs not finished) */
.choice-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice-row.three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .choice-row.three { grid-template-columns: 1fr; } }
.choice-card {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--ts-border); border-radius: 10px;
    cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; background: #fff;
}
.choice-card:hover { border-color: #94A3B8; }
.choice-card.selected { border-color: var(--ts-primary); background: #EFF6FF; box-shadow: 0 0 0 3px rgba(37, 99, 235, .10); }
.choice-card .mud-icon-root { color: var(--ts-primary); font-size: 1.6rem; }
.choice-card strong { display: block; font-size: .9rem; color: #0F172A; }
.choice-card span { display: block; font-size: .76rem; color: #64748B; }
@media (max-width: 560px) { .choice-row { grid-template-columns: 1fr; } }

/* Quick-pick chips */
.hold-chips, .expected-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hold-chip {
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--ts-border-strong); background: #fff; color: #334155;
    font-size: .78rem; font-weight: 600; cursor: pointer; user-select: none; transition: all .15s ease;
}
.hold-chip:hover { border-color: var(--ts-primary); color: var(--ts-primary); }
.hold-chip.on { background: var(--ts-primary); border-color: var(--ts-primary); color: #fff; box-shadow: 0 4px 10px rgba(37, 99, 235, .25); }
.hold-guide { border: 1px solid #FDE68A; background: #FFFBEB; border-radius: 10px; padding: 12px 14px; }
.hold-guide-head { display: flex; align-items: center; gap: 6px; color: #92400E; font-size: .86rem; }
.hold-guide-head span { color: #B45309; font-size: .78rem; }
.hold-guide-text { color: #78350F; font-size: .82rem; margin: 4px 0 10px; }
.hold-guide-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: #B45309; margin-bottom: 6px; }
.hold-checklist { margin-top: 16px; display: grid; gap: 6px; font-size: .8rem; color: #475569; }
.hold-checklist div { display: flex; align-items: flex-start; gap: 6px; }
.hold-checklist .mud-icon-root { color: #16A34A; margin-top: 1px; }

/* "Working now" banner */
.now-card {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px; padding: 22px 26px; border-radius: 16px; color: #fff;
    background: linear-gradient(120deg, #1D4ED8 0%, #4F46E5 55%, #7C3AED 100%); box-shadow: 0 18px 40px rgba(67, 56, 202, .28);
    position: relative; overflow: hidden; overflow: clip; /* clip, not hidden: hidden is still scrollable, and focus scrolled the card sideways */
}
.now-card::after { content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .07); }
.now-card.on-break { background: linear-gradient(120deg, #B45309 0%, #D97706 55%, #F59E0B 100%); box-shadow: 0 18px 40px rgba(217, 119, 6, .28); }
.now-card > * { position: relative; z-index: 1; }
.now-label { display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .92; }
.now-dot { width: 9px; height: 9px; border-radius: 50%; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: nowPulse 1.8s infinite; }
.on-break .now-dot { background: #FEF3C7; animation: none; }
.now-type { background: rgba(255, 255, 255, .18); border-radius: 6px; padding: 2px 8px; letter-spacing: .02em; text-transform: none; font-size: .74rem; }
.now-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 6px 0 8px; line-height: 1.3; }
.now-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .82rem; opacity: .92; }
.now-meta span { display: inline-flex; align-items: center; gap: 5px; }
.now-meta .overdue { color: #FECACA; font-weight: 700; }
.now-clock { text-align: center; }
.live-timer { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 2.5rem; font-weight: 700; letter-spacing: .02em; }
.live-timer.paused { opacity: .65; }
.now-clock-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; opacity: .85; margin-top: 2px; }
.now-actions { display: flex; flex-direction: column; gap: 10px; min-width: 190px; }
.now-btn-ghost { color: #fff !important; border-color: rgba(255, 255, 255, .55) !important; }
.now-btn-ghost:hover { background: rgba(255, 255, 255, .12) !important; }
@keyframes nowPulse { 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@media (max-width: 900px) {
    .now-card { grid-template-columns: 1fr; gap: 14px; }
    .now-actions { flex-direction: row; min-width: 0; }
    .now-clock { text-align: left; }
}

/* Small running strip used on My Tasks */
.running-strip {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 18px; border-radius: 12px; color: #fff;
    background: linear-gradient(120deg, #1D4ED8, #4F46E5); box-shadow: 0 10px 24px rgba(67, 56, 202, .25);
}
.running-strip.on-break { background: linear-gradient(120deg, #B45309, #D97706); }
.running-strip .live-timer { font-size: 1.4rem; }
.running-strip .rs-title { flex: 1; min-width: 180px; font-weight: 600; }
.running-strip .rs-sub { font-size: .74rem; opacity: .85; font-weight: 500; }

/* Start form */
.expected-box { border: 1px dashed var(--ts-border-strong); border-radius: 10px; padding: 12px 14px; background: #FCFDFF; }
.expected-title { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #475569; margin-bottom: 10px; }
.expected-title .mud-icon-root { color: var(--ts-primary); }
.expected-custom { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.expected-result { font-size: .86rem; color: #475569; }
.expected-result strong { color: var(--ts-primary); }
.start-switch { display: flex; flex-direction: column; gap: 8px; }

/* Finish dialog summary, unfinished list, entry tags */
.finish-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; background: #F8FAFC; border: 1px solid var(--ts-border); }
.finish-summary div { display: flex; flex-direction: column; }
.finish-summary span { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: #94A3B8; }
.finish-summary strong { font-size: .95rem; color: #0F172A; }
@media (max-width: 560px) { .finish-summary { grid-template-columns: 1fr 1fr; } }
.unfinished-row { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-bottom: 1px solid #F1F5F9; flex-wrap: wrap; }
.unfinished-row:last-child { border-bottom: none; }
.unfinished-main { flex: 1; min-width: 220px; }
.unfinished-sub { font-size: .78rem; color: #64748B; margin-top: 2px; }
.entry-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .74rem; color: #64748B; margin-top: 2px; }
.entry-tag { display: inline-flex; align-items: center; gap: 3px; color: #B45309; font-weight: 600; }
.entry-tag .mud-icon-root { font-size: .95rem; }

/* Performance */
.score-ring {
    --pct: 0; --ring: #2563EB; width: 150px; height: 150px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: conic-gradient(var(--ring) calc(var(--pct) * 1%), #E8ECF4 0);
}
.score-ring-inner { width: 118px; height: 118px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--ts-border); }
.score-ring-value { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #0F172A; }
.score-ring-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: #94A3B8; margin-top: 4px; }
.score-ring.sm { width: 46px; height: 46px; }
.score-ring.sm .score-ring-inner { width: 36px; height: 36px; }
.score-ring.sm .score-ring-value { font-size: .85rem; letter-spacing: 0; }
.score-hero { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.score-split { display: flex; gap: 22px; flex-wrap: wrap; }
.score-split > div { display: flex; flex-direction: column; }
.score-split span { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: #94A3B8; }
.score-split strong { font-size: 1.4rem; font-weight: 800; color: #0F172A; }
.bar-row { display: grid; grid-template-columns: 170px 1fr 56px; align-items: center; gap: 12px; padding: 9px 0; }
.bar-row + .bar-row { border-top: 1px solid #F1F5F9; }
.bar-label { font-size: .84rem; font-weight: 600; color: #1E293B; }
.bar-label small { display: block; font-weight: 500; color: #94A3B8; font-size: .72rem; }
.bar-track { height: 9px; background: #EEF1F7; border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 99px; transition: width .4s ease; }
.bar-value { text-align: right; font-weight: 700; font-size: .86rem; color: #0F172A; }
.bar-na { color: #CBD5E1; font-weight: 600; }
@media (max-width: 560px) {
    .bar-row { grid-template-columns: 1fr 44px; }
    .bar-row .bar-track { grid-column: 1 / -1; order: 3; }
}
.rating-card { border: 1px solid var(--ts-border); border-radius: 12px; padding: 16px 18px; background: #fff; }
.rating-card + .rating-card { margin-top: 12px; }
.rating-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rating-crit { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 18px; margin: 10px 0; }
.rating-crit div { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: #475569; }
.rating-quote { font-size: .86rem; color: #334155; background: #F8FAFC; border-left: 3px solid var(--ts-primary); border-radius: 0 8px 8px 0; padding: 8px 12px; }
.crit-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; }
.crit-row + .crit-row { border-top: 1px solid #F1F5F9; }
.crit-row strong { display: block; font-size: .88rem; color: #0F172A; }
.crit-row span { font-size: .75rem; color: #64748B; }
.rate-preview { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 16px; border-radius: 10px; background: #EFF6FF; color: #1E3A8A; font-weight: 600; }
.rate-preview strong { font-size: 1.4rem; }
.period-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.period-bar .hold-chip { font-size: .8rem; }

/* APM logo chip (sidebar, sign-in) */
.brand-logo { background: #fff; border-radius: 10px; padding: 5px 9px; flex: none; display: flex; align-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.brand-logo img { height: 24px; width: auto; display: block; }
.brand-logo-side { padding: 8px 14px; border-radius: 12px; }
.brand-logo-side img { height: 32px; }
.brand-logo.lg { padding: 8px 14px; border-radius: 12px; }
.brand-logo.lg img { height: 34px; }
.brand-logo.dark { box-shadow: none; padding: 0; background: transparent; }
.brand-logo.dark img { height: 30px; }

/* Activity trail */
.trail { padding: 6px 20px 14px; max-height: 460px; overflow-y: auto; }
.trail-item { display: flex; align-items: flex-start; gap: 14px; padding: 10px 0; position: relative; }
.trail-item::before { content: ""; position: absolute; left: 16px; top: 44px; bottom: -8px; width: 2px; background: #E8ECF4; }
.trail-item:last-child::before { display: none; }
.trail-dot { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; position: relative; z-index: 1; }
.trail-body { flex: 1; min-width: 0; }
.trail-title { font-weight: 600; font-size: .88rem; color: #0F172A; }
.trail-detail { font-size: .78rem; color: #64748B; margin-top: 2px; word-break: break-word; }
.trail-time { text-align: right; flex: none; display: flex; flex-direction: column; font-size: .72rem; color: #94A3B8; }
.trail-time strong { font-size: .8rem; color: #334155; }

/* Responsive polish */
.mud-dialog { max-width: calc(100vw - 16px) !important; margin: 8px; }
@media (max-width: 600px) {
    .mud-dialog .mud-dialog-content { padding-left: 16px !important; padding-right: 16px !important; }
    .stat-card { padding: 14px 16px !important; }
    .content-card-header { flex-wrap: wrap; gap: 8px; }
    .trail { padding: 6px 14px 12px; }
    .live-timer { font-size: 2rem; }
    .now-card { padding: 18px; }
    .score-ring { width: 120px; height: 120px; }
    .score-ring-inner { width: 94px; height: 94px; }
    .score-ring-value { font-size: 1.9rem; }
}

/* Compact popups (take a break) - small card, not a large modal */
.mud-dialog.dialog-compact { width: 340px; max-width: calc(100vw - 24px) !important; }
.dialog-compact .mud-dialog-title { padding: 12px 16px !important; }
.dialog-compact .mud-dialog-content { padding: 12px 16px 4px !important; }
.dialog-compact .mud-dialog-actions { padding: 8px 12px !important; }
.dialog-compact .stat-icon { width: 34px !important; height: 34px !important; }
.dialog-compact .mud-typography-h6 { font-size: 1rem !important; }

/* Fit-to-content popups: compact by default, wide only where the form needs it (missed entry, hold) */
.mud-dialog.dialog-fit { width: 440px; max-width: calc(100vw - 24px) !important; }
.dialog-fit .mud-dialog-title { padding: 12px 18px !important; }
.dialog-fit .mud-dialog-content { padding: 14px 18px 6px !important; }
.dialog-fit .mud-dialog-actions { padding: 8px 14px !important; }
.dialog-fit .stat-icon { width: 36px !important; height: 36px !important; }
.dialog-fit .mud-typography-h6 { font-size: 1.05rem !important; }
.dialog-fit .finish-summary { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
.dialog-fit .choice-row { grid-template-columns: 1fr; gap: 8px; }
.dialog-fit .choice-card { padding: 10px 14px; }

/* Automatically detected rework */
.rework-list { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #FEF2F2; border: 1px solid #FECACA; }
.rework-title { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #B91C1C; margin-bottom: 6px; }
.rework-item { font-size: .82rem; color: #7F1D1D; padding: 2px 0; }

/* Medium forms: just wide enough for two columns, no dead space around the fields */
.mud-dialog.dialog-md { width: 620px; max-width: calc(100vw - 24px) !important; }
.dialog-md .mud-dialog-title { padding: 12px 18px !important; }
.dialog-md .mud-dialog-content { padding: 14px 18px 6px !important; }
.dialog-md .mud-dialog-actions { padding: 8px 14px !important; }
.dialog-md .stat-icon { width: 36px !important; height: 36px !important; }
.dialog-md .mud-typography-h6 { font-size: 1.05rem !important; }

/* All dialogs: trim the padding MudBlazor puts around inputs and sections */
.mud-dialog .mud-dialog-content { padding-top: 12px; padding-bottom: 4px; }
.mud-dialog .mud-input-control { margin-top: 0; }
.mud-dialog .mud-input-helper-text { margin-top: 2px; font-size: .7rem; }
.mud-dialog .form-section { padding: 12px 14px 14px; margin-bottom: 10px; }
.mud-dialog .hold-guide { padding: 10px 12px; }
.mud-dialog .hold-checklist { margin-top: 10px; gap: 4px; }
.mud-dialog .finish-summary { padding: 8px 12px; margin-bottom: 12px; }
.mud-dialog .rate-preview { margin-top: 10px; padding: 8px 14px; }
.mud-dialog .crit-row { padding: 6px 0; }