:root {
    color-scheme: light;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    --ink: #18201d;
    --muted: #6f7974;
    --surface: #ffffff;
    --canvas: #f5f7f4;
    --line: #dce3df;
    --sidebar: #111b18;
    --teal: #1a9d7c;
    --blue: #3176bf;
    --amber: #ba7b12;
    --rose: #b84655;
    --lime: #6d9b36;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    color: var(--ink);
    background: var(--canvas);
}

a {
    color: var(--blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button,
input,
select {
    font: inherit;
}

.app-shell {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    background: var(--sidebar);
    color: #f7f8f6;
    padding: 20px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand {
    display: flex;
    gap: 12px;
    align-items: center;
    color: #f7f8f6;
    min-height: 52px;
}

.brand:hover {
    text-decoration: none;
}

.brand img {
    width: 42px;
    height: 42px;
}

.brand strong,
.brand small {
    display: block;
}

.brand small {
    color: #9cb5ac;
    margin-top: 3px;
}

.side-nav {
    display: grid;
    gap: 6px;
    margin-top: 30px;
}

.side-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #d6e2dd;
    padding: 11px 12px;
    border-radius: 8px;
}

.side-nav a.active,
.side-nav a:hover {
    color: #ffffff;
    background: #24312d;
    text-decoration: none;
}

.nav-icon {
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    display: inline-block;
    position: relative;
}

.dashboard-icon {
    border-radius: 4px;
}

.dashboard-icon::after {
    content: "";
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    height: 5px;
    background: currentColor;
}

.requests-icon {
    border-radius: 50%;
}

.observe-icon {
    border-radius: 4px 4px 10px 10px;
    transform: rotate(45deg);
}

.main-surface {
    min-width: 0;
    padding: 26px;
}

.page-band,
.panel,
.filter-band {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--teal);
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0;
}

h1,
h2 {
    margin: 0;
    letter-spacing: 0;
}

h1 {
    font-size: 1.65rem;
}

h2 {
    font-size: 1.05rem;
}

.muted {
    color: var(--muted);
    margin: 7px 0 0;
}

.command-link,
.filter-form button,
.tool-grid a,
.link-stack a {
    border: 1px solid var(--line);
    background: #f8faf8;
    color: var(--ink);
    border-radius: 8px;
    padding: 9px 12px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.command-link.secondary {
    color: var(--muted);
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.metric-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
    min-height: 104px;
    border-left-width: 5px;
}

.metric-tile span,
.metric-tile small {
    color: var(--muted);
    display: block;
    line-height: 1.35;
}

.metric-tile strong {
    display: block;
    margin-top: 10px;
    font-size: 1.7rem;
}

.metric-total,
.health-ok {
    border-left-color: var(--teal);
}

.metric-active,
.metric-location {
    border-left-color: var(--blue);
}

.metric-complete {
    border-left-color: var(--lime);
}

.metric-risk,
.health-down {
    border-left-color: var(--rose);
}

.metric-offer {
    border-left-color: var(--amber);
}

.content-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 0.75fr);
    gap: 18px;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.7fr);
    gap: 18px;
    margin-bottom: 18px;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.table-wrap {
    overflow-x: auto;
}

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

th,
td {
    text-align: left;
    padding: 11px 10px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.status-list {
    display: grid;
    gap: 10px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    background: #edf2ef;
    color: var(--ink);
}

.status-searching,
.status-offered,
.status-accepted,
.status-inprogress {
    background: #e6f1ff;
    color: #245f9e;
}

.status-completed {
    background: #e7f3df;
    color: #527a24;
}

.status-cancelled,
.status-expired {
    background: #fae7ea;
    color: #984050;
}

.filter-band {
    margin-bottom: 18px;
}

.filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px auto auto;
    gap: 12px;
    align-items: end;
}

.filter-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 700;
}

.filter-form input,
.filter-form select {
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 40px;
    padding: 9px 11px;
    color: var(--ink);
    background: #ffffff;
}

.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 126px minmax(160px, 0.5fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border-left: 4px solid var(--teal);
    padding: 4px 0 4px 12px;
}

.timeline-offer {
    border-left-color: var(--amber);
}

.timeline-job {
    border-left-color: var(--blue);
}

.timeline-location {
    border-left-color: var(--lime);
}

.timeline time,
.timeline span {
    color: var(--muted);
}

.summary-panel {
    align-self: start;
}

.detail-list {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 10px;
    margin: 0;
}

.detail-list dt {
    color: var(--muted);
}

.detail-list dd {
    margin: 0;
    font-weight: 700;
}

.route-strip {
    height: 92px;
    margin: 18px 0;
    position: relative;
    background: linear-gradient(135deg, #e9f2ee, #f4efd9);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
}

.route-strip span,
.route-strip b {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--teal);
    top: 38px;
}

.route-strip span {
    left: 28px;
}

.route-strip b {
    right: 28px;
    background: var(--rose);
}

.route-strip i {
    position: absolute;
    left: 44px;
    right: 44px;
    top: 46px;
    border-top: 4px dashed var(--blue);
}

.link-stack,
.tool-grid {
    display: grid;
    gap: 10px;
}

.tool-grid {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
}

.route-table {
    max-height: 420px;
}

@media (max-width: 1120px) {
    .metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .content-grid,
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        height: auto;
    }

    .side-nav {
        grid-template-columns: repeat(3, 1fr);
    }

    .main-surface {
        padding: 16px;
    }

    .metric-grid,
    .filter-form,
    .tool-grid {
        grid-template-columns: 1fr;
    }

    .timeline-item {
        grid-template-columns: 1fr;
    }
}

/* User management + admin authentication */
.users-icon { border-radius: 50%; }
.users-icon::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 4px;
    border: 2px solid currentColor;
    border-top: 0;
    left: 3px;
    bottom: 2px;
    border-radius: 0 0 6px 6px;
}
.admins-icon { border-radius: 3px; }
.admins-icon::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: currentColor;
    border-radius: 50%;
}
.sidebar { display: flex; flex-direction: column; }
.sidebar-account {
    margin-top: auto;
    padding: 18px 12px 0;
    border-top: 1px solid #2b3934;
    display: grid;
    gap: 3px;
}
.sidebar-account span { color: #ffffff; font-weight: 700; }
.sidebar-account small { color: #9cb5ac; }
.sidebar-account form { margin-top: 8px; }
.sidebar-account button,
.table-action-button,
.command-button,
.danger-button,
.login-form button {
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 38px;
    padding: 9px 12px;
    cursor: pointer;
    font: inherit;
}
.sidebar-account button {
    width: 100%;
    color: #d6e2dd;
    background: #24312d;
    border-color: #33433d;
}
.user-segment-nav { display: flex; gap: 8px; margin-bottom: 18px; }
.user-segment-nav a {
    padding: 9px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
}
.user-segment-nav a.active,
.user-segment-nav a:hover {
    color: var(--ink);
    border-color: #a9cfc3;
    background: #eef8f4;
    text-decoration: none;
}
.user-filter-form {
    grid-template-columns: minmax(260px, 2fr) repeat(5, minmax(130px, 1fr)) auto auto;
}
.filter-grow { min-width: 260px; }
.table-subtext {
    display: block;
    color: var(--muted);
    margin-top: 3px;
    white-space: nowrap;
}
.role-chip {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #edf4fb;
    color: #285f99;
    font-size: 0.82rem;
    font-weight: 700;
}
.status-active { background: #e8f7ef; color: #176b43; }
.status-inactive { background: #f3f4f3; color: #69716d; }
.compact { margin-top: 3px; font-size: 0.86rem; }
.compact-link { min-height: 32px; padding: 5px 9px; }
.pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.header-actions form { margin: 0; }
.command-button { background: #eef8f4; border-color: #a9cfc3; color: #176b43; }
.danger-button { background: #fff2f2; border-color: #e3baba; color: #a33232; }
.table-action-button { background: #f8faf8; color: var(--ink); }
.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    word-break: break-all;
}
.user-detail-grid { margin-bottom: 18px; }
.mini-metric-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
.mini-metric-grid div {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px;
    background: #f8faf8;
}
.mini-metric-grid strong,
.mini-metric-grid span { display: block; }
.mini-metric-grid strong { font-size: 1.3rem; }
.mini-metric-grid span { color: var(--muted); font-size: 0.8rem; margin-top: 4px; }
.user-secondary-panel { margin-top: 18px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list span {
    border-radius: 999px;
    background: #eef8f4;
    border: 1px solid #cae6dc;
    padding: 7px 10px;
    font-weight: 700;
}
.tag-list small { color: var(--muted); margin-left: 4px; font-weight: 500; }
.alert {
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 16px;
    border: 1px solid transparent;
}
.alert-success { background: #eaf8f0; border-color: #bce0ca; color: #176b43; }
.alert-error { background: #fff1f1; border-color: #e8bbbb; color: #982c2c; }
.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at top left, rgba(26, 157, 124, 0.12), transparent 34rem),
        var(--canvas);
}
.login-surface { width: min(460px, 100%); }
.login-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 20px 55px rgba(17, 27, 24, 0.08);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.login-brand img { width: 44px; height: 44px; }
.login-brand strong,
.login-brand span { display: block; }
.login-brand strong { font-size: 1.05rem; }
.login-brand span { color: var(--muted); font-size: 0.85rem; }
.login-copy { margin-bottom: 20px; }
.login-form { display: grid; gap: 14px; }
.login-form label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 700;
}
.login-form input:not([type="checkbox"]) {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    min-height: 42px;
    padding: 9px 11px;
    font: inherit;
    color: var(--ink);
    background: #ffffff;
}
.login-form .check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}
.login-form button {
    background: var(--sidebar);
    border-color: var(--sidebar);
    color: #ffffff;
    font-weight: 800;
}
@media (max-width: 1200px) {
    .user-filter-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filter-grow { grid-column: span 3; }
    .mini-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .user-filter-form { grid-template-columns: 1fr; }
    .filter-grow { grid-column: auto; min-width: 0; }
    .header-actions { width: 100%; justify-content: space-between; }
    .mini-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .user-segment-nav { overflow-x: auto; }
}