:root {
    --primary: #183761;
    --bg-light: #eceaee;
    --gold: #d29645;
    --rust: #7b463c;
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body {
    background-color: var(--bg-light);
    background-image: radial-gradient(var(--gold) 1px, transparent 1px);
    background-size: 25px 25px;
    color: var(--primary);
}

.login-body {
    background-image: linear-gradient(var(--gold) 1px, transparent 1px), linear-gradient(90deg, var(--gold) 1px, transparent 1px);
    background-size: 40px 40px;
    display: flex; justify-content: center; align-items: center; height: 100vh;
}

header { background: var(--primary); color: var(--white); padding: 1.5rem; text-align: center; border-bottom: 5px solid var(--gold); }
.container { max-width: 1200px; margin: 2rem auto; padding: 1rem; }
.card { background: var(--white); padding: 2rem; border-radius: 10px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); border-top: 4px solid var(--primary); margin-bottom: 2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
input, select, textarea { width: 100%; padding: 0.8rem; border: 1px solid #ccc; border-radius: 5px; margin-top: 0.5rem; background: var(--bg-light); }
input:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 5px rgba(210, 150, 69, 0.4); }

.btn { background: var(--gold); color: var(--primary); font-weight: bold; padding: 1rem; border: none; border-radius: 5px; cursor: pointer; transition: 0.3s; width: 100%; margin-top: 1rem; }
.btn:hover { background: var(--rust); color: var(--white); }

/* Tabs */
.tabs { display: flex; gap: 10px; margin-bottom: 1rem; }
.tab-btn { padding: 10px 20px; background: var(--white); border: 2px solid var(--primary); color: var(--primary); font-weight: bold; cursor: pointer; border-radius: 5px 5px 0 0; }
.tab-btn.active { background: var(--primary); color: var(--white); }

/* Tables */
.table-responsive { overflow-x: auto; margin-top: 1rem; }
table { width: 100%; border-collapse: collapse; background: var(--white); }
th, td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
th { background-color: var(--primary); color: var(--white); }
tr:hover { background-color: #f1f1f1; }

.qr-wrapper { position: relative; display: inline-block; padding: 1rem; background: var(--white); border: 2px solid var(--primary); border-radius: 10px; }
.qr-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--white); padding: 5px; font-weight: bold; color: var(--rust); border-radius: 3px; font-size: 12px; }

/* =========================================
   1. CREATIVE LOADER STYLES
   ========================================= */
.loader-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
}

.wheel-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #eceaee; /* Light background track */
    border-top: 6px solid var(--primary); /* Main brand color */
    border-bottom: 6px solid var(--gold); /* Accent color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.loader-text {
    margin-top: 15px;
    color: var(--primary);
    font-weight: bold;
    letter-spacing: 1px;
    animation: pulse 1.5s infinite;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* =========================================
   2. MOBILE RESPONSIVENESS (Responsive Design)
   ========================================= */
/* Mobile-First Grid System */
.grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 Column on Mobile */
    gap: 15px;
}

/* Tablet & Desktop Grid */
@media (min-width: 768px) {
    .grid { grid-template-columns: repeat(2, 1fr); /* 2 Columns on Desktop */ }
}

/* Make Tables horizontally scrollable on small screens to prevent breaking the layout */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    border-radius: 6px;
}

/* Make Tabs scrollable on mobile if they overflow */
.tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 5px; /* Space for scrollbar */
}
.tab-btn {
    flex: 0 0 auto; /* Prevent buttons from shrinking */
    white-space: nowrap;
}

/* General Mobile Tweaks */
@media (max-width: 600px) {
    body { padding: 10px; }
    .card { padding: 15px; }
    h1 { font-size: 1.5rem; }
    header p { font-size: 0.9rem; }
}