/* Custom styles for Inter font and background */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* 添加到你的 CSS 文件中 */
body.no-scroll {
    overflow: hidden; /* 禁用滚动条 */
    /* 某些浏览器可能还需要以下属性来确保整个视口不滚动，特别是移动端 */
    position: fixed; /* 固定定位，防止页面内容跟着滚动 */
    width: 100%; /* 确保固定定位时保持宽度 */
    height: 100%; /* 确保固定定位时保持高度 */
}
body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(to right top, #6366f1, #8b5cf6, #d8b4fe); /* Subtle gradient background */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0; /* Remove default body margin */
    color: #333; /* Ensure text color is readable */
    font-size: 14px; /* Slightly smaller base font for compactness */
}

h1, h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 8px; /* Reduced padding */
    margin-top: 25px; /* Reduced margin */
    font-size: 1.8em; /* Adjusted for h1 */
}

h2 {
    font-size: 1.4em; /* Adjusted for h2 */
    margin-top: 20px; /* Reduced margin */
}

.container {
    /*max-width: 1200px; !* Keep max-width reasonable *!*/
    margin: 2rem auto; /* Adjusted margin for consistency with Tailwind */
    background-color: #ffffff;
    padding: 2rem; /* Adjusted padding for consistency with Tailwind */
    border-radius: 1rem; /* Adjusted border-radius for consistency with Tailwind */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Adjusted box-shadow for consistency with Tailwind */
}

/* Override default display for login-container and main-content for initial state */
#admin-login-container, #user-login-container, #register-container {
    /*display: none; !* Controlled by JS *!*/
}
#main-content {
    /*display: none; !* Controlled by JS *!*/
}

.header-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}
.logout-button {
    background-color: #ef4444; /* red-500 */
    color: white;
    font-weight: bold;
    margin-left: 1.5rem;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    transition: background-color 0.3s ease-in-out;
}
.logout-button:hover {
    background-color: #dc2626; /* red-600 */
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px; /* Reduced margin */
    font-size: 14px; /* Table font size */
    text-align: left; /* Ensure text alignment */
}

th, td {
    border: 1px solid #dfe6e9;
    padding: 10px; /* Reduced padding */
    text-align: left;
    vertical-align: middle; /* Ensures content is vertically centered in cells */
}

th {
    background-color: #e9eff2;
    font-weight: bold;
    white-space: nowrap; /* Prevent headers from wrapping too much */
    color: #4b5563; /* gray-700 */
}

tbody tr:nth-child(even) {
    background-color: #f8fbfd;
}
tbody tr:hover {
    background-color: #f3f4f6; /* gray-100 */
}

label {
    display: block;
    margin-bottom: 5px; /* Reduced margin */
    font-weight: bold;
    color: #555;
    font-size: 14px; /* Label font size */
}

input[type="number"],
input[type="text"], /* Uncommented this line */
input[type="password"], /* Added password type */
input[type="email"],    /* Added email type */
input[type="datetime-local"], /* Add datetime-local */
select {
    padding: 8px 10px; /* Reduced padding */
    margin-bottom: 10px; /* Reduced margin */
    width: 100%; /* Use 100% width, Tailwind's w-full handles it */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px; /* Input font size */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow appearance-none */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input:focus, select:focus {
    outline: none;
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); /* ring-2 ring-blue-500 */
}

/* Specific adjustment for datetime-local to fit well */
input[type="datetime-local"] {
    width: 100%; /* Can be adjusted if native picker needs more space */
}

button {
    padding: 10px 15px; /* Reduced padding */
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px; /* Button font size */
    transition: background-color 0.3s ease;
}

button.delete {
    background-color: #e74c3c;
    margin-left: 8px; /* Reduced margin */
}

button.edit {
    background-color: #f39c12;
    margin-right: 8px; /* Reduced margin */
}

button:hover {
    background-color: #2980b9;
}

button.delete:hover {
    background-color: #c0392b;
}

button.edit:hover {
    background-color: #e67e22;
}

.message {
    margin-top: 10px; /* Reduced margin */
    padding: 10px; /* Reduced padding */
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px; /* Message font size */
}

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

.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #721c24;
}

.message.info { /* Added info message style, matching common patterns */
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.no-mappings {
    text-align: center;
    color: #777;
    padding: 15px;
    font-style: italic;
}

/* --- New styles for status and unavailable mappings --- */
.status-available {
    color: #28a745; /* Green for available */
    font-weight: bold;
}

.status-unavailable {
    color: #dc3545; /* Red for unavailable */
    font-weight: bold;
}

tr.unavailable-mapping {
    background-color: #fff3f3; /* Light red background for unavailable rows */
    opacity: 0.8; /* Slightly faded look */
}
/* --- End new styles --- */


/* --- Modal Styles (adjustments for compactness) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: #fff;
    padding: 25px; /* Slightly reduced padding */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 450px; /* Slightly reduced max-width for modals */
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px; /* Reduced padding */
    margin-bottom: 15px; /* Reduced margin */
}

.modal-header h2 {
    margin: 0;
    border-bottom: none;
    padding-bottom: 0;
    color: #2c3e50;
    font-size: 1.5em; /* Adjusted modal title font size */
}

.modal-close-button {
    background: none;
    border: none;
    font-size: 20px; /* Slightly smaller close button */
    cursor: pointer;
    color: #777;
    padding: 3px;
    line-height: 1;
}

.modal-close-button:hover {
    color: #333;
}

/* --- Search & Pagination Styles (adjustments for compactness) --- */
.search-container {
    margin-bottom: 10px;
    display: flex; /* Changed to flex */
    gap: 8px;
    align-items: center;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}
.search-container input {
    flex-grow: 1;
    max-width: 300px;
    margin-bottom: 0;
    padding: 8px 10px;
    font-size: 14px;
}
.search-container label {
    margin-bottom: 0;
    width: auto;
    white-space: nowrap;
}

/* Remove margin-top from the add-new button as it's now inside a flex container */
button.add-new {
    margin-top: 0; /* Changed from 15px to 0 */
}

.pagination-controls {
    margin-top: 15px; /* Reduced margin */
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px; /* Pagination font size */
}

.pagination-buttons button {
    margin: 0 4px; /* Reduced margin */
    padding: 8px 12px; /* Smaller buttons */
    font-size: 13px; /* Smaller button font */
}

.pagination-info {
    font-size: 13px;
    color: #555;
}

.modal-buttons {
    display: flex; /* 启用 Flexbox */
    justify-content: flex-end; /* 将按钮靠右对齐 (可选，但常用) */
    gap: 10px; /* 按钮之间的间距，你可以调整这个值 */
    padding-top: 15px; /* 给按钮顶部一些内边距，与模态框内容区分 */
    border-top: 1px solid #eee; /* 添加一个顶部边框，视觉上区分内容和按钮区域 */
}

/* 按钮本身的一些基本样式优化 (可选) */
.modal-buttons button {
    padding: 8px 15px; /* 调整内边距 */
    border: none;
    border-radius: 4px; /* 圆角 */
    cursor: pointer;
    font-size: 14px;
}

#cancelModalButton {
    background-color: #f0f0f0; /* 浅灰色背景 */
    color: #333;
}

#cancelModalButton:hover {
    background-color: #e0e0e0;
}

#saveMappingButton {
    background-color: #007bff; /* 蓝色背景 */
    color: white;
}

#saveMappingButton:hover {
    background-color: #0056b3;
}

.rows-per-page {
    display: flex; /* 启用 Flexbox */
    align-items: center; /* 垂直居中对齐子项（标签和选择框）*/
    justify-content: center; /* 水平居中整个容器（如果它占据了父容器的全部宽度）*/
    gap: 8px; /* 标签和选择框之间的间距 */
    margin-top: 15px; /* 可选：给这个部分顶部一些间距 */
    margin-bottom: 15px; /* 可选：给这个部分底部一些间距 */
}

.rows-per-page label {
    font-size: 14px; /* 调整字体大小 */
    color: #555; /* 调整文字颜色 */
    white-space: nowrap; /* 防止文本换行 */
}

.rows-per-page select {
    padding: 6px 8px; /* 调整内边距 */
    border: 1px solid #ccc; /* 边框 */
    border-radius: 4px; /* 圆角 */
    font-size: 14px;
    background-color: #fff; /* 背景色 */
    cursor: pointer;
}

/* Auth switch buttons specific styles */
.auth-switch-buttons button {
    background-color: #e5e7eb; /* gray-200 */
    color: #4b5563; /* gray-700 */
    font-weight: bold;
    padding: 0.5rem 1rem; /* py-2 px-4 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.3s ease-in-out;
}
.auth-switch-buttons button:hover {
    background-color: #d1d5db; /* gray-300 */
}
.auth-switch-buttons button.active {
    background-color: #3b82f6; /* blue-500 */
    color: white;
}

/* 针对映射表单的 Grid 布局 */
.mapping-form-grid {
    display: grid;
    /* 默认在小屏幕上为一列 */
    grid-template-columns: 1fr;
    gap: 15px; /* 元素之间的间距 */
}

/* 在中等屏幕上显示为两列 */
@media (min-width: 768px) { /* 例如，对于平板电脑 */
    .mapping-form-grid {
        grid-template-columns: 1fr 1fr; /* 两列，每列等宽 */
        gap: 25px; /* 增大列间距，可选 */
    }
}

/* 在大屏幕上显示为三列 */
@media (min-width: 1024px) { /* 例如，对于桌面大屏 */
    .mapping-form-grid {
        grid-template-columns: 1fr 1fr 1fr; /* 三列，每列等宽 */
        gap: 20px; /* 调整列间距 */
    }
}

/* 统一表单组样式 (如果你的 user_style.css 和 style.css 不共享，则可能需要复制) */
.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0; /* 重置可能存在的外部边距 */
}

.form-group label {
    margin-bottom: 5px; /* 标签和输入框之间的间距 */
    font-weight: 500; /* 让标签稍微粗一点，提升可读性 */
    color: #333; /* 示例颜色，根据您的主题调整 */
    /* 添加暗色模式支持，如果你的 style.css 有暗色模式切换逻辑 */
    /* .dark .form-group label { color: #ccc; } */
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"], /* 虽然此表单没有密码，但可以作为通用规则 */
.form-group input[type="number"],
.form-group input[type="datetime-local"],
.form-group select {
    width: 100%; /* 输入框填充整个网格单元格 */
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 不会增加总宽度 */
    /* 添加暗色模式支持 */
    /* .dark & { background-color: #444; color: #eee; border-color: #666; } */
}

.form-group small {
    font-size: 0.75rem; /* 小字号 */
    color: #666; /* 提示文本颜色 */
    margin-top: 4px; /* 与输入框的间距 */
    /* 添加暗色模式支持 */
    /* .dark & { color: #aaa; } */
}

/* 让保存/取消按钮横跨所有列 */
.form-buttons-full-width {
    grid-column: 1 / -1; /* 让这个 div 横跨所有列 */
    display: flex;
    justify-content: flex-end; /* 按钮靠右对齐 */
    gap: 10px; /* 按钮之间的间距 */
    margin-top: 20px; /* 与上方元素的间距 */
}

/* 模态框内容的宽度需要调整，使其能容纳多列 */
.modal-content {
    max-width: 800px; /* 示例宽度，可以根据需要调整，确保能容纳3列 */
    width: 90%; /* 响应式宽度 */
    /* ... 保持您现有的其他 modal-content 样式 ... */
}