/* ダークモード共通スタイル */
@media (prefers-color-scheme: dark) {
    /* 基本テキストと背景 */
    body {
        color: #eee;
        background-color: #222;
    }

    /* フォーム要素 */
    input[type="date"],
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    textarea,
    select,
    .form-select,
    .form-input,
    .form-textarea {
        background-color: #333 !important;
        color: #eee !important;
        border-color: #555 !important;
    }

    /* オートコンプリート対応 */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 30px #333 inset !important;
        -webkit-text-fill-color: #eee !important;
        caret-color: #eee !important;
        border-color: #555 !important;
    }

    /* セレクトボックスのオプション要素 */
    select option,
    .form-select option {
        background-color: #333 !important;
        color: #eee !important;
    }

    /* Firefox向けのセレクトボックス対応 */
    @-moz-document url-prefix() {
        select, .form-select {
            background-color: #333 !important;
            color: #eee !important;
        }

        select option, .form-select option {
            background-color: #333 !important;
            color: #eee !important;
        }
    }

    /* チェックボックス */
    input[type="checkbox"] {
        accent-color: #555;
    }

    /* テーブル要素 */
    table {
        border-color: #444;
    }

    tr, td, th {
        border-color: #444;
    }

    thead {
        background-color: #333;
        color: #eee;
    }

    tbody tr:nth-child(even) {
        background-color: #2d2d2d;
    }

    tbody tr:hover {
        background-color: #383838;
    }

    /* カード、パネル、ボックス */
    .card, .panel, .box {
        background-color: #333;
        border-color: #444;
        color: #eee;
    }

    /* ボーダー */
    .border, .border-t, .border-r, .border-b, .border-l {
        border-color: #444;
    }

    /* モーダル */
    .modal-content {
        background-color: #333;
        border-color: #444;
    }

    /* ボタン（標準的なスタイル） */
    .btn, button {
        border-color: #555;
    }

    /* Tailwind CSSのダークモードが効かない要素向けの補助クラス */
    .bg-white-dark-override {
        background-color: #333 !important;
        color: #eee !important;
    }

    .text-dark-override {
        color: #eee !important;
    }
}