/* Munkalap prioritások – sor háttérszínek a legsúlyosabb figyelmeztetés szerint.
   A recordClasses a <tr>-re teszi az osztályt, a háttér a cellákon (td) él, hogy
   ne ütközzön a Filament alapértelmezett sor-stílusaival. */

.wp-prio-danger > td {
    background-color: #fef2f2 !important; /* piros – Csúszik */
}

.wp-prio-warning > td {
    background-color: #fff7ed !important; /* narancs – Sürgős */
}

.wp-prio-soon > td {
    background-color: #fefce8 !important; /* sárga – Határidő közel */
}

/* Sötét téma */
.dark .wp-prio-danger > td {
    background-color: rgba(239, 68, 68, 0.14) !important;
}

.dark .wp-prio-warning > td {
    background-color: rgba(249, 115, 22, 0.14) !important;
}

.dark .wp-prio-soon > td {
    background-color: rgba(234, 179, 8, 0.14) !important;
}

/* ==========================================================================
   Mobil (≤767px): tömör kártya nézet.
   A Filament alapból minden mezőt egymás alá tördel (magas kártya); itt
   ezt tömör, rácsos kártyává alakítjuk. Csak a prioritási lista soraira
   hat (tr.wp-prio-row), más táblákat nem érint. Desktopon a normál,
   rendezhető tábla marad érvényben.
   ========================================================================== */
@media (max-width: 767px) {
    tr.wp-prio-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "title title"
            "proj  slack"
            "dline urg"
            "rem   est"
            "flags flags";
        column-gap: 10px;
        row-gap: 3px;
        align-items: baseline;
        padding: 12px 14px !important;
    }

    /* Cellák kinullázása – a rácsot a tr adja. */
    tr.wp-prio-row > td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        min-width: 0;
    }

    /* Alapból kicsi, szürkés label a tartalom előtt. */
    tr.wp-prio-row > td .fi-ta-cell-label {
        display: inline;
        font-size: 0.65rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        opacity: 0.6;
        margin-right: 4px;
    }

    tr.wp-prio-row > td .fi-ta-cell-content {
        display: inline;
    }

    /* 1. sor: munkalap neve, kiemelve, label nélkül.
       A szelektorokat tr.wp-prio-row > előtaggal írjuk, hogy a fenti
       általános szabálynál specifikusabbak legyenek (különben az nyerne). */
    tr.wp-prio-row > td.fi-ta-cell-name {
        grid-area: title;
    }
    tr.wp-prio-row > td.fi-ta-cell-name .fi-ta-cell-label { display: none; }
    tr.wp-prio-row > td.fi-ta-cell-name .fi-ta-cell-content {
        font-weight: 600;
        font-size: 0.95rem;
    }

    /* Slack badge – jobb oldalon, label nélkül. */
    tr.wp-prio-row > td.fi-ta-cell-slack-hours {
        grid-area: slack;
        justify-self: end;
    }
    tr.wp-prio-row > td.fi-ta-cell-slack-hours .fi-ta-cell-label { display: none; }

    /* Projekt – kisebb, szürke kontextus, label nélkül. */
    tr.wp-prio-row > td.fi-ta-cell-projekt\.name { grid-area: proj; }
    tr.wp-prio-row > td.fi-ta-cell-projekt\.name .fi-ta-cell-label { display: none; }
    tr.wp-prio-row > td.fi-ta-cell-projekt\.name .fi-ta-cell-content {
        font-size: 0.8rem;
        opacity: 0.75;
    }

    tr.wp-prio-row > td.fi-ta-cell-deadline-date { grid-area: dline; }
    tr.wp-prio-row > td.fi-ta-cell-urgency-rate  { grid-area: urg; justify-self: end; }
    tr.wp-prio-row > td.fi-ta-cell-remaining-hours { grid-area: rem; }
    tr.wp-prio-row > td.fi-ta-cell-est-dev-time  { grid-area: est; justify-self: end; }

    /* Tényleges idő mobilon elrejtve – a maradék + slack a fontos. */
    tr.wp-prio-row > td.fi-ta-cell-actual-dev-time { display: none; }

    /* Figyelmeztető badge-ek – teljes szélességben, alul, label nélkül. */
    tr.wp-prio-row > td.fi-ta-cell-alert-flags {
        grid-area: flags;
        margin-top: 4px;
    }
    tr.wp-prio-row > td.fi-ta-cell-alert-flags .fi-ta-cell-label { display: none; }

    /* Kártya háttér a teljes sorra (a rács-hézagokat is kitölti). */
    tr.wp-prio-danger  { background-color: #fef2f2 !important; }
    tr.wp-prio-warning { background-color: #fff7ed !important; }
    tr.wp-prio-soon    { background-color: #fefce8 !important; }
    .dark tr.wp-prio-danger  { background-color: rgba(239, 68, 68, 0.14) !important; }
    .dark tr.wp-prio-warning { background-color: rgba(249, 115, 22, 0.14) !important; }
    .dark tr.wp-prio-soon    { background-color: rgba(234, 179, 8, 0.14) !important; }
}