/* ===========================================
   a-common.css - A系管理画面共通スタイル
   =========================================== */

/* ===========================================
   A系 識別ヘッダー（ログイン画面用）
   =========================================== */
.system-identifier {
 background: #2c3e50;
 color: white;
 padding: 16px 24px;
 text-align: center;
}

.system-identifier-main {
 font-size: 15px;
 font-weight: 600;
 letter-spacing: 0.5px;
 margin-bottom: 4px;
}

.system-identifier-sub {
 font-size: 12px;
 color: rgba(255, 255, 255, 0.8);
}

/* ===========================================
   ログイン画面
   =========================================== */
.login-wrapper {
 flex: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 24px;
}

.login-container {
 width: 100%;
 max-width: 460px;
}

.login-header {
 text-align: center;
 margin-bottom: 24px;
}

.system-name {
 font-size: 18px;
 font-weight: 600;
 color: #2c3e50;
 margin-bottom: 4px;
}

.system-sub {
 font-size: 12px;
 color: #666;
}

.login-card {
 background: white;
 border-radius: 8px;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 overflow: hidden;
}

.login-card-header {
 background: #34495e;
 padding: 22px 24px;
 text-align: center;
}

.login-card-title {
 font-size: 16px;
 font-weight: 600;
 color: white;
 margin-bottom: 8px;
}

.login-card-description {
 font-size: 12px;
 color: rgba(255, 255, 255, 0.85);
 line-height: 1.6;
}

.login-card-body {
 padding: 28px 24px;
}

/* 重要注意（A系専用） */
.login-warning {
 background: #e3f2fd;
 border: 1px solid #90caf9;
 border-radius: 6px;
 padding: 14px 16px;
 margin-bottom: 24px;
}

.login-warning-title {
 font-size: 13px;
 font-weight: 600;
 color: #1565c0;
 margin-bottom: 6px;
}

.login-warning-text {
 font-size: 12px;
 color: #1e3a5f;
 line-height: 1.8;
}

/* ログインフォーム */
.form-group {
 margin-bottom: 20px;
}

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

.form-input {
 width: 100%;
 padding: 12px 14px;
 border: 1px solid #ddd;
 border-radius: 6px;
 background: #fafafa;
 font-size: 14px;
}

.form-input:focus {
 outline: none;
 border-color: #3498db;
 background: white;
}

/* ログインボタン */
.login-button {
 width: 100%;
 padding: 14px;
 font-size: 15px;
 font-weight: 600;
 color: white;
 background: #3498db;
 border: none;
 border-radius: 6px;
 cursor: pointer;
 transition: background 0.2s;
}

.login-button:hover {
 background: #2f80c0;
}

.login-button:disabled {
 background: #95a5a6;
 cursor: not-allowed;
}

/* ログインメッセージ */
.login-message {
 padding: 12px 16px;
 border-radius: 6px;
 margin-bottom: 20px;
 font-size: 13px;
 line-height: 1.6;
 display: none;
}

.login-message-success {
 background: #e8f5e9;
 border: 1px solid #81c784;
 color: #2e7d32;
}

.login-message-error {
 background: #ffebee;
 border: 1px solid #ef9a9a;
 color: #c62828;
}

.login-message-warning {
 background: #fff3e0;
 border: 1px solid #ffe0b2;
 color: #e65100;
}

.login-message-info {
 background: #e3f2fd;
 border: 1px solid #90caf9;
 color: #1565c0;
}

/* ログインフッター */
.login-footer {
 text-align: center;
 margin-top: 20px;
 font-size: 11px;
 color: #888;
 line-height: 1.8;
}

/* ===========================================
   レイアウト構造
   =========================================== */
.admin-container {
 display: flex;
 min-height: 100vh;
}

/* ===========================================
   サイドバー（A系共通）
   =========================================== */
.sidebar {
 width: 220px;
 background: #2c3e50;
 color: white;
 flex-shrink: 0;
 display: flex;
 flex-direction: column;
 position: fixed;
 top: 0;
 left: 0;
 height: 100vh;
 z-index: 100;
}

.sidebar-header {
 padding: 20px 16px;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo {
 font-size: 13px;
 font-weight: 600;
 line-height: 1.4;
}

.sidebar-logo small {
 display: block;
 font-size: 11px;
 font-weight: 400;
 opacity: 0.7;
 margin-top: 4px;
}

.sidebar-nav {
 flex: 1;
 padding: 16px 0;
 overflow-y: auto;
}

.sidebar-nav-item {
 display: block;
 width: 100%;
 padding: 12px 20px;
 background: none;
 border: none;
 color: rgba(255, 255, 255, 0.7);
 font-size: 13px;
 text-align: left;
 cursor: pointer;
 transition: all 0.2s;
}

.sidebar-nav-item:hover {
 background: rgba(255, 255, 255, 0.1);
 color: white;
}

.sidebar-nav-item.active {
 background: rgba(255, 255, 255, 0.15);
 color: white;
 border-left: 3px solid #3498db;
 padding-left: 17px;
}

.sidebar-nav-item .nav-icon {
 display: inline-block;
 width: 20px;
 margin-right: 10px;
 text-align: center;
}

.sidebar-footer {
 padding: 16px;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 font-size: 11px;
 opacity: 0.6;
}

/* ===========================================
   メインエリア（A系共通）
   =========================================== */
.main-area {
 flex: 1;
 display: flex;
 flex-direction: column;
 margin-left: 220px;
 width: calc(100% - 220px);
 max-width: calc(100% - 220px);
 min-height: 100vh;
 overflow-x: hidden;
}

/* ===========================================
   ヘッダー（A系共通）
   =========================================== */
.admin-header {
 background: white;
 padding: 16px 24px;
 border-bottom: 1px solid #e0e0e0;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-shrink: 0;
 position: sticky;
 top: 0;
 z-index: 50;
}

.header-left {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.header-title {
 font-size: 18px;
 font-weight: 600;
 color: #2c3e50;
}

.header-description {
 font-size: 12px;
 color: #666;
}

.header-right {
 display: flex;
 align-items: center;
 gap: 16px;
}

.header-user {
 font-size: 13px;
 color: #666;
 display: flex;
 align-items: center;
 gap: 8px;
}

.header-user-icon {
 width: 32px;
 height: 32px;
 background: #e0e0e0;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
}

.header-user-icon svg {
 width: 18px;
 height: 18px;
 stroke: #666;
}

/* ===========================================
   コンテンツエリア（A系共通）
   =========================================== */
.content-area {
 flex: 1;
 padding: 24px;
 overflow-y: auto;
 width: 100%;
 max-width: 100%;
}

/* ===========================================
   フッター（A系共通）
   =========================================== */
.admin-footer {
 background: #fafafa;
 border-top: 1px solid #e0e0e0;
 padding: 16px 24px;
 flex-shrink: 0;
}

.footer-notice {
 font-size: 11px;
 color: #888;
 text-align: center;
 line-height: 1.8;
}

/* ===========================================
   注意文言レベル
   =========================================== */
/* Lv1: 参照専用・操作不可の説明（青系） */
.notice-lv1 {
 background: #e3f2fd;
 border: 1px solid #90caf9;
 border-radius: 8px;
 padding: 16px 20px;
 margin-bottom: 24px;
}

.notice-lv1 p {
 font-size: 13px;
 color: #1565c0;
 line-height: 1.7;
 margin: 0;
}

/* Lv2: 画面の役割説明（オレンジ系） */
.notice-lv2 {
 background: #fff3e0;
 border: 1px solid #ffe0b2;
 border-radius: 8px;
 padding: 16px 20px;
 margin-bottom: 24px;
}

.notice-lv2 p {
 font-size: 13px;
 color: #e65100;
 line-height: 1.7;
 margin: 0;
}

/* Lv3: 不可逆操作・責任発生点（赤系・強調） */
.notice-lv3 {
 background: #ffebee;
 border: 2px solid #ef9a9a;
 border-radius: 8px;
 padding: 16px 20px;
 margin-bottom: 24px;
}

.notice-lv3 p {
 font-size: 13px;
 color: #c62828;
 line-height: 1.7;
 margin: 0;
 font-weight: 500;
}

/* ===========================================
   セクションカード
   =========================================== */
.section-card {
 background: white;
 border-radius: 8px;
 margin-bottom: 20px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 overflow: hidden;
 width: 100%;
 max-width: 100%;
}

.section-header {
 background: #fafafa;
 padding: 14px 20px;
 border-bottom: 1px solid #eee;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.section-title {
 font-size: 14px;
 font-weight: 600;
 color: #2c3e50;
 display: flex;
 align-items: center;
 gap: 8px;
}

.section-title .badge {
 font-size: 10px;
 font-weight: 500;
 padding: 2px 8px;
 border-radius: 10px;
}

.section-title .badge.auto {
 background: #e3f2fd;
 color: #1565c0;
}

.section-title .badge.reference {
 background: #f3e5f5;
 color: #7b1fa2;
}

.section-body {
 padding: 20px;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

.section-note {
 background: #e3f2fd;
 border: 1px solid #90caf9;
 border-radius: 6px;
 padding: 12px 16px;
 margin-top: 16px;
 font-size: 12px;
 color: #1565c0;
 line-height: 1.6;
}

/* セクション（実費算定画面用） */
.section {
 background: white;
 border-radius: 8px;
 padding: 24px;
 margin-bottom: 20px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.section .section-title {
 font-size: 16px;
 font-weight: 600;
 color: #2c3e50;
 margin-bottom: 8px;
}

.section .section-desc {
 font-size: 13px;
 color: #666;
 line-height: 1.7;
 margin-bottom: 20px;
}

.confirm-input-section {
 background: #fffbf5;
 border: 2px solid #ffe0b2;
}

/* ===========================================
   データテーブル
   =========================================== */
.data-table {
 width: 100%;
 border-collapse: collapse;
}

.data-table th,
.data-table td {
 padding: 12px 16px;
 text-align: left;
 border-bottom: 1px solid #eee;
}

.data-table th {
 background: #fafafa;
 font-size: 12px;
 font-weight: 600;
 color: #666;
 white-space: nowrap;
}

.data-table td {
 font-size: 14px;
 color: #333;
}

.data-table tr:hover {
 background: #f8f9fa;
}

.data-table .text-right {
 text-align: right;
}

.data-table .text-center {
 text-align: center;
}

/* ===========================================
   ステータスバッジ
   =========================================== */
.status-badge {
 display: inline-block;
 padding: 4px 10px;
 border-radius: 12px;
 font-size: 11px;
 font-weight: 600;
}

.status-badge.pending {
 background: #fff3e0;
 color: #e65100;
}

.status-badge.in-progress {
 background: #e3f2fd;
 color: #1565c0;
}

.status-badge.confirmed {
 background: #e8f5e9;
 color: #2e7d32;
}

.status-badge.active {
 background: #e8f5e9;
 color: #2e7d32;
}

.status-badge.inactive {
 background: #eceff1;
 color: #607d8b;
}

.status-badge.draft {
 background: #eceff1;
 color: #607d8b;
}

/* ロックアイコン */
.lock-icon {
 color: #2e7d32;
 font-size: 14px;
}

/* 詳細リンク（参照用） */
.detail-link {
 color: #1565c0;
 font-size: 12px;
 cursor: pointer;
}

.detail-link:hover {
 text-decoration: underline;
}

/* PDFリンク */
.pdf-link {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 color: #1565c0;
 font-size: 12px;
 cursor: pointer;
 padding: 6px 12px;
 background: #e3f2fd;
 border-radius: 4px;
 transition: background 0.2s;
}

.pdf-link:hover {
 background: #bbdefb;
}

/* テーブル補足 */
.table-footer-note {
 margin-top: 16px;
 padding-top: 16px;
 border-top: 1px solid #eee;
 font-size: 12px;
 color: #888;
}

/* ===========================================
   フィルターバー
   =========================================== */
.filter-bar {
 background: white;
 border-radius: 8px;
 padding: 16px 20px;
 margin-bottom: 20px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 display: flex;
 gap: 16px;
 align-items: center;
 flex-wrap: wrap;
}

.filter-group {
 display: flex;
 align-items: center;
 gap: 8px;
}

.filter-label {
 font-size: 12px;
 color: #666;
 white-space: nowrap;
}

.filter-select {
 padding: 8px 12px;
 border: 1px solid #ddd;
 border-radius: 6px;
 font-size: 13px;
 background: white;
}

.filter-input {
 padding: 8px 12px;
 border: 1px solid #ddd;
 border-radius: 6px;
 font-size: 13px;
 width: 200px;
}

/* ===========================================
   設定バー
   =========================================== */
.settings-bar {
 background: white;
 border-radius: 8px;
 padding: 20px 24px;
 margin-bottom: 24px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 24px;
}

.setting-group {
 display: flex;
 flex-direction: column;
 gap: 6px;
}

.setting-label {
 font-size: 12px;
 font-weight: 600;
 color: #666;
}

.setting-value {
 font-size: 15px;
 font-weight: 500;
 color: #333;
}

.setting-select {
 padding: 8px 12px;
 border: 1px solid #ddd;
 border-radius: 6px;
 font-size: 14px;
 background: white;
 cursor: pointer;
}

/* ===========================================
   データグリッド
   =========================================== */
.data-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 20px;
}

.data-item {
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.data-label {
 font-size: 12px;
 color: #888;
}

.data-value {
 font-size: 20px;
 font-weight: 600;
 color: #2c3e50;
}

.data-value span {
 font-size: 13px;
 font-weight: 400;
 color: #666;
}

/* ===========================================
   算定結果サマリー
   =========================================== */
.summary-card {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color: white;
 border-radius: 8px;
 padding: 24px;
 margin-bottom: 20px;
}

.summary-card .section-title {
 color: white;
 opacity: 0.9;
 font-size: 13px;
 margin-bottom: 16px;
}

.summary-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr) auto;
 gap: 24px;
 align-items: end;
}

.summary-item {
 text-align: center;
}

.summary-item-label {
 font-size: 11px;
 opacity: 0.8;
 margin-bottom: 4px;
}

.summary-item-value {
 font-size: 18px;
 font-weight: 600;
}

.summary-total {
 text-align: center;
 padding-left: 24px;
 border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.summary-total-label {
 font-size: 12px;
 opacity: 0.9;
 margin-bottom: 4px;
}

.summary-total-value {
 font-size: 32px;
 font-weight: 700;
}

.summary-total-value span {
 font-size: 16px;
 font-weight: 400;
}

.summary-note {
 margin-top: 16px;
 padding-top: 16px;
 border-top: 1px solid rgba(255, 255, 255, 0.2);
 font-size: 12px;
 opacity: 0.9;
 text-align: center;
}

/* ===========================================
   アクションボタン
   =========================================== */
.action-bar {
 background: white;
 border-radius: 8px;
 padding: 20px 24px;
 margin-top: 24px;
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.action-group {
 display: flex;
 gap: 12px;
 justify-content: flex-end;
}

.btn {
 padding: 12px 24px;
 border-radius: 6px;
 font-size: 14px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 border: none;
}

.btn-secondary {
 background: white;
 color: #333;
 border: 1px solid #ddd;
}

.btn-secondary:hover {
 background: #f5f5f5;
}

.btn-warning {
 background: #e65100;
 color: white;
}

.btn-warning:hover {
 background: #bf360c;
}

/* ===========================================
   監査情報
   =========================================== */
.audit-info {
 background: #eceff1;
 border-radius: 8px;
 padding: 16px 20px;
 margin-top: 24px;
}

.audit-info-title {
 font-size: 12px;
 font-weight: 600;
 color: #666;
 margin-bottom: 12px;
}

.audit-info-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 16px;
}

.audit-info-item {
 font-size: 12px;
}

.audit-info-label {
 color: #888;
 margin-bottom: 2px;
}

.audit-info-value {
 color: #333;
 font-weight: 500;
}

/* ===========================================
   利用者別 確定請求額（入力画面）
   =========================================== */
.confirm-cards {
 display: flex;
 flex-direction: column;
 gap: 0;
}

/* 利用者カード全体 */
.confirm-card {
 background: #ffffff;
 border: 1px solid #e5e7eb;
 border-radius: 14px;
 padding: 18px 18px 16px;
 margin-bottom: 18px;
}

/* ヘッダー（氏名＋状態） */
.confirm-card-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 14px;
}

.confirm-user-name {
 font-size: 16px;
 font-weight: 700;
 color: #111827;
}

.confirm-user-status {
 font-size: 12px;
 font-weight: 600;
 padding: 4px 10px;
 border-radius: 999px;
 background: #e6f4ea;
 color: #137333;
}

/* 参考情報（回数・距離・参考算定額） */
.confirm-meta {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 margin-bottom: 16px;
}

.confirm-meta-item {
 background: #f9fafb;
 border: 1px solid #eef2f7;
 border-radius: 10px;
 padding: 10px 12px;
}

.confirm-meta-label {
 font-size: 11px;
 color: #6b7280;
 margin-bottom: 4px;
}

.confirm-meta-value {
 font-size: 14px;
 font-weight: 700;
 color: #111827;
}

.confirm-meta-value .muted {
 font-size: 10px;
 font-weight: 400;
 color: #9ca3af;
 margin-left: 6px;
}

/* 入力行 */
.confirm-input-row {
 display: grid;
 grid-template-columns: 380px 1fr;
 gap: 20px;
 align-items: start;
}

.confirm-input-row > div {
 display: grid;
 grid-template-rows: 24px auto auto;
 gap: 6px;
}

/* 左：確定請求額 */
.confirm-amount {
 display: flex;
 flex-direction: column;
}

.field-label {
 font-size: 12px;
 font-weight: 700;
 color: #111827;
 margin-bottom: 0;
 display: flex;
 gap: 8px;
 align-items: center;
 min-height: 24px;
}

.badge-required {
 font-size: 11px;
 font-weight: 700;
 color: #b42318;
 background: #fee4e2;
 border: 1px solid #fda29b;
 padding: 2px 8px;
 border-radius: 999px;
}

.amount-input-wrap {
 position: relative;
}

.amount-input {
 width: 100%;
 height: 60px;
 display: flex;
 align-items: center;
 border-radius: 12px;
 border: 2px solid #cbd5e1;
 padding: 0 46px 0 16px;
 font-size: 26px;
 font-weight: 900;
 text-align: right;
 color: #0f172a;
 background: #fff;
 box-sizing: border-box;
}

.amount-input:focus {
 border-color: #2563eb;
 outline: none;
 box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.amount-suffix {
 position: absolute;
 right: 14px;
 top: 50%;
 transform: translateY(-50%);
 font-size: 14px;
 font-weight: 700;
 color: #6b7280;
}

/* 右：備考 */
.confirm-memo {
 display: flex;
 flex-direction: column;
}

.memo-textarea {
 width: 100%;
 min-height: 60px;
 border-radius: 12px;
 border: 1px solid #cbd5e1;
 padding: 10px 12px;
 font-size: 14px;
 color: #111827;
 resize: vertical;
}

.memo-textarea:focus {
 border-color: #2563eb;
 outline: none;
 box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

/* 補足文 */
.confirm-note {
 margin-top: 8px;
 font-size: 12px;
 color: #6b7280;
 line-height: 1.6;
}

.note-help {
 font-size: 11px;
 color: #6b7280;
 margin-top: 4px;
}

.confirm-divider {
 margin-top: 16px;
 padding-top: 12px;
 border-top: 1px dashed #e5e7eb;
 font-size: 11px;
 color: #9ca3af;
}

/* ===========================================
   確定前 最終確認モーダル
   =========================================== */
.confirm-modal {
 position: fixed;
 inset: 0;
 background: rgba(0, 0, 0, 0.45);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 9999;
}

.confirm-modal-content {
 background: #ffffff;
 border-radius: 10px;
 padding: 24px 28px;
 width: 420px;
 max-width: 90%;
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.confirm-modal-content h3 {
 font-size: 18px;
 margin-bottom: 12px;
 color: #c62828;
}

.confirm-modal-text {
 font-size: 14px;
 line-height: 1.7;
 margin-bottom: 12px;
}

.confirm-modal-actions {
 display: flex;
 justify-content: flex-end;
 gap: 12px;
 margin-top: 20px;
}

/* ===========================================
   A系 管理者ドロップダウン（ログアウト）
   =========================================== */
.header-user.dropdown {
 position: relative;
 cursor: pointer;
}

.header-user-trigger {
 display: flex;
 align-items: center;
 gap: 8px;
 cursor: pointer;
}

.dropdown-caret {
 font-size: 10px;
 color: #999;
}

.dropdown-menu {
 position: absolute;
 right: 0;
 top: calc(100% + 6px);
 background: #ffffff;
 border: 1px solid #e0e0e0;
 border-radius: 6px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 min-width: 120px;
 display: none;
 z-index: 1000;
}

.dropdown-item {
 display: block;
 padding: 10px 14px;
 font-size: 13px;
 color: #333;
 text-decoration: none;
}

.dropdown-item:hover {
 background: #f5f5f5;
}

/* hoverで表示（JS不要） */
.header-user.dropdown:hover .dropdown-menu {
 display: block;
}

/* メニュー外枠（hover判定を切らさない） */
.header-user-menu {
 position: absolute;
 top: 100%;
 right: 0;
 display: none;
 z-index: 1000;
}

/* 見た目は inner 側で余白を作る */
.header-user-menu-inner {
 margin-top: 6px;
 background: white;
 border: 1px solid #ddd;
 border-radius: 6px;
 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 min-width: 140px;
}

.header-user-menu-inner a {
 display: block;
 padding: 10px 14px;
 font-size: 13px;
 color: #333;
 text-decoration: none;
}

.header-user-menu-inner a:hover {
 background: #f5f5f5;
}

/* hoverで表示（JS不要） */
.header-user.dropdown:hover .header-user-menu {
 display: block;
}

/* ===========================================
   テーブルラッパー（横スクロール対応）
   =========================================== */
.table-wrapper {
 width: 100%;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
 margin: 0 -1px;
 padding: 0 1px;
}

.table-wrapper .data-table {
 min-width: 600px;
 width: 100%;
}

/* section-body内のテーブルも横スクロール対応 */
.section-body {
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

/* ===========================================
   モバイルヘッダー（タブナビゲーション方式）
   =========================================== */
/* モバイル用トップバー */
.mobile-top-bar {
 display: none;
 background: #2c3e50;
 color: white;
 padding: 10px 16px;
 justify-content: space-between;
 align-items: center;
}

.mobile-top-bar-title {
 font-size: 13px;
 font-weight: 600;
}

.mobile-top-bar-sub {
 font-size: 10px;
 opacity: 0.8;
 margin-top: 2px;
}

.mobile-logout-btn {
 background: rgba(255, 255, 255, 0.15);
 color: white;
 border: none;
 padding: 6px 12px;
 border-radius: 4px;
 font-size: 12px;
 cursor: pointer;
 text-decoration: none;
}

.mobile-logout-btn:hover {
 background: rgba(255, 255, 255, 0.25);
}

/* モバイル用サブヘッダー */
.mobile-sub-header {
 display: none;
 background: #34495e;
 color: white;
 padding: 8px 16px;
 font-size: 12px;
}

/* モバイル用ナビゲーションタブ */
.mobile-nav-tabs {
 display: none;
 background: #fafafa;
 border-bottom: 1px solid #e0e0e0;
 overflow-x: auto;
 -webkit-overflow-scrolling: touch;
}

.mobile-nav-tabs-inner {
 display: flex;
 flex-wrap: wrap;
 padding: 8px;
 gap: 6px;
}

.mobile-nav-tab {
 display: inline-block;
 padding: 8px 14px;
 background: #e8e8e8;
 color: #333;
 border-radius: 4px;
 font-size: 12px;
 text-decoration: none;
 white-space: nowrap;
 transition: all 0.2s;
}

.mobile-nav-tab:hover {
 background: #d0d0d0;
}

.mobile-nav-tab.active {
 background: #2c3e50;
 color: white;
}

/* ===========================================
   レスポンシブ対応
   =========================================== */
@media screen and (max-width: 1200px) {
 .settings-bar {
  grid-template-columns: repeat(2, 1fr);
 }
 .summary-grid {
  grid-template-columns: repeat(2, 1fr);
 }
 .summary-total {
  grid-column: span 2;
  border-left: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-left: 0;
  padding-top: 16px;
  margin-top: 16px;
 }
}

@media screen and (max-width: 1024px) {
 .sidebar {
  width: 200px;
 }
 .main-area {
  margin-left: 200px;
  width: calc(100% - 200px);
  max-width: calc(100% - 200px);
 }
 .content-area {
  padding: 20px;
 }
 .section-card .section-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 }
}

@media screen and (max-width: 900px) {
 .confirm-input-row {
  grid-template-columns: 1fr;
 }
}

@media screen and (max-width: 768px) {
 /* サイドバーを完全に非表示 */
 .sidebar {
  display: none;
 }

 /* コンテナを全幅に */
 .admin-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
 }

 /* メインエリアを全幅に */
 .main-area {
  margin-left: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
 }

 /* モバイル用ヘッダー要素を表示 */
 .mobile-top-bar {
  display: flex;
 }

 .mobile-sub-header {
  display: block;
 }

 .mobile-nav-tabs {
  display: block;
 }

 /* PC用ヘッダーを非表示 */
 .admin-header {
  display: none;
 }

 /* コンテンツエリアの余白調整 */
 .content-area {
  padding: 16px;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
 }

 /* セクションカード */
 .section-card {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
 }

 /* セクションカードの余白 */
 .section-card .section-body {
  padding: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
 }

 /* テーブルラッパー強化 */
 .table-wrapper {
  margin: 0;
  padding: 0;
 }

 /* データテーブル */
 .data-table {
  min-width: 500px;
 }

 /* 設定バー */
 .settings-bar {
  grid-template-columns: 1fr;
  padding: 16px;
  gap: 16px;
 }

 /* 監査情報 */
 .audit-info-grid {
  grid-template-columns: repeat(2, 1fr);
 }

 /* フィルターバー */
 .filter-bar {
  flex-direction: column;
  align-items: stretch;
  padding: 16px;
 }

 .filter-input {
  width: 100%;
 }

 /* 注意文言 */
 .notice-lv1,
 .notice-lv2,
 .notice-lv3 {
  padding: 12px 16px;
  margin-bottom: 16px;
 }

 /* サマリーカード */
 .summary-card {
  padding: 16px;
 }

 .summary-grid {
  grid-template-columns: 1fr;
  gap: 16px;
 }

 .summary-total {
  grid-column: span 1;
  padding-top: 16px;
  margin-top: 8px;
 }

 /* アクションバー */
 .action-bar {
  padding: 16px;
 }

 .action-group {
  flex-direction: column;
 }

 .action-group .btn {
  width: 100%;
  justify-content: center;
 }

 /* 確定カード */
 .confirm-card {
  padding: 14px;
 }

 .confirm-meta {
  grid-template-columns: 1fr;
  gap: 8px;
 }

 /* セクション */
 .section {
  padding: 16px;
 }

 /* フッター */
 .admin-footer {
  padding: 12px 16px;
 }
}

@media screen and (max-width: 480px) {
 .mobile-top-bar {
  padding: 8px 12px;
 }

 .mobile-top-bar-title {
  font-size: 12px;
 }

 .mobile-top-bar-sub {
  font-size: 9px;
 }

 .mobile-nav-tabs-inner {
  padding: 6px;
  gap: 4px;
 }

 .mobile-nav-tab {
  padding: 6px 10px;
  font-size: 11px;
 }

 .content-area {
  padding: 12px;
 }

 .section-card .section-body {
  padding: 12px;
 }

 .data-table th,
 .data-table td {
  padding: 8px 10px;
  font-size: 11px;
  white-space: nowrap;
 }

 .audit-info-grid {
  grid-template-columns: 1fr;
 }

 .notice-lv1,
 .notice-lv2,
 .notice-lv3 {
  padding: 10px 12px;
  font-size: 12px;
 }

 .filter-bar {
  padding: 12px;
  gap: 10px;
 }

 .filter-select,
 .filter-input {
  font-size: 13px;
  padding: 8px 10px;
 }
}