:root {
    /* Adjusted Pastel Colors for better contrast with white text */
    --pastel-blue: #64B5F6;   /* Was #90CAF9 */
    --pastel-green: #66BB6A;  /* Was #81C784 */
    --pastel-yellow: #FFD54F; /* Was #FFE082 */
    --pastel-red: #E57373;    /* Softened from #EF5350 */
    --pastel-purple: #BA68C8; /* Was #B39DDB */
    --bg-color: #F5F7FB;
    --text-color: #444;
}

body {
    background-color: var(--bg-color);
    font-family: 'Sarabun', sans-serif; /* Thai font */
    color: var(--text-color);
}

.card {
    border-radius: 20px;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.btn {
    border-radius: 20px;
    padding: 8px 20px;
}

.btn-primary {
    background-color: var(--pastel-blue);
    border-color: var(--pastel-blue);
    color: #fff;
}

.btn-primary:hover {
    background-color: #9ab5be;
    border-color: #9ab5be;
}

.btn-success {
    background-color: var(--pastel-green);
    border-color: var(--pastel-green);
    color: white;
}

.btn-danger {
    background-color: var(--pastel-red);
    border-color: var(--pastel-red);
    color: white;
}

.navbar {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.table th {
    background-color: var(--pastel-blue);
    color: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.alert {
    border-radius: 15px;
}

/* SweetAlert Customization */
.swal2-popup {
    border-radius: 20px !important;
}

/* Dashboard Stat Cards */
.stat-card {
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.stat-card:hover {
    transform: translateY(-5px);
}

.stat-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    flex-shrink: 0;
}

.stat-title {
    font-size: 14px;
    color: #666; /* Darker for light mode */
    margin-bottom: 5px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
}

.bg-pastel-blue { background-color: var(--pastel-blue); }
.bg-pastel-green { background-color: var(--pastel-green); }
.bg-pastel-yellow { background-color: var(--pastel-yellow); color: #555; }
.bg-pastel-red { background-color: var(--pastel-red); }
.bg-pastel-purple { background-color: var(--pastel-purple); }

/* Menu Grid Customization */
.modal-backdrop {
    background-color: transparent !important;
}

.menu-grid-modal .modal-dialog {
    margin-right: 20px;
    margin-top: 65px; /* Moved closer to the button */
    margin-left: auto;
}

.menu-grid-modal .modal-content {
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.05);
    background-color: #fff;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15); /* Slightly stronger shadow for visibility */
}

.user-profile-section {
    text-align: center;
    padding: 15px 0 10px; /* Reduced top padding */
}

.user-avatar {
    width: 60px;
    height: 60px;
    background-color: #e9ecef;
    color: #999;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 5px; /* Reduced margin */
}

.role-badge {
    background-color: var(--pastel-red);
    color: white;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
}

.menu-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px; /* Adjusted gap */
    padding: 10px 20px 20px; /* Adjusted padding */
}

.menu-grid-btn {
    background-color: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 10px;
    text-align: center;
    transition: all 0.2s;
    color: var(--text-color);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90px;
}

.menu-grid-btn span {
    font-size: 13px;
    font-weight: 500;
}

.menu-grid-btn:hover {
    background-color: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    color: var(--text-color);
}

.menu-icon {
    font-size: 24px;
    margin-bottom: 5px;
    color: var(--pastel-blue); /* Default fallback */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.icon-dashboard { color: #FF6961 !important; } /* Red/Pink */
.icon-registry { color: #77DD77 !important; } /* Green (like Sheet icon) */
.icon-import { color: #AEC6CF !important; } /* Blue/Green */
.icon-backup { color: #B39EB5 !important; } /* Purple */
.icon-settings { color: #999 !important; } /* Gray */
.icon-about { color: #999 !important; } /* Gray */

.logout-section {
    padding: 15px 20px 20px; /* Adjusted padding */
    border-top: none; /* Removed border to look cleaner */
}

.btn-logout-full {
    width: 100%;
    border: 1px solid var(--pastel-red);
    color: var(--pastel-red);
    border-radius: 25px;
    padding: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.btn-logout-full:hover {
    background-color: var(--pastel-red);
    color: white;
}

/* Specific Icon Colors if needed */
.icon-dashboard { color: var(--pastel-red); }
.icon-registry { color: var(--pastel-blue); }
.icon-import { color: var(--pastel-green); }
.icon-backup { color: var(--pastel-purple); }
.icon-settings { color: #aaa; }

.logout-section {
    padding: 20px;
}

.btn-logout-full {
    width: 100%;
    border-radius: 25px;
    border: 1px solid var(--pastel-red);
    color: var(--pastel-red);
    background: white;
    padding: 10px;
}

.btn-logout-full:hover {
    background-color: var(--pastel-red);
    color: white;
}

/* Dark Mode Overrides */
[data-bs-theme="dark"] {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #1e1e1e;
    --border-color: #333;
    --input-bg: #2d2d2d;
    --input-text: #e0e0e0;
}

[data-bs-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .menu-grid-modal .modal-content,
[data-bs-theme="dark"] .menu-grid-btn {
    background-color: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* Darker shadow */
}

[data-bs-theme="dark"] .navbar {
    background-color: var(--card-bg) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

[data-bs-theme="dark"] .navbar-brand,
[data-bs-theme="dark"] .navbar-text,
[data-bs-theme="dark"] .nav-link,
[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5, 
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .fw-bold {
    color: var(--text-color) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: #aaa !important;
}

[data-bs-theme="dark"] .stat-title {
    color: #b0bec5 !important;
}

/* Custom Dropdown Menu */
.navbar-nav .nav-link {
    font-weight: 500;
    color: #555;
    padding: 0.8rem 1rem !important;
    transition: color 0.2s;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: var(--pastel-blue);
    background-color: rgba(174, 198, 207, 0.1);
    border-radius: 10px;
}

.custom-dropdown-menu {
    border-radius: 20px;
    border: none;
    padding: 15px;
    min-width: 320px;
    animation: dropdownFadeIn 0.2s ease-out;
    z-index: 1100; /* Ensure it's above map controls (z-index: 1000) */
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.custom-dropdown-item {
    border-radius: 15px;
    padding: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
    display: block;
    white-space: normal;
}

.custom-dropdown-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background-color: white !important;
    border-color: #eee;
}

.custom-dropdown-item .icon-wrapper {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
    flex-shrink: 0;
}

/* Background Colors for Dropdown Items */
.bg-pastel-purple-light { background-color: #F3E5F5; }
.bg-pastel-green-light { background-color: #E8F5E9; }
.bg-pastel-yellow-light { background-color: #FFFDE7; }
.bg-pastel-pink-light { background-color: #FCE4EC; }
.bg-pastel-blue-light { background-color: #E3F2FD; }
.bg-pastel-orange-light { background-color: #FFF3E0; }
.bg-pastel-red-light { background-color: #FFEBEE; }

/* Text Colors for Icons */
.text-purple { color: #8E24AA; }
.text-green { color: #2E7D32; }
.text-yellow { color: #FBC02D; }
.text-pink { color: #C2185B; }
.text-blue { color: #1565C0; }
.text-orange { color: #EF6C00; }

/* Dark Mode for Dropdowns */
[data-bs-theme="dark"] .custom-dropdown-menu {
    background-color: #1e1e1e;
    border: 1px solid #333;
}

[data-bs-theme="dark"] .custom-dropdown-item:hover {
    background-color: #2d2d2d !important;
    border-color: #444;
}

[data-bs-theme="dark"] .bg-pastel-purple-light { background-color: #4A148C; }
[data-bs-theme="dark"] .bg-pastel-red-light { background-color: #B71C1C; }
[data-bs-theme="dark"] .bg-pastel-green-light { background-color: #1B5E20; }
[data-bs-theme="dark"] .bg-pastel-yellow-light { background-color: #F57F17; }
[data-bs-theme="dark"] .bg-pastel-pink-light { background-color: #880E4F; }
[data-bs-theme="dark"] .bg-pastel-blue-light { background-color: #0D47A1; }
[data-bs-theme="dark"] .bg-pastel-orange-light { background-color: #E65100; }

[data-bs-theme="dark"] .text-purple { color: #E1BEE7; }
[data-bs-theme="dark"] .text-green { color: #C8E6C9; }
[data-bs-theme="dark"] .text-yellow { color: #FFF9C4; }
[data-bs-theme="dark"] .text-pink { color: #F8BBD0; }
[data-bs-theme="dark"] .text-blue { color: #BBDEFB; }
[data-bs-theme="dark"] .text-orange { color: #FFE0B2; }

[data-bs-theme="dark"] .icon-wrapper {
    background-color: rgba(255,255,255,0.1) !important;
}

[data-bs-theme="dark"] .text-dark {
    color: #e0e0e0 !important;
}

[data-bs-theme="dark"] .table {
    color: var(--text-color);
    --bs-table-color: var(--text-color);
    --bs-table-bg: var(--card-bg);
    --bs-table-border-color: var(--border-color);
    --bs-table-hover-bg: #2d2d2d;
}

[data-bs-theme="dark"] .table-light {
    background-color: #2d2d2d;
    color: var(--text-color);
    --bs-table-bg: #2d2d2d;
    --bs-table-color: var(--text-color);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text {
    background-color: var(--input-bg);
    border-color: var(--border-color);
    color: var(--input-text);
}

[data-bs-theme="dark"] .input-group-text {
    background-color: #333;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #3d3d3d;
    color: #fff;
    border-color: var(--pastel-blue);
    box-shadow: 0 0 0 0.25rem rgba(174, 198, 207, 0.25);
}

[data-bs-theme="dark"] .menu-grid-btn:hover {
    background-color: #2d2d2d;
}

[data-bs-theme="dark"] .swal2-popup {
    background-color: var(--card-bg);
    color: var(--text-color);
}

[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal2-html-container {
    color: var(--text-color) !important;
}

/* Ensure icons in dark mode are visible */
[data-bs-theme="dark"] .bi-person-fill,
[data-bs-theme="dark"] .bi-gender-male,
[data-bs-theme="dark"] .bi-gender-female {
    /* These are white in stat-icon-wrapper, so they are fine. */
}

/* Custom Card Colors for Ping Pong Stats */
.card-white { background-color: #ffffff; border: 1px solid #e0e0e0; }
.card-light-green { background-color: #f1f8e9; }
.card-dark-green { background-color: #e8f5e9; }
.card-yellow { background-color: #fffde7; }
.card-orange { background-color: #fff3e0; }
.card-red { background-color: #ffebee; }
.card-black { background-color: #eceff1; }

/* Dark Mode Card Overrides */
[data-bs-theme="dark"] .card-white,
[data-bs-theme="dark"] .card-light-green,
[data-bs-theme="dark"] .card-dark-green,
[data-bs-theme="dark"] .card-yellow,
[data-bs-theme="dark"] .card-orange,
[data-bs-theme="dark"] .card-red,
[data-bs-theme="dark"] .card-black {
    background-color: var(--card-bg) !important;
    border-width: 2px !important;
}

[data-bs-theme="dark"] .card-white { border-color: #e0e0e0; }
[data-bs-theme="dark"] .card-light-green { border-color: #77DD77; }
[data-bs-theme="dark"] .card-dark-green { border-color: #1b5e20; }
[data-bs-theme="dark"] .card-yellow { border-color: #FDFD96; }
[data-bs-theme="dark"] .card-orange { border-color: #FFB347; }
[data-bs-theme="dark"] .card-red { border-color: #FF6961; }
[data-bs-theme="dark"] .card-black { border-color: #b0bec5; }

/* Custom Dropdown Menu */
.navbar-nav .nav-link {
    font-weight: 500;
    color: #555;
    padding: 0.8rem 1rem !important;
    transition: color 0.2s;
}

.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active {
    color: var(--pastel-blue);
    background-color: rgba(174, 198, 207, 0.1);
    border-radius: 10px;
}

.custom-dropdown-menu {
    border-radius: 20px;
    border: none;
    padding: 15px;
    min-width: 320px;
    animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.custom-dropdown-item {
    border-radius: 15px;
    padding: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid transparent;
    display: block; /* Ensure it takes full width */
    white-space: normal; /* Allow text wrapping */
}

.custom-dropdown-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    background-color: white !important; /* Override bg color on hover to pop */
    border-color: #eee;
}

.custom-dropdown-item .icon-wrapper {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important; /* Softer square */
    flex-shrink: 0;
}

/* Background Colors for Dropdown Items */
.bg-pastel-purple-light { background-color: #F3E5F5; }
.bg-pastel-green-light { background-color: #E8F5E9; }
.bg-pastel-yellow-light { background-color: #FFFDE7; }
.bg-pastel-pink-light { background-color: #FCE4EC; }
.bg-pastel-blue-light { background-color: #E3F2FD; }
.bg-pastel-orange-light { background-color: #FFF3E0; }

/* Text Colors for Icons */
.text-purple { color: #8E24AA; }
.text-green { color: #2E7D32; }
.text-yellow { color: #FBC02D; }
.text-pink { color: #C2185B; }
.text-blue { color: #1565C0; }
.text-orange { color: #EF6C00; }