@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&display=swap');

:root {
    --page: #ffffff;
    --panel: #ffffff;
    --line: #d6dbe4;
    --ink: #101317;
    --muted: #5c6675;
    --chrome: #0f141b;
    --chrome-2: #171d25;
    --accent: #1fb56c;
    --shadow: 0 30px 80px rgba(18, 24, 33, 0.12);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at top right, rgba(31, 181, 108, 0.08), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    color: var(--ink);
}

button,
input,
select {
    font: inherit;
}

.login-body {
    min-height: 100vh;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-form {
    width: min(100%, 360px);
    display: grid;
    gap: 14px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(15, 20, 27, 0.08);
    border-radius: 24px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.login-form input {
    width: 100%;
    height: 56px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0 18px;
    background: #ffffff;
    color: var(--ink);
    outline: none;
}

.login-form input:focus {
    border-color: var(--chrome);
}

.login-form button {
    height: 56px;
    border: 0;
    border-radius: 16px;
    background: var(--chrome);
    color: #ffffff;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.login-form button svg {
    width: 20px;
    height: 20px;
}

.dashboard-body {
    min-height: 100vh;
    background: #ffffff;
}

.dashboard-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 248px 1fr;
}

.dashboard-sidebar {
    background: linear-gradient(180deg, var(--chrome) 0%, #121922 100%);
    color: #ffffff;
    padding: 28px 24px;
}

.sidebar-nav {
    display: grid;
    gap: 8px;
}

.sidebar-link {
    display: block;
    padding: 14px 16px;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background-color 160ms ease, color 160ms ease;
}

.sidebar-link:hover,
.sidebar-link[aria-current="page"] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.dashboard-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: 72px 1fr;
    background: #ffffff;
}

.dashboard-topbar {
    background: linear-gradient(180deg, #141a22 0%, var(--chrome-2) 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 24px;
}

.dashboard-topbar form {
    margin: 0;
}

.logout-button {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #ffffff;
    border-radius: 999px;
    height: 42px;
    padding: 0 18px;
    cursor: pointer;
}

.primary-button,
.secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}

.primary-button {
    background: #111111;
    color: #ffffff;
}

.secondary-button {
    background: #ffffff;
    color: var(--ink);
    border-color: rgba(15, 20, 27, 0.12);
}

.dashboard-main {
    background:
        linear-gradient(135deg, rgba(15, 20, 27, 0.018), transparent 36%),
        #ffffff;
}

.users-main {
    padding: 32px;
}

.users-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.users-page-header--compact {
    justify-content: flex-start;
}

.users-page-header h1 {
    margin: 0;
    font-size: clamp(2rem, 3vw, 2.7rem);
    line-height: 1;
}

.users-search {
    max-width: 920px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 28px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(15, 20, 27, 0.08);
    border-radius: 24px;
    box-shadow: var(--shadow);
}

.users-search--panel {
    max-width: none;
    margin-bottom: 24px;
}

.users-field {
    display: grid;
    gap: 10px;
}

.users-field label {
    font-size: 0.94rem;
    color: var(--muted);
}

.users-field input,
.users-field select,
.users-field textarea {
    width: 100%;
    height: 52px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 0 16px;
    background: #ffffff;
    color: var(--ink);
    outline: none;
}

.users-field input:focus,
.users-field select:focus,
.users-field textarea:focus {
    border-color: var(--chrome);
}

.users-field textarea {
    min-height: 132px;
    padding: 16px;
    resize: vertical;
}

.users-results {
    min-height: 320px;
}

.users-table-card,
.user-detail-card,
.remove-user-card {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(15, 20, 27, 0.08);
    border-radius: 28px;
    box-shadow: var(--shadow);
}

.users-table-card {
    overflow: hidden;
}

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th,
.users-table td {
    text-align: left;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(15, 20, 27, 0.08);
}

.users-table th {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.users-table tbody:empty::after {
    content: '';
    display: block;
    height: 220px;
}

.users-table-placeholder-row td {
    background: rgba(255, 255, 255, 0.95);
}

.table-placeholder {
    display: block;
    height: 12px;
    width: 100%;
    max-width: 140px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(15, 20, 27, 0.06), rgba(15, 20, 27, 0.1));
}

.users-table .actions-cell {
    display: flex;
    gap: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.84rem;
    border: 1px solid rgba(15, 20, 27, 0.1);
}

.status-pill--active {
    background: rgba(31, 181, 108, 0.12);
    color: #147849;
}

.status-pill--inactive {
    background: rgba(15, 20, 27, 0.06);
    color: #5c6675;
}

.status-pill--maintenance {
    background: rgba(249, 184, 107, 0.18);
    color: #9b5c08;
}

.status-pill--out-of-service {
    background: rgba(189, 47, 47, 0.1);
    color: #8d2020;
}

.users-table-action {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(15, 20, 27, 0.12);
    background: #ffffff;
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.users-table-action--disabled {
    color: #7f8793;
    background: #f3f5f8;
}

.users-empty-row td {
    height: 180px;
    border-bottom: 0;
}

.user-detail-card {
    padding: 14px;
}

.user-tabs {
    display: flex;
    gap: 10px;
    padding: 8px;
    margin-bottom: 18px;
    background: #f4f6f9;
    border-radius: 22px;
}

.user-tab {
    flex: 1;
    min-height: 46px;
    border-radius: 16px;
    text-decoration: none;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.user-tab.is-active {
    background: #ffffff;
    color: var(--ink);
    box-shadow: 0 8px 24px rgba(18, 24, 33, 0.08);
}

.user-tab-panel {
    padding: 18px;
}

.user-tab-panel.is-hidden {
    display: none;
}

.user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.user-form-grid .users-field:has(input[type="date"]) {
    max-width: 320px;
}

.users-field--textarea {
    grid-column: 1 / -1;
}

.users-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.form-errors {
    display: grid;
    gap: 10px;
    margin: 0 18px 6px;
}

.form-error-item {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid rgba(189, 47, 47, 0.14);
    background: rgba(189, 47, 47, 0.08);
    color: #8d2020;
}

.users-actions--spread {
    justify-content: flex-end;
}

.remove-user-card {
    max-width: 560px;
    padding: 32px;
}

.remove-user-message {
    font-size: 1.35rem;
    font-weight: 500;
}

.module-placeholder-page {
    padding: 32px;
}

.module-search-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.module-table-card {
    overflow: hidden;
}

.module-placeholder-table .empty-state {
    padding: 34px 24px;
}

.module-placeholder-table .empty-state h2 {
    margin: 14px 0 8px;
}

.module-placeholder-table .empty-state p {
    margin: 0;
    color: var(--muted);
}

.module-list-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.module-detail-card {
    padding: 14px;
}

.module-placeholder-tabs {
    margin-bottom: 18px;
}

.module-panel .driver-section,
.module-panel .finance-card,
.placeholder-inline-card,
.module-remove-card {
    margin-bottom: 18px;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(15, 20, 27, 0.08);
    background: rgba(255, 255, 255, 0.94);
}

.driver-section-header,
.finance-card-header,
.rto-rate-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.driver-section-header h3,
.finance-card-header h3,
.rto-rate-history-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.driver-section-header p,
.finance-card-header p,
.rto-rate-history-header p,
.page-note {
    margin: 6px 0 0;
    color: var(--muted);
}

.driver-layout,
.financial-grid,
.rto-layout {
    display: grid;
    gap: 18px;
}

.driver-grid,
.form-grid,
.rto-grid,
.placeholder-inline-tabs,
.finance-stack {
    display: grid;
    gap: 16px;
}

.driver-grid-2,
.rto-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.driver-grid-3,
.form-grid,
.module-panel .fuel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.module-detail-field,
.field {
    display: grid;
    gap: 10px;
}

.module-detail-field span,
.field span {
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.module-detail-field input,
.module-detail-field select,
.module-detail-field textarea,
.field input,
.field select,
.field textarea,
.finance-table input {
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #ffffff;
    color: var(--ink);
}

.module-detail-field textarea,
.field textarea {
    min-height: 118px;
    resize: vertical;
}

.module-detail-field input:disabled,
.module-detail-field select:disabled,
.module-detail-field textarea:disabled,
.field input:disabled,
.field select:disabled,
.field textarea:disabled,
.finance-table input:disabled {
    color: #5f6774;
    background: #fbfcfe;
}

.finance-table-shell,
.table-shell {
    border: 1px solid rgba(15, 20, 27, 0.08);
    border-radius: 22px;
    overflow: hidden;
    background: #ffffff;
}

.finance-table-scroll,
.table-scroll {
    overflow-x: auto;
}

.finance-table {
    width: 100%;
    border-collapse: collapse;
}

.finance-table th,
.finance-table td {
    padding: 16px 18px;
    text-align: left;
    border-bottom: 1px solid rgba(15, 20, 27, 0.08);
}

.finance-table th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.table-action,
.section-action {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(15, 20, 27, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
}

.section-action {
    margin-top: 14px;
}

.module-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.module-inline-card-actions {
    padding: 24px;
}

.empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(15, 20, 27, 0.06), rgba(15, 20, 27, 0.12));
}

.empty-state {
    padding: 36px 24px;
    text-align: center;
}

.empty-actions {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .dashboard-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr;
    }

    .dashboard-sidebar {
        padding: 20px 24px;
    }

    .users-main {
        padding: 20px;
    }

    .users-search {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .module-search-grid,
    .driver-grid-2,
    .driver-grid-3,
    .form-grid,
    .rto-grid {
        grid-template-columns: 1fr;
    }

    .users-page-header {
        flex-direction: column;
        align-items: stretch;
    }

    .user-tabs {
        flex-direction: column;
    }

    .user-form-grid {
        grid-template-columns: 1fr;
    }

    .users-table-card {
        overflow-x: auto;
    }
}