/* WorkDesk 화면 스타일 (공용).
   .razor.css(스코프 CSS)는 쓰지 않는다. 증분 빌드에서 DLL 과 CSS 의 스코프 식별자가 어긋나
   화면 스타일이 통째로 빠지는 사고가 반복됐다. 클래스 이름으로만 구분한다. */

/* ── Components/Pages/WorkDesk/MyTask/MyTask.razor.css ────────────────────────────── */
.my-work-cards {
    column-width: 18rem;
    column-gap: var(--cds-spacing-05, 1rem);
}

.my-work-view-button[aria-pressed="true"] {
    background: var(--cds-layer-selected-01);
    color: var(--cds-link-primary);
    box-shadow: inset 0 -2px 0 var(--cds-border-interactive);
}

.project-board-card { background: var(--cds-background); border: 1px solid var(--cds-border-subtle-01); }
.project-board-card:hover { border-color: var(--cds-border-strong-01); }
.project-board-card[data-priority="High" i] { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cds-support-caution) 50%, transparent); }
.project-board-card[data-priority="Critical" i],
.project-board-card[data-priority="Urgent" i] { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cds-support-error) 50%, transparent); }
.project-board-title { line-height: 1.6; overflow-wrap: anywhere; }
.project-board-card progress { height: .25rem; appearance: none; border: 0; background: var(--cds-border-subtle-01); }
.project-board-card progress::-webkit-progress-bar { background: var(--cds-border-subtle-01); }
.project-board-card progress::-webkit-progress-value { background: var(--cds-button-primary); }
.project-board-card progress::-moz-progress-bar { background: var(--cds-button-primary); }

.my-work-cards article {
    display: inline-block;
    vertical-align: top;
    break-inside: avoid;
    margin-bottom: var(--cds-spacing-05, 1rem);
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ── Components/Pages/WorkDesk/Project/ProjectMgmt.razor.css ────────────────────────────── */
.project-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.project-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--cds-background); border: 1px solid var(--cds-border-subtle-01); text-decoration: none; }
.project-card:hover { border-color: var(--cds-border-strong-01); text-decoration: none; }
.project-card:hover .cds-project-identity-title { text-decoration: underline; text-underline-offset: .25rem; }
.project-card:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
.project-card-status { position: absolute; top: 1.5rem; right: 1.5rem; }
.project-card-footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.project-card-footer > span:last-child { white-space: nowrap; }
.project-card-members { min-width: 0; }
.project-card progress { appearance: none; border: 0; background: var(--cds-border-subtle-01); }
.project-card progress::-webkit-progress-bar { background: var(--cds-border-subtle-01); }
.project-card progress::-webkit-progress-value { background: var(--cds-button-primary); }
.project-card progress::-moz-progress-bar { background: var(--cds-button-primary); }
@media (min-width: 105rem) { .project-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 75rem) { .project-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 42rem) { .project-cards { grid-template-columns: minmax(0, 1fr); } }

/* ── Components/Pages/WorkDesk/Project/ProjectOverview.razor.css ────────────────────────────── */
.project-board-card { background: var(--cds-background); border: 1px solid var(--cds-border-subtle-01); }
.project-board-card:hover { border-color: var(--cds-border-strong-01); }
[data-project-task-list] .rw-data-row:has([data-task-priority="High" i]) > .rw-cell:first-child { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--cds-support-caution) 50%, transparent); }
[data-project-task-list] .rw-data-row:has([data-task-priority="Critical" i]) > .rw-cell:first-child,
[data-project-task-list] .rw-data-row:has([data-task-priority="Urgent" i]) > .rw-cell:first-child { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--cds-support-error) 50%, transparent); }
.project-board-card[data-priority="High" i] { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cds-support-caution) 50%, transparent); }
.project-board-card[data-priority="Critical" i],
.project-board-card[data-priority="Urgent" i] { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cds-support-error) 50%, transparent); }
@media (hover: hover) and (pointer: fine) {
    .project-board-drag-handle { opacity: 0; }
    .project-board-card:hover .project-board-drag-handle,
    .project-board-card:focus-within .project-board-drag-handle,
    .project-board-drag-handle[aria-grabbed="true"] { opacity: 1; }
}
.project-board-title { line-height: 1.6; overflow-wrap: anywhere; }
.project-board-card progress { height: .25rem; appearance: none; border: 0; background: var(--cds-border-subtle-01); }
.project-board-card progress::-webkit-progress-bar { background: var(--cds-border-subtle-01); }
.project-board-card progress::-webkit-progress-value { background: var(--cds-button-primary); }
.project-board-card progress::-moz-progress-bar { background: var(--cds-button-primary); }
.project-board-section-heading {
    border-bottom: 2px solid var(--section-color, var(--cds-tag-bg-gray));
}
.project-board-section-heading[data-section-color="cds-yellow"] { --section-color: var(--cds-support-warning); }
.project-board-section-heading[data-section-color="cds-purple"] { --section-color: var(--cds-support-undefined); }
.project-board-section-heading[data-section-color="cds-green"] { --section-color: var(--cds-support-success); }
.project-board-section-heading[data-section-color="cds-red"] { --section-color: var(--cds-support-error); }

/* ── Components/Pages/WorkDesk/Shared/ProjectFiles.razor.css ────────────────────────────── */
.project-file-preview {
    display: block;
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
}

/* ── Components/Pages/WorkDesk/Shared/ProjectTimelineGrid.razor.css ────────────────────────────── */
.project-timeline {
    --timeline-sidebar: 25rem;
    min-height: 0;
    border: 1px solid var(--cds-border-subtle-02);
    background: var(--cds-background);
    color: var(--cds-text-primary);
}

.project-timeline__summary {
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 1rem;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
}

.project-timeline__summary-copy,
.project-timeline__toolbar,
.project-timeline__segmented {
    display: flex;
    align-items: center;
}

.project-timeline__summary-copy { gap: .75rem; }
.project-timeline__summary-copy strong { font-size: .875rem; }
.project-timeline__summary-copy span { color: var(--cds-text-secondary); font-size: .75rem; }
.project-timeline__toolbar { flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }

.project-timeline__segmented {
    min-height: 2rem;
    border: 1px solid var(--cds-border-subtle-01);
}

.project-timeline__segment {
    min-width: 2.5rem;
    height: 2rem;
    padding: 0 .75rem;
    border: 0;
    border-right: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-background);
    color: var(--cds-text-secondary);
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}

.project-timeline__segment:last-child { border-right: 0; }
.project-timeline__segment:hover { background: var(--cds-layer-hover); color: var(--cds-text-primary); }
.project-timeline__segment:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.project-timeline__segment.is-selected { background: var(--cds-layer-selected); color: var(--cds-text-primary); font-weight: 600; }

.project-timeline__viewport {
    max-width: 100%;
    overflow: auto;
    outline: none;
    scrollbar-color: var(--cds-icon-secondary) var(--cds-border-subtle-01);
}

.project-timeline__viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--cds-focus); }

.project-timeline__grid {
    --timeline-columns: 1;
    --timeline-column-width: 112px;
    display: grid;
    grid-template-columns: var(--timeline-sidebar) calc(var(--timeline-columns) * var(--timeline-column-width));
    min-width: max-content;
}

.project-timeline__corner,
.project-timeline__task,
.project-timeline__group {
    position: sticky;
    left: 0;
    z-index: 3;
    box-sizing: border-box;
    width: var(--timeline-sidebar);
    border-right: 1px solid var(--cds-border-strong-01);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-background);
}

.project-timeline__corner {
    z-index: 5;
    display: grid;
    min-height: 3.5rem;
    grid-template-columns: minmax(0, 1fr) 4rem 4.5rem;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1rem;
    background: var(--cds-layer-01);
}

.project-timeline__corner span { font-size: .75rem; font-weight: 600; }
.project-timeline__corner small { color: var(--cds-text-secondary); font-size: .6875rem; }

.project-timeline__axis {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 3.5rem;
    border-bottom: 1px solid var(--cds-border-strong-01);
    background: var(--cds-layer-01);
}

.project-timeline__tick {
    display: flex;
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: .125rem;
    padding: .5rem .75rem;
    overflow: hidden;
    border-right: 1px solid var(--cds-border-subtle-01);
}

.project-timeline__tick strong { font-size: .75rem; font-weight: 600; }
.project-timeline__tick span { color: var(--cds-text-secondary); font-size: .6875rem; }
.project-timeline__tick.is-current { background: var(--cds-notification-info); color: var(--cds-support-info); }

.project-timeline__group,
.project-timeline__group-lane {
    min-height: 2rem;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
}

.project-timeline__group {
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .375rem .75rem;
}

.project-timeline__group strong { font-size: .75rem; }
.project-timeline__group span { color: var(--cds-text-secondary); font-size: .6875rem; }
.project-timeline__group-toggle { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.project-timeline__group-toggle:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
.project-timeline__group.is-unscheduled,
.project-timeline__group-lane.is-unscheduled { border-top: 1px solid var(--cds-border-strong-01); }

.project-timeline__task {
    display: grid;
    min-height: 4rem;
    grid-template-columns: minmax(0, 1fr) 4rem 4.5rem;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
}

.project-timeline__task:hover { background: var(--cds-layer-hover); }
.project-timeline__task-copy { min-width: 0; }
.project-timeline__task-copy a:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
.project-timeline__task-copy strong,
.project-timeline__task-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-timeline__task-copy strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; font-size: .875rem; font-weight: 500; line-height: 1.5; }
.project-timeline__owner { display: flex; align-items: center; flex-direction: column; gap: .25rem; min-width: 0; }
.project-timeline__owner small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--cds-text-secondary); font-size: .6875rem; }
.project-timeline__task-copy a:hover strong { text-decoration: underline; }
.project-timeline__task-copy small { margin-top: .125rem; color: var(--cds-text-secondary); font-size: .6875rem; }

.project-timeline__status {
    padding: .125rem .375rem;
    background: var(--cds-tag-bg-gray);
    color: var(--cds-tag-text-gray);
    font-size: .6875rem;
    white-space: nowrap;
}

.project-timeline__status.is-complete { background: var(--cds-notification-success); color: var(--cds-tag-text-green); }
.project-timeline__status.is-progress { background: var(--cds-tag-bg-blue); color: var(--cds-tag-text-blue); }
.project-timeline__status.is-blocked { background: var(--cds-notification-danger); color: var(--cds-tag-text-red); }

.project-timeline__lane {
    position: relative;
    min-height: 4rem;
    overflow: hidden;
    border-bottom: 1px solid var(--cds-border-subtle-01);
    background-color: var(--cds-background);
    background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--timeline-column-width) - 1px), var(--cds-border-subtle-01) calc(var(--timeline-column-width) - 1px), var(--cds-border-subtle-01) var(--timeline-column-width));
}

.project-timeline[data-timeline-view-mode="month"] .project-timeline__lane,
.project-timeline[data-timeline-view-mode="quarter"] .project-timeline__lane {
    background-image: none;
}

.project-timeline__lane:hover,
.project-timeline__lane.is-drop-target { background-color: var(--cds-layer-hover); }

.project-timeline__bar {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    box-sizing: border-box;
    min-width: .75rem;
    height: 1.5rem;
    align-items: center;
    transform: translateY(-50%);
    border-left: 3px solid var(--cds-text-secondary);
    background: var(--cds-border-subtle-02);
    color: var(--cds-text-primary);
    font-size: .6875rem;
    font-weight: 600;
    touch-action: none;
}

.project-timeline__bar[data-timeline-interactive="true"] { cursor: grab; }
.project-timeline__bar.is-dragging { z-index: 6; cursor: grabbing; box-shadow: 0 0 0 2px var(--cds-focus); }
.project-timeline__bar.is-complete { border-color: var(--cds-tag-text-green); background: var(--cds-support-success); color: var(--cds-text-on-color); }
.project-timeline__bar.is-progress { border-color: var(--cds-button-primary-active); background: var(--cds-button-primary); color: var(--cds-text-on-color); }
.project-timeline__bar.is-blocked { border-color: var(--cds-tag-text-red); background: var(--cds-support-error); color: var(--cds-text-on-color); }
.project-timeline__bar.is-planned { border-color: var(--cds-text-secondary); background: var(--cds-layer-selected); }
.project-timeline__bar.is-open-ended { border-right: 1px dashed var(--cds-border-strong-01); }
.project-timeline__bar.is-milestone { width: 1.75rem; min-width: 1.75rem; border-left: 0; transform: translate(-50%, -50%) rotate(45deg); }
.project-timeline__bar.is-milestone .project-timeline__bar-link { transform: rotate(-45deg); }

.project-timeline__bar-link {
    display: flex;
    min-width: 0;
    height: 100%;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 0 .625rem;
    color: inherit;
    white-space: nowrap;
}

.project-timeline__bar-link:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: -2px; }

.project-timeline__handle {
    position: absolute;
    top: 0;
    z-index: 3;
    width: .75rem;
    height: 100%;
    cursor: ew-resize;
}

.project-timeline__handle.is-start { left: -.25rem; }
.project-timeline__handle.is-end { right: -.25rem; }

.project-timeline__unscheduled-card {
    position: absolute;
    top: 50%;
    left: 1rem;
    z-index: 2;
    display: flex;
    max-width: 18rem;
    align-items: center;
    gap: .5rem;
    padding: .375rem .75rem;
    transform: translateY(-50%);
    border: 1px dashed var(--cds-border-strong-01);
    background: var(--cds-layer-02);
    touch-action: none;
}

.project-timeline__unscheduled-card[data-timeline-interactive="true"] { cursor: grab; }
.project-timeline__unscheduled-card.is-dragging { cursor: grabbing; box-shadow: 0 0 0 2px var(--cds-focus); }
.project-timeline__unscheduled-card a { color: var(--cds-text-primary); font-size: .75rem; font-weight: 600; }
.project-timeline__unscheduled-card a:hover { text-decoration: underline; }
.project-timeline__unscheduled-card span { color: var(--cds-text-secondary); font-size: .6875rem; white-space: nowrap; }
.project-timeline__unscheduled-card.is-invalid { border-color: var(--cds-support-error); }

.project-timeline__today,
.project-timeline__today-line {
    position: absolute;
    top: 0;
    z-index: 4;
    width: 1px;
    height: 100%;
    background: var(--cds-button-primary);
    pointer-events: none;
}

.project-timeline__today span {
    position: absolute;
    top: .125rem;
    left: .25rem;
    padding: .0625rem .25rem;
    background: var(--cds-button-primary);
    color: var(--cds-text-on-color);
    font-size: .625rem;
    white-space: nowrap;
}

.project-timeline__today-line { z-index: 1; opacity: .55; }
.project-timeline[data-timeline-saving="true"] [data-timeline-interactive="true"] { pointer-events: none; opacity: .7; }

.project-timeline__empty {
    display: flex;
    min-height: 15rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem;
    padding: 2rem;
    color: var(--cds-text-secondary);
    text-align: center;
}

.project-timeline__empty strong { color: var(--cds-text-primary); }
.project-timeline__empty span:last-child { max-width: 28rem; color: var(--cds-text-primary); font-size: .8125rem; }

@media (max-width: 48rem) {
    .project-timeline { --timeline-sidebar: 21rem; }
    .project-timeline__summary { align-items: flex-start; flex-direction: column; }
    .project-timeline__toolbar { justify-content: flex-start; }
    .project-timeline__task,
    .project-timeline__corner { grid-template-columns: minmax(0, 1fr) 3rem 3.5rem; gap: .5rem; padding-left: .75rem; padding-right: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .project-timeline__viewport { scroll-behavior: auto; }
}

/* ── Components/Pages/WorkDesk/Ticket/TicketMgmt.razor.css ────────────────────────────── */
.ticket-list-page {
    height: auto;
    min-height: 100%;
    overflow: visible;
}

.ticket-list-page__content {
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
}

.ticket-view-toggle {
    display: flex;
    min-height: 2.5rem;
}

.ticket-view-toolbar {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--cds-border-subtle-01);
    border-bottom: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
}

.ticket-role-filter {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.ticket-scope-user-filter {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--cds-text-secondary);
    font-size: .75rem;
}

.ticket-scope-user-filter__control {
    width: 11rem;
    min-height: 2rem;
}

.ticket-view-toolbar__count {
    padding: 0 1rem;
    white-space: nowrap;
    color: var(--cds-text-secondary);
    font-size: .75rem;
}

.ticket-view-toggle__button {
    display: inline-flex;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-left: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
    color: var(--cds-icon-primary);
    cursor: pointer;
}

.ticket-view-toggle__button:hover {
    background: var(--cds-layer-hover-01, var(--cds-layer-hover));
}

.ticket-view-toggle__button.is-active {
    background: var(--cds-button-primary);
    color: var(--cds-icon-on-color, var(--cds-text-on-color));
}

.ticket-view-toggle__button:focus-visible,
.ticket-board-card__link:focus-visible,
.ticket-board-category__more:focus-visible {
    outline: 2px solid var(--cds-focus);
    outline-offset: -2px;
}

.ticket-board {
    display: flex;
    flex-direction: column;
    padding: .25rem 0 1rem;
}

.ticket-board-category {
    min-width: 0;
    padding: 1rem 0 1.5rem;
}

.ticket-board-category__header {
    padding: 0 .25rem .75rem;
}

.ticket-board-category__heading {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.ticket-board-category__heading h2 {
    margin: 0;
    color: var(--cds-text-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.ticket-board-category__count {
    display: inline-flex;
    min-width: 1.5rem;
    height: 1.5rem;
    align-items: center;
    justify-content: center;
    padding: 0 .375rem;
    border-radius: .75rem;
    background: var(--cds-layer-02);
    color: var(--cds-text-secondary);
    font-size: .75rem;
}

.ticket-board-category__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    gap: 1rem;
}

.ticket-board-category__empty {
    grid-column: 1 / -1;
    min-height: 7.5rem;
    padding: 2rem 1rem;
    background: var(--cds-layer-01);
    color: var(--cds-text-helper);
    font-size: .8125rem;
    line-height: 1.25rem;
    text-align: center;
}

.ticket-board-category__more {
    width: auto;
    min-height: 2.5rem;
    margin-top: .75rem;
}

.ticket-board-category__remaining {
    margin-left: .25rem;
    font-size: .75rem;
}

.ticket-board-card {
    width: 100%;
    height: 100%;
    min-width: 0;
    border: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-01);
}

.ticket-board-card__link {
    display: flex;
    height: 100%;
    flex-direction: column;
    color: var(--cds-text-primary);
    text-decoration: none;
}

.ticket-board-card__link:hover {
    background: var(--cds-layer-hover-01, var(--cds-layer-hover));
    color: var(--cds-text-primary);
}

.ticket-board-card__media {
    height: 9rem;
    overflow: hidden;
    border-top: 1px solid var(--cds-border-subtle-01);
    background: var(--cds-layer-02);
}

.ticket-board-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ticket-board-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .5rem;
    padding: .875rem;
}

.ticket-board-card__eyebrow,
.ticket-board-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--cds-text-secondary);
    font-size: .75rem;
}

.ticket-board-card__company {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    color: var(--cds-text-primary);
    font-size: .8125rem;
}

.ticket-board-card__company-name {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-board-card__contact {
    flex-shrink: 0;
    color: var(--cds-text-secondary);
}

.ticket-board-card__title {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--cds-text-primary);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ticket-board-card__description {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--cds-text-secondary);
    font-size: .8125rem;
    line-height: 1.25rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ticket-board-card.has-image .ticket-board-card__description {
    -webkit-line-clamp: 1;
}

.ticket-grid-participants {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.ticket-grid-participants .ticket-person__name {
    max-width: 5rem;
}

.ticket-person {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .375rem;
}

.ticket-person__role {
    color: var(--cds-text-helper);
    font-size: .6875rem;
    white-space: nowrap;
}

.ticket-person__name {
    min-width: 0;
    overflow: hidden;
    color: var(--cds-text-primary);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ticket-board-card__footer {
    min-height: 4.75rem;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border-top: 1px solid var(--cds-border-subtle-01);
    font-size: .8125rem;
}

.ticket-board-card__people,
.ticket-board-card__metadata {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.ticket-board-card__assignee .ticket-person__name {
    font-size: .8125rem;
    font-weight: 500;
}

.ticket-board-card__registrar {
    min-width: 0;
}

.ticket-board-card__request-meta {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: .25rem;
    overflow: hidden;
    color: var(--cds-text-secondary);
    font-size: .75rem;
    white-space: nowrap;
}

.ticket-board-card__request-meta > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ticket-board-card__footer-meta {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    color: var(--cds-text-secondary);
    font-size: .75rem;
}

.ticket-board-card__footer-meta > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 64rem) {
    .ticket-board-category__cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .ticket-board-category__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 42rem) {
    .ticket-board-category__cards {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ticket-board-card__link,
    .ticket-board-category__more,
    .ticket-view-toggle__button {
        transition: none;
    }
}

/* ── Components/Pages/WorkDesk/Ticket/TicketViewerMockup.razor.css ────────────────────────────── */
/* Ticket viewer styling is shared through WaveWorks.RxComponents wave-carbon-design.css. */

.ticket-processing-composer .rw-composer__input {
    min-height: 96px;
}

.ticket-cancellation-reason {
    height: 96px;
    min-height: 96px;
    resize: vertical;
}

.workdesk-avatar-image {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
}

.ticket-checklist__input {
    overflow: visible;
}

.ticket-checklist__action {
    margin-inline-start: 0.5rem;
}

@media (max-width: 40rem) {
    .ticket-checklist__create-row {
        height: auto;
        flex-direction: column;
        gap: 0.5rem;
    }

    .ticket-checklist__action {
        width: 100%;
        margin-inline-start: 0;
    }

    .ticket-checklist__action button {
        width: 100%;
    }
}
.work-item-breadcrumb { text-decoration: none; }
.work-item-breadcrumb:hover,
.work-item-breadcrumb:focus-visible { text-decoration: underline; }

/* ── Components/Pages/WorkDesk/Ticket/TicketWorkspace.razor.css ────────────────────────────── */
.ticket-header-status {

    width: 160px;

    height: 40px;

}



.ticket-header-status select {

    width: 100%;

    height: 40px;

    padding: 0 36px 0 12px;

    border: 0;

    border-bottom: 1px solid #8d8d8d;

    border-radius: 0;

    background: #f4f4f4;

    color: #161616;

    font-size: 14px;

}



.ticket-header-status select:focus {

    outline: 2px solid #0f62fe;

    outline-offset: -2px;

}



.ticket-workspace__refresh {

    width: 40px;

    height: 40px;

    flex: 0 0 40px;

}



.ticket-visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



.ticket-workspace__heading,

.ticket-workspace__main,

.ticket-workspace__aside {

    min-width: 0;

}



.ticket-workspace__grid {

    width: min(1440px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);

    gap: 24px;

    align-items: start;

}



.ticket-workspace__main {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.ticket-workspace__aside {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



.ticket-layer {

    background: #ffffff;

    border: 1px solid #e0e0e0;

    border-radius: 0;

    padding: 24px;

}



.ticket-layer--sticky {

    position: sticky;

    top: 16px;

}



.ticket-layer__heading {

    display: flex;

    justify-content: space-between;

    gap: 16px;

    padding-bottom: 16px;

    margin-bottom: 20px;

    border-bottom: 1px solid #e0e0e0;

}



.ticket-layer__heading h2 {

    margin: 0;

    font-size: 16px;

    font-weight: 600;

    letter-spacing: 0;

}



.ticket-layer__heading p {

    margin: 6px 0 0;

    color: #525252;

    font-size: 12px;

}



.ticket-segmented__button {

    min-height: 40px;

    border: 1px solid #8d8d8d;

    background: #ffffff;

    color: #161616;

    font-size: 14px;

}



.ticket-segmented__button + .ticket-segmented__button {

    border-left: 0;

}



.ticket-segmented__button.is-selected {

    background: #161616;

    color: #ffffff;

}



.ticket-search-combo,

.ticket-field .rw-combobox-container {

    width: 100%;

}





.ticket-field > span,

.ticket-role-block > span {

    color: #525252;

    font-size: 12px;

    font-weight: 500;

}



.ticket-control {

    width: 100%;

    min-height: 40px;

    border: 0;

    border-bottom: 1px solid #8d8d8d;

    border-radius: 0;

    background: #f4f4f4;

    color: #161616;

    padding: 0 12px;

    font-size: 14px;

}



.ticket-control:focus {

    outline: 2px solid #0f62fe;

    outline-offset: -2px;

}



.ticket-control:disabled {

    color: #8d8d8d;

    cursor: not-allowed;

}





.ticket-textarea {

    min-height: 112px;

    padding: 12px;

    resize: vertical;

}





.ticket-textarea--result {

    min-height: 150px;

}



.ticket-attachment-shell {

    display: flex;

    min-width: 0;

    flex-direction: column;

    gap: 8px;

}



.ticket-attachment-cover {

    display: flex;

    min-height: 32px;

    align-items: center;

    gap: 8px;

    padding: 4px 8px;

    color: var(--cds-text-primary, currentColor);

    background: var(--cds-layer-accent-01, transparent);

    border-left: 3px solid var(--cds-support-info, currentColor);

}



.ticket-attachment-cover__badge {

    flex: 0 0 auto;

    color: var(--cds-link-primary, currentColor);

    font-size: 12px;

    font-weight: 600;

}



.ticket-attachment-cover__name {

    min-width: 0;

    overflow: hidden;

    font-size: 12px;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.ticket-attachment-shell .ticket-attachment-list {

    gap: 4px !important;

}



.ticket-attachment-shell .ticket-attachment-list__item {

    padding: 8px 12px !important;

    color: var(--cds-text-primary, currentColor);

    background: var(--cds-layer-01, transparent) !important;

/*    border: 1px solid var(--cds-border-subtle-01, currentColor) !important;*/

    border: none !important;

    border-radius: 0 !important;

}



.ticket-person div span,

.ticket-role-row span {

    color: #6f6f6f;

    font-size: 12px;

}



.ticket-check {

    min-height: 36px;

    padding: 8px 12px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 13px;

}



.ticket-check + .ticket-check {

    border-top: 1px solid #e0e0e0;

}



.ticket-check input {

    width: 16px;

    height: 16px;

    accent-color: #0f62fe;

}



.ticket-check--standalone {

    padding: 4px 0 16px;

}



.ticket-actions,

.ticket-action-row {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.ticket-actions {

    flex-direction: column;

    margin-top: 8px;

}



.ticket-summary__meta {

    display: flex;

    flex-wrap: wrap;

    gap: 8px 16px;

    padding-bottom: 16px;

    margin-bottom: 20px;

    border-bottom: 1px solid #e0e0e0;

    color: #525252;

    font-size: 12px;

}



.ticket-description {

    min-height: 96px;

    font-size: 14px;

    line-height: 1.6;

    overflow-wrap: anywhere;

}



.ticket-tag-list {

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    margin-top: 16px;

}



.ticket-tag,

.ticket-status {

    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding: 2px 8px;

    font-size: 12px;

}



.ticket-tag {

    background: #e8e8e8;

    color: #393939;

}



.ticket-status--received {

    background: #e8e8e8;

    color: #393939;

}



.ticket-status--progress {

    background: #d0e2ff;

    color: #0043ce;

}



.ticket-status--hold {

    background: #fddc69;

    color: #684e00;

}



.ticket-status--done {

    background: #a7f0ba;

    color: #0e6027;

}



.ticket-status--cancelled {

    background: #ffd7d9;

    color: #a2191f;

}



.ticket-result {

    border-left: 4px solid #24a148;

}



.ticket-result--cancel {

    border-left-color: #da1e28;

}



.ticket-role-row {

    display: grid;

    grid-template-columns: minmax(90px, 120px) minmax(0, 1fr);

    gap: 12px;

    padding: 12px 0;

    border-bottom: 1px solid #e0e0e0;

}



.ticket-role-row strong {

    font-size: 13px;

    font-weight: 500;

    overflow-wrap: anywhere;

}



.ticket-role-block {

    padding-top: 20px;

}



@media (max-width: 960px) {

    .ticket-workspace__grid {

        grid-template-columns: minmax(0, 1fr);

    }



    .ticket-layer--sticky {

        position: static;

    }



}



@media (max-width: 640px) {

    .dock-left > .cds-grid > .cds-control-wrap {

        grid-column: 1 / -1;

    }



    .dock-left > .cds-grid > .cds-control-wrap:empty {

        display: none;

    }



    .radio-tile-wrap {

        flex-wrap: wrap;

        gap: 8px;

    }



    .radio-tile-wrap > .cds-radio-tile {

        flex: 1 1 150px;

        min-width: 0;

    }



    .radio-tile-wrap .cds-tile-title,

    .radio-tile-wrap .cds-text-secondary {

        word-break: keep-all;

        overflow-wrap: normal;

    }



    .ticket-workspace__header {

        min-height: 64px;

        padding: 10px 12px;

        grid-template-columns: 40px minmax(0, 1fr);

    }



    .ticket-workspace__header-actions {

        grid-column: 1 / -1;

        width: 100%;

    }



    .ticket-header-status {

        flex: 1 1 auto;

        width: auto;

    }



    .ticket-workspace__body {

        padding: 12px;

    }



    .ticket-layer {

        padding: 16px;

    }



    .ticket-form-grid--2,

    .ticket-form-grid--3,

    .ticket-form-grid--title {

        grid-template-columns: minmax(0, 1fr);

    }



    .ticket-priority-group {

        display: grid;

        grid-template-columns: minmax(0, 1fr);

    }



    .ticket-priority-option + .ticket-priority-option {

        border-left: 1px solid #8d8d8d;

        border-top: 0;

    }



    .ticket-action-row .cds-btn {

        width: 100%;

    }

}





/* 업무 유형별 indicator 체크 색상 */

.cds-radio-tile input[type="radio"]:checked + .cds-tile-content .cds-radio-indicator.bug {

    background-color: #da1e28 !important;

    border-color: #da1e28 !important;

}



.cds-radio-tile input[type="radio"]:checked + .cds-tile-content .cds-radio-indicator.error {

    background-color: #ff832b !important;

    border-color: #ff832b !important;

}



.cds-radio-tile input[type="radio"]:checked + .cds-tile-content .cds-radio-indicator.etc {

    background-color: #8a3ffc !important;

    border-color: #8a3ffc !important;

}

/* ==========================================================================
   티켓 상세(TicketViewerMockup) 전용 규칙 — 공용 CSS v2 전환 때 공용에서 빠져 팀즈로 옮김(2026-09-22).
   원본: RxComponents css/legacy/wave-carbon-design.css (팀즈 화면이 쓰는 클래스만).
   ========================================================================== */
.v2-general-textarea {
    min-height: 82px;
    resize: vertical;
}

.ticket-viewer {
    min-height: 100%;
    color: var(--cds-text-primary, #161616);
}

.teams-inline-attachments,
.teams-attachment-list {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.teams-inline-image {
    width: min(100%, 640px);
    margin: 0;
    overflow: hidden;
    background: var(--cds-layer-01, #ffffff);
    border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.teams-inline-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;
}

.teams-inline-image figcaption {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    color: var(--cds-text-secondary, #525252);
    border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    font-size: 12px;
}

.teams-inline-image figcaption > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.teams-attachment-inline,
.teams-attachment-row {
    width: 100%;
    min-width: 0;
    color: var(--cds-text-primary, #161616);
    border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
    text-align: left;
}

.teams-attachment-download-link {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    color: var(--cds-link-primary);
    background: transparent;
    border: 0;
    font: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.teams-attachment-download-link:hover {
    text-decoration: underline;
}

.teams-attachment-download-link:focus-visible {
    outline: 2px solid var(--cds-focus);
    outline-offset: 2px;
}

.ticket-viewer-attachment-thumb {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.ticket-viewer-avatar {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    align-items: center;
    justify-content: center;
    color: var(--cds-text-on-color, #ffffff);
    background: var(--cds-link-primary, #0f62fe);
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
}

.ticket-viewer-avatar--magenta {
    background: var(--cds-support-error, #da1e28);
}

.ticket-viewer-title-editor {
    width: 100%;
    min-width: 320px;
}

.ticket-viewer-task-window {
    min-height: 0;
}

.ticket-viewer-task-window__content {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
}

.ticket-viewer-task-window__intro {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticket-viewer-task-window__intro span,
.ticket-viewer-task-window__selection span {
    color: var(--cds-text-secondary, #525252);
    font-size: 12px;
}

.ticket-viewer-task-window__filters {
    display: grid;
    grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.2fr);
    gap: 16px;
}

.ticket-viewer-task-window__grid {
    position: relative;
    display: block;
    min-height: 240px;
    flex: 1 1 auto;
    border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
}

.ticket-viewer-task-window__grid > * {
    width: 100%;
}

.ticket-viewer-task-window__empty {
    position: absolute;
    z-index: 2;
    inset: 42px 0 0;
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    color: var(--cds-text-secondary, #525252);
    background: var(--cds-layer-01, #ffffff);
    text-align: center;
}

.ticket-viewer-task-window__empty strong {
    color: var(--cds-text-primary, #161616);
}

.ticket-viewer-task-window__keyboard-select {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.ticket-viewer-task-window__keyboard-select label {
    color: var(--cds-text-secondary, #525252);
    font-size: 12px;
}

.ticket-viewer-task-window__keyboard-select select {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 12px;
    color: var(--cds-text-primary, #161616);
    background: var(--cds-field-01, #f4f4f4);
    border: 0;
    border-bottom: 1px solid var(--cds-border-strong-01, #8d8d8d);
}

.ticket-viewer-task-window__keyboard-select select:focus-visible {
    outline: 2px solid var(--cds-focus, #0f62fe);
    outline-offset: -2px;
}

.ticket-viewer-task-window__selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px;
    background: var(--cds-layer-selected, #e0e0e0);
    border-left: 3px solid var(--cds-link-primary, #0f62fe);
}

.ticket-viewer-task-window__selection > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.ticket-viewer-task-window__selection [data-state="same-task-selected"] {
    color: var(--cds-support-error, #da1e28);
}

@media (max-width: 768px) {
    .teams-inline-image {
        width: 100%;
    }
    .teams-inline-image figcaption {
        align-items: flex-start;
        flex-direction: column;
    }
    .ticket-viewer-task-window__filters,
    .ticket-viewer-task-window__keyboard-select {
        grid-template-columns: minmax(0, 1fr);
    }
    .ticket-viewer-task-window__keyboard-select {
        gap: 6px;
    }
    .ticket-viewer-task-window__selection {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* 메일 쓰기(WaveMail/Mailwrite.razor) 본문 입력칸 — 공용 CSS v2 전환 때 공용에서 빠져 팀즈로 옮김(2026-09-22).
   원본: RxComponents css/legacy/wave-carbon-design.css. (Mail.razor 의 옛 Echo 채팅 블록은 주석 처리돼 렌더되지 않아 옮기지 않음) */
.base-control-bg {
    background-color: var(--cds-field-03, #F4F4F4) !important;
    border-bottom: 1px solid var(--carbon-textbox-border-bottom, #8d8d8d) !important;
}

/* 프로세스 지도는 이 캔버스만 가로 스크롤을 소유해 편집 패널이 함께 밀리지 않게 한다. */
.process-detail-content { min-width: 0; }
.process-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.process-workspace-editable { grid-template-columns: minmax(0, 1fr) 340px; }
.process-map-region, .process-editor { min-width: 0; }
.process-editor { overflow-wrap: anywhere; }
.process-map-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--cds-border-subtle-01); background: var(--cds-layer-01); }
.process-map-scroll:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
.process-map { display: block; }
.process-link { fill: none; stroke: var(--cds-border-strong-01); stroke-width: 2; }
.process-arrow { fill: var(--cds-border-strong-01); }
.process-card { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; gap: 0.125rem; padding: 0.25rem 0.5rem; color: var(--cds-text-primary); font-size: 12px; line-height: 16px; }
.process-card-selected, .process-card-selected:hover { border-color: var(--cds-border-interactive); box-shadow: inset 0 0 0 1px var(--cds-border-interactive); background: var(--cds-layer-selected); }
.process-card[draggable="true"] { cursor: grab; }
.process-drop-zone { box-sizing: border-box; height: 100%; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--cds-border-interactive); color: var(--cds-text-primary); font-size: 0.75rem; }
.process-drop-zone-active { background: var(--cds-layer-hover); outline: 2px solid var(--cds-focus); outline-offset: -2px; }
.process-move-controls { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }
.process-move-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.process-move-buttons .cds-btn { min-width: 2.5rem; padding: 0.5rem; justify-content: center; }
.process-card-removed { opacity: .65; }
.process-card-select { display: block; flex: 1; min-height: 0; text-align: start; border: 0; background: transparent; color: inherit; padding: 0; cursor: pointer; font: inherit; }
.process-card-select:focus-visible { outline: 2px solid var(--cds-focus); outline-offset: 2px; }
.process-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 16px; }
.process-card-meta, .process-card-footer { display: flex; align-items: center; gap: 0.25rem; min-width: 0; }
.process-card-number, .process-card-footer > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.process-card-meta .ticket-status { min-height: 16px; padding: 0 0.25rem; max-width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; flex-shrink: 0; }
.process-card-meta > span:last-child, .process-card-footer a { flex-shrink: 0; }
.process-card-footer { justify-content: space-between; }
.process-card-footer a { font-size: inherit; }
.process-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.process-project-filter { width: 20rem; max-width: 100%; }
.process-search { flex: 1; min-width: 0; }
.process-search-results { display: flex; flex-direction: column; gap: 0.5rem; list-style: none; padding: 0; margin: 0.75rem 0; }
.process-search-results li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; min-width: 0; }
.process-search-results button { white-space: normal; overflow-wrap: anywhere; text-align: start; }
/* 결과 한 줄에 제목·번호·상태·안내를 세로로 담으므로 공용 버튼의 고정 높이를 풀어 겹치지 않게 한다. */
.process-search-results .process-search-result { width: 100%; height: auto; min-height: 2rem; flex-direction: column; align-items: flex-start; gap: 0.125rem; padding: 0.5rem 1rem; }
.process-search-result { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
@media (max-width: 1056px) {
    .process-workspace-editable { grid-template-columns: minmax(0, 1fr); }
    .process-editor { grid-row: 1; }
}

/* 출퇴근 카드는 좁은 화면에서 세로로 쌓아 조작 영역을 유지한다. */
.attendance-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; }
.attendance-clock { font-size: 3rem; font-variant-numeric: tabular-nums; margin: 1rem 0; }
.attendance-punch { width: 100%; min-height: 3rem; justify-content: center; }
.attendance-filter { min-width: 12rem; }
.attendance-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.attendance-summary > div { padding: 1rem; }
.attendance-summary strong { display: block; font-size: 1.5rem; font-weight: 400; font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
    .attendance-cards { grid-template-columns: minmax(0, 1fr); }
    .attendance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}