:root {
    --color-bg: #f4f5f9;
    --color-surface: #ffffff;
    --color-border: #e6e8ee;
    --color-text: #14171f;
    --color-text-muted: #6b7280;
    --color-text-faint: #9ca3af;

    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-light: #eef0ff;

    --color-danger: #e11d48;
    --color-danger-hover: #be123c;
    --color-danger-light: #ffe4e9;

    --color-success: #059669;
    --color-success-light: #d3f8ea;

    --color-sidebar: #12141f;
    --color-sidebar-elevated: #1b1e2e;
    --color-sidebar-text: #a8adc2;
    --color-sidebar-text-active: #ffffff;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 20px 50px rgba(16, 24, 40, 0.22);

    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html {
    font-size: 16px;
}
body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
::selection { background: var(--color-primary-light); color: var(--color-primary-hover); }
.link { color: #38bdf8; cursor: pointer; }
.link:hover { color: #0ea5e9; text-decoration: underline; }

/* Auth pages */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(99, 102, 241, 0.35), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(56, 189, 248, 0.28), transparent 45%),
        linear-gradient(135deg, #0f1225, #1c2340);
    padding: 20px;
}
.auth-box {
    background: var(--color-surface);
    padding: 40px 36px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 380px;
    border: 1px solid rgba(255,255,255,0.6);
}
.auth-box h2 {
    margin-top: 0; margin-bottom: 24px; text-align: center; color: var(--color-text);
    font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em;
}
.auth-box .form-group { margin-bottom: 18px; }
.auth-box label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); }
.auth-box input {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    font-size: 0.9rem; transition: border-color 0.15s, box-shadow 0.15s;
}
.auth-box input:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-light);
}
.auth-box button {
    width: 100%; padding: 12px; background: var(--color-primary); color: #fff; border: none; border-radius: var(--radius-sm);
    font-size: 0.875rem; cursor: pointer; font-weight: 600; margin-top: 6px;
    transition: background 0.15s, transform 0.05s;
}
.auth-box button:hover { background: var(--color-primary-hover); }
.auth-box button:active { transform: scale(0.99); }

/* App shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 250px; background: var(--color-sidebar); color: var(--color-sidebar-text); flex-shrink: 0;
    padding: 18px 12px; position: relative; z-index: 200;
    transition: transform 0.25s ease;
    display: flex; flex-direction: column;
}
.sidebar-brand {
    font-size: 1.125rem; font-weight: 700; color: #fff; padding: 6px 10px 20px;
    margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center;
    letter-spacing: -0.01em;
}
.sidebar-brand-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed); border-radius: 9px; margin-right: 10px;
    font-size: 0.875rem; flex-shrink: 0;
}
.sidebar-brand-text { display: flex; align-items: center; }
.sidebar-close { display: none; background: none; border: none; color: var(--color-sidebar-text); font-size: 1.375rem; cursor: pointer; line-height: 1; }
.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 0.875rem; font-weight: 500;
    color: var(--color-sidebar-text); border-radius: var(--radius-sm); transition: background 0.15s, color 0.15s;
}
.sidebar nav a svg { flex-shrink: 0; opacity: 0.85; }
.sidebar nav a:hover { background: var(--color-sidebar-elevated); color: #fff; }
.sidebar nav a.active { background: var(--color-primary); color: #fff; font-weight: 600; }
.sidebar nav a.active svg { opacity: 1; }
.nav-group { padding: 16px 12px 6px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #5b607a; font-weight: 700; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
    background: var(--color-surface); padding: 14px 28px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--color-border); gap: 12px; position: sticky; top: 0; z-index: 100;
}
.topbar-left { display: flex; align-items: center; gap: 12px; }
.hamburger-btn {
    display: none; background: none; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 10px;
    font-size: 1.125rem; cursor: pointer; color: var(--color-text);
}
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(10,12,20,0.55); z-index: 150; backdrop-filter: blur(2px); }
.sidebar-overlay.open { display: block; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 0.875rem; flex-wrap: wrap; }
.user-chip { display: flex; align-items: center; gap: 9px; color: var(--color-text-muted); }
.user-avatar {
    width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.875rem; flex-shrink: 0;
}
.btn-logout {
    background: var(--color-danger-light); color: var(--color-danger); padding: 7px 14px; border-radius: var(--radius-sm);
    font-size: 0.875rem; font-weight: 600; transition: background 0.15s;
}
.btn-logout:hover { background: #ffd2db; }

.content { padding: 28px 32px; max-width: 1400px; }

@media (max-width: 900px) {
    .sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 260px;
        transform: translateX(-100%);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-close { display: block; }
    .hamburger-btn { display: inline-block; }
    .content { padding: 16px; }
    .topbar { padding: 12px 16px; }
    .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .page-header > div { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
}

/* Common UI */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.page-header h1 { font-size: 1.5rem; margin: 0; font-weight: 700; letter-spacing: -0.015em; }

.card {
    background: var(--color-surface); border-radius: var(--radius-md); padding: 24px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); margin-bottom: 20px;
}

.btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-sm);
    font-size: 0.875rem; font-weight: 600; border: none; cursor: pointer; transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
    white-space: nowrap;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 1px 2px rgba(79,70,229,0.3); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: #f3f4f7; color: var(--color-text); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: #e9eaf0; }
.btn-danger { background: var(--color-danger-light); color: var(--color-danger); }
.btn-danger:hover { background: #ffd2db; }
.btn-sm { padding: 6px 11px; font-size: 0.875rem; }
.btn-sm svg { width: 13px; height: 13px; }

/* Space out sibling action buttons/forms inside a table cell so icon+label
   buttons never touch edge-to-edge. */
table td > .btn, table td > form { margin-right: 8px; }
table td > .btn:last-child, table td > form:last-child { margin-right: 0; }

.form-group { margin-bottom: 16px; }
.form-row { display: flex; gap: 16px; }
.form-row .form-group { flex: 1; }
label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=month],
input[type=password], input[type=file], select, textarea {
    width: 100%; padding: 9px 13px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
    font-size: 0.875rem; background: var(--color-surface); color: var(--color-text);
    transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3.5px var(--color-primary-light);
}
input:disabled { background: #f3f4f6; color: var(--color-text-muted); }
textarea { resize: vertical; min-height: 80px; }
.hint { font-size: 0.8125rem; color: var(--color-text-faint); margin-top: 5px; }

table { width: 100%; border-collapse: collapse; background: var(--color-surface); font-size: 0.875rem; }
table th, table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--color-border); }
table th { background: #fafbfd; font-weight: 600; color: var(--color-text-muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }
table tbody tr { transition: background 0.1s; }
table tbody tr:nth-child(odd) td { background: #eef0f6; }
table tbody tr:nth-child(even) td { background: var(--color-surface); }
table tbody tr:hover td { background: #e2e5f5; }
table tbody tr:last-child td { border-bottom: none; }

/* Group/summary row of an expandable table (payments): the row immediately
   before its hidden detail row gets a tinted, bolder look so it reads as a
   header for the rows nested underneath it. */
table tbody tr:has(+ .detail-row) td { background: var(--color-primary-light); font-weight: 600; border-bottom-color: #d8dbfb; }
table tbody tr:has(+ .detail-row):hover td { background: #e2e4fb; }

.detail-row td { background: #f7f8fc; padding: 14px 14px 18px 30px; border-bottom: 2px solid var(--color-border); }
.detail-row table { box-shadow: var(--shadow-sm); border-radius: var(--radius-sm); overflow: hidden; }
.detail-row table tbody tr:nth-child(odd) td { background: #eef0f6; }
.detail-row table tbody tr:nth-child(even) td { background: var(--color-surface); }
.detail-row table tbody tr:hover td { background: #e2e5f5; }

.badge { display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.01em; }
.badge-available { background: var(--color-success-light); color: #047857; }
.badge-assigned { background: var(--color-primary-light); color: var(--color-primary-hover); }

.alert { padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 0.875rem; font-weight: 500; border: 1px solid transparent; }
.alert-success { background: var(--color-success-light); color: #047857; border-color: #a7f3d4; }
.alert-error { background: var(--color-danger-light); color: var(--color-danger-hover); border-color: #fecdd6; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
    background: var(--color-surface); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border); display: flex; align-items: center; gap: 14px;
}
.stat-icon {
    width: 42px; height: 42px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: var(--color-primary-light); color: var(--color-primary);
}
.stat-info { min-width: 0; }
.stat-card .num {
    font-size: 1.5rem; font-weight: 700; color: var(--color-text); line-height: 1.2;
    overflow-wrap: break-word;
}
.stat-card .label { font-size: 0.875rem; color: var(--color-text-muted); margin-top: 2px; }

.empty-state { text-align: center; padding: 48px 20px; color: var(--color-text-muted); font-size: 0.875rem; }

.filters { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-end; flex-wrap: wrap; }
.filters .form-group { margin-bottom: 0; min-width: 160px; }

.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-sm); }
.table-responsive table { min-width: 640px; }

.list-toolbar { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; flex-wrap: wrap; }
.list-toolbar .search-input { flex: 1; min-width: 200px; }
.list-meta { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 12px; }

.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.pagination button {
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: 6px 12px;
    border-radius: var(--radius-sm); font-size: 0.875rem; cursor: pointer; font-weight: 500; transition: background 0.15s;
}
.pagination button:hover:not(:disabled) { background: #f3f4f7; }
.pagination button.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

.list-loading { text-align: center; padding: 24px; color: var(--color-text-muted); font-size: 0.9rem; }

.modal-overlay {
    position: fixed; inset: 0; background: rgba(10,12,20,0.55); backdrop-filter: blur(2px);
    display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.modal-overlay.open { display: flex; animation: fadeIn 0.15s ease; }
.modal-box {
    background: var(--color-surface); border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 540px;
    max-height: 90vh; overflow-y: auto; position: relative; box-shadow: var(--shadow-lg);
    animation: scaleIn 0.15s ease;
}
.modal-box h3 { margin-top: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }
.modal-close {
    position: absolute; top: 14px; right: 16px; background: #f3f4f7; border: none; width: 30px; height: 30px; border-radius: 50%;
    font-size: 1.125rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); transition: background 0.15s;
}
.modal-close:hover { background: #e9eaf0; color: var(--color-text); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (max-width: 600px) {
    .card { padding: 18px; }
    .modal-box { padding: 22px; }
    .form-row { flex-direction: column; gap: 0; }
    .filters { flex-direction: column; align-items: stretch; }
    .filters .form-group { min-width: 0; }
    .list-toolbar { flex-direction: column; align-items: stretch; }
}