/* Zdieľaný shell pre MudDataGrid drží tabuľku na plnú šírku bez potreby opakovať ten istý host wrapper v každej feature zvlášť. */
.resido-data-grid {
    width: 100%;
}

/* Povrch zdieľaného DataGridu nemá vlastný padding, lebo odsadenie riadi priamo MudDataGrid a jeho pager. */
.resido-data-grid .resido-data-grid__surface {
    overflow: hidden;
    padding: 0;
}

    /* Toolbar zdieľaného DataGridu drží akcie pri pravom okraji a zarovnáva ich s obsahom tabuľky aj pagerom. */
    .resido-data-grid .mud-table-toolbar {
        min-height: auto;
        padding: 8px 16px 0;
    }

    /* Vnútorný layout toolbaru zaberá plnú šírku, aby sa akcie dali spoľahlivo tlačiť k pravému okraju. */
    .resido-data-grid .resido-data-grid__toolbar {
        width: 100%;
    }

/* Posledný akčný stĺpec drží detailovú šípku zarovnanú doprava jednotne vo všetkých zdieľaných gridových pohľadoch. */
.resido-data-grid .resido-data-grid__detail-cell {
    display: flex;
    justify-content: flex-end;
}

/* Klikateľné gridové riadky dostanú kurzor ruky, aby bola interaktivita čitateľná aj mimo samotnej šípky. */
.resido-data-grid .resido-data-grid__grid .mud-table-row {
    cursor: pointer;
}

/* Pri hoveri nad riadkom naznačí smer do detailu krátkym pohybom šípky doprava bez pohybu celého riadku. */
.resido-data-grid .resido-data-grid__grid .mud-table-row:hover .resido-detail-chevron__icon {
    animation: resido-detail-chevron-move-right 0.45s ease;
}

/* Na dotykových zariadeniach spustí rovnaký pohyb počas stlačenia riadku, aby interakcia ostala čitateľná aj bez hoveru. */
.resido-data-grid .resido-data-grid__grid .mud-table-row:active .resido-detail-chevron__icon {
    animation: resido-detail-chevron-move-right 0.45s ease;
}

/* Pager v päte zdieľaného DataGridu drží rovnaké odsadenie ako bunky a zostáva jednotný naprieč feature gridmi. */
.resido-data-grid .resido-data-grid__pager {
    width: 100%;
    padding: 8px 16px;
}

/* MudTooltip renderuje plávajúci obsah cez popover mimo CSS scope gridovej hlavičky, preto jeho vizuál držíme v globálnych gridových štýloch. */
.resido-grid-column-header__tooltip-popover.mud-tooltip {
    max-width: none;
    padding: 0;
    border-radius: var(--resido-radius-control-md);
    background: transparent;
    color: var(--resido-text);
    box-shadow: none;
}

/* Vnútorná karta tooltipu kopíruje ľahký povrch aplikácie a obmedzuje šírku pre krátku, dobre čitateľnú vysvetlivku. */
.resido-grid-column-header__tooltip-card {
    display: flex;
    width: 260px;
    max-width: calc(100vw - 32px);
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--resido-border-soft);
    border-radius: var(--resido-radius-control-md);
    background: var(--resido-surface);
    box-shadow: var(--resido-shadow-card-md);
    text-align: left;
    white-space: normal;
}

/* Statusové tooltipy používajú rovnaký vizuál ako ostatné tooltipy, ale šírku prispôsobujú krátkemu názvu statusu. */
.resido-status-tooltip-card {
    width: auto;
    min-width: max-content;
}

/* Nadpis tooltipu je vizuálne najsilnejšia časť a zodpovedá názvu vysvetľovaného stĺpca. */
.resido-grid-column-header__tooltip-title {
    color: var(--resido-text-strong);
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.25;
}

/* Hlavná vysvetlivka zostáva tmavá a kompaktná, aby sa dala rýchlo prečítať bez zahltenia tabuľky. */
.resido-grid-column-header__tooltip-text {
    color: var(--resido-text);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Sekundárna vysvetlivka používa tlmenejší text rovnako ako sivý doplnkový riadok v návrhu tooltipu. */
.resido-grid-column-header__tooltip-secondary-text {
    margin-top: 2px;
    color: var(--resido-text-muted);
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.35;
}

/* Posun doprava je krátky a vratný, aby naznačil otvorenie detailu bez trvalého posunu šípky. */
@keyframes resido-detail-chevron-move-right {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(3px);
    }

    50% {
        transform: translateX(1px);
    }

    75% {
        transform: translateX(4px);
    }

    100% {
        transform: translateX(0);
    }
}