/* ==========================================================================
   Skeleton loaders + toast type tints

   Reuses the @keyframes shimmer defined in enhancements.css. New variants here
   keep the same animation but match common UI shapes (table rows, cards).
   ========================================================================== */

.skeleton-row,
.skeleton-card,
.skeleton-text,
.skeleton-circle {
    background: linear-gradient(
        90deg,
        var(--border, #e5e5e5) 25%,
        var(--bg-card, #f3f4f6) 50%,
        var(--border, #e5e5e5) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-row {
    display: block;
    height: 44px;
    margin-bottom: 4px;
    border-radius: 6px;
}

.skeleton-card {
    display: block;
    height: 140px;
    margin-bottom: 12px;
    border-radius: 10px;
}

.skeleton-text {
    display: inline-block;
    height: 14px;
    width: 100%;
    vertical-align: middle;
}

.skeleton-text--sm {
    width: 30%;
}

.skeleton-text--md {
    width: 55%;
}

.skeleton-text--lg {
    width: 80%;
}

.skeleton-circle {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.skeleton-row:last-child,
.skeleton-card:last-child {
    margin-bottom: 0;
}

/* Skeleton table-row helper — paint a real <tr> with N skeleton cells.
   Use <tr class="skeleton-tr"><td colspan="N"><span class="skeleton-row"></span></td></tr>
   or place .skeleton-text inside individual <td>s for column-matched shapes. */
.skeleton-tr td {
    padding: 12px 10px;
}

body.dark-mode .skeleton-row,
body.dark-mode .skeleton-card,
body.dark-mode .skeleton-text,
body.dark-mode .skeleton-circle {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 25%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.1) 75%
    );
    background-size: 200% 100%;
}

/* ==========================================================================
   Toast type tints
   flash() reads --lifeos-toast-bg / --lifeos-toast-fg with fallbacks, so
   setting these per-type overrides cleanly without specificity battles.
   ========================================================================== */

.lifeos-toast-success {
    --lifeos-toast-bg: #047857;
    --lifeos-toast-fg: #ffffff;
}

.lifeos-toast-error {
    --lifeos-toast-bg: #b91c1c;
    --lifeos-toast-fg: #ffffff;
}

.lifeos-toast-warning {
    --lifeos-toast-bg: #b45309;
    --lifeos-toast-fg: #ffffff;
}

body.dark-mode .lifeos-toast-success {
    --lifeos-toast-bg: #065f46;
}

body.dark-mode .lifeos-toast-error {
    --lifeos-toast-bg: #991b1b;
}

body.dark-mode .lifeos-toast-warning {
    --lifeos-toast-bg: #92400e;
}

/* ==========================================================================
   Confirm modal — minimal cosmetic polish
   The dialog ships with inline styles for safety. These class hooks let pages
   override accent / spacing without touching state.js.
   ========================================================================== */

body.dark-mode .lifeos-confirm-dialog {
    background: var(--medium, #1e293b);
    color: var(--text, #f3f4f6);
}

body.dark-mode .lifeos-confirm-cancel {
    border-color: rgba(255, 255, 255, 0.18);
}