/* General body styling */
body {
    margin: 0;
    background-color: #f5f5f5; /* Light grey background, common in Material Design */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 0; /* 去掉底部导航栏的空间 */
}

/* App container for main content */
#app-container {
    padding: 16px 5px; /* 修改水平内边距为5px */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    padding-top: 64px; /* 为顶部标题栏留出空间 */
    box-sizing: border-box; /* 确保内边距不会增加元素宽度 */
    width: 100%; /* 确保宽度为100% */
    max-width: 100%; /* 最大宽度不超过100% */
    overflow-x: hidden; /* 防止水平滚动 */
    background: wheat;

}

/* Card styling for content blocks */
.content-card {
    background-color: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: calc(100% - 10px); /* 只保留5px的两侧空间 */
    max-width: 1200px; /* 增加最大宽度 */
    margin-bottom: 16px;
    box-sizing: border-box; /* 确保内边距不会增加元素宽度 */
}

/* 首页卡片样式 */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    width: 100%;
    padding: 8px 0;
}

.dashboard-card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: inherit;
}

.dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.dashboard-card .material-icons {
    font-size: 36px;
    margin-bottom: 8px;
    color: #6200ee;
}

.dashboard-card-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

/* 顶部导航栏样式 */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: #6200ee;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 16px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 999;
    justify-content: space-between; /* 确保元素分散对齐 */
}

/* 顶部左侧按钮样式（返回按钮和首页按钮） */
.top-left-buttons {
    display: flex;
    align-items: center;
    min-width: 80px; /* 确保左侧有足够的空间，使标题居中 */
}

.back-button,
.home-button {
    background: none;
    border: none;
    color: white;
    display: flex;
    align-items: center;
    padding: 8px;
    margin-right: 4px;
    cursor: pointer;
}

.page-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin: 0;
    white-space: nowrap;
}

/* 顶部用户操作按钮样式 */
.logout-button {
    display: flex;
    align-items: center;
    color: white;
    background: none;
    border: none;
    padding: 4px 12px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    min-width: 80px; /* 确保右侧有足够的空间，使标题居中 */
    justify-content: flex-end;
}

#user-actions {
    display: flex;
    justify-content: flex-end; /* 确保退出按钮靠右 */
    min-width: 80px; /* 保持与左侧按钮相同的最小宽度 */
}

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

/* Form styling */
.form-field {
    margin-bottom: 16px;
    width: 100%;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px; /* Spacing between buttons */
    margin-top: 20px;
}

/* Loader styling */
.loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: fixed; /* Or absolute, depending on desired behavior */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* Ensure it's on top */
}

/* Helper class for hiding elements */
.hidden {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .content-card {
        border-radius: 8px;
        margin: 0 auto 16px;
        width: calc(100% - 10px); /* 保持与桌面版相同的侧边距 */
    }
    
    #app-container {
        padding: 64px 5px 16px; /* 修改水平内边距为5px */
        background: wheat;

    }
    
    .dashboard-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Styling for survey question items */
.question-item {
    margin-bottom: 12px;
    padding: 12px; /* 减小padding */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background-color: #f9f9f9; /* 添加浅色背景 */
    position: relative;
}

/* 题目标题样式增强 */
.question-item h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.87); /* 黑色文字 */
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

/* 删除按钮添加文字说明 */
.delete-question-btn {
    display: flex !important;
    align-items: center;
    color: var(--mdc-theme-error, #b00020) !important;
    border-color: var(--mdc-theme-error, #b00020) !important;
    position: absolute;
    right: 8px;
    top: 8px;
    padding: 0 8px !important;
    height: 32px !important;
}

.delete-question-btn .material-icons {
    font-size: 16px !important;
    margin-right: 4px !important;
    color: var(--mdc-theme-error, #b00020) !important;
}

/* 卡片内容更紧凑 */
.question-item .mdc-text-field {
    margin-bottom: 8px; /* 减小字段间距 */
}

.question-item .form-field {
    margin-bottom: 8px; /* 减小表单字段间距 */
}

.option-item {
    margin-bottom: 4px; /* 减小选项间距 */
}

/* 选项数量加减按钮样式优化 */
.num-options-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-left: 8px;
    background-color: white;
}

.num-options-control button {
    width: 36px;
    height: 36px;
    background-color: #f0f0f0;
    border: none;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
}

.num-options-control button:hover {
    background-color: #e0e0e0;
}

.num-options-control span {
    padding: 0 12px;
    font-weight: 500;
}

.num-options-field {
    display: flex;
    align-items: center;
    margin-top: 12px;
    background-color: white;
    padding: 8px;
    border-radius: 4px;
}

.num-options-field .mdc-typography--subtitle2 {
    font-weight: 500;
}

/* 选项容器优化 */
.option-container {
    background-color: white;
    padding: 8px;
    border-radius: 4px;
    margin-top: 8px;
    display: none;
}

.option-item {
    padding: 4px 0;
}

/* 表单内容紧凑化 */
.mdc-card__primary-action {
    padding: 16px !important; /* 覆盖之前的样式 */
}

/* 添加问题按钮样式 */
#add-question-btn {
    background-color: #6200ee; /* 主题色 */
    color: white !important;
    font-weight: 500;
    padding: 0 16px;
    height: 36px;
    border-radius: 18px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    margin: 16px 0;
}

#add-question-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

#add-question-btn .material-icons {
    font-size: 20px;
    margin-right: 4px;
}

/* 优化题目类型按钮组 */
.question-type-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 8px 0 12px;
    background-color: white;
    padding: 4px;
    border-radius: 4px;
}

.question-type-btn {
    min-width: auto !important;
    padding: 0 4px !important;
    margin: 0 !important;
    flex: 1;
    height: 32px !important;
}

.question-type-btn.mdc-button--raised {
    background-color: #6200ee;
    color: white;
}

.question-type-btn.mdc-button--raised .material-icons {
    color: white;
}

.question-type-btn .material-icons {
    font-size: 14px;
    margin-right: 2px;
    color: #6200ee;
}

.question-type-btn .mdc-button__label {
    font-size: 13px;
}

/* 选项数量控制器样式优化 */
.num-options-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-left: 8px;
    background-color: white;
}

.option-container {
    display: none;
}

/* 优化问卷创建页面布局 */
.question-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.question-type-buttons .mdc-button {
    min-width: auto;
    height: 36px;
}

.question-type-buttons .material-icons {
    font-size: 16px !important;
    margin-right: 4px !important;
}

.question-item .mdc-icon-button {
    --mdc-icon-button-size: 32px;
    width: 32px;
    height: 32px;
}

/* Snackbar styling - 移到顶部 */
.mdc-snackbar {
    position: fixed;
    top: 56px; /* 放在顶部标题栏下方 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001; /* Above loader if necessary */
}

/* 按钮中的图标样式调整 */
.mdc-button .material-icons {
    margin-right: 4px;
    vertical-align: middle;
}

.mdc-icon-button .material-icons {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 适配移动端的表单控件样式 */
@media (max-width: 600px) {
    .mdc-text-field {
        width: 100%;
    }
    
    .form-actions {
        flex-direction: column-reverse;
    }
    
    .form-actions .mdc-button {
        width: 100%;
        margin-bottom: 8px;
    }
}

/* 为问卷选项提供更好的移动端体验 */
.option-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.option-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    min-width: 80px;
}

/* 加载图标的回退样式 */
@keyframes loader-rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 为加载图标提供一个简单的回退 */
.mdc-circular-progress--indeterminate {
    position: relative;
}

.mdc-circular-progress--indeterminate::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid #4285f4;
    border-radius: 50%;
    border-top-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
    animation: loader-rotation 1s linear infinite;
}

/* Button styling for user actions in top bar */
#user-actions .mdc-button {
    margin-left: 8px;
}

/* 问卷结果页样式 */
.question-result-item {
    padding: 12px !important;
    margin-bottom: 12px;
}

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

.result-export-btn {
    margin-left: auto !important;
}

/* 问卷结果顶部信息 */
.survey-result-header {
    margin-bottom: 16px;
}

.survey-result-header h2 {
    margin-bottom: 8px;
}

.survey-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.survey-info-item {
    display: block;
    line-height: 1.5;
}

.survey-info-label {
    font-weight: bold;
    margin-right: 4px;
}

/* 统计表格样式 */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 14px;
}

.stats-table th,
.stats-table td {
    padding: 6px 8px;
    text-align: left;
    border: 1px solid #e0e0e0;
}

.stats-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.stats-table td {
    vertical-align: middle;
}

.stats-table th:nth-child(2),
.stats-table td:nth-child(2) {
    text-align: center;
    width: 80px;
}

.stats-table th:nth-child(3),
.stats-table td:nth-child(3) {
    text-align: center;
    width: 80px;
}

/* 卡片状态标签样式 */
.status-tag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 0 0 4px 0;
    z-index: 1;
}

.status-tag-active {
    background-color: rgba(76, 175, 80, 0.1);
    color: #4CAF50;
    border-right: 1px solid #4CAF50;
    border-bottom: 1px solid #4CAF50;
}

.status-tag-closed {
    background-color: rgba(158, 158, 158, 0.1);
    color: #9E9E9E;
    border-right: 1px solid #9E9E9E;
    border-bottom: 1px solid #9E9E9E;
}

.status-tag-pending {
    background-color: rgba(255, 152, 0, 0.1);
    color: #FF9800;
    border-right: 1px solid #FF9800;
    border-bottom: 1px solid #FF9800;
}

/* 卡片内容相对定位 */
.mdc-card {
    position: relative;
    overflow: visible !important;
    /* background: #f5f5f5; */
}

/* Snackbar 样式优化 - 文字居中 */
.mdc-snackbar .mdc-snackbar__surface {
    justify-content: center;
}

.mdc-snackbar .mdc-snackbar__label {
    text-align: center;
    flex-grow: initial;
    padding: 0;
    margin: 0 auto;
}

.mdc-snackbar .mdc-snackbar__actions {
    display: none; /* 隐藏按钮区域 */
}

/* 卡片操作按钮优化 */
.mdc-card__actions .mdc-button {
    min-width: auto;
    padding: 0 8px;
    margin-right: 8px !important;
    font-size: 13px;
}

.mdc-card__actions .mdc-button .material-icons {
    font-size: 16px;
    margin-right: 2px !important;
}

/* 按钮颜色主题 */
.toggle-status-btn[data-status="active"], 
.toggle-admin-status-btn[data-action="activate"] {
    color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}

.toggle-status-btn[data-status="closed"], 
.toggle-admin-status-btn[data-action="deactivate"] {
    color: #757575 !important;
    border-color: #757575 !important;
}

.view-results-btn {
    color: #2196F3 !important;
    border-color: #2196F3 !important;
}

.delete-survey-btn, 
.delete-admin-btn, 
.reject-reg-btn {
    color: var(--mdc-theme-error, #b00020) !important;
    border-color: var(--mdc-theme-error, #b00020) !important;
}

.approve-reg-btn {
    color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}

/* 小屏幕上的按钮样式优化 */
@media (max-width: 600px) {
    .mdc-card__actions {
        flex-wrap: wrap;
        padding: 8px;
    }
    
    .mdc-card__actions .mdc-button {
        margin-bottom: 4px;
        padding: 0 6px;
        height: 32px;
    }
    
    .mdc-card__actions .mdc-button .mdc-button__label {
        font-size: 12px;
    }
}

/* 按钮边框样式优化 */
.mdc-button--outlined {
    border-width: 1px;
    border-style: solid;
}

/* 查看结果按钮 - 蓝色 */
.view-results-btn {
    color: #2196F3 !important;
    border-color: #2196F3 !important;
}
.view-results-btn .material-icons {
    color: #2196F3 !important;
}

/* 删除按钮 - 红色 */
.delete-survey-btn, 
.delete-admin-btn, 
.reject-reg-btn {
    color: var(--mdc-theme-error, #b00020) !important;
    border-color: var(--mdc-theme-error, #b00020) !important;
}
.delete-survey-btn .material-icons,
.delete-admin-btn .material-icons,
.reject-reg-btn .material-icons {
    color: var(--mdc-theme-error, #b00020) !important;
}

/* 激活/启用按钮 - 绿色 */
.toggle-status-btn[data-status="active"],
.toggle-admin-status-btn[data-action="activate"],
.approve-reg-btn {
    color: #4CAF50 !important;
    border-color: #4CAF50 !important;
}
.toggle-status-btn[data-status="active"] .material-icons,
.toggle-admin-status-btn[data-action="activate"] .material-icons,
.approve-reg-btn .material-icons {
    color: #4CAF50 !important;
}

/* 关闭/停用按钮 - 灰色 */
.toggle-status-btn[data-status="closed"],
.toggle-admin-status-btn[data-action="deactivate"] {
    color: #757575 !important;
    border-color: #757575 !important;
}
.toggle-status-btn[data-status="closed"] .material-icons,
.toggle-admin-status-btn[data-action="deactivate"] .material-icons {
    color: #757575 !important;
}

/* 调整按钮的最小宽度和内边距，使其在小屏幕上更紧凑 */
.mdc-card__actions .mdc-button {
    min-width: auto;
    padding: 0 8px;
    margin: 0 4px;
    font-size: 0.85rem;
}

/* 小屏幕适配 */
@media (max-width: 600px) {
    .mdc-card__actions {
        flex-wrap: wrap;
    }
    
    .mdc-card__actions .mdc-button {
        margin: 4px;
        padding: 0 6px;
        flex-grow: 1;
    }
}

/* 简化版的选项样式 */
.simplified-option {
    padding: 8px 12px;
    background-color: white;
    border-radius: 4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border-left: 3px solid #6200ee;
}

.simplified-option .option-letter {
    color: #6200ee;
    font-weight: 500;
    margin-right: 8px;
    min-width: 20px;
}

/* 问答题提示样式 */
.text-question-info {
    margin-top: 8px;
    padding: 10px 12px;
    background-color: white;
    border-radius: 4px;
    border-left: 3px solid #6200ee;
    color: rgba(0,0,0,0.7);
}

.marginRight12px, .marginRight10px{
    margin-right: 12px;
}

.noborder{
    /* background-color: none; */
    background-color: transparent;
    padding: 0;
    border:none;
    box-shadow: none;

}