/* =========================================================
   競賽行政庶務管理系統 - 統一視覺樣式
   Stage 23
   ========================================================= */

:root {
    --color-bg: #f3f6fb;
    --color-surface: #ffffff;
    --color-surface-soft: #f8fafc;
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-primary-soft: #dbeafe;
    --color-accent: #f59e0b;
    --color-accent-dark: #d97706;
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-text: #0f172a;
    --color-muted: #64748b;
    --color-border: #dbe3ef;
    --shadow-card: 0 10px 26px rgba(15, 23, 42, 0.08);
    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-sm: 8px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 30%),
        linear-gradient(180deg, #f8fbff 0%, var(--color-bg) 100%);
    color: var(--color-text);
}

/* ===== 版面 ===== */

.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 250px;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    color: white;
    padding: 24px 18px;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.12);
}

.brand {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 20px;
}

.brand-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.brand-subtitle {
    margin-top: 4px;
    color: #cbd5e1;
    font-size: 14px;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav a {
    color: #e5e7eb;
    text-decoration: none;
    padding: 11px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}

.nav a:hover {
    background: rgba(96, 165, 250, 0.18);
    color: #ffffff;
    transform: translateX(2px);
}

.main {
    flex: 1;
    padding: 28px;
}

.topbar {
    margin-bottom: 20px;
}

.topbar h1 {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #0f172a;
}

.content {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(219, 227, 239, 0.85);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-card);
}

/* ===== 卡片與提示 ===== */

.cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.card {
    display: block;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--color-text);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    transition: all 0.16s ease;
}

.card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.14);
    transform: translateY(-2px);
}

.card h2 {
    margin: 0 0 10px;
    font-size: 20px;
}

.card p {
    margin: 0;
    color: var(--color-muted);
    line-height: 1.6;
}

.notice {
    margin-top: 16px;
    margin-bottom: 16px;
    background: linear-gradient(90deg, #eff6ff 0%, #f8fafc 100%);
    border: 1px solid #bfdbfe;
    border-left: 5px solid var(--color-primary);
    border-radius: 12px;
    padding: 14px 16px;
    line-height: 1.7;
    color: #1e3a8a;
}

.result-box {
    background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 100%);
    border: 1px solid #bbf7d0;
    border-left: 5px solid var(--color-success);
    color: #14532d;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    line-height: 1.7;
}

.error-box {
    background: linear-gradient(90deg, #fef2f2 0%, #ffffff 100%);
    color: #991b1b;
    border: 1px solid #fecaca;
    border-left: 5px solid var(--color-danger);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

/* ===== 查詢列 ===== */

.summary-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.summary-item,
.fixed-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 170px;
    padding: 10px 14px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.08);
}

.summary-label,
.fixed-label {
    color: var(--color-primary-dark);
    font-size: 13px;
    font-weight: 700;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    align-items: center;
}

.filter-form input,
.filter-form select,
.data-form input,
.data-form select,
.data-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 14px;
    background: white;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.filter-form input {
    min-width: 180px;
    width: auto;
}

.filter-form input:focus,
.filter-form select:focus,
.data-form input:focus,
.data-form select:focus,
.data-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

/* 職種下拉選單：醒目但不突兀 */
.filter-form select {
    min-width: 260px;
    max-width: 100%;
    color: #0f172a;
    font-weight: 700;
    border: 1px solid #93c5fd;
    background:
        linear-gradient(90deg, #dbeafe 0%, #ffffff 72%);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.10);
    cursor: pointer;
}

.filter-form select:hover {
    border-color: var(--color-primary);
    background:
        linear-gradient(90deg, #bfdbfe 0%, #ffffff 72%);
}

/* ===== 按鈕 ===== */

button,
.button-secondary,
.button-primary {
    border: 0;
    padding: 10px 15px;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    font-weight: 700;
    transition: all 0.15s ease;
}

button,
.button-primary {
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: white;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.22);
}

button:hover,
.button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(37, 99, 235, 0.28);
}

.button-secondary {
    background: #e5e7eb;
    color: #111827;
}

.button-secondary:hover {
    background: #d1d5db;
}

.button-danger {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.button-danger:hover {
    background: #b91c1c;
}

/* ===== 表格 ===== */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: white;
}

th,
td {
    border-bottom: 1px solid #e5e7eb;
    padding: 11px 10px;
    text-align: left;
    white-space: nowrap;
}

th {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    font-weight: 800;
    color: #0f172a;
}

tbody tr:hover {
    background: #f8fbff;
}

.empty {
    text-align: center;
    color: var(--color-muted);
    padding: 28px;
    background: #f8fafc;
}

.table-action {
    display: inline-block;
    background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    color: white;
    text-decoration: none;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.22);
}

.table-action:hover {
    background: var(--color-accent-dark);
}

/* ===== 表單 ===== */

.page-actions {
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.data-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-section {
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 18px;
    background: #ffffff;
}

.form-section h2 {
    margin: 0 0 16px;
    font-size: 18px;
    color: #1e3a8a;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.form-grid.one {
    grid-template-columns: 1fr;
}

.data-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
}

.required {
    color: var(--color-danger);
}

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

.checkbox-row,
.inline-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
}

.checkbox-row input,
.inline-check input {
    width: auto;
}

.bulk-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.hint {
    color: var(--color-muted);
    font-size: 13px;
}

.inactive-row {
    background: #f9fafb;
    color: #9ca3af;
}

.sample-box {
    margin-top: 18px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
}

.sample-box pre {
    white-space: pre;
    overflow-x: auto;
    background: white;
    border: 1px solid #e5e7eb;
    padding: 12px;
    border-radius: 8px;
}

.data-form textarea {
    min-height: 280px;
}

/* ===== RWD ===== */

@media (max-width: 900px) {
    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .cards,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .main {
        padding: 18px;
    }

    .filter-form input,
    .filter-form select {
        width: 100%;
    }
}

.amount-input {
    max-width: 160px;
    font-weight: 800;
    text-align: right;
}
.small-muted {
    color: var(--color-muted);
    font-size: 12px;
    margin-top: 4px;
}
.fee-actions {
    margin-top: 18px;
}

.amount-cell {
    text-align: right;
    font-weight: 800;
    color: #1e3a8a;
}
.total-box {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(90deg, #fff7ed 0%, #ffffff 100%);
    border: 1px solid #fed7aa;
    border-left: 5px solid #f97316;
    color: #9a3412;
    font-size: 18px;
}
.total-box strong {
    font-size: 24px;
}
.fee-action {
    background: linear-gradient(180deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.22);
}
.fee-action:hover {
    background: #047857;
}

.status-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}
.status-done {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
}
.status-draft {
    background: #fef9c3;
    color: #854d0e;
    border: 1px solid #fde68a;
}
.status-missing {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.export-form .form-section {
    margin-bottom: 18px;
}
.radio-row {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.radio-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid #dbe3ef;
    border-radius: 999px;
    background: #f8fafc;
    font-weight: 800;
}
.radio-row input {
    width: auto;
}
.checkbox-grid {
    display: grid;
    gap: 10px 16px;
    margin-top: 10px;
}
.role-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.skill-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}
.checkbox-grid label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    background: #ffffff;
    font-weight: 700;
}
.checkbox-grid input {
    width: auto;
}
.select-all-line {
    padding: 10px 12px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
}
.fixed-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    color: #475569;
}
@media (max-width: 1200px) {
    .role-grid,
    .skill-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .role-grid,
    .skill-grid {
        grid-template-columns: 1fr;
    }
}

.select-all-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.select-all-tools .button-secondary {
    padding: 10px 14px;
}

.merge-note {
    color: #475569;
    font-size: 13px;
    margin-top: 6px;
}

.signin-sheet {
    width: 297mm;
    min-height: 210mm;
    margin: 0 auto;
    padding: 12mm 12mm 10mm;
    background: #fff;
    color: #000;
    font-family: "Microsoft JhengHei", "PMingLiU", serif;
    box-shadow: 0 0 18px rgba(0,0,0,0.16);
}
.signin-sheet h1 {
    text-align: center;
    font-size: 22pt;
    margin: 0 0 8mm;
    letter-spacing: 1px;
}
.signin-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 4mm;
    font-size: 12pt;
    margin-bottom: 6mm;
}
.signin-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 11pt;
}
.signin-table th,
.signin-table td {
    border: 1px solid #000;
    padding: 2.5mm 1.5mm;
    vertical-align: middle;
    word-break: break-word;
}
.signin-table th {
    text-align: center;
    font-weight: 800;
    background: #f3f4f6;
}
.signin-table tbody td {
    height: 11mm;
}
.text-center {
    text-align: center;
}
.col-no { width: 12mm; }
.col-skill { width: 38mm; }
.col-name { width: 24mm; }
.col-role { width: 45mm; }
.col-org { width: 65mm; }
.col-phone { width: 30mm; }
.col-sign { width: 36mm; }
.col-note { width: 28mm; }
.signin-footer {
    display: flex;
    justify-content: flex-end;
    gap: 40mm;
    margin-top: 8mm;
    font-size: 12pt;
}
@media print {
    .signin-sheet {
        box-shadow: none !important;
        margin: 0 !important;
        width: 297mm;
        min-height: 210mm;
        padding: 10mm 10mm 8mm;
        page-break-after: always;
    }
    @page {
        size: A4 landscape;
        margin: 0;
    }
}

.page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.transport-table input,
.transport-table select {
    width: 100%;
    min-width: 80px;
    padding: 7px 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
}

.transport-table th,
.transport-table td {
    vertical-align: middle;
}

.transport-table .amount-cell {
    white-space: nowrap;
    font-weight: 800;
}

.transport-save-form .table-wrap {
    overflow-x: auto;
}

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

.check-legend {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 12px 0;
    color: #475569;
}

.check-table th,
.check-table td {
    vertical-align: middle;
}

.row-warning {
    background: #fff7ed;
}

.alert {
    padding: 14px 16px;
    border-radius: 12px;
    margin: 14px 0;
}
.alert h3 {
    margin-top: 0;
}
.alert-danger {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #7f1d1d;
}
.alert-warning {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #78350f;
}


/* Stage 44 - 淺綠色主題補充 */
:root {
    --color-bg: #f3f8f4;
    --color-primary: #4d8b55;
    --color-primary-dark: #3d6f44;
    --color-primary-soft: #d9efe0;
    --color-text: #263b2a;
    --color-border: #cfe4d4;
}
body {
    background: linear-gradient(180deg, #f7fbf7 0%, var(--color-bg) 100%);
}
.sidebar {
    background: linear-gradient(180deg, #dff1e3 0%, #c7e1cc 100%);
    color: #355d3a;
    box-shadow: 8px 0 24px rgba(53, 93, 58, 0.10);
}
.brand {
    border-bottom: 1px solid rgba(61, 111, 68, 0.16);
}
.brand-title {
    color: #355d3a;
}
.brand-subtitle {
    color: #55735b;
}
.nav a {
    color: #355d3a;
    font-weight: 700;
}
.nav a:hover {
    background: rgba(77, 139, 85, 0.12);
    color: #2f5536;
}
.topbar h1 {
    color: #355d3a;
}
.notice {
    background: linear-gradient(90deg, #eef8f0 0%, #f8fbf8 100%);
    border: 1px solid #cfe4d4;
    border-left: 5px solid #5a9b64;
    color: #355d3a;
}

/* =========================================================
   Stage 48 - 首頁儀表板統計版
   請附加到既有 style.css 最下方
   ========================================================= */

.dashboard-home {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-panel {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    gap: 22px;
    align-items: stretch;
}

.hero-left {
    padding: 30px;
    border-radius: 24px;
    background: linear-gradient(135deg, #f7fff8 0%, #edf8ef 50%, #ffffff 100%);
    border: 1px solid #d7eadb;
    box-shadow: 0 12px 30px rgba(74, 123, 82, 0.10);
}

.hero-badge {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: #dff2e3;
    color: #456f4c;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
}

.hero-title {
    margin: 0 0 16px;
    font-size: 36px;
    line-height: 1.3;
    color: #214427;
    font-weight: 800;
}

.hero-text {
    margin: 0;
    font-size: 16px;
    line-height: 1.95;
    color: #4d6452;
}

.hero-actions {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    min-width: 160px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: all 0.18s ease;
}

.btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, #5f9968 0%, #4f8858 100%);
    box-shadow: 0 10px 24px rgba(79, 136, 88, 0.22);
}

.btn-secondary {
    color: #426e4a;
    background: #ffffff;
    border: 1px solid #cfe4d4;
}

.hero-right {
    display: flex;
}

.status-card {
    width: 100%;
    padding: 26px;
    border-radius: 24px;
    background: linear-gradient(180deg, #7fac86 0%, #62886a 100%);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(68, 103, 75, 0.20);
}

.status-card-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
}

.status-list {
    margin: 0;
    padding-left: 20px;
    line-height: 2;
    color: #f3fff5;
    font-size: 15px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.metric-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 18px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid #dbe9de;
    box-shadow: 0 10px 22px rgba(69, 105, 75, 0.06);
    transition: all 0.18s ease;
}

.metric-card:hover {
    transform: translateY(-3px);
    border-color: #bdd9c3;
    box-shadow: 0 14px 28px rgba(79, 136, 88, 0.12);
}

.metric-card.warning {
    background: linear-gradient(180deg, #fffdf5 0%, #ffffff 100%);
    border-color: #f3dfae;
}

.metric-label {
    color: #66806c;
    font-size: 13px;
    font-weight: 800;
}

.metric-value {
    margin-top: 8px;
    font-size: 34px;
    font-weight: 900;
    color: #24432a;
}

.metric-note {
    margin-top: 4px;
    color: #7a8f7f;
    font-size: 13px;
    line-height: 1.5;
}

.quick-section,
.info-card {
    background: #ffffff;
    border: 1px solid #dbe9de;
    border-radius: 22px;
    box-shadow: 0 10px 26px rgba(69, 105, 75, 0.07);
}

.quick-section {
    padding: 24px;
}

.section-head {
    margin-bottom: 18px;
}

.section-head h3,
.info-card h3 {
    margin: 0 0 8px;
    font-size: 24px;
    color: #24432a;
    font-weight: 800;
}

.section-head p {
    margin: 0;
    color: #68806d;
    line-height: 1.8;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.quick-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
    border: 1px solid #e1ece4;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.quick-card:hover {
    transform: translateY(-3px);
    border-color: #bdd9c3;
    box-shadow: 0 14px 28px rgba(79, 136, 88, 0.10);
}

.quick-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #dff2e3 0%, #eef8f0 100%);
    color: #4e8557;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 14px;
}

.quick-title {
    font-size: 18px;
    font-weight: 800;
    color: #234129;
    margin-bottom: 8px;
}

.quick-desc {
    color: #6a806f;
    font-size: 14px;
    line-height: 1.8;
}

.dashboard-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.info-card {
    padding: 22px;
}

.check-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.check-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #3e5c44;
    background: #f7fbf8;
    border: 1px solid #e1ece4;
    border-radius: 14px;
    padding: 12px 14px;
}

.check-list strong {
    min-width: 42px;
    text-align: center;
    color: #24432a;
    font-size: 20px;
}

.mini-table {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.mini-table a {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: #3e5c44;
    background: #f7fbf8;
    border: 1px solid #e1ece4;
    border-radius: 14px;
    padding: 12px 14px;
}

.mini-table span {
    font-weight: 800;
    color: #24432a;
}

.mini-table small {
    color: #708474;
}

.role-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f7fbf8;
    border: 1px solid #e1ece4;
    border-radius: 999px;
    color: #3e5c44;
}

.role-chip strong {
    color: #24432a;
    font-size: 18px;
}

.empty-state {
    padding: 14px;
    border-radius: 14px;
    background: #f7fbf8;
    border: 1px solid #e1ece4;
    color: #708474;
}

@media (max-width: 1200px) {
    .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-panel,
    .dashboard-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .quick-grid {
        grid-template-columns: 1fr;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .metric-grid {
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 28px;
    }

    .btn {
        width: 100%;
    }
}

/* =========================================================
   Stage 77 - 美化競賽大會人員名單下拉式選單
   ========================================================= */

.committee-filter-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid #dbe7de;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbf7 100%);
    box-shadow: 0 10px 24px rgba(54, 94, 64, 0.08);
}

.committee-role-inline-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.committee-role-inline-filter select {
    min-width: 240px;
    height: 46px;
    padding: 0 48px 0 16px;
    border: 1px solid #b7d6bf;
    border-radius: 14px;
    background-color: #ffffff;
    background-image:
        linear-gradient(180deg, #ffffff 0%, #eef8f0 100%),
        linear-gradient(45deg, transparent 50%, #2f6f42 50%),
        linear-gradient(135deg, #2f6f42 50%, transparent 50%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position:
        0 0,
        calc(100% - 22px) 19px,
        calc(100% - 16px) 19px;
    background-size:
        100% 100%,
        6px 6px,
        6px 6px;
    color: #1d3d28;
    font-size: 15px;
    font-weight: 800;
    line-height: 46px;
    box-shadow: 0 4px 14px rgba(76, 124, 89, 0.10);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.18s ease;
}

.committee-role-inline-filter select:hover {
    border-color: #8fc59a;
    box-shadow: 0 8px 18px rgba(76, 124, 89, 0.16);
    transform: translateY(-1px);
}

.committee-role-inline-filter select:focus {
    outline: none;
    border-color: #5f9f6f;
    box-shadow:
        0 0 0 4px rgba(134, 185, 146, 0.20),
        0 8px 18px rgba(76, 124, 89, 0.16);
}

.committee-role-inline-filter input[type="text"] {
    min-width: 180px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid #d4dfd6;
    border-radius: 14px;
    background: #ffffff;
    color: #23412d;
    font-size: 14px;
    font-weight: 700;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.18s ease;
}

.committee-role-inline-filter input[type="text"]:focus {
    outline: none;
    border-color: #86b992;
    box-shadow: 0 0 0 4px rgba(134, 185, 146, 0.18);
}

.committee-role-inline-filter button,
.committee-role-inline-filter .button-secondary {
    height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.committee-role-inline-filter .button-secondary {
    background: #f1f4f2;
    color: #21402b;
    border: 1px solid #d5ddd8;
    text-decoration: none;
}

.committee-role-inline-filter .button-secondary:hover {
    background: #e7ece8;
}

@media (max-width: 900px) {
    .committee-filter-bar {
        align-items: stretch;
    }

    .committee-role-inline-filter {
        margin-left: 0;
        width: 100%;
    }

    .committee-role-inline-filter select,
    .committee-role-inline-filter input[type="text"],
    .committee-role-inline-filter button,
    .committee-role-inline-filter .button-secondary {
        width: 100%;
        min-width: 100%;
    }
}


/* =========================================================
   Stage 78 - 競賽大會角色類型複選樣式
   ========================================================= */

.committee-role-inline-filter select[multiple] {
    min-width: 260px;
    height: auto;
    min-height: 170px;
    padding: 10px 12px;
    line-height: 1.5;
    background: linear-gradient(180deg, #ffffff 0%, #eef8f0 100%);
    background-image: linear-gradient(180deg, #ffffff 0%, #eef8f0 100%);
    overflow-y: auto;
}

.committee-role-inline-filter select[multiple] option {
    padding: 7px 10px;
    border-radius: 8px;
    margin: 2px 0;
}

.committee-role-inline-filter select[multiple] option:checked {
    background: linear-gradient(90deg, #2f8f55 0%, #56b870 100%);
    color: #ffffff;
    font-weight: 900;
}


/* =========================================================
   Stage 79 - 競賽大會角色類型四欄二列核取方塊
   ========================================================= */

.committee-role-inline-filter {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: minmax(520px, 1fr) 220px auto auto;
    gap: 12px;
    align-items: center;
}

.role-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    padding: 12px;
    border: 1px solid #cfe3d3;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f4fbf5 100%);
    box-shadow: 0 8px 20px rgba(54, 94, 64, 0.08);
}

.role-check-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid #d8e8dc;
    border-radius: 14px;
    background: #ffffff;
    color: #193d25;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: all 0.16s ease;
}

.role-check-grid label:hover {
    border-color: #93c69f;
    background: #f1faf3;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(76, 124, 89, 0.12);
}

.role-check-grid input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #2f8f55;
    cursor: pointer;
}

.role-check-grid label:has(input[type="checkbox"]:checked) {
    border-color: #2f8f55;
    background: linear-gradient(180deg, #3fa760 0%, #2f8f55 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(47, 143, 85, 0.22);
}

.committee-role-inline-filter input[type="text"] {
    min-width: 0;
    width: 100%;
}

@media (max-width: 1200px) {
    .committee-role-inline-filter {
        grid-template-columns: 1fr;
    }

    .role-check-grid {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
}

@media (max-width: 640px) {
    .role-check-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Stage 80 - 各職種人員名單：職種六欄五列核取方塊
   ========================================================= */

.role-list-filter-form {
    display: grid;
    grid-template-columns: 1fr 220px 220px auto auto;
    gap: 12px;
    align-items: end;
}

.skill-check-section {
    grid-column: 1 / -1;
    padding: 14px 16px;
    border: 1px solid #cfe3d3;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbf7 100%);
    box-shadow: 0 10px 24px rgba(54, 94, 64, 0.08);
}

.skill-check-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    color: #123d24;
    font-size: 15px;
    font-weight: 900;
}

.skill-check-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid #a8d4b4;
    border-radius: 999px;
    background: #ecf8ef;
    color: #1d5930;
    font-weight: 900;
    cursor: pointer;
    user-select: none;
}

.skill-check-all input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: #2f8f55;
}

.skill-check-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    grid-auto-rows: minmax(42px, auto);
    gap: 10px;
}

.skill-check-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #d8e8dc;
    border-radius: 14px;
    background: #ffffff;
    color: #193d25;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: all 0.16s ease;
}

.skill-check-grid label:hover {
    border-color: #93c69f;
    background: #f1faf3;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(76, 124, 89, 0.12);
}

.skill-check-grid input[type="checkbox"] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    accent-color: #2f8f55;
    cursor: pointer;
}

.skill-check-grid label:has(input[type="checkbox"]:checked) {
    border-color: #2f8f55;
    background: linear-gradient(180deg, #3fa760 0%, #2f8f55 100%);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(47, 143, 85, 0.22);
}

.role-list-filter-form > input[type="text"] {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #d4dfd6;
    border-radius: 14px;
    background: #ffffff;
    color: #23412d;
    font-size: 14px;
    font-weight: 700;
}

.role-list-filter-form > input[type="text"]:focus {
    outline: none;
    border-color: #86b992;
    box-shadow: 0 0 0 4px rgba(134, 185, 146, 0.18);
}

.role-list-filter-form > button,
.role-list-filter-form > .button-secondary {
    height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1400px) {
    .skill-check-grid {
        grid-template-columns: repeat(5, minmax(130px, 1fr));
    }
}

@media (max-width: 1150px) {
    .role-list-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .skill-check-grid {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 720px) {
    .role-list-filter-form {
        grid-template-columns: 1fr;
    }

    .skill-check-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .skill-check-grid {
        grid-template-columns: 1fr;
    }

    .role-list-filter-form > input[type="text"],
    .role-list-filter-form > button,
    .role-list-filter-form > .button-secondary {
        width: 100%;
    }
}


/* =========================================================
   Stage 81 - 修正職種核取項為橫式六欄五列
   ========================================================= */

.skill-check-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.skill-check-grid label {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    min-height: 74px;
    padding: 12px 14px;
    text-align: left;
}

.skill-check-grid label span {
    display: block;
    flex: 1 1 auto;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    line-height: 1.45;
}

.skill-check-grid input[type="checkbox"] {
    margin-top: 2px;
}

@media (max-width: 1400px) {
    .skill-check-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 1150px) {
    .skill-check-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .skill-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================================
   Stage 82 - 修正職種篩選卡片跑版、截字與直式顯示
   ========================================================= */

.skill-check-section {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.skill-check-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100%;
    box-sizing: border-box;
}

.skill-check-grid label {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    align-items: start !important;
    justify-content: start !important;
    justify-items: start !important;
    column-gap: 10px !important;

    width: 100%;
    min-width: 0;
    min-height: 64px;
    box-sizing: border-box;
    padding: 12px 14px !important;

    text-align: left !important;
    overflow: visible;
}

.skill-check-grid input[type="checkbox"] {
    grid-column: 1;
    grid-row: 1;
    width: 17px !important;
    height: 17px !important;
    margin: 2px 0 0 0 !important;
    justify-self: start;
    align-self: start;
    flex: none !important;
}

.skill-check-grid label span {
    grid-column: 2;
    grid-row: 1;

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

    color: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
    text-align: left !important;

    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    overflow: visible !important;
}

/* 避免舊版 filter-form 或 label 樣式干擾職種卡片 */
.role-list-filter-form .skill-check-grid label,
.role-list-filter-form .skill-check-grid label span {
    direction: ltr !important;
    unicode-bidi: normal !important;
}

/* 讓查詢列維持穩定，不壓縮職種區 */
.role-list-filter-form {
    grid-template-columns: 1fr 220px 220px auto auto !important;
}

.role-list-filter-form .skill-check-section {
    grid-column: 1 / -1 !important;
}

/* 桌面寬度足夠時固定六欄；較窄才降欄 */
@media (min-width: 1401px) {
    .skill-check-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1400px) {
    .skill-check-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1150px) {
    .role-list-filter-form {
        grid-template-columns: 1fr 1fr !important;
    }

    .skill-check-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .role-list-filter-form {
        grid-template-columns: 1fr !important;
    }

    .skill-check-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   Stage 83 - 最終修正：職種卡片 checkbox 固定左側、文字橫式不跑版
   ========================================================= */

.skill-check-section {
    width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
}

.skill-check-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.skill-check-grid .skill-option {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    box-sizing: border-box !important;
    padding: 12px 12px 12px 42px !important;

    border: 1px solid #d8e8dc !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #193d25 !important;

    cursor: pointer !important;
    user-select: none !important;
    text-align: left !important;
    overflow: hidden !important;
    transition: all 0.16s ease !important;
}

.skill-check-grid .skill-option:hover {
    border-color: #93c69f !important;
    background: #f1faf3 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(76, 124, 89, 0.12) !important;
}

.skill-check-grid .skill-option-check {
    position: absolute !important;
    left: 14px !important;
    top: 15px !important;

    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    margin: 0 !important;
    padding: 0 !important;

    accent-color: #2f8f55 !important;
    cursor: pointer !important;
    flex: none !important;
    z-index: 2 !important;
}

.skill-check-grid .skill-option-text {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    color: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-align: left !important;

    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    overflow: visible !important;

    direction: ltr !important;
    unicode-bidi: normal !important;
}

.skill-check-grid .skill-option:has(.skill-option-check:checked) {
    border-color: #2f8f55 !important;
    background: linear-gradient(180deg, #3fa760 0%, #2f8f55 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(47, 143, 85, 0.22) !important;
}

/* 覆蓋全域 filter-form input 樣式，避免 checkbox 被拉成 100% 寬 */
.role-list-filter-form .skill-check-grid .skill-option-check[type="checkbox"] {
    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
}

/* 避免舊 label grid / flex 樣式干擾 */
.role-list-filter-form .skill-check-grid label.skill-option {
    grid-template-columns: none !important;
    flex-direction: initial !important;
    align-items: initial !important;
    justify-content: initial !important;
}

/* 桌面版：固定六欄；寬度不足才降欄 */
@media (min-width: 1401px) {
    .skill-check-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1400px) {
    .skill-check-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1150px) {
    .skill-check-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .skill-check-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   Stage 84 - 職種核取方塊文字 20px、行高 1.2、靠左且上下置中
   ========================================================= */

.skill-check-grid .skill-option {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;

    min-height: 72px !important;
    padding: 12px 16px !important;
    text-align: left !important;
}

.skill-check-grid .skill-option-check {
    position: static !important;
    flex: 0 0 auto !important;

    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;

    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
}

.skill-check-grid .skill-option-text {
    display: block !important;
    flex: 1 1 auto !important;

    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;

    text-align: left !important;
    align-self: center !important;

    white-space: normal !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

/* 覆蓋先前 checkbox 絕對定位設定 */
.role-list-filter-form .skill-check-grid label.skill-option {
    position: relative !important;
    grid-template-columns: none !important;
    flex-direction: row !important;
}


/* =========================================================
   Stage 85 - 職種核取方塊文字大小調整為 17px
   ========================================================= */

.skill-check-grid .skill-option-text {
    font-size: 17px !important;
    line-height: 1.2 !important;
}


/* =========================================================
   Stage 86 - 職種核取方塊與「選擇所有職種」文字調整為 18px
   ========================================================= */

.skill-check-grid .skill-option-text {
    font-size: 18px !important;
    line-height: 1.2 !important;
}

.skill-check-all span {
    font-size: 18px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}


/* =========================================================
   Stage 87 - 職種篩選與名單表格字級 / 高度調整
   ========================================================= */

/* 職種篩選標題文字 */
.skill-check-head > span {
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
}

/* 職種核取卡片高度改為 50px */
.skill-check-grid .skill-option {
    min-height: 50px !important;
    height: 50px !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* checkbox 與文字上下置中 */
.skill-check-grid .skill-option-check {
    align-self: center !important;
    margin: 0 !important;
}

.skill-check-grid .skill-option-text {
    align-self: center !important;
    font-size: 18px !important;
    line-height: 1.2 !important;
}

/* 下方顯示人員的表格文字改為 17px */
.table-wrap table {
    font-size: 17px !important;
}

.table-wrap table th,
.table-wrap table td {
    font-size: 17px !important;
    line-height: 1.45 !important;
}

/* 表格內狀態標籤與按鈕同步放大，避免視覺不一致 */
.table-wrap .status-badge,
.table-wrap .table-action,
.table-wrap .fee-action,
.table-wrap .transport-action {
    font-size: 16px !important;
    line-height: 1.2 !important;
}


/* =========================================================
   Stage 88 - 各職種人員名單查詢列文字調整為 18px
   ========================================================= */

/* 角色、關鍵字輸入框 */
.role-list-filter-form > input[type="text"] {
    font-size: 18px !important;
    line-height: 1.2 !important;
    height: 50px !important;
}

/* 查詢、清除按鈕 */
.role-list-filter-form > button,
.role-list-filter-form > .button-secondary {
    font-size: 18px !important;
    line-height: 1.2 !important;
    height: 50px !important;
    font-weight: 900 !important;
}

/* placeholder 也同步放大 */
.role-list-filter-form > input[type="text"]::placeholder {
    font-size: 18px !important;
}


/* =========================================================
   Stage 93 - 人員表單職種與委員角色複選樣式
   ========================================================= */

.person-role-check-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.person-role-check-grid label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid #d8e8dc;
    border-radius: 14px;
    background: #ffffff;
    color: #193d25;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
}

.person-role-check-grid label:hover {
    border-color: #93c69f;
    background: #f1faf3;
}

.person-role-check-grid input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #2f8f55;
}

.person-role-check-grid label:has(input[type="checkbox"]:checked) {
    border-color: #2f8f55;
    background: linear-gradient(180deg, #3fa760 0%, #2f8f55 100%);
    color: #ffffff;
}

@media (max-width: 900px) {
    .person-role-check-grid {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

@media (max-width: 560px) {
    .person-role-check-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   Stage 94 - 人員表單：職種名稱與委員角色分區、角色核取項高度 50px
   ========================================================= */

.person-role-check-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 0 !important;
}

.person-role-check-grid label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;

    min-height: 50px !important;
    height: 50px !important;
    padding: 0 16px !important;

    border: 1px solid #d8e8dc !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #193d25 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;

    cursor: pointer !important;
    user-select: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
}

.person-role-check-grid label:hover {
    border-color: #93c69f !important;
    background: #f1faf3 !important;
}

.person-role-check-grid input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    accent-color: #2f8f55 !important;
}

.person-role-check-grid label span {
    display: inline-block !important;
    flex: 0 1 auto !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
}

.person-role-check-grid label:has(input[type="checkbox"]:checked) {
    border-color: #2f8f55 !important;
    background: linear-gradient(180deg, #3fa760 0%, #2f8f55 100%) !important;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .person-role-check-grid {
        grid-template-columns: repeat(2, minmax(150px, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .person-role-check-grid {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   Stage 95 - 人員表單：職種名稱改為複選卡片
   ========================================================= */

.skill-check-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

.skill-check-card {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    min-height: 50px !important;
    height: 50px !important;
    padding: 0 16px !important;
    border: 1px solid #d8e8dc !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #193d25 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    user-select: none !important;
    box-sizing: border-box !important;
}

.skill-check-card:hover {
    border-color: #93c69f !important;
    background: #f1faf3 !important;
}

.skill-check-card input[type="checkbox"] {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    accent-color: #2f8f55 !important;
}

.skill-check-card span {
    display: inline-block !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

.skill-check-card:has(input[type="checkbox"]:checked) {
    border-color: #2f8f55 !important;
    background: linear-gradient(180deg, #3fa760 0%, #2f8f55 100%) !important;
    color: #ffffff !important;
}

@media (max-width: 1500px) {
    .skill-check-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1280px) {
    .skill-check-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    .skill-check-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    .skill-check-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 520px) {
    .skill-check-grid {
        grid-template-columns: 1fr !important;
    }
}