/**
 * Legacy v1 tool pages — shared dark-theme compatibility layer.
 *
 * These rules intentionally have greater specificity than the page-local
 * legacy styles.  All colours come from the shared design tokens so future
 * palette changes are inherited by every tool page at once.
 */
html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: var(--color-bg);
    color: var(--color-fg);
}

/* Shared Bootstrap surfaces used by shorten, QR and PDF tools. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .list-group-item {
    background-color: var(--color-surface) !important;
    color: var(--color-fg);
    border-color: var(--color-border) !important;
}

html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] .input-group-text {
    background-color: var(--color-surface-2) !important;
    color: var(--color-fg);
    border-color: var(--color-border) !important;
}

html[data-theme="dark"] .card-title,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .form-label {
    color: var(--color-fg);
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .form-text {
    color: var(--color-fg-muted) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--color-surface-2);
    color: var(--color-fg);
    border-color: var(--color-border-strong);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-select::placeholder {
    color: var(--color-fg-subtle);
    opacity: 1;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--color-surface-2);
    color: var(--color-fg);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] #editCurrentShortKey {
    background-color: var(--color-surface) !important;
    color: var(--color-fg-muted);
    border-color: var(--color-border);
    opacity: 1;
}

/* URL shortener and QR generator. */
html[data-theme="dark"] .main-content .container {
    background-color: var(--color-surface) !important;
    color: var(--color-fg);
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .url-input-large input,
html[data-theme="dark"] .input-large input,
html[data-theme="dark"] .input-large textarea,
html[data-theme="dark"] .option-row input:not([type="color"]),
html[data-theme="dark"] .option-row select {
    background-color: var(--color-surface-2);
    color: var(--color-fg);
    border-color: var(--color-border-strong);
}

html[data-theme="dark"] .url-input-large input::placeholder,
html[data-theme="dark"] .input-large input::placeholder,
html[data-theme="dark"] .input-large textarea::placeholder,
html[data-theme="dark"] .option-row input::placeholder {
    color: var(--color-fg-subtle);
    opacity: 1;
}

html[data-theme="dark"] .url-input-large input:focus,
html[data-theme="dark"] .input-large input:focus,
html[data-theme="dark"] .input-large textarea:focus,
html[data-theme="dark"] .option-row input:focus,
html[data-theme="dark"] .option-row select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

html[data-theme="dark"] .option-row input:disabled {
    background-color: var(--color-surface) !important;
    color: var(--color-fg-muted);
    border-color: var(--color-border);
    opacity: 1;
}

html[data-theme="dark"] .options-section,
html[data-theme="dark"] .qr-result-section {
    background-color: var(--color-surface-2) !important;
    color: var(--color-fg);
    border-color: var(--color-border) !important;
}

html[data-theme="dark"] .options-section h6,
html[data-theme="dark"] .option-row label {
    color: var(--color-fg-muted);
}

html[data-theme="dark"] .member-only-notice {
    color: var(--color-danger);
}

html[data-theme="dark"] #previewImg {
    border-color: var(--color-border-strong) !important;
}

/* Keep #qrcode's page-local white canvas: QR contrast is functional. */

/* PDF tools. */
html[data-theme="dark"] .pdf-main .container {
    background-color: var(--color-surface) !important;
    color: var(--color-fg);
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .pdf-hero p,
html[data-theme="dark"] .tool-card p,
html[data-theme="dark"] .section-desc {
    color: var(--color-fg-muted) !important;
}

html[data-theme="dark"] .tool-card {
    background-color: var(--color-surface-2) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .guide-box,
html[data-theme="dark"] .notice-box {
    background-color: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-fg-muted) !important;
}

html[data-theme="dark"] .guide-box.warning {
    background-color: var(--color-warn-soft) !important;
    border-color: var(--color-warn) !important;
    color: var(--color-fg) !important;
}

html[data-theme="dark"] .support-line {
    color: var(--color-primary);
}

/* Personnel log password gate and data table. */
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .search-filter-card,
html[data-theme="dark"] .table-card {
    background: var(--color-surface) !important;
    color: var(--color-fg);
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .login-card h3 {
    color: var(--color-fg);
}

html[data-theme="dark"] .login-card p {
    color: var(--color-fg-muted);
}

html[data-theme="dark"] .login-card input[type="password"] {
    background-color: var(--color-surface-2);
    color: var(--color-fg);
    border-color: var(--color-border-strong);
}

html[data-theme="dark"] .login-card input[type="password"]::placeholder {
    color: var(--color-fg-subtle);
}

html[data-theme="dark"] .insa-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-fg);
    --bs-table-border-color: var(--color-border);
    color: var(--color-fg);
}

html[data-theme="dark"] .insa-table thead {
    background: var(--color-surface-2) !important;
}

html[data-theme="dark"] .insa-table thead th,
html[data-theme="dark"] .insa-table thead tr:first-child th {
    color: var(--color-fg);
    border-color: var(--color-border-strong);
}

html[data-theme="dark"] .insa-table thead th a {
    color: var(--color-fg);
}

html[data-theme="dark"] .insa-table thead th a:hover,
html[data-theme="dark"] .insa-table tbody td a,
html[data-theme="dark"] .insa-table tbody td strong {
    color: var(--color-primary);
}

html[data-theme="dark"] .insa-table tbody tr:nth-child(odd) td {
    background-color: var(--color-surface) !important;
}

html[data-theme="dark"] .insa-table tbody tr:nth-child(even) td {
    background-color: var(--color-surface-2) !important;
}

html[data-theme="dark"] .insa-table tbody td {
    color: var(--color-fg);
    border-color: var(--color-border) !important;
}

html[data-theme="dark"] .insa-table tbody tr:hover td {
    background-color: var(--color-primary-soft) !important;
    color: var(--color-fg) !important;
}

html[data-theme="dark"] .insa-table tbody td .position-label,
html[data-theme="dark"] #loadingIndicator,
html[data-theme="dark"] #noMoreData {
    color: var(--color-fg-muted);
}

html[data-theme="dark"] .person-number-badge {
    background-color: var(--color-surface-2);
    color: var(--color-fg);
}

html[data-theme="dark"] .person-number-badge.is-repeat {
    background-color: var(--color-warn-soft);
    color: var(--color-warn);
}

html[data-theme="dark"] .person-number-badge.is-confirmed {
    background-color: var(--color-success-soft);
    color: var(--color-success);
}

/* /chat/ embeds an external origin, so the common skin covers its shell. */
html[data-theme="dark"] .content-wrapper > div {
    background-color: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-lg) !important;
}