/* Placeholder for contenteditable elements */
[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

/* Hide elements that should be hidden when JavaScript is available */
[data-hydrate-hide] {
    display: none;
}

@media screen {
    body {
        margin: 0;
        padding: 0;
        background: var(--bg-secondary);
    }

    .stack-below-600 {
        display: flex;
        flex-direction: row;
    }

    .page-container {
        width: 100%;
        max-width: 8.5in;
        margin: 20px auto;
        padding: 0.375in;
        min-height: 0;
        background: var(--bg);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        border: 1px solid var(--border);
    }
}

@media (max-width: 600px) {
    .stack-below-600 {
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .page-container {
        padding: 12px;
    }
}

/* ── Dark mode overrides for transmittal-specific hardcoded colours ──────── */
/* Covers verify cards, table rows, path-diff, integrity cards, workflow badge */
/* and Tailwind utility classes used as attributes in template.html.           */
@media screen {
    /* Integrity verify cards */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .verify-card--ok    { background: #052e16; }
        :root:not([data-theme="light"]) .verify-card--fail  { background: #2d0c0c; }
        :root:not([data-theme="light"]) .verify-card--draft { background: #2d2305; }
        :root:not([data-theme="light"]) .verify-card--info  { background: #0c1a2e; }
    }
    [data-theme="dark"] .verify-card--ok    { background: #052e16; }
    [data-theme="dark"] .verify-card--fail  { background: #2d0c0c; }
    [data-theme="dark"] .verify-card--draft { background: #2d2305; }
    [data-theme="dark"] .verify-card--info  { background: #0c1a2e; }

    /* Per-row verify result rows in file table */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) tr.verify-match td    { background: #052e16; }
        :root:not([data-theme="light"]) tr.verify-mismatch td { background: #2d0c0c; }
        :root:not([data-theme="light"]) tr.verify-missing td  { background: #2d2305; }
        :root:not([data-theme="light"]) tr.verify-new td      { background: #0c1a2e; }
    }
    [data-theme="dark"] tr.verify-match td    { background: #052e16; }
    [data-theme="dark"] tr.verify-mismatch td { background: #2d0c0c; }
    [data-theme="dark"] tr.verify-missing td  { background: #2d2305; }
    [data-theme="dark"] tr.verify-new td      { background: #0c1a2e; }

    /* Workflow warning badge */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .workflow-badge--warn {
            background: #2d2305;
            color: #fcd34d;
            border-color: #92400e;
        }
    }
    [data-theme="dark"] .workflow-badge--warn {
        background: #2d2305;
        color: #fcd34d;
        border-color: #92400e;
    }

    /* Path diff semantic colours (verify mismatch) */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .path-diff del {
            color: #fca5a5;
            background: #2d0c0c;
        }
        :root:not([data-theme="light"]) .path-diff ins {
            color: #86efac;
            background: #052e16;
            border-bottom-color: #86efac;
        }
    }
    [data-theme="dark"] .path-diff del { color: #fca5a5; background: #2d0c0c; }
    [data-theme="dark"] .path-diff ins {
        color: #86efac;
        background: #052e16;
        border-bottom-color: #86efac;
    }

    /* Note: dark-mode overrides for .bg-white / .bg-gray-* / .text-gray-*
       / .border-gray-* and .header-names used to live here as a 17-line
       block of !important rules to fight hardcoded colors in
       transmittal/css/utilities.css. The utility classes were tokenized
       (var(--bg), var(--bg-secondary), var(--text), var(--text-muted),
       var(--border)) so the cascade now does the right thing in both
       themes without per-class overrides. .table-filter-input is unused
       (no element references it; .column-filter from shared is used
       instead) and was likewise dropped. */
}