:root {
            --primary-color: #1a365d;
            --primary-hover: #2b6cb0;
            --sidebar-bg: #1a202c;
            --sidebar-hover: #2d3748;
            --bg-color: #f7fafc;
            --card-bg: #ffffff;
            --text-color: #2d3748;
            --text-muted: #718096;
            --border-color: #e2e8f0;
            --error-color: #e53e3e;
            --success-color: #38a169;
            --warning-color: #dd6b20;
            --accent-color: #3182ce;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
        }

        /* ログイン画面 */
        #loginContainer {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .login-card {
            width: 100%;
            max-width: 420px;
            background-color: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .login-header {
            background-color: var(--primary-color);
            color: #fff;
            padding: 24px;
            text-align: center;
        }

        .login-header h2 {
            font-size: 1.3rem;
            margin-bottom: 4px;
        }

        .login-body {
            padding: 28px;
        }

        .form-group {
            margin-bottom: 18px;
        }

        .form-group label {
            display: block;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 6px;
        }

        .form-control {
            width: 100%;
            padding: 10px 12px;
            font-size: 0.95rem;
            border: 1.5px solid var(--border-color);
            border-radius: 6px;
            outline: none;
        }

        .form-control:focus {
            border-color: var(--accent-color);
        }

        .btn-primary {
            width: 100%;
            background-color: var(--primary-color);
            color: #fff;
            padding: 11px;
            font-size: 0.95rem;
            font-weight: 600;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .btn-primary:hover {
            background-color: var(--primary-hover);
        }

        /* ダッシュボード構造 */
        #dashboardContainer {
            display: none;
            min-height: 100vh;
        }

        .sidebar {
            width: 260px;
            background-color: var(--sidebar-bg);
            color: #fff;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }

        .sidebar-brand {
            padding: 20px;
            font-size: 1.1rem;
            font-weight: 700;
            border-bottom: 1px solid #2d3748;
            background-color: #141923;
        }

        .user-info-badge {
            padding: 15px 20px;
            background-color: #242c3d;
            border-bottom: 1px solid #2d3748;
            font-size: 0.85rem;
        }

        .role-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 700;
            margin-top: 4px;
        }

        .role-admin { background-color: #4a5568; color: #fff; }
        .role-supervisor { background-color: #dd6b20; color: #fff; }

        .nav-menu {
            list-style: none;
            padding: 15px 0;
            flex-grow: 1;
        }

        .nav-item {
            padding: 12px 20px;
            color: #a0aec0;
            cursor: pointer;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            transition: all 0.2s;
        }

        .nav-item:hover, .nav-item.active {
            background-color: var(--sidebar-hover);
            color: #fff;
            border-left: 4px solid var(--accent-color);
        }

        .nav-item .icon {
            margin-right: 10px;
        }

        .logout-btn {
            padding: 15px 20px;
            background-color: #0f141c;
            color: #e53e3e;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            border-top: 1px solid #2d3748;
        }

        .main-content {
            flex-grow: 1;
            padding: 30px;
            overflow-y: auto;
        }

        .content-header {
            margin-bottom: 25px;
        }

        .content-header h1 {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .view-panel {
            display: none;
        }

        .view-panel.active {
            display: block;
        }

        .card {
            background-color: var(--card-bg);
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            border: 1px solid var(--border-color);
            padding: 20px;
            margin-bottom: 20px;
        }

        .table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.9rem;
        }

        .table th, .table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .table th {
            background-color: #f8fafc;
            color: #4a5568;
            font-weight: 600;
        }

        .btn-sm {
            padding: 5px 10px;
            font-size: 0.8rem;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            margin-right: 4px;
        }

        .btn-success { background-color: var(--success-color); color: #fff; }
        .btn-danger { background-color: var(--error-color); color: #fff; }
        .btn-secondary { background-color: #718096; color: #fff; }
        .btn-info { background-color: var(--accent-color); color: #fff; }
        .btn-warning { background-color: var(--warning-color); color: #fff; }

        .total-cards {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .summary-card {
            flex: 1;
            background: #f0f4f8;
            padding: 16px;
            border-radius: 6px;
            border-left: 4px solid var(--accent-color);
        }
        .summary-title {
            font-size: 0.85rem;
            color: #4a5568;
        }
        .summary-value {
            font-size: 1.6rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-top: 4px;
        }
        .number-col {
            text-align: right;
        }

        .status-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: bold;
        }
        .status-審査中 { background-color: #feebc8; color: #c05621; }
        .status-承認 { background-color: #c6f6d5; color: #22543d; }
        .status-却下 { background-color: #fed7d7; color: #9b2c2c; }

        /* モーダル */
        .modal {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background: #fff;
            padding: 24px;
            border-radius: 8px;
            width: 90%;
            max-width: 650px;
            max-height: 85vh;
            overflow-y: auto;
        }

        /* 印刷用スタイル設定 */
        @media print {
            /* 画面上の不要な要素（サイドバー、メインコンテンツ、モーダルの背景など）を非表示 */
            body * {
                visibility: hidden;
            }

            /* モーダルコンテンツとその配下のみ表示 */
            #detailModal, #detailModal * {
                visibility: visible;
            }

            /* モーダルの枠線や影、固定表示を解除して印刷レイアウトに最適化 */
            #detailModal {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: auto;
                background: transparent;
                display: block !important;
            }

            .modal-content {
                max-width: 100% !important;
                max-height: none !important;
                box-shadow: none !important;
                border: none !important;
                padding: 0 !important;
                margin: 0 !important;
                overflow: visible !important;
            }

            /* 印刷時に不要なボタン群を非表示 */
            #modalActionButtons {
                display: none !important;
            }

            /* テーブルのレイアウト崩れ防止 */
            .table {
                width: 100% !important;
                border-collapse: collapse !important;
            }
            .table th, .table td {
                border: 1px solid #000 !important;
                padding: 8px !important;
                color: #000 !important;
            }
        }

        /* ==========================================
        📱 スマホ対応
        ========================================== */

        @media (max-width: 768px) {

            /* 全体 */
            body {
                font-size: 14px;
                overflow-x: hidden;
            }

            /* メインコンテンツ */
            .main-content {
                width: 100% !important;
                margin-left: 0 !important;
                padding: 12px !important;
            }

            /* サイドバー */
            .sidebar {
                width: 100% !important;
                position: relative !important;
                height: auto !important;
            }

            /* 見出し */
            h1 {
                font-size: 1.4rem !important;
            }

            h2 {
                font-size: 1.2rem !important;
            }

            h3 {
                font-size: 1.05rem !important;
            }

            /* カード */
            .card {
                padding: 14px !important;
                margin-bottom: 12px !important;
            }

            /* フォーム */
            .form-group {
                margin-bottom: 14px !important;
            }

            label {
                font-size: 13px;
            }

            input,
            select,
            textarea {
                width: 100% !important;
                box-sizing: border-box !important;
                font-size: 16px !important;
                min-height: 44px;
            }

            /* ボタン */
            button,
            .btn,
            .btn-sm {
                min-height: 42px;
                font-size: 14px;
            }

            /* ボタンが横に並んでいる場合 */
            .button-group {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }

            /* テーブル */
            .table-container {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            table {
                min-width: 700px;
            }

            /* モーダル */
            .modal {
                padding: 10px !important;
                box-sizing: border-box;
            }

            .modal-content {
                width: 100% !important;
                max-width: none !important;
                max-height: 92vh !important;
                padding: 16px !important;
                border-radius: 10px !important;
                box-sizing: border-box;
            }

            /* モーダル内ボタン */
            .modal-content button {
                margin-bottom: 5px;
            }

            /* 横並びフォームを縦に */
            .form-row {
                display: block !important;
            }

            .form-row > * {
                width: 100% !important;
                margin-bottom: 10px;
            }

        }

        /* ==========================================
        📱 スマホ用サイドメニュー
        ========================================== */

        .mobile-menu-btn {
            display: none;
        }

        .mobile-menu-overlay {
            display: none;
        }


        @media screen and (max-width: 768px) {

            /* メイン画面をスマホいっぱいにする */
            #dashboardContainer {
                width: 100%;
                min-width: 0;
            }

            /* サイドバー */
            #dashboardContainer .sidebar {
                position: fixed !important;
                top: 0;
                left: 0;

                width: 260px !important;
                height: 100vh !important;

                z-index: 9999;

                transform: translateX(-100%);
                transition: transform 0.25s ease;

                overflow-y: auto;
            }

            /* メニューOPEN */
            #dashboardContainer .sidebar.mobile-open {
                transform: translateX(0);
            }

            /* ☰ボタン */
            .mobile-menu-btn {
                display: flex;

                position: fixed;
                top: 10px;
                left: 10px;

                width: 44px;
                height: 44px;

                z-index: 9998;

                align-items: center;
                justify-content: center;

                border: none;
                border-radius: 8px;

                background: #1a202c;
                color: white;

                font-size: 24px;
                cursor: pointer;

                box-shadow: 0 2px 8px rgba(0,0,0,0.25);
            }

            /* メニューを開いたときの背景 */
            .mobile-menu-overlay {
                position: fixed;

                inset: 0;

                background: rgba(0,0,0,0.4);

                z-index: 9998;

                display: none;
            }

            .mobile-menu-overlay.active {
                display: block;
            }

            /* メインコンテンツ */
            #dashboardContainer .main-content {
                width: 100% !important;
                margin-left: 0 !important;

                padding: 65px 12px 20px 12px !important;

                box-sizing: border-box;
            }

            /* 横幅をはみ出さない */
            #dashboardContainer .main-content * {
                max-width: 100%;
                box-sizing: border-box;
            }

            /* テーブルだけは横スクロール */
            #dashboardContainer .table-container {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

        }

        /* ==========================================
        📱 ラベル申請カード
        ========================================== */

        .application-card-list {
            display: none;
        }

        .application-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;

            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }

        .application-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            margin-bottom: 14px;
        }

        .application-card-id {
            font-weight: 700;
            color: #475569;
            font-size: 14px;
        }

        .application-card-company {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .application-card-row {
            display: flex;
            border-top: 1px solid #edf2f7;
            padding: 9px 0;
        }

        .application-card-label {
            width: 85px;
            flex-shrink: 0;

            color: #718096;
            font-size: 13px;
        }

        .application-card-value {
            flex: 1;
            font-size: 14px;
            font-weight: 500;
        }

        .application-card-actions {
            display: flex;
            gap: 8px;
            margin-top: 14px;
        }

        .application-card-actions button {
            flex: 1;
            min-height: 42px;
        }


        /* ==========================================
        📱 スマホ
        ========================================== */

        @media screen and (max-width: 768px) {

            .application-table-wrap {
                display: none;
            }

            .application-card-list {
                display: block;
            }

        }

        /* ==========================================
        👤 承認待ちユーザー カード
        ========================================== */

        .pending-user-card-list {
            display: none;
        }

        .pending-user-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;

            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .pending-user-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            margin-bottom: 12px;
        }

        .pending-user-id {
            font-size: 14px;
            font-weight: 700;
            color: #475569;
        }

        .pending-user-status {
            display: inline-block;

            padding: 4px 9px;

            border-radius: 999px;

            background: #fff3cd;
            color: #856404;

            font-size: 12px;
            font-weight: 700;
        }

        .pending-user-company {
            font-size: 17px;
            font-weight: 700;

            margin-bottom: 10px;
        }

        .pending-user-row {
            display: flex;

            border-top: 1px solid #edf2f7;

            padding: 9px 0;
        }

        .pending-user-label {
            width: 75px;
            flex-shrink: 0;

            color: #718096;
            font-size: 13px;
        }

        .pending-user-value {
            flex: 1;

            font-size: 14px;
            font-weight: 500;

            overflow-wrap: anywhere;
        }

        .pending-user-actions {
            display: flex;

            gap: 7px;

            margin-top: 13px;
        }

        .pending-user-actions button {
            flex: 1;

            min-height: 42px;
        }

        .pending-user-empty {
            text-align: center;

            padding: 40px 10px;

            color: #718096;
        }

        .pending-user-empty.error {
            color: var(--error-color);
        }


        /* ==========================================
        📱 スマホ
        ========================================== */

        @media screen and (max-width: 768px) {

            .pending-user-table-wrap {
                display: none;
            }

            .pending-user-card-list {
                display: block;
            }

        }

        /* ==========================================
        👥 登録済みユーザー カード
        ========================================== */

        .all-user-card-list {
            display: none;
        }

        .all-user-card {
            background: #fff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }

        .all-user-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .all-user-id {
            font-size: 14px;
            font-weight: 700;
            color: #475569;
        }

        .all-user-company {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .all-user-row {
            display: flex;
            border-top: 1px solid #edf2f7;
            padding: 9px 0;
        }

        .all-user-label {
            width: 75px;
            flex-shrink: 0;
            color: #718096;
            font-size: 13px;
        }

        .all-user-value {
            flex: 1;
            font-size: 14px;
            font-weight: 500;
            overflow-wrap: anywhere;
        }

        .all-user-empty {
            text-align: center;
            padding: 40px 10px;
            color: #718096;
        }

        .all-user-empty.error {
            color: var(--error-color);
        }


        /* スマホ */

        @media screen and (max-width: 768px) {

            .all-user-table-wrap {
                display: none;
            }

            .all-user-card-list {
                display: block;
            }

        }

    
        .all-user-card-actions {
            display: flex;
            gap: 8px;
            margin-top: 14px;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
        }

        .all-user-card-actions .btn-sm {
            flex: 1;
            min-height: 42px;
        }

        /* ==========================================
        出庫台帳 種類別集計
        ========================================== */

        .ledger-type-summary {
            display: grid;

            grid-template-columns:
                repeat(auto-fit, minmax(140px, 1fr));

            gap: 10px;

            margin-bottom: 15px;
        }

        .ledger-type-card {
            background: #fff;

            border: 1px solid var(--border-color);
            border-left: 4px solid var(--accent-color);

            border-radius: 8px;

            padding: 12px 14px;
        }

        .ledger-type-name {
            font-size: 13px;

            color: var(--text-muted);

            margin-bottom: 4px;
        }

        .ledger-type-count {
            font-size: 20px;

            font-weight: 700;

            color: var(--primary-color);
        }


        /* スマホ */

        @media screen and (max-width: 768px) {

            .ledger-type-summary {
                grid-template-columns:
                    repeat(2, minmax(0, 1fr));

                gap: 8px;
            }

            .ledger-type-card {
                padding: 10px;
            }

            .ledger-type-name {
                font-size: 12px;
            }

            .ledger-type-count {
                font-size: 18px;
            }
        }

        /* ==========================================
        出庫累計台帳 スマホカード
        ========================================== */

        .ledger-card-list {
            display: none;
        }

        .ledger-card {
            background: #fff;
            border: 1px solid var(--border-color);
            border-radius: 12px;

            padding: 15px;
            margin-bottom: 12px;

            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }

        .ledger-card-month {
            font-size: 13px;
            color: var(--text-muted);
            margin-bottom: 4px;
        }

        .ledger-card-company {
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 12px;

            overflow-wrap: anywhere;
        }

        .ledger-card-row {
            display: flex;

            gap: 10px;

            padding: 9px 0;

            border-top: 1px solid #edf2f7;
        }

        .ledger-card-label {
            width: 85px;
            flex-shrink: 0;

            color: var(--text-muted);

            font-size: 13px;
        }

        .ledger-card-value {
            flex: 1;

            text-align: right;

            font-size: 14px;
            font-weight: 600;

            overflow-wrap: anywhere;
        }


        /* ==========================================
        スマホ
        ========================================== */

        @media screen and (max-width: 768px) {

            /* PC台帳を隠す */
            .ledger-table-wrap {
                display: none;
            }

            /* スマホカードを表示 */
            .ledger-card-list {
                display: block;
            }

            /* 累計カードを縦並び */
            #view-ledger .total-cards {
                display: grid;
                grid-template-columns: 1fr;
                gap: 10px;
            }

            #view-ledger .summary-card {
                width: 100%;
            }

            #view-ledger .summary-value {
                font-size: 1.5rem;
            }

            /* 年月選択 */
            #view-ledger .card > div[style*="display: flex"] {
                flex-wrap: wrap;
            }

            #ledgerMonthFilter {
                width: 100% !important;
            }
        }

        /* ==========================================
        防炎材料マスタ
        ========================================== */

        .material-master-card-list {
            display: none;
        }

        .material-master-card {
            background: #fff;

            border: 1px solid var(--border-color);

            border-radius: 10px;

            padding: 14px;

            margin-bottom: 10px;
        }

        .material-master-maker {
            font-size: 17px;
            font-weight: 700;

            margin-bottom: 10px;
        }

        .material-master-row {
            display: flex;

            justify-content: space-between;

            gap: 10px;

            padding: 8px 0;

            border-top: 1px solid #edf2f7;

            font-size: 13px;
        }

        .material-master-row span {
            color: #718096;

            flex-shrink: 0;
        }

        .material-master-row b {
            text-align: right;

            overflow-wrap: anywhere;
        }

        .material-master-actions {
            display: flex;

            gap: 8px;

            margin-top: 12px;
        }

        .material-master-actions button {
            flex: 1;
        }


        @media screen and (max-width: 768px) {

            .material-master-table-wrap {
                display: none;
            }

            .material-master-card-list {
                display: block;
            }
        }

        /* =====================================================
        組合員管理 PC / スマホ表示切替
        ===================================================== */

        /* PCではテーブルを表示、カードを非表示 */
        .member-table-wrap {
            display: block;
        }

        .member-card-list {
            display: none;
        }


        /* =====================================================
        スマホ
        ===================================================== */

        @media (max-width: 768px) {

            /* PC用テーブルを消す */
            .member-table-wrap {
                display: none;
            }

            /* スマホ用カードを表示 */
            .member-card-list {
                display: block;
            }

            .member-card {
                background: #fff;
                border: 1px solid #e2e8f0;
                border-radius: 8px;
                padding: 14px;
                margin-bottom: 10px;
            }

            .member-card-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 10px;
                margin-bottom: 10px;
            }

            .member-card-header strong {
                font-size: 16px;
            }

        }


        /* ==========================================
   メール通知設定 位置修正
========================================== */

#view-notification {
    width: 100%;
}

#view-notification .content-header {
    width: 100%;
}

#view-notification .card {
    width: 100%;
    max-width: 700px;
    margin-left: 0;
    margin-right: auto;
}

/* =====================================================
   特別管理機能 子メニュー
===================================================== */

.special-parent {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-section-title {
    padding: 18px 18px 6px;
    color: #8fa3c4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 5px;
}

.special-parent-label {
    flex: 1;
}

.special-menu-arrow {
    font-size: 12px;
}


/* 子メニュー全体 */
.special-submenu {
    display: none;

    margin: 0 8px 8px 24px;

    border-left: 2px solid #475569;

    padding-left: 8px;
}

.special-submenu.open {
    display: block;
}


/* 子メニュー項目 */
.special-submenu-item {
    padding: 10px 12px;

    font-size: 13px;
    font-weight: 600;

    color: #cbd5e1;

    cursor: pointer;

    border-radius: 6px;

    margin: 3px 0;

    transition:
        background-color 0.2s,
        color 0.2s;
}


/* hover */
.special-submenu-item:hover {
    background: #334155;
    color: #ffffff;
}


/* 選択中 */
.special-submenu-item.active {
    background: #3b4a66;
    color: #ffffff;
}

/* =====================================================
   手入力 納品・請求・領収書
===================================================== */

.manual-invoice-header,
.manual-invoice-row {
    display: grid;

    grid-template-columns:
        minmax(250px, 2fr)
        80px
        80px
        120px
        55px
        55px
        45px;

    gap: 8px;

    align-items: center;
}

.manual-invoice-header {
    padding: 8px 5px;

    background: #f8fafc;

    color: #475569;

    font-size: 12px;

    font-weight: 700;

    text-align: center;
}

.manual-invoice-row {
    margin-top: 8px;
}

.manual-invoice-row input {
    width: 100%;

    height: 40px;

    border: 1px solid #dbe2ea;

    border-radius: 6px;

    padding: 7px 9px;
}

.manual-tax-check {
    display: flex;

    justify-content: center;

    align-items: center;
}

.manual-tax-check input {
    width: 20px;

    height: 20px;
}

.manual-row-delete {
    width: 40px;
    height: 40px;

    border: none;

    border-radius: 6px;

    background: #ef4444;

    color: #fff;

    cursor: pointer;
}

.manual-total-row {
    display: flex;

    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 1px solid #e2e8f0;
}

.manual-grand-total {
    font-size: 18px;

    border-top: 2px solid #334155;

    border-bottom: none;

    margin-top: 4px;

    padding-top: 12px;
}

.special-parent {
    display: flex;
    align-items: center;
    gap: 8px;
}

.special-parent-label {
    flex: 1;
}

.special-menu-arrow {
    font-size: 12px;
}

.special-submenu {
    display: none;
    margin: 0 8px 8px 34px;
    border-left: 2px solid #e2e8f0;
}

.special-submenu.open {
    display: block;
}

@media (max-width: 768px) {

    #view-special-invoices .invoice-management-table-wrap {
        display: none;
    }

    #view-special-invoices #invoiceManagementCardList {
        display: block !important;
    }

    #view-special-invoices .card {
        overflow: hidden;
    }

    #view-special-invoices input,
    #view-special-invoices select {
        width: 100%;
    }

}

/* =========================================================
   摘要マスター管理
   スマホ対応
========================================================= */

@media (max-width: 768px) {

    #invoiceDescriptionMasterOverlay {
        padding: 8px !important;
        align-items: flex-start !important;
    }

    #invoiceDescriptionMasterOverlay > div {
        width: 100% !important;
        max-height: 96vh !important;
        margin-top: 8px;
        padding: 14px !important;
        border-radius: 8px !important;
    }


    /* -----------------------------
       新規登録・編集フォーム
    ----------------------------- */

    #invoiceDescriptionMasterOverlay
    #descriptionMasterDescription,
    #invoiceDescriptionMasterOverlay
    #descriptionMasterCategory,
    #invoiceDescriptionMasterOverlay
    #descriptionMasterUnit,
    #invoiceDescriptionMasterOverlay
    #descriptionMasterPrice,
    #invoiceDescriptionMasterOverlay
    #descriptionMasterTaxType {

        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 10px;
        font-size: 16px;
    }


    /*
       JS側でフォームに指定している
       5列gridをスマホでは1列にする
    */
    #invoiceDescriptionMasterOverlay
    #descriptionMasterDescription {
        grid-column: 1 / -1;
    }


    #invoiceDescriptionMasterOverlay
    #descriptionMasterDescription,
    #invoiceDescriptionMasterOverlay
    #descriptionMasterCategory,
    #invoiceDescriptionMasterOverlay
    #descriptionMasterUnit,
    #invoiceDescriptionMasterOverlay
    #descriptionMasterPrice,
    #invoiceDescriptionMasterOverlay
    #descriptionMasterTaxType {
        min-height: 42px;
    }


    /* -----------------------------
       マスター一覧
    ----------------------------- */

    #invoiceDescriptionMasterManageList > div > div {

        grid-template-columns:
            36px minmax(0, 1fr) auto !important;

        gap: 6px !important;

        padding:
            12px 2px !important;
    }


    /*
       単位
    */
    #invoiceDescriptionMasterManageList
    > div > div > div:nth-child(3) {

        grid-column: 2;
        font-size: 13px;
        color: #718096;
    }


    /*
       金額
    */
    #invoiceDescriptionMasterManageList
    > div > div > div:nth-child(4) {

        grid-column: 2;
        font-weight: 600;
    }


    /*
       税区分・使用回数
    */
    #invoiceDescriptionMasterManageList
    > div > div > div:nth-child(5) {

        grid-column: 2;
        font-size: 12px !important;
        color: #718096;
    }


    /*
       編集・削除
    */
    #invoiceDescriptionMasterManageList
    > div > div > div:nth-child(6) {

        grid-column: 3;
        grid-row: 1 / span 4;

        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 6px !important;
    }


    #invoiceDescriptionMasterManageList
    > div > div > div:nth-child(6) button {

        padding: 7px 9px;
        white-space: nowrap;
    }


    /* ★ボタン */

    #invoiceDescriptionMasterManageList
    > div > div > button:first-child {

        align-self: start;
    }


    /* -----------------------------
       明細側 ★ ボタン
    ----------------------------- */

    .manual-description-wrap {
        width: 100%;
    }

    .manual-description-wrap
    .manual-description {

        width: 100%;
        min-width: 0;
    }

    .manual-master-button {

        min-width: 38px;
        min-height: 38px;
        font-size: 18px;
    }


    /* ★を押したときの選択リスト */

    .manual-master-list {

        left: 0 !important;
        right: auto !important;

        width:
            min(320px, calc(100vw - 30px)) !important;

        min-width: 0 !important;

        max-height: 50vh !important;
    }

    .description-master-form-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   手入力 納品・請求
   スマホ対応
========================================================= */

@media (max-width: 768px) {

    /* PC用の見出しは非表示 */
    .manual-invoice-header {
        display: none !important;
    }


    /* 明細1件をカード化 */
    .manual-invoice-row {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 8px !important;

        padding: 12px !important;
        margin-top: 12px !important;

        box-sizing: border-box !important;

        border: 1px solid #e2e8f0;
        border-radius: 8px;

        background: #fff;

        overflow: hidden;
    }


    /* 摘要は横幅いっぱい */
    .manual-description-wrap {
        grid-column: 1 / -1 !important;

        display: flex !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    .manual-description-wrap
    .manual-description {

        flex: 1 1 auto !important;

        width: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* ★マスターボタン */
    .manual-master-button {
        flex: 0 0 42px !important;

        width: 42px !important;
        min-width: 42px !important;
    }


    /* 数量・単位・単価 */
    .manual-quantity,
    .manual-unit,
    .manual-unit-price {

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        box-sizing: border-box !important;
    }


    /* 単価は1行分使う */
    .manual-unit-price {
        grid-column: 1 / -1;
    }


    /* 税区分 */
    .manual-tax-check {
        width: 100% !important;

        justify-content: flex-start !important;

        min-width: 0 !important;
    }


    .manual-tax-check input {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
    }


    /* 削除ボタン */
    .manual-row-delete {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;

        justify-self: end;
    }


    /* 明細エリアそのもの */
    #manualInvoiceItems {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;

        box-sizing: border-box !important;
    }
}

/* =========================================
   壁装ラベル
========================================= */

.wall-label-mode-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
    padding: 5px;
    background: #edf2f7;
    border-radius: 10px;
    width: fit-content;
}

.wall-label-mode-tab {
    border: 0;
    background: transparent;
    color: #4a5568;
    font-size: 15px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.15s ease;
}

.wall-label-mode-tab:hover {
    background: #ffffff;
}

.wall-label-mode-tab.active {
    background: #2c5282;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}


/* 壁装ラベル入力カード */
#wallLabelFormPanel > .card {
    border: 1px solid #d9e2ec;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(30, 41, 59, 0.05);
}


/* 基本情報 */
#wallLabelFormPanel > .card:nth-of-type(1) {
    background: #f4f8fc;
    border-left: 5px solid #3182ce;
}


/* 工事情報 */
#wallLabelFormPanel > .card:nth-of-type(2) {
    background: #f8fafc;
    border-left: 5px solid #718096;
}


/* ラベル明細 */
#wallLabelFormPanel > .card:nth-of-type(3) {
    background: #f2f9f5;
    border-left: 5px solid #38a169;
}

/* セクション見出し */
#wallLabelFormPanel h3,
#wallLabelHistoryPanel h3 {
    color: #243b53;
}


/* 入力欄をはっきり */
#wallLabelFormPanel .form-control {
    background: #ffffff;
    border: 1px solid #b8c5d1;
    border-radius: 6px;
}

#wallLabelFormPanel .form-control:focus {
    border-color: #3182ce;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.12);
    outline: none;
}


/* ラベル */
#wallLabelFormPanel label {
    display: block;
    color: #334e68;
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 5px;
}


/* 履歴側 */
#wallLabelHistoryPanel .card {
    border: 1px solid #d9e2ec;
    border-radius: 12px;
    border-left: 5px solid #2b6cb0;
}


/* スマホ */
@media (max-width: 768px) {

    .wall-label-mode-tabs {
        width: 100%;
    }

    .wall-label-mode-tab {
        flex: 1;
        padding: 10px 8px;
    }
}

/* 壁装ラベル：発行カード */
.wall-label-issue-card {
    background: #faf5ff;
    border-left: 5px solid #805ad5 !important;
}

.wall-label-setting-card {
    background: #fffaf0;
    border-left: 5px solid #dd6b20 !important;
}
.legacy-ledger-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.legacy-ledger-payment-editor {
    display: grid;
    grid-template-columns: 170px 170px minmax(140px, auto) minmax(240px, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.legacy-ledger-paid-check {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.legacy-ledger-note-field textarea {
    resize: vertical;
}

.legacy-ledger-editor-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 1100px) {
    .legacy-ledger-payment-editor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legacy-ledger-note-field,
    .legacy-ledger-editor-actions {
        grid-column: 1 / -1;
    }
}