/* ──────────────────────────────────────────────────────────
   Namespace: at-  (AbsenceTypes V2)
   Source:    HR101BL/Pages/AbsenceTypes/AbsenceTypesV2.razor
              HR101BL/Pages/AbsenceTypes/AbsenceTypeAddEditModalV2.razor
              HR101BL/Pages/AbsenceTypes/ConfirmRevertDialogV2.razor

   Scope:
   - List page chrome (.cc-screen, .cc-pagehead, .cc-filterbar,
     .cc-tablecard, .cc-pager, .cc-pill, .cc-toolbar) is provided
     by the globally-loaded redesign-competences.css /
     redesign-contract-type-list.css / redesign-departments-list.css.
     This file ONLY adds AbsenceTypes-specific atoms.
   - Popup chrome (cc-pop, .cc-pop__head/body/foot) comes from
     redesign-popup-shell.css. We layer .at-pop atoms on top.
   ────────────────────────────────────────────────────────── */

/* ── List atoms ─────────────────────────────────────────── */

.at-screen { }

.at-subcount {
    margin-left: 8px;
    font: 600 13px var(--is-font-mono);
    color: var(--is-fg-3);
    font-variant-numeric: tabular-nums;
}

/* Hidden rows — kept in the grid but visually faded so operators don't lose
   track of types they've hidden. Matches the HTML mockup's tr.is-hidden rule. */
.at-table tbody tr.at-row.is-hidden {
    background: rgba(122, 131, 149, .045);
}

.at-table tbody tr.at-row.is-hidden:hover {
    background: rgba(122, 131, 149, .08);
}

.at-table tbody tr.at-row.is-hidden .at-name__title,
.at-table tbody tr.at-row.is-hidden .at-name__title-text {
    color: var(--is-fg-3, #6b7384);
}

/* "Uključi sakrivene" filter rendered as a plain toggle button (not a dropdown).
   Mirrors the .at-pill is-on look from the mockup: light brand-blue tint + blue
   border + brand-blue-700 text when engaged. */
.cc-filterbar .cc-pill.at-pill-toggle {
    cursor: pointer;
    user-select: none;
}

.cc-filterbar .cc-pill.at-pill-toggle.is-on {
    background: var(--is-brand-blue-100, #e2f2fb);
    color: var(--is-brand-blue-700, #0273a8);
    border-color: #b9dcef;
}

.cc-filterbar .cc-pill.at-pill-toggle.is-on i {
    color: var(--is-brand-blue-700, #0273a8);
}

/* Name cell — swatch + title with INLINE badges (one row).
   Matches the HTML mockup: badges sit inside .at-name__title, which is a
   horizontal flex container. The swatch and body are vertically centered. */
.at-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.at-name__swatch {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .12);
}

.at-name__swatch--empty {
    background:
        repeating-linear-gradient(
            45deg,
            var(--is-bg-surface-3, #eef2f6) 0 4px,
            var(--is-border-1, #e6e8eb) 4px 5px);
}

.at-name__swatch.is-faded {
    opacity: .6;
}

.at-name__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
    flex: 1;
}

.at-name__title {
    font: 600 13.5px var(--is-font-sans);
    color: var(--is-fg-1, #141c32);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.at-name__title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.at-name__title.is-faded { color: var(--is-fg-3, #6b7384); }

.at-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font: 700 9.5px var(--is-font-sans);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.at-badge i { font-size: 8px; }

.at-badge--system {
    background: var(--is-info-bg, rgba(13, 143, 217, .12));
    color: var(--is-info, #0d8fd9);
    border: 1px solid rgba(13, 143, 217, .30);
}

.at-badge--modified {
    background: rgba(230, 167, 0, .12);
    color: #7a5800;
    border: 1px solid rgba(230, 167, 0, .30);
}

.at-badge--hidden {
    background: var(--is-bg-surface-3, #eef2f6);
    color: var(--is-fg-3, #6b7384);
    border: 1px solid var(--is-border-2, #e6e8eb);
}

/* Code chip */
.at-code {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--is-bg-surface-3, #eef2f6);
    color: var(--is-fg-1, #141c32);
    border: 1px solid var(--is-border-2, #e6e8eb);
    font: 700 11.5px var(--is-font-mono);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-variant-numeric: tabular-nums;
}

.at-code--empty {
    background: transparent;
    border: 0;
    color: var(--is-fg-3, #6b7384);
    font: 500 13px var(--is-font-sans);
    padding: 0;
}

/* Max days cell */
.at-days {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.at-days__num {
    font: 700 13px var(--is-font-mono);
    color: var(--is-fg-1, #141c32);
    font-variant-numeric: tabular-nums;
}

.at-days__unit {
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-fg-3, #6b7384);
}

.at-days--inf .at-days__num {
    font-size: 16px;
    color: var(--is-fg-3, #6b7384);
}

/* Requests-this-year count */
.at-count {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}

.at-count__num {
    font: 700 13px var(--is-font-mono);
    color: var(--is-fg-1, #141c32);
    font-variant-numeric: tabular-nums;
}

.at-count__unit {
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-fg-3, #6b7384);
}

.at-count.is-zero .at-count__num,
.at-count.is-zero .at-count__unit {
    color: var(--is-fg-3, #6b7384);
}

/* Action buttons */
.at-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

.at-iconbtn {
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--is-fg-2, #43505f);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, color .12s, border-color .12s;
    padding: 0;
    line-height: 1;
}

.at-iconbtn i { font-size: 13px; }

.at-iconbtn:hover {
    background: var(--is-bg-surface-3, #eef2f6);
    border-color: var(--is-border-3, #d0d6df);
}

.at-iconbtn.is-edit:hover {
    background: var(--is-info-bg, rgba(13, 143, 217, .10));
    color: var(--is-info, #0d8fd9);
    border-color: rgba(13, 143, 217, .35);
}

.at-iconbtn.is-show:hover,
.at-iconbtn.is-hide:hover {
    background: var(--is-bg-surface-3, #eef2f6);
    color: var(--is-fg-1, #141c32);
    border-color: var(--is-border-3, #d0d6df);
}

.at-iconbtn.is-danger:hover {
    background: var(--is-danger-bg, rgba(217, 44, 44, .10));
    color: var(--is-danger, #d92c2c);
    border-color: rgba(217, 44, 44, .35);
}

.at-iconbtn.is-warn:hover {
    background: rgba(230, 167, 0, .14);
    color: var(--is-warning, #d18000);
    border-color: rgba(230, 167, 0, .40);
}

/* ── Card layout (tablet ≤1199px — shared cc-cards-wrap toggle from
   redesign-competences.css hides the desktop table and shows .at-cards) ─ */
.at-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.at-card {
    background: #fff;
    border: 1px solid var(--is-border-1, #e5e5ea);
    border-radius: var(--is-radius-md, 10px);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color .12s, box-shadow .12s;
}

.at-card:hover {
    border-color: var(--is-border-2, #d1d1d6);
    box-shadow: var(--is-shadow-1, 0 1px 2px rgba(20, 28, 50, .05));
}

.at-card.is-hidden {
    background: rgba(122, 131, 149, .045);
}

.at-card.is-hidden .at-name__title,
.at-card.is-hidden .at-name__title-text {
    color: var(--is-fg-3, #6b7384);
}

.at-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px dashed var(--is-border-1, #e5e5ea);
}

.at-card__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    padding: 12px;
}

.at-card__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.at-card__field-label {
    font: 600 10px var(--is-font-sans);
    color: var(--is-fg-3, #6b7384);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.at-card__field-value {
    font: 500 12.5px var(--is-font-sans);
    color: var(--is-fg-1, #1a1a1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.at-card__foot {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px dashed var(--is-border-1, #e5e5ea);
    background: var(--is-bg-surface-3, #f2f3f5);
}

@media (max-width: 600px) {
    .at-card__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px 12px;
    }
    .at-card__field-value .at-days,
    .at-card__field-value .at-count,
    .at-card__field-value .at-code {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 420px) {
    .at-card__meta { grid-template-columns: 1fr !important; }
}

/* Empty state */
.at-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 20px;
    color: var(--is-fg-3, #6b7384);
    text-align: center;
}

.at-empty__icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--is-bg-surface-3, #eef2f6);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--is-fg-3, #6b7384);
    font-size: 22px;
    margin-bottom: 4px;
}

.at-empty h3 {
    margin: 0;
    font: 700 14.5px var(--is-font-sans);
    color: var(--is-fg-1, #141c32);
}

.at-empty p {
    margin: 0;
    font: 500 12.5px var(--is-font-sans);
}

/* ── Popup ─────────────────────────────────────────────── */

.at-pop-scrim {
    position: fixed;
    inset: 0;
    background: rgba(20, 28, 50, .48);
    z-index: 10030;
    animation: at-pop-fade .15s ease;
}

.at-pop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10040;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 64px rgba(20, 28, 50, .28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
    animation: at-pop-scale .18s ease;
}

.at-pop--lg {
    width: min(920px, 95vw);
    max-height: 92vh;
}

.at-pop__body {
    padding: 18px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Override popup-shell defaults — AbsenceTypes V2 keeps the chrome white
   (header gradient + footer surface-3 are removed). Scoped to .at-pop only. */
.at-pop .cc-pop__head,
.at-pop.at-pop__head,
.at-pop > .at-pop__head,
.at-pop > .cc-pop__head {
    background: #fff !important;
}

.at-pop .cc-pop__foot,
.at-pop > .at-pop__foot,
.at-pop > .cc-pop__foot {
    background: #fff !important;
}

/* Identity-line subtitle sits flush against the header bottom border — no
   trailing margin. */
.at-pop .cc-pop__head-sub {
    margin-bottom: 0;
}

.at-pop__head h2 .at-hbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font: 700 10.5px var(--is-font-sans);
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

.at-pop__head h2 .at-hbadge i { font-size: 9px; }

.at-hbadge--sys {
    background: var(--is-info-bg, rgba(13, 143, 217, .12));
    color: var(--is-info, #0d8fd9);
}

.at-hbadge--mod {
    background: rgba(230, 167, 0, .14);
    color: var(--is-warning, #d18000);
}

/* Section header (uppercase label with divider line) */
.at-section {
    margin-top: 18px;
}

.at-section:first-child {
    margin-top: 0;
}

.at-section-label {
    font: 600 11px var(--is-font-sans);
    color: var(--is-fg-3, #6b7384);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.at-section-label i { font-size: 10px; color: var(--is-fg-3); }

.at-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--is-border-1, #e6e8eb);
    margin-left: 4px;
}

.at-section-counter {
    background: var(--is-bg-surface-3, #eef2f6);
    color: var(--is-fg-2, #43505f);
    border: 1px solid var(--is-border-2, #e6e8eb);
    padding: 2px 8px;
    border-radius: 999px;
    font: 600 10.5px var(--is-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    text-transform: none;
    margin-left: 4px;
}

/* Fields */
.at-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.at-field__label {
    font: 600 11.5px var(--is-font-sans);
    color: var(--is-fg-2, #43505f);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 2px 0;
}

.at-field__label .at-req {
    color: var(--is-danger, #d92c2c);
    font-weight: 700;
}

.at-field__label .at-help {
    color: var(--is-fg-3, #6b7384);
    font-size: 11px;
    cursor: default;
}

.at-field__label .at-field__icon {
    color: var(--is-fg-3, #6b7384);
    font-size: 11px;
}

.at-field__label .at-field__lock {
    color: var(--is-warning, #d18000);
    font-size: 11px;
    margin-left: auto;
}

.at-field__hint {
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-fg-3, #6b7384);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.at-field__hint i { font-size: 11px; }

.at-field__hint--err {
    color: var(--is-danger, #d92c2c);
}

.at-field__hint--lock {
    color: var(--is-warning, #d18000);
}

/* Inputs */
.at-input {
    height: 36px;
    border: 1px solid var(--is-border-3, #d0d6df);
    border-radius: 6px;
    padding: 0 10px;
    font: 500 13.5px var(--is-font-sans);
    color: var(--is-fg-1, #141c32);
    background: #fff;
    transition: border-color .12s, box-shadow .12s;
}

.at-input:focus {
    outline: 0;
    border-color: var(--is-action-blue, #0273a8);
    box-shadow: 0 0 0 3px rgba(2, 115, 168, .12);
}

.at-input.is-invalid {
    border-color: var(--is-danger, #d92c2c);
    box-shadow: 0 0 0 3px rgba(217, 44, 44, .10);
}

.at-input:disabled {
    background: var(--is-bg-surface-3, #eef2f6);
    color: var(--is-fg-3, #6b7384);
    cursor: not-allowed;
}

.at-input--mono {
    font: 500 13.5px var(--is-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Grid layouts */
.at-grid {
    display: grid;
    gap: 12px;
}

.at-grid--name-code {
    grid-template-columns: 2fr 1fr;
}

.at-grid--three {
    grid-template-columns: 1fr 1fr 1fr;
}

.at-grid--2col {
    grid-template-columns: 1fr 1fr;
}

.at-grid--toggles {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 720px) {
    .at-grid--name-code,
    .at-grid--three,
    .at-grid--2col,
    .at-grid--toggles {
        grid-template-columns: 1fr;
    }
}

/* Color picker atom — mirrors the JobRoleDetailsV2 jr-color implementation
   1:1 (swatch + uppercase hex input + SfColorPicker on the right). All the
   Syncfusion internal overrides are scoped under .at-color so other pickers
   in the app stay untouched. */
.at-color {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    border: 1px solid var(--is-border-3, #C6C6CC);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
    padding: 4px 10px;
}

.at-color:focus-within {
    border-color: var(--is-action-blue, #007BFF);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
}

.at-color.is-invalid {
    border-color: var(--is-danger, #d92c2c);
    box-shadow: 0 0 0 3px rgba(217, 44, 44, .12);
}

.at-color__swatch {
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, .12);
    flex-shrink: 0;
}

.at-color__hex {
    flex: 1;
    border: 0;
    outline: 0;
    font: 600 12.5px var(--is-font-mono, "JetBrains Mono", monospace);
    color: var(--is-fg-1, #1A1A1F);
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    background: transparent;
    min-width: 0;
}

.at-color .e-colorpicker-wrapper,
.at-color .e-split-btn-wrapper { height: 26px; }

.at-color .e-colorpicker-wrapper .e-input-group,
.at-color .e-colorpicker-wrapper .e-split-btn-wrapper {
    border: 0;
    background: transparent;
}

.at-color .e-colorpicker-wrapper button.e-dropdown-btn {
    height: 26px;
    width: 26px;
    border: 1px solid var(--is-border-2, #D1D1D6);
    border-radius: var(--is-radius-sm, 6px);
    background: #fff;
}

/* Syncfusion internal alignment fixes — scoped to .at-color */
.at-color .e-btn-icon.e-selected-color { top: -3px !important; }
.at-color .e-btn-icon.e-icons.e-caret { margin-top: -15px; }

/* Toggle rows */
.at-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--is-border-2, #e6e8eb);
    border-radius: 8px;
    background: #fff;
    transition: background .12s, border-color .12s;
}

.at-toggle-row.is-on {
    background: rgba(2, 115, 168, .04);
    border-color: rgba(2, 115, 168, .25);
}

.at-toggle-row.is-disabled {
    opacity: .65;
    background: var(--is-bg-surface-3, #eef2f6);
}

.at-toggle-row.is-warn {
    background: rgba(230, 167, 0, .08);
    border-color: rgba(230, 167, 0, .35);
}

.at-toggle-row__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.at-toggle-row__lbl {
    font: 600 13px var(--is-font-sans);
    color: var(--is-fg-1, #141c32);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.at-toggle-row__warn-icon {
    color: var(--is-warning, #d18000);
    font-size: 12px;
}

.at-toggle-row__sub {
    font: 500 11.5px var(--is-font-sans);
    color: var(--is-fg-3, #6b7384);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.at-toggle-row__sub-icon {
    font-size: 10px;
    color: var(--is-warning, #d18000);
}

/* Toggle switch */
.at-switch {
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid var(--is-border-3, #d0d6df);
    background: #fff;
    position: relative;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    padding: 0;
}

.at-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--is-fg-3, #6b7384);
    border-radius: 50%;
    transition: left .15s, background .15s;
}

.at-switch.is-on {
    background: var(--is-action-blue, #0273a8);
    border-color: var(--is-action-blue, #0273a8);
}

.at-switch.is-on::after {
    left: 18px;
    background: #fff;
}

.at-switch:disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* Banner */
.at-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font: 500 12.5px var(--is-font-sans);
    line-height: 1.5;
}

.at-banner i {
    margin-top: 2px;
    flex-shrink: 0;
    font-size: 13px;
}

.at-banner--info {
    background: rgba(13, 143, 217, .08);
    color: var(--is-fg-1, #141c32);
    border: 1px solid rgba(13, 143, 217, .25);
}

.at-banner--info i {
    color: var(--is-info, #0d8fd9);
}

/* Add shift button — dashed brand-blue border */
.at-add-shift {
    margin-bottom: 10px;
    padding: 8px 14px;
    border: 1px dashed var(--is-action-blue, #0273a8);
    border-radius: 6px;
    background: transparent;
    color: var(--is-action-blue, #0273a8);
    font: 600 12px var(--is-font-sans);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .12s;
}

.at-add-shift i { font-size: 11px; }

.at-add-shift:hover {
    background: rgba(2, 115, 168, .08);
}

/* Shifts list */
.at-shifts {
    border: 1px solid var(--is-border-2, #e6e8eb);
    border-radius: 8px;
    overflow: hidden;
}

.at-shifts__head,
.at-shifts__row,
.at-shifts__total {
    display: grid;
    /* Three rounds of 5% redistribution — Ukupno accumulates the freed-up space
       so the numeric input + its placeholder have more breathing room:
       - Projekat: 2.5 → 2.375 (5% smaller)
       - Tip sata: 2.0 → 1.9 → 1.805 (cumulative 10%-ish smaller)
       - Ukupno:   1.0 → 1.05 → 1.1 → 1.155 (cumulative ~15% larger). */
    grid-template-columns: 2.375fr 1.805fr 1.2fr 1.2fr 1.155fr 50px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
}

.at-shifts__head {
    background: var(--is-bg-surface-3, #eef2f6);
    border-bottom: 1px solid var(--is-border-2, #e6e8eb);
}

.at-shifts__head .at-shifts__col {
    font: 600 10.5px var(--is-font-sans);
    color: var(--is-fg-3, #6b7384);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.at-shifts__row {
    border-bottom: 1px solid var(--is-border-1, #f0f2f5);
}

.at-shifts__row:last-of-type {
    border-bottom: 0;
}

.at-shifts__col--actions {
    text-align: right;
}

/* Compact form controls inside shift rows */
.at-shifts__row .e-input-group,
.at-shifts__row .e-input-group .e-input,
.at-shifts__row .e-ddl,
.at-shifts__row input.e-input,
.at-shifts__row .e-numeric input.e-input {
    height: 30px !important;
    font: 500 12.5px var(--is-font-sans) !important;
}

.at-shifts__col--num input.e-input,
.at-shifts__col--time input.e-input {
    font: 700 12.5px var(--is-font-mono) !important;
    font-variant-numeric: tabular-nums !important;
}

.at-shifts__total {
    background: rgba(2, 115, 168, .06);
    border-top: 2px solid var(--is-action-blue, #0273a8);
    padding: 8px 12px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.at-shifts__total-lbl {
    font: 700 12px var(--is-font-sans);
    color: var(--is-action-blue, #0273a8);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.at-shifts__total-val {
    font: 800 13.5px var(--is-font-mono);
    color: var(--is-action-blue, #0273a8);
    font-variant-numeric: tabular-nums;
}

.at-shifts__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 28px 14px;
    border: 1px dashed var(--is-border-3, #d0d6df);
    border-radius: 8px;
    background: var(--is-bg-surface-3, #eef2f6);
    color: var(--is-fg-3, #6b7384);
    text-align: center;
    font: 500 12.5px var(--is-font-sans);
}

.at-shifts__empty i { font-size: 18px; }

/* ── Multi-select chip overrides (scoped to .at-pop) ───── */
/* Match brand-blue chip styling from V2 ContractType pattern. */

html body div.at-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips {
    background: rgba(4, 148, 218, .16) !important;
    border: 1px solid #0273a8 !important;
    border-radius: 999px !important;
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html body div.at-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chipcontent {
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    font: 600 12px var(--is-font-sans, "Plus Jakarta Sans", system-ui, sans-serif) !important;
}

html body div.at-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close,
html body div.at-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close::before {
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

html body div.at-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close:hover,
html body div.at-pop div.e-multi-select-wrapper span.e-chips-collection span.e-chips span.e-chips-close:hover::before {
    background: rgba(4, 148, 218, .20) !important;
    color: #0273a8 !important;
    -webkit-text-fill-color: #0273a8 !important;
}

/* Disabled multi-select state — visually mute when VisibleToAll is ON */
html body div.at-pop div.e-multi-select-wrapper.e-disabled {
    opacity: .55;
    background: var(--is-bg-surface-3, #eef2f6);
}

/* Numeric font on TotalHours / time inputs in the popup */
html body div.at-pop input.e-numeric,
html body div.at-pop .e-time-wrapper input.e-input {
    font-variant-numeric: tabular-nums !important;
}

/* ── Animations ────────────────────────────────────────── */

@keyframes at-pop-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes at-pop-scale {
    from { transform: translate(-50%, -50%) scale(0.96); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1);    opacity: 1; }
}

@media (max-width: 600px) {
    .at-pop {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        top: 0;
        left: 0;
        transform: none;
    }

    @keyframes at-pop-scale {
        from { transform: none; opacity: 0; }
        to   { transform: none; opacity: 1; }
    }
}