/*
 * 【主要セクション】
 * 1. 基本設定・リセット
 * 2. サイドバーナビゲーション
 * 3. トップバー
 * 4. メインコンテンツ
 * 5. フォーム要素
 * 6. ダッシュボード（統計カード、アクションボタン）
 * 7. テーブルスタイル
 * 8. モバイルレスポンシブ（@media queries）
 * 
 * 【カラーパレット】
 * - プライマリー: #2196F3（青）
 * - 成功: #4CAF50（緑）
 * - 警告: #FF9800（オレンジ）
 * - 危険: #F44336（赤）
 * - 情報: #9C27B0（紫）
 */

/*基本設定とリセット*/
body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; 
    margin: 0; 
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    color: #1a1a1a;
    min-height: 100vh;
}

/* 数値入力のスピンボタン非表示 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* アラートメッセージ */
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; }

/* サイドバーナビゲーション（常に表示） */
   .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 210px;
    height: 100vh;
    background: linear-gradient(180deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    color: #ffffff;
    z-index: 1000;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
}

.sidebar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
}

.sidebar-brand {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.sidebar-nav {
    padding: 1rem 0;
    position: relative;
    z-index: 2;
}

.sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sidebar-nav li {
    margin: 0;
    position: relative;
}

.sidebar-nav li.menu-section-title {
    padding: 1rem 1.5rem 0.5rem;
    margin-top: 1rem;
    position: relative;
    z-index: 2;
}

.sidebar-nav li.menu-section-title:first-child {
    margin-top: 0;
}

.sidebar-nav li.menu-section-title span {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-nav li a,
.sidebar-logout-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1rem 1.5rem;
    color: #ffffff;
    text-decoration: none;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    position: relative;
    z-index: 2;
}

.sidebar-nav li a svg,
.sidebar-logout-button svg {
    flex-shrink: 0;
}

.sidebar-nav li a:hover,
.sidebar-logout-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-logout {
    margin-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 0.5rem;
}

.sidebar-logout form {
    margin: 0;
}

/* 旧ナビゲーションバーは非表示 */
.navbar,
.brand-title,
.navbar-links,
.toggle-button,
.navbar-overlay {
    display: none;
}

/* トップバー */
.topbar {
    position: fixed;
    top: 0;
    left: 210px;
    right: 0;
    height: 60px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 998;
}

.topbar-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.topbar-title a {
    color: inherit;
    text-decoration: none;
}

.topbar-title a:hover {
    text-decoration: none;
}

/* モバイル用ログアウト */
.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* メイン */
.main-content {
    margin-top: 60px;
    margin-left: 210px;
    padding: 20px;
    min-height: calc(100vh - 60px);
}

/* 共通コンテナ */
.container, .admin-container, .form-container, .eval-container, .view-container, .input-container {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid #e0e0e0;
}

.admin-container { max-width: 1200px; }
.view-container, .edit-work-log-container { max-width: 1400px; }
.view-log-container { max-width: none; width: 100%; }
.table-page-container { max-width: none; width: 100%; }
.form-container { max-width: 500px; }
.eval-container { max-width: 800px; }
.input-container { max-width: min(90vw, 1000px); }

h1 { 
    text-align: center; 
    color: #000000;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* フォームとボタン */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    color: white;
    border: none;
    border-radius: 6px;
    text-decoration: none;
    margin-right: 8px;
    font-size: 0.95rem;
    cursor: pointer;
}

/* 幅を占有するユーティリティ */
.btn-block { display: flex; width: 100%; }
.btn-small { padding: 4px 8px; font-size: 0.85rem; border-radius: 4px; }

.btn-primary { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: #ffffff; box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3); }
.btn-primary:hover { background: linear-gradient(135deg, #0056b3 0%, #004085 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4); color: #ffffff; }
.btn-logout { background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); color: #ffffff; box-shadow: 0 4px 6px rgba(108, 117, 125, 0.3); }
.btn-logout:hover { background: linear-gradient(135deg, #5a6268 0%, #495057 100%); color: #ffffff; }
.btn-view { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); color: #ffffff; box-shadow: 0 4px 6px rgba(23, 162, 184, 0.3); }
.btn-view:hover { background: linear-gradient(135deg, #138496 0%, #117a8b 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(23, 162, 184, 0.4); color: #ffffff; }
.btn-edit {
    padding: 6px 12px;
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    color: #212529;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95em;
    box-shadow: 0 4px 6px rgba(255, 193, 7, 0.3);
    transition: all 0.3s ease;
}
.btn-edit:hover { background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(255, 193, 7, 0.4); color: #212529; }
.btn-delete { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); color: #ffffff; box-shadow: 0 4px 6px rgba(220, 53, 69, 0.3); }
.btn-delete:hover { background: linear-gradient(135deg, #c82333 0%, #bd2130 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4); color: #ffffff; }
.btn-add { background: linear-gradient(135deg, #28a745 0%, #218838 100%); color: #ffffff; box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3); }
.btn-add:hover { background: linear-gradient(135deg, #218838 0%, #1e7e34 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4); color: #ffffff; }
.btn-save { display: inline-flex; width: 100%; padding: 12px; font-size: 1.05rem; background: linear-gradient(135deg, #28a745 0%, #218838 100%); color: #ffffff; border-radius: 6px; margin-top: 1rem; box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3); transition: all 0.3s ease; }
.btn-save:hover { background: linear-gradient(135deg, #218838 0%, #1e7e34 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4); color: #ffffff; }
.btn-excel { display: inline-flex; width: 100%; margin-top: 1rem; padding: 10px; background: linear-gradient(135deg, #28a745 0%, #218838 100%); color: white; border-radius: 6px; box-shadow: 0 4px 6px rgba(40, 167, 69, 0.3); transition: all 0.3s ease; }
.btn-excel:hover { background: linear-gradient(135deg, #218838 0%, #1e7e34 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(40, 167, 69, 0.4); }
.btn-download { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%); color: #ffffff; box-shadow: 0 4px 6px rgba(23, 162, 184, 0.3); }
.btn-download:hover { background: linear-gradient(135deg, #138496 0%, #117a8b 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(23, 162, 184, 0.4); color: #ffffff; }
.btn-backup { background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%); color: white; padding: 10px 20px; border-radius: 6px; font-size: 1rem; box-shadow: 0 4px 6px rgba(108, 117, 125, 0.3); border: 1px solid #5a6268; transition: all 0.3s ease; }
.btn-backup:hover { background: linear-gradient(135deg, #5a6268 0%, #495057 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4); }

/* セカンダリボタン */
.btn-secondary {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(108, 117, 125, 0.3);
}
.btn-secondary:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(108, 117, 125, 0.4);
    color: #ffffff;
}

/* 管理者設定画面 */
.settings-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 1rem 0 1.5rem;
}

.settings-tab {
    background: #eef2f7;
    color: #1f2937;
    border: 1px solid #cbd5e1;
    box-shadow: none;
}

.settings-tab:hover {
    background: #dbeafe;
    color: #0f172a;
    border-color: #93c5fd;
}

.settings-tab.is-active {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #ffffff;
    border-color: #0056b3;
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.25);
}

.settings-tab.is-active:hover {
    color: #ffffff;
}

.setting-section h2,
.setting-section h3,
.setting-section label {
    color: #111827;
}

/* モーダルのフッターボタン */
.modal-footer {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    padding: 1rem !important;
}

.modal-footer .btn-secondary {
    flex: 0 0 auto !important;
    padding: 8px 16px !important;
    min-width: 100px !important;
    max-width: 120px !important;
}

.modal-footer .btn-primary {
    flex: 0 0 auto !important;
    padding: 8px 20px !important;
    min-width: 140px !important;
    font-weight: 600 !important;
}

/* 評価一覧の適用ボタン */
.btn-apply {
    padding: 6px 12px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95em;
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
}
.btn-apply:hover { background: linear-gradient(135deg, #0056b3 0%, #004085 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4); }

.form-container .btn { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: #ffffff; box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3); transition: all 0.3s ease; }
.form-container .btn:hover { background: linear-gradient(135deg, #0056b3 0%, #004085 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 123, 255, 0.4); }

/* テーブル内操作列 */
.results-table td form { display: flex; justify-content: center; }

.results-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.results-actions {
    flex-direction: row;
}

/* パスワード表示切り替え機能 */
.password-input-container {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.password-toggle-btn {
    position: absolute !important;
    right: 12px !important;
    background: none !important;
    border: none !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    font-size: 1.1rem !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: color 0.2s, background-color 0.2s !important;
    z-index: 10 !important;
}

.password-toggle-btn:hover {
    color: #1a1a1a !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.password-toggle-btn:focus {
    outline: 2px solid #000000 !important;
    outline-offset: 2px !important;
    color: #000000 !important;
}

/* パスワード入力フィールドの右側にスペースを確保 */
.password-input-container input[type="password"],
.password-input-container input[type="text"] {
    padding-right: 45px !important;
}

.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; color: #4a4a4a; font-weight: 500; }
.form-group input, .form-group select { 
    width: 100%; 
    padding: 12px; 
    box-sizing: border-box; 
    font-size: 1.05rem; 
    border: 1.25px solid #d0d0d0; 
    border-radius: 6px; 
    background-color: #ffffff;
    color: #1a1a1a;
    transition: all 0.3s ease;
}
.form-group input:focus, .form-group select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}
.input-group { display: flex; flex-direction: column; margin-bottom: 1rem; }
.input-group label { color: #4a4a4a; margin-bottom: 5px; font-weight: 500; }
.input-group input { 
    padding: 12px; 
    border: 1.25px solid #d0d0d0; 
    border-radius: 6px; 
    text-align: right; 
    max-width: 220px; 
    font-size: 1.05rem; 
    background-color: #ffffff;
    color: #1a1a1a;
    transition: all 0.3s ease;
}
.input-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* テーブル関連 */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ネストされたテーブル（td内）は常に横スクロール可能に */
td .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    display: block;
}

.setting-table, .user-table, .results-table, .log-table, .user-list-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 1rem;
}

.table-wrapper table { width: 100%; }
.table-wrapper > table { table-layout: auto; } /* fixedからautoに変更 */
.table-wrapper table table { table-layout: auto; }
.table-wrapper td, .table-wrapper th { overflow: hidden; }
.table-wrapper td input[type="number"],
.table-wrapper td input[type="text"],
.table-wrapper td textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    font-size: 0.95rem;
    background-color: #ffffff;
    color: #1a1a1a;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    transition: all 0.3s ease;
}
.table-wrapper td input:focus,
.table-wrapper td textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}
.table-wrapper td textarea { min-height: 64px; resize: vertical; }
.setting-table th, .setting-table td,
.user-table th, .user-table td,
.results-table th, .results-table td,
.log-table th, .log-table td,
.user-list-table th, .user-list-table td { 
    border: 1px solid #d0d0d0; 
    padding: 8px; 
    text-align: left; 
    vertical-align: middle; 
    font-size: 14px; 
    background-color: #ffffff;
    color: #1a1a1a;
}

.log-table td input[type="checkbox"] { display: none !important; }
.log-table td.checkbox-cell { display: flex; align-items: center; justify-content: center; padding: 0 8px; min-height: 56px; }
.log-table td.checkbox-cell .checkbox-wrapper { display: inline-flex; align-items: center; justify-content: center; position: relative; width: auto; height: auto; padding: 0; }
.checkbox-wrapper input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.custom-checkbox { position: relative; width: 18px; height: 18px; border: 2px solid #6b7280; border-radius: 4px; display: inline-block; box-sizing: border-box; background: #ffffff; }
.checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox { background: #28a745; border-color: #28a745; }
.custom-checkbox::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 6px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; opacity: 0; }
.checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox::after { opacity: 1; }

.setting-table th, .setting-table td {
    font-size: 15px;
}
.setting-table th, .user-table th, .results-table th, .log-table th, .user-list-table th { 
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    text-align: center; 
    font-weight: 600;
    color: #000000;
    border-bottom: 2px solid #d0d0d0;
}
.log-table td, .results-table td { text-align: center; }

.setting-table input, .setting-table input[type="number"], .setting-table input[type="text"] {
    width: 100%;
    padding: 12px;
    box-sizing: border-box;
    font-size: 1.05rem;
    border: 1.25px solid #d0d0d0;
    border-radius: 6px;
    margin-bottom: 8px;
    min-width: 140px;
    background-color: #ffffff;
    color: #1a1a1a;
    transition: all 0.3s ease;
}
.setting-table input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.setting-table td:first-child .input-group input,
.setting-table td:first-child input[type="number"] {
    padding: 8px;
    font-size: 0.95rem;
    min-width: 80px;
}

.setting-table td:last-child input[type="number"] {
    padding: 8px;
    font-size: 0.95rem;
    min-width: 80px;
}
.setting-table input[type="number"] { text-align: right; }
.setting-table .action-cell { text-align: center; }

/* テキストエリア */
.fixed-textarea {
    width: 100%;
    height: 80px;
    padding: 8px 10px;
    box-sizing: border-box;
    font-size: 1.03rem;
    border: 1.25px solid #d0d0d0;
    border-radius: 6px;
    resize: none; 
    overflow: auto; 
    background-color: #ffffff;
    color: #1a1a1a;
    transition: all 0.3s ease;
}
.fixed-textarea:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* テーブル列の幅設定 */
.setting-table td .small-desc { font-size: 0.95rem; color: #9ca3af; margin-top: 6px; }

/* ホーム画面 */
.home-container { max-width: 1100px; margin: 0 auto; }
.home-container h1 { padding-bottom: 2rem; border-bottom: 1px solid #d0d0d0; color: #000000; }
.section-container { margin-top: 3.5rem; text-align: left; border-top: 1px solid #d0d0d0; padding-top: 2.25rem; margin-bottom: 1.5rem; }
.section-container h2 { text-align: center; margin-top: 0; margin-bottom: 1.5rem; color: #000000; font-weight: 600; }
.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto 2rem;
    justify-items: center; 
    align-items: start;
    grid-auto-rows: 1fr; 
}
.menu-item { 
    width: 100%;
    max-width: 360px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    min-height: 160px;
    align-self: stretch;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.menu-item-icon {
    margin-bottom: 1rem;
    color: #2a2a2a;
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-item:hover .menu-item-icon {
    transform: scale(1.1);
    color: #ffffff;
}

.menu-item:hover { 
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); 
    transform: translateY(-5px); 
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-color: #000000;
    color: #ffffff;
}
.menu-item h2 { margin: 0 0 0.5rem 0; font-size: 1.5rem; color: #000000; font-weight: 600; text-align: center; }
.menu-item:hover h2 { color: #ffffff; }
.menu-item p { margin: 0; color: #4a4a4a; text-align: center; }
.menu-item:hover p { color: #e0e0e0; }
.home-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.home-header h1 { margin: 0; font-size: 1.6rem; }
.home-header-actions { display: flex; gap: 8px; }

/* メニューカード　*/
.menu-item h2 { margin-bottom: 0.5rem; }
.menu-item p { margin-top: auto; }
.app-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2rem; justify-content: center; margin: auto; max-width: 600px; padding-bottom: 1rem; }
.app-icon-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-decoration: none; 
    color: #1a1a1a; 
    padding: 1.25rem; 
    border: 1px solid #d0d0d0; 
    border-radius: 10px; 
    transition: all 0.3s ease; 
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); 
    margin-bottom: 0.5rem; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.app-icon-item:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); 
    border-color: #000000;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #ffffff;
}
.app-icon-item img { width: 60px; height: 60px; object-fit: contain; margin-bottom: 0.5rem; }
.app-icon-item .default-icon { width: 60px; height: 60px; border-radius: 10px; background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%); color: #000000; display: flex; align-items: center; justify-content: center; font-size: 2.5em; margin-bottom: 0.5rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.app-icon-item .app-icon-svg { 
    width: 60px; 
    height: 60px; 
    border-radius: 10px; 
    background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%); 
    color: #2a2a2a; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 0.5rem; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
.app-icon-item:hover .app-icon-svg {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #ffffff;
}
.app-icon-item span { font-size: 0.9em; font-weight: bold; text-align: center; word-break: break-all; color: #4a4a4a; }
.app-icon-item:hover span { color: #e0e0e0; }
.update-list { list-style: none; padding: 0; }
.update-list li { background-color: #f5f5f5; padding: 1rem; border-radius: 5px; margin-bottom: 0.5rem; display: flex; justify-content: space-between; align-items: center; border: 1px solid #d0d0d0; }
.update-list a { text-decoration: none; background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: #ffffff; padding: 5px 10px; border-radius: 4px; font-size: 0.9em; box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3); transition: all 0.3s ease; }
.update-list a:hover { background: linear-gradient(135deg, #0056b3 0%, #004085 100%); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4); }
.logout-container { text-align: center; }
.logout-button { display: inline-block; padding: 10px 40px; background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); color: #ffffff; text-decoration: none; border-radius: 5px; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.logout-button:hover { background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

/* アクションボタンを右寄せするヘルパー */
.action-bar { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 1rem; }

/* 評価関連 */
.legend { border: 1px solid #d0d0d0; padding: 10px; margin-bottom: 2rem; border-radius: 5px; font-size: 0.9em; text-align: center; background-color: #f5f5f5; color: #4a4a4a; }
.criterion-item { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #d0d0d0; }
.criterion-item h3 { margin-top: 0; color: #000000; }
.criterion-item p { color: #4a4a4a; font-size: 0.9em; }
.rating { display: flex; justify-content: space-between; max-width: 300px; margin-top: 5px; }
.rating-legend { display: flex; justify-content: space-between; font-size: 0.8em; color: #4a4a4a; max-width: 300px; margin-top: 15px; padding: 0 5px; }
.rating input[type="radio"] { display: none; }
.rating label { padding: 10px 15px; border: 1px solid #d0d0d0; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; background-color: #f5f5f5; color: #1a1a1a; }
.rating input[type="radio"]:checked + label { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: #ffffff; border-color: #0056b3; box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2); }
.results-table .score { font-weight: bold; font-size: 1.1em; width: 80px; }
.results-table .final-score { color: #000000; }
.not-submitted { color: #6b7280; }

/* 評価結果テーブルの列幅調整 */
.results-table th:nth-child(2),
.results-table th:nth-child(3),
.results-table th:nth-child(4) {
    width: 80px;
    min-width: 80px;
}

.results-table td:nth-child(2),
.results-table td:nth-child(3),
.results-table td:nth-child(4) {
    width: 80px;
    min-width: 80px;
}

/* 操作列の幅を広く */
.results-table th:nth-child(8),
.results-table td:nth-child(8) {
    width: 160px;
    min-width: 160px;
}

/* 期間選択フォーム */
.period-select-form { justify-content: flex-start; margin-bottom: 1rem; }
.period-select { 
    padding: 8px 10px; 
    font-size: 1rem; 
    border-radius: 6px; 
    border: 1px solid #d0d0d0; 
    background-color: #ffffff;
    color: #1a1a1a;
    transition: all 0.3s ease;
}
.period-select:focus { 
    outline: none; 
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); 
}
.period-select-form .btn { padding: 8px 14px; }

/* レート入力フィールド */
.small-rate-input {
    width: 120px;
    padding: 6px 8px;
    font-size: 0.95rem;
    border-radius: 6px;
    border: 1px solid #d0d0d0;
    box-sizing: border-box;
    background-color: #ffffff;
    color: #1a1a1a;
    transition: all 0.3s ease;
}
.small-rate-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}
.setting-table .small-rate-input { width: 120px; }

/* 勤務記録・入力関連 */
.config-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.month-selector { display: flex; align-items: center; gap: 10px; }
.note { padding: 10px; background-color: #f5f5f5; border-left: 3px solid #000000; color: #4a4a4a; }
.summary-box { 
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%); 
    border: 1px solid #d0d0d0; 
    border-radius: 8px; 
    padding: 1.5rem; 
    margin-bottom: 2rem; 
    display: flex; 
    justify-content: space-around; 
    text-align: center; 
    flex-wrap: wrap; 
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.summary-item h3 { margin: 0 0 0.5rem 0; color: #4a4a4a; font-size: 1em; }
.summary-item p { margin: 0; font-size: 1.5em; font-weight: bold; color: #000000; }
.notes-cell { text-align: left; font-size: 0.9em; white-space: pre-wrap; word-break: break-all; }
.work-value { font-size: 1.1em; }
.check-mark { color: #000000; font-weight: bold; }
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.input-container .input-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    align-items: start;
}
.input-container .input-group {
    min-width: 0;
}
.input-container .input-group label { display: block; margin-bottom: 6px; }
.input-container .input-group input[type="number"],
.input-container .input-group input[type="text"],
.input-container .input-group textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.checkbox-group { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.checkbox-group input { transform: scale(1.4); }

/* 交通費ラジオボタングループ */
.transport-radio-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.transport-radio-group .radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 0;
    font-weight: normal;
    white-space: nowrap;
}
.transport-radio-group input[type="radio"] {
    transform: scale(1.3);
    cursor: pointer;
}
.transport-radio-group input[type="radio"]:disabled + span,
.transport-radio-group input[type="radio"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* 交通費プリセット設定 */
.transport-presets {
    margin: 1rem 0;
}
.transport-preset-row input {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* 勤務地セクション */
.location-section {
    margin: 1.5rem 0;
}
.location-section h3 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #333;
}
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.8rem;
}

/* 追加ボタンのホバー時表示 */
.add-criterion-btn,
.add-location-btn {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.setting-section:hover .add-criterion-btn,
.setting-section:hover .add-location-btn {
    opacity: 1;
}

.table-wrapper:hover .add-criterion-btn {
    opacity: 1;
}

/* 勤務地バッジ（表示用） */
.location-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    margin: 2px;
    white-space: nowrap;
}

/* 勤務地テキスト（PC表形式用） */
.location-text {
    font-size: 0.85rem;
    color: #333;
}

.locations-cell {
    font-size: 0.85rem;
    white-space: normal; /* 折り返しを許可 */
    word-wrap: break-word;
    line-height: 1.4;
}

.notes-group textarea,
.notes-group input[type="text"] { 
    width: 100%; 
    padding: 8px; 
    border: 1px solid #d0d0d0; 
    border-radius: 4px; 
    background-color: #ffffff;
    color: #1a1a1a;
    text-align: left;
    transition: all 0.3s ease;
}
.notes-group textarea {
    min-height: 80px;
    resize: none;
}
.notes-group textarea:focus,
.notes-group input[type="text"]:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

/* 保存アクション部分のレイアウト */
.save-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

/* 確認済みチェックボックス */
.check-button-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background-color: #f5f5f5;
    color: #4a4a4a;
    border: 2px solid #d0d0d0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 500;
    transition: all 0.3s ease;
    user-select: none;
    margin: 0;
    min-height: 44px;
    box-sizing: border-box;
    flex: 1;
}

.check-button-label:hover {
    background-color: #333333;
    border-color: #9ca3af;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.check-button {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
}

.check-button:checked + .check-button-label {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border-color: #0056b3;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.check-button:checked + .check-button-label:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    border-color: #000000;
}

.check-button:focus + .check-button-label {
    outline: 2px solid #007bff;
    outline-offset: 2px;
    color: #1a1a1a;
}
.note { padding: 10px; background-color: #f5f5f5; border-left: 3px solid #007bff; color: #4a4a4a; }

/* 保存ボタンの調整 */
.input-container .btn-save {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin-top: 0;
    padding: 12px 16px;
    font-size: 1.05rem;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.input-container .btn-save:hover {
    background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 100%);
}

/* デバイス別表示切替 */
.desktop-only { display: block; }
.mobile-only { display: none; }

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }
}

/* モバイル用コンパクト表示 */
.mobile-card-list { display: grid; gap: 10px; }
.mobile-card {
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.mobile-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mobile-title { font-weight: 700; color: #000000; font-size: 1.05rem; }
.mobile-sub { color: #4a4a4a; font-size: 0.9rem; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; background: #e8e8e8; color: #1a1a1a; margin-right: 6px; border: 1px solid #d0d0d0; }
.badge.green { background: #d4edda; color: #155724; border-color: #c3e6cb; }
.badge.blue { background: #cce5ff; color: #004085; border-color: #b8daff; }
.badge.orange { background: #fff3cd; color: #856404; border-color: #ffeeba; }
.mobile-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mobile-actions .btn { 
    padding: 6px 10px !important; 
    font-size: 0.85rem !important; 
    min-width: 60px !important; 
    max-width: 70px !important;
    flex: 0 0 auto;
}
.mobile-actions .btn-primary { 
    padding: 6px 10px !important; 
    font-size: 0.85rem !important; 
    max-width: 70px !important;
}
.mobile-actions .btn-edit { 
    padding: 6px 10px !important;
    max-width: 70px !important;
}
.mobile-actions .btn-view { 
    padding: 6px 10px !important;
    max-width: 70px !important;
}
.mobile-actions .btn-delete { 
    padding: 6px 10px !important;
    max-width: 70px !important;
}
.kv { display: grid; grid-template-columns: 96px 1fr; gap: 6px; font-size: 0.92rem; }
.kv .k { color: #4a4a4a; }
.kv .v { color: #1a1a1a; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #e8e8e8; border: 1px solid #d0d0d0; border-radius: 999px; padding: 2px 8px; font-size: 0.78rem; color: #1a1a1a; }
.notes-trunc { color: #4a4a4a; font-size: 0.9rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* レスポンシブ対応 */
@media (max-width: 768px) {
    /* モバイルではサイドバーを非表示にして全画面表示 */
    .sidebar {
        display: none;
    }
    
    /* トップバーとメインコンテンツは全幅表示 */
    .topbar {
        left: 0 !important;
    }
    
    .main-content {
        margin-left: 0 !important;
    }
    
    .external-services {
        grid-template-columns: 1fr;
    }
    
    .service-card h3 {
        font-size: 1.25rem;
    }
    
    .confirmation-waiting {
        margin: 1rem 0;
    }
    
    .save-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .input-container .btn-save,
    .check-button-label {
        width: 100%;
    }
    
    .check-button-label {
        justify-content: center;
    }
}

/* 大画面対応 */
@media (min-width: 1400px) {
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1200px;
    }
}

/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* シンプルホーム画面用スタイル */
.simple-home-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.welcome-section {
    text-align: center;
    margin-bottom: 40px;
}

.welcome-section h1 {
    font-size: 2.2rem;
    color: #000000;
    margin-bottom: 10px;
    font-weight: 600;
    text-shadow: none;
}

.welcome-subtitle {
    font-size: 1.1rem;
    color: #4a4a4a;
    margin: 0;
}

/* 外部リンクを最上部に目立たせる */
.external-links-primary {
    margin-bottom: 40px;
}

.external-links-primary h2 {
    text-align: center;
    color: #000000;
    margin-bottom: 25px;
    font-size: 1.4rem;
    font-weight: 600;
}

.external-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.external-service-card {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 3px solid #d0d0d0;
    border-radius: 12px;
    padding: 25px 20px;
    text-decoration: none;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.external-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
    transition: left 0.5s;
}

.external-service-card:hover::before {
    left: 100%;
}

.external-service-card.grow {
    border-color: #4CAF50;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.2);
}

.external-service-card.grow:hover {
    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%);
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);
}

.external-service-card.comiru {
    border-color: #2196F3;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.2);
}

.external-service-card.comiru:hover {
    background: linear-gradient(135deg, #42A5F5 0%, #2196F3 100%);
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
}

.external-service-card.groupsession {
    border-color: #FF9800;
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.2);
}

.external-service-card.groupsession:hover {
    background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(255, 152, 0, 0.3);
}

.external-service-card .service-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.external-service-card.grow .service-icon {
    color: #4CAF50;
}

.external-service-card.comiru .service-icon {
    color: #2196F3;
}

.external-service-card.groupsession .service-icon {
    color: #FF9800;
}

.external-service-card:hover .service-icon {
    color: #ffffff;
    transform: scale(1.1);
}

.external-service-card .service-content {
    flex-grow: 1;
}

.external-service-card .service-content h3 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
    font-weight: bold;
}

.external-service-card.grow .service-content h3 {
    color: #2E7D32;
}

.external-service-card.comiru .service-content h3 {
    color: #1565C0;
}

.external-service-card.groupsession .service-content h3 {
    color: #E65100;
}

.external-service-card .service-content p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

.external-service-card .external-arrow {
    font-size: 1.5rem;
    font-weight: bold;
    transition: transform 0.3s;
}

.external-service-card.grow .external-arrow {
    color: #4CAF50;
}

.external-service-card.comiru .external-arrow {
    color: #2196F3;
}

.external-service-card.groupsession .external-arrow {
    color: #FF9800;
}

.external-service-card:hover .external-arrow {
    color: #ffffff;
    transform: translateX(5px);
}

.main-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* 確認待ちユーザーのホーム表示 */
.recent-updates-home {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.recent-updates-home h2 {
    color: #ffffff;
    margin: 0 0 20px 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
}

.update-cards {
    display: grid;
    gap: 15px;
}

.update-card {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.update-card:hover {
    border-color: #007bff;
    transform: translateX(5px);
    box-shadow: 0 3px 10px rgba(0, 123, 255, 0.2);
}

.user-info .user-name {
    font-weight: bold;
    font-size: 1.1rem;
    color: #1a1a1a;
    display: block;
}

.user-info .update-indicator {
    font-size: 0.85rem;
    color: #1a1a1a;
    background: rgba(0, 123, 255, 0.15);
    padding: 2px 8px;
    border-radius: 12px;
    margin-top: 5px;
    display: inline-block;
    border: 1px solid rgba(0, 123, 255, 0.3);
}

.btn-quick-edit {
    padding: 8px 16px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.btn-quick-edit:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    color: #ffffff;
    text-decoration: none;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}

.more-users {
    text-align: center;
    padding: 15px;
}

.view-all-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    transition: all 0.2s;
    display: inline-block;
}

.view-all-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
}

.primary-action-card {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    color: #1a1a1a;
    padding: 30px 20px;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #d0d0d0;
}

.primary-action-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
    text-decoration: none;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #ffffff;
}

.primary-action-card.notification {
    background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
    color: #ffffff;
}

.primary-action-card.notification:hover {
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.action-icon {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
}

.primary-action-card:hover .action-icon {
    transform: scale(1.1);
}

.primary-action-card h2 {
    font-size: 1.4rem;
    margin: 0 0 10px 0;
    font-weight: 600;
    color: inherit;
}

.primary-action-card p {
    font-size: 0.95rem;
    margin: 0;
    opacity: 0.9;
}

.quick-links {
    margin-bottom: 30px;
}

.quick-links h3 {
    color: #000000;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.external-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.external-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 2px solid #d0d0d0;
    border-radius: 8px;
    text-decoration: none;
    color: #1a1a1a;
    transition: all 0.3s ease;
}

.external-link:hover {
    border-color: #000000;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.link-icon {
    font-size: 1.2rem;
}

.user-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.secondary-action {
    padding: 12px 24px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
    border: 2px solid #6b7280;
    border-radius: 6px;
    color: #d1d5db;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.secondary-action:hover {
    background: linear-gradient(135deg, #404040 0%, #333333 100%);
    color: #ffffff;
    text-decoration: none;
    border-color: #9ca3af;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.logout-btn {
    background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%) !important;
    cursor: pointer;
}

.logout-btn:hover {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
    border-color: #000000 !important;
    color: white !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6) !important;
}

/* メニュー画面のスタイル */
.menu-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #d0d0d0;
}

.menu-header h1 {
    color: #000000;
    margin: 0;
    font-weight: 600;
}

.back-to-home {
    padding: 10px 20px;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-to-home:hover {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.menu-section {
    margin-bottom: 40px;
}

.section-title {
    color: #000000;
    font-size: 1.3rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d0d0d0;
    font-weight: 600;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.menu-item {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 2px solid #d0d0d0;
    border-radius: 10px;
    padding: 25px 20px;
    text-decoration: none;
    color: #1a1a1a;
    transition: all 0.3s ease;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.menu-item:hover {
    border-color: #000000;
    transform: translateY(-3px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.menu-icon {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a2a2a;
    transition: color 0.3s ease;
}

.menu-item:hover .menu-icon {
    color: #ffffff;
}

.menu-item h3 {
    font-size: 1.2rem;
    margin: 0 0 10px 0;
    color: #000000;
    font-weight: 600;
}

.menu-item:hover h3 {
    color: #ffffff;
}

.menu-item p {
    font-size: 0.9rem;
    color: #4a4a4a;
    margin: 0;
    line-height: 1.4;
}

.menu-item:hover p {
    color: #e0e0e0;
}

.status-badge {
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 12px;
    margin-left: 10px;
}

.status-completed {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-pending {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

.update-list-grid {
    display: grid;
    gap: 15px;
}

.update-item {
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.user-info .user-name {
    font-weight: bold;
    font-size: 1.1rem;
    color: #1a1a1a;
}

.user-info .update-time {
    display: block;
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 5px;
}

.user-actions {
    display: flex;
    gap: 10px;
}

.no-updates {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #1f1f1f 0%, #2a2a2a 100%);
    border-radius: 8px;
    color: #9ca3af;
    border: 1px solid #404040;
}

.external-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* タブレット以下では2列 */
@media (max-width: 1024px) {
    .external-services {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* モバイルでも3列を維持（ボタンサイズを調整） */
@media (max-width: 768px) {
    .external-services {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

.external-service {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 3px solid #d0d0d0;
    border-radius: 12px;
    padding: 25px 20px;
    text-decoration: none;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.external-service::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
    transition: left 0.5s;
}

.external-service:hover::before { left: 100%; }

.external-service:hover {
    transform: translateX(5px);
}

/* 外部リンク（メニュー） 色合わせ */
.external-service.grow { border-color: #4CAF50; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.15); }
.external-service.comiru { border-color: #2196F3; box-shadow: 0 4px 15px rgba(33, 150, 243, 0.15); }
.external-service.groupsession { border-color: #FF9800; box-shadow: 0 4px 15px rgba(255, 152, 0, 0.15); }

.external-service.grow .service-icon { color: #4CAF50; background: rgba(76, 175, 80, 0.12); }
.external-service.comiru .service-icon { color: #2196F3; background: rgba(33, 150, 243, 0.12); }
.external-service.groupsession .service-icon { color: #FF9800; background: rgba(255, 152, 0, 0.12); }

.external-service.grow .external-indicator { color: #4CAF50; }
.external-service.comiru .external-indicator { color: #2196F3; }
.external-service.groupsession .external-indicator { color: #FF9800; }

.external-service:hover .service-icon { filter: brightness(1.1); }
.external-service.grow:hover .service-icon { background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%); color: #ffffff; }
.external-service.comiru:hover .service-icon { background: linear-gradient(135deg, #42A5F5 0%, #2196F3 100%); color: #ffffff; }
.external-service.groupsession:hover .service-icon { background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%); color: #ffffff; }

.external-service:hover .external-indicator { color: #ffffff; }

/* ホバーでカード全体もブランド色に */
.external-service.grow:hover { background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%); color: #ffffff; box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3); }
.external-service.comiru:hover { background: linear-gradient(135deg, #42A5F5 0%, #2196F3 100%); color: #ffffff; box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3); }
.external-service.groupsession:hover { background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%); color: #ffffff; box-shadow: 0 8px 25px rgba(255, 152, 0, 0.3); }

.service-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

/* ホバー時のアイコンは各サービスの定義で色変更 */

.service-info {
    flex-grow: 1;
}

.service-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: inherit;
    font-weight: 700;
}

.service-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #4a4a4a;
}

.external-indicator {
    font-size: 1.2rem;
    color: #6b7280;
}

/* PC表示（768px超）での設定 */
@media (min-width: 769px) {
    /* テーブルラッパーの横スクロールを有効化 */
    .table-wrapper {
        overflow-x: auto !important;
    }
    
    /* ネストされたテーブル（td内）は常に横スクロール可能に */
    td .table-wrapper {
        overflow-x: auto !important;
        max-width: 100%;
    }
    
    /* 設定テーブルの最小幅を解除 */
    .setting-table {
        min-width: auto;
        width: 100%;
    }
    
    /* スクロールヒントを非表示 */
    .setting-section > .table-wrapper::after {
        display: none;
    }
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .simple-home-container {
        padding: 20px 15px;
    }
    
    .welcome-section h1 {
        font-size: 1.8rem;
    }
    
    .external-services-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .external-service-card {
        padding: 20px 15px;
    }
    
    .external-service-card .service-content h3 {
        font-size: 1.1rem;
    }
    
    .main-actions {
        grid-template-columns: 1fr;
    }
    
    .update-card {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .external-links {
        flex-direction: column;
        align-items: center;
    }
    
    .user-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .menu-container {
        padding: 15px;
    }
    
    .menu-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .update-item {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .user-actions {
        justify-content: center;
    }
    
    /* 各種設定ページ */
    .admin-container,
    .form-container,
    .container {
        padding: 15px;
        margin: 10px;
    }
    
    .admin-container h1,
    .form-container h1 {
        font-size: 1.8rem;
    }
    
    /* テーブルのスクロール対応（モバイルのみ） */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 設定ページのテーブル最小幅（モバイルのみ） */
    .setting-table {
        min-width: 600px;
    }
    
    .setting-table,
    .user-table,
    .log-table,
    .results-table {
        font-size: 0.85rem;
    }
    
    .setting-table th,
    .setting-table td,
    .user-table th,
    .user-table td,
    .log-table th,
    .log-table td,
    .results-table th,
    .results-table td {
        padding: 6px 4px;
        font-size: 0.85rem;
    }
    
    /* 設定ページの入力欄 */
    .setting-table input,
    .setting-table textarea {
        font-size: 0.9rem;
        padding: 8px;
        min-width: 60px;
    }
    
    .fixed-textarea {
        height: 60px;
        font-size: 0.9rem;
        min-height: 50px;
    }
    
    .weight-input {
        width: 60px !important;
        font-size: 0.85rem !important;
    }
    
    .setting-section {
        overflow-x: visible;
    }
    
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 20px;
        position: relative;
    }
    
    .setting-section > .table-wrapper::after {
        content: '← スクロールできます →';
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: #999;
        padding: 8px;
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }
    

    td .table-wrapper::after {
        display: none;
    }
    
    /* 設定ページのカラム幅調整 */
    .setting-table th.col-name, .setting-table td.col-name {
        min-width: 200px;
    }
    
    .setting-table th.col-desc, .setting-table td.col-desc {
        min-width: 250px;
        max-width: none;
    }
    
    .setting-table th.col-weight, .setting-table td.col-weight {
        min-width: 80px;
        width: 80px;
    }
    
    .setting-table th.col-action, .setting-table td.col-action {
        min-width: 100px;
        width: 100px;
    }
    
    .setting-table td:first-child {
        min-width: 150px;
    }
    
    .setting-table td:last-child {
        min-width: 150px;
    }
    
    .setting-table input[type="number"] {
        min-width: 80px;
    }
    
    /* 内側のネストされたテーブル全体の最小幅 */
    .setting-table table {
        min-width: 650px;
    }
    
    /* ボタン */
    .btn {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
    
    .btn-save,
    .btn-primary {
        width: 100%;
        padding: 12px;
    }
    
    /* rate-grid を1カラムに */
    .rate-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    /* フォーム */
    .input-group label {
        font-size: 0.95rem;
    }
    
    .input-group input {
        font-size: 0.95rem;
        max-width: 100%;
    }
    
    /* 評価結果ページ */
    .evaluation-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .filter-group {
        flex-direction: column;
        gap: 10px;
    }
    
    /* ユーザー管理ページ */
    .user-list {
        grid-template-columns: 1fr;
    }
    
    /* 勤務記録閲覧 */
    .month-selector {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .month-selector input[type="number"] {
        width: 60px !important;
    }
    
    .month-selector button {
        padding: 6px 10px;
        white-space: nowrap;
    }
    
    .config-bar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .month-nav {
        justify-content: center !important;
        width: 100%;
    }
    
    .note {
        order: 2;
        width: 100%;
    }
    
    /* モーダル */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-content {
        border-radius: 8px;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-body {
        padding: 15px;
        font-size: 1rem;
        line-height: 1.5;
    }
    
    .modal-footer {
        padding: 12px 15px !important;
        flex-wrap: nowrap !important;
    }
    
    .modal-footer .btn-secondary,
    .modal-footer .btn-primary {
        padding: 10px 16px !important;
        font-size: 0.95rem !important;
        white-space: nowrap;
    }
    
    .modal-footer .btn-secondary {
        min-width: 90px !important;
        max-width: 110px !important;
    }
    
    .modal-footer .btn-primary {
        min-width: 120px !important;
        flex: 1 1 auto !important;
        max-width: 160px !important;
    }
    
    /* home-container (旧ホーム画面) */
    .home-container {
        padding: 15px;
    }
    
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .menu-item {
        padding: 12px 10px;
        max-width: 100%;
    }
    
    .menu-item h2 {
        font-size: 1rem;
    }
    
    .menu-item-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
    }
    
    .menu-item-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .menu-item p {
        font-size: 0.8rem;
    }
    
    /* 更新リスト */
    .update-list-container {
        padding: 15px;
    }
    
    .update-list li {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
        padding: 12px;
    }
}
/* ダッシュボード画面のスタイル */

.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 40px;
}

.dashboard-header h1 {
    font-size: 2rem;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-weight: 600;
}

.dashboard-subtitle {
    font-size: 1rem;
    color: #6b7280;
    margin: 0;
}

/* セクション見出し */
.section-heading {
    font-size: 1.3rem;
    color: #1a1a1a;
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

/* 統計カード */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 100%);
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.stat-card.stat-primary {
    border-color: #2196F3;
}

.stat-card.stat-success {
    border-color: #4CAF50;
}

.stat-card.stat-warning {
    border-color: #FF9800;
}

.stat-card.stat-info {
    border-color: #9C27B0;
}

.stat-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
}

.stat-card.stat-primary .stat-icon {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #ffffff;
}

.stat-card.stat-success .stat-icon {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: #ffffff;
}

.stat-card.stat-warning .stat-icon {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    color: #ffffff;
}

.stat-card.stat-info .stat-icon {
    background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
    color: #ffffff;
}

.stat-content {
    flex-grow: 1;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    color: #6b7280;
}

/* クイックアクションセクション */
.quick-actions-section {
    margin-bottom: 40px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
}

.quick-action-btn {
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 2px solid #d0d0d0;
    border-radius: 10px;
    padding: 20px 15px;
    text-decoration: none;
    color: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    font-weight: 600;
    text-align: center;
}

.quick-action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.quick-action-btn.btn-primary {
    border-color: #2196F3;
}

.quick-action-btn.btn-primary:hover {
    background: linear-gradient(135deg, #42A5F5 0%, #2196F3 100%);
    color: #ffffff;
}

.quick-action-btn.btn-secondary {
    border-color: #6b7280;
}

.quick-action-btn.btn-secondary:hover {
    background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
    color: #ffffff;
}

.quick-action-btn.btn-warning {
    border-color: #FF9800;
}

.quick-action-btn.btn-warning:hover {
    background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
    color: #ffffff;
}

.quick-action-btn.btn-info {
    border-color: #9C27B0;
}

.quick-action-btn.btn-info:hover {
    background: linear-gradient(135deg, #BA68C8 0%, #9C27B0 100%);
    color: #ffffff;
}

.quick-action-btn.btn-menu {
    border-color: #1a1a1a;
}

.quick-action-btn.btn-menu:hover {
    background: linear-gradient(135deg, #4a4a4a 0%, #1a1a1a 100%);
    color: #ffffff;
}

/* 最近の活動セクション */
.recent-activity-section {
    margin-bottom: 40px;
}

.activity-list {
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-item:hover {
    background: #f9f9f9;
}

.activity-date {
    flex-shrink: 0;
    width: 60px;
    text-align: center;
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #ffffff;
    border-radius: 8px;
    padding: 10px;
}

.activity-day {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
}

.activity-month {
    display: block;
    font-size: 0.75rem;
    margin-top: 5px;
}

.activity-content {
    flex-grow: 1;
}

.activity-user {
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 5px;
}

.activity-details {
    font-size: 0.9rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 10px;
}

.activity-badge {
    background: #e8e8e8;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    color: #1a1a1a;
}

.activity-action {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.2s;
}

.activity-action:hover {
    background: #2196F3;
    border-color: #2196F3;
    color: #ffffff;
}

/* 確認待ちユーザーセクション */
.pending-reviews-section {
    margin-bottom: 40px;
}

.pending-reviews-list {
    background: #ffffff;
    border: 2px solid #FF9800;
    border-radius: 12px;
    overflow: hidden;
}

.pending-review-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s;
}

.pending-review-item:last-child {
    border-bottom: none;
}

.pending-review-item:hover {
    background: #fff8f0;
}

.review-user-name {
    font-weight: 600;
    color: #1a1a1a;
}

.btn-review {
    background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-review:hover {
    background: linear-gradient(135deg, #FFA726 0%, #F57C00 100%);
    transform: scale(1.05);
    text-decoration: none;
}

.more-reviews {
    text-align: center;
    padding: 15px;
    background: #f9f9f9;
}

.more-reviews a {
    color: #FF9800;
    text-decoration: none;
    font-weight: 600;
}

.more-reviews a:hover {
    text-decoration: underline;
}

/* 外部サービスセクション */
.external-services-section {
    margin-bottom: 40px;
}

/* ダッシュボード - タブレット向け */
@media (max-width: 1024px) and (min-width: 769px) {
    .quick-actions-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
    }
}

/* ダッシュボード - スマホ向け */
@media (max-width: 768px) {
    .dashboard-container {
        padding: 15px 10px;
    }

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

    .dashboard-header h1 {
        font-size: 1.3rem;
        margin-bottom: 5px;
    }

    .dashboard-subtitle {
        font-size: 0.85rem;
    }

    .section-heading {
        font-size: 1.1rem;
        margin-bottom: 15px;
    }

    .section-heading svg {
        width: 16px;
        height: 16px;
    }

    .stats-section {
        margin-bottom: 25px;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 25px;
    }

    .stat-card {
        padding: 12px 8px;
        gap: 8px;
        border-radius: 8px;
        flex-direction: column;
        text-align: center;
    }

    .stat-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
    }

    .stat-icon svg {
        width: 20px;
        height: 20px;
    }

    .stat-value {
        font-size: 1.2rem;
        margin-bottom: 2px;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .quick-actions-section {
        margin-bottom: 25px;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .quick-action-btn {
        padding: 18px 12px;
        gap: 10px;
        border-radius: 10px;
        font-size: 0.9rem;
    }

    .quick-action-btn svg {
        width: 24px;
        height: 24px;
    }

    .quick-action-btn span {
        font-size: 0.85rem;
    }

    .pending-reviews-section {
        margin-bottom: 25px;
    }

    .pending-review-item {
        padding: 12px;
        border-radius: 8px;
    }

    .review-user-name {
        font-size: 0.9rem;
    }

    .btn-review {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    .recent-activity-section {
        margin-bottom: 25px;
    }

    .activity-item {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px;
        border-radius: 8px;
    }

    .activity-date {
        width: 45px;
        height: 45px;
        min-width: 45px;
    }

    .activity-day {
        font-size: 1.3rem;
    }

    .activity-month {
        font-size: 0.65rem;
    }

    .activity-user {
        font-size: 0.85rem;
        margin-bottom: 4px;
    }

    .activity-details {
        font-size: 0.75rem;
    }

    .activity-badge {
        padding: 3px 8px;
        font-size: 0.7rem;
        border-radius: 4px;
    }

    .activity-action {
        width: 32px;
        height: 32px;
    }

    .activity-action svg {
        width: 14px;
        height: 14px;
    }

    .external-services-section {
        margin-bottom: 25px;
    }

    .external-services {
        gap: 8px;
    }

    .external-service {
        padding: 10px 8px;
        border-radius: 8px;
        gap: 6px;
        flex-direction: column;
        text-align: center;
        border-width: 2px;
    }

    .service-icon {
        width: 36px;
        height: 36px;
    }

    .service-icon svg {
        width: 20px;
        height: 20px;
    }

    .service-info h4 {
        font-size: 0.75rem;
        margin-bottom: 2px;
    }

    .service-info p {
        font-size: 0.65rem;
        display: none; /* モバイルでは説明文を非表示 */
    }

    .external-indicator {
        font-size: 1rem;
        position: absolute;
        top: 5px;
        right: 5px;
    }
}

/* 非常に小さい画面向け（400px以下） */
@media (max-width: 400px) {
    .stats-grid {
        gap: 6px;
    }

    .stat-card {
        padding: 10px 6px;
        gap: 6px;
    }

    .stat-icon {
        width: 32px;
        height: 32px;
    }

    .stat-icon svg {
        width: 18px;
        height: 18px;
    }

    .stat-value {
        font-size: 1rem;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .external-services {
        gap: 6px;
    }

    .external-service {
        padding: 8px 4px;
    }

    .service-icon {
        width: 28px;
        height: 28px;
    }

    .service-icon svg {
        width: 16px;
        height: 16px;
    }

    .service-info h4 {
        font-size: 0.7rem;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .quick-action-btn {
        padding: 16px 10px;
        gap: 8px;
        font-size: 0.8rem;
    }

    .quick-action-btn svg {
        width: 22px;
        height: 22px;
    }

    .quick-action-btn span {
        font-size: 0.8rem;
    }
}

/* ==========================================
   フッター
========================================== */
.app-footer {
    margin-left: 240px;
    padding: 1.5rem 2rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    font-size: 0.875rem;
    color: #6c757d;
}

.footer-content p {
    margin: 0.5rem 0;
}

.footer-home-btn {
    margin-bottom: 1rem;
}

.btn-home {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #333333;
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.btn-home:hover {
    transform: translateY(-2px);
    background: #000000;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    color: white;
    text-decoration: none;
}

.btn-home svg {
    flex-shrink: 0;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.footer-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

.footer-link svg {
    flex-shrink: 0;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .app-footer {
        margin-left: 0;
        padding: 1rem;
        font-size: 0.8rem;
    }
    
    .footer-content p {
        margin: 0.3rem 0;
    }
}