:root {
    --tric-green: #087443;
    --tric-green-dark: #075b37;
    --tric-green-soft: #eaf5ef;
    --ink: #23342e;
    --muted: #687b74;
    --line: #dfe9e4;
    --surface: #ffffff;
    --canvas: #f4f7f6;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    color: var(--ink);
    background: var(--canvas);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

button, input, select, textarea { font: inherit; }
.btn { font-size: 11px; font-weight: 500; }
.btn-sm { font-size: 10px; }

.guest-body {
    background:
        radial-gradient(circle at 12% 12%, rgba(8, 116, 67, .12), transparent 34%),
        linear-gradient(145deg, #eef6f2 0%, #f9fbfa 52%, #edf3f0 100%);
}

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

.login-card {
    width: min(100%, 430px);
    padding: 32px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(8,116,67,.13);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(25, 65, 48, .12);
}

.login-brand img { width: 212px; max-width: 78%; height: auto; }
.login-heading { margin: 28px 0 22px; }
.eyebrow { display: block; color: var(--tric-green); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.login-heading h1, .welcome-card h1 { margin: 8px 0; font-size: 25px; line-height: 1.25; font-weight: 600; }
.login-heading p, .welcome-card p { margin: 0; color: var(--muted); line-height: 1.7; }
.form-label { color: #40544c; font-size: 12px; font-weight: 600; }
.form-control { min-height: 48px; border-color: #cedbd5; border-radius: 11px; font-size: 14px; }
.form-control:focus { border-color: var(--tric-green); box-shadow: 0 0 0 .2rem rgba(8,116,67,.12); }
.password-field { position: relative; }
.password-field .form-control { padding-right: 72px; }
.password-toggle { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); border: 0; background: transparent; color: var(--tric-green); font-size: 12px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--tric-green); --bs-btn-border-color: var(--tric-green); --bs-btn-hover-bg: var(--tric-green-dark); --bs-btn-hover-border-color: var(--tric-green-dark); --bs-btn-active-bg: var(--tric-green-dark); --bs-btn-active-border-color: var(--tric-green-dark); }
.login-button { min-height: 46px; border-radius: 11px; font-size: 11px; font-weight: 600; }
.login-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.alert { border-radius: 11px; font-size: 12px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; width: 260px; display: flex; flex-direction: column; padding: 22px 16px; color: #fff; background: linear-gradient(180deg, #075b37 0%, #073f2a 100%); transition: transform .22s ease; }
.sidebar-brand { display: flex; flex-direction: column; gap: 16px; padding: 6px 8px 24px; }
.sidebar-brand img { width: 190px; max-width: 100%; }
.sidebar-brand span { font-size: 15px; font-weight: 600; }
.sidebar-nav { display: grid; gap: 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 12px 13px; color: rgba(255,255,255,.8); border-radius: 10px; text-decoration: none; font-size: 13px; font-weight: 500; }
.nav-item:hover, .nav-item.active { color: #fff; background: rgba(255,255,255,.12); }
.nav-dot { width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.sidebar-footer { margin-top: auto; padding: 18px 8px 4px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.62); font-size: 10px; line-height: 1.5; }
.main-panel { min-height: 100vh; margin-left: 260px; }
.topbar { position: sticky; top: 0; z-index: 1020; min-height: 74px; display: flex; align-items: center; gap: 14px; padding: 12px 26px; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.topbar-title { font-size: 16px; font-weight: 600; }
.topbar-subtitle { color: var(--muted); font-size: 10px; }
.topbar-user { display: flex; align-items: center; gap: 16px; }
.user-copy { display: grid; text-align: right; }
.user-copy span { font-size: 12px; font-weight: 600; }
.user-copy small { color: var(--muted); font-size: 10px; }
.sidebar-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.content-wrap { padding: 26px; }
.welcome-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 10px 30px rgba(30,70,50,.05); }
.welcome-card h1 { font-size: 22px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 8px 12px; color: var(--tric-green-dark); background: var(--tric-green-soft); border-radius: 999px; font-size: 11px; font-weight: 600; }
.status-pill span { width: 7px; height: 7px; background: #22a660; border-radius: 50%; box-shadow: 0 0 0 4px rgba(34,166,96,.12); }
.info-card { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }
.info-label { color: var(--muted); font-size: 11px; font-weight: 500; }
.info-card strong { font-size: 15px; font-weight: 600; }
.info-card small { color: var(--muted); font-size: 10px; }
.sidebar-backdrop { display: none; }
.page-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.page-heading h1 { margin: 5px 0 4px; font-size: 18px; line-height: 1.35; font-weight: 600; }
.page-heading p, .form-copy { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.compact-heading { margin-bottom: 16px; }
.filter-bar { display: flex; gap: 10px; margin-bottom: 14px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.filter-bar .form-control { min-height: 42px; }
.data-card, .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(30,70,50,.04); }
.form-card { padding: 22px; }
.form-card h2 { margin: 0 0 15px; font-size: 14px; line-height: 1.4; font-weight: 600; }
.form-select { min-height: 48px; border-color: #cedbd5; border-radius: 11px; font-size: 13px; }
.form-hint { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.user-row, .log-row { display: grid; grid-template-columns: auto minmax(180px, 1.4fr) minmax(150px, 1fr) auto auto; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.user-row:last-child, .log-row:last-child { border-bottom: 0; }
.avatar-circle { width: 38px; height: 38px; display: grid; place-items: center; color: var(--tric-green-dark); background: var(--tric-green-soft); border-radius: 50%; font-size: 13px; font-weight: 600; }
.user-main, .user-role, .log-row>div { display: grid; gap: 4px; min-width: 0; }
.user-main strong, .log-row strong { overflow: hidden; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.user-main span, .user-role small, .log-row span, .log-row small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.user-role span { font-size: 11px; font-weight: 500; }
.badge-status { padding: 6px 9px; border-radius: 999px; font-size: 9px; font-weight: 600; }
.badge-status.is-active { color: #0b7042; background: #e6f5ed; }
.badge-status.is-inactive { color: #6c757d; background: #eef0f1; }
.user-actions { display: flex; gap: 6px; }
.user-actions form { margin: 0; }
.empty-inline { padding: 28px; color: var(--muted); text-align: center; font-size: 12px; }
.empty-state { max-width: 560px; margin: 8vh auto; padding: 34px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; text-align: center; }
.empty-state h1 { margin: 8px 0; font-size: 22px; font-weight: 600; }
.empty-state p { margin: 0 0 20px; color: var(--muted); }
.signature-preview { min-height: 170px; display: grid; place-items: center; margin: 16px 0; padding: 16px; background: #fafcfb; border: 1px dashed #bed0c7; border-radius: 13px; }
.signature-preview img { max-width: 100%; max-height: 150px; object-fit: contain; }
.signature-preview.is-empty { color: var(--muted); font-size: 11px; }
.log-row { grid-template-columns: auto minmax(200px, 1fr) auto; }
.log-dot { width: 9px; height: 9px; border: 2px solid var(--tric-green); border-radius: 50%; }
.log-meta { text-align: right; }
.user-table { min-width: 720px; font-size: 12px; }
.user-table thead th { padding: 12px 16px; color: #60736b; background: #f7faf8; border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.user-table tbody td { padding: 13px 16px; border-color: var(--line); vertical-align: middle; }
.user-table tbody tr:last-child td { border-bottom: 0; }
.user-name-cell { display: flex; align-items: center; gap: 11px; min-width: 260px; }
.user-name-cell>div:last-child { display: grid; gap: 3px; min-width: 0; }
.user-name-cell strong { font-size: 12px; font-weight: 600; }
.user-name-cell small { overflow: hidden; max-width: 360px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.role-label { font-size: 11px; font-weight: 500; }
.table-actions { display: flex; justify-content: flex-end; gap: 7px; }
.table-actions form { margin: 0; }
.table-actions .btn { min-width: 54px; font-size: 10px; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.is-open { transform: translateX(0); }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 1030; background: rgba(13,31,24,.44); }
    .sidebar-backdrop.is-visible { display: block; }
    .main-panel { margin-left: 0; }
    .sidebar-toggle { display: inline-grid; place-items: center; }
}

@media (max-width: 575.98px) {
    .login-card { padding: 25px 21px; border-radius: 18px; }
    .login-heading h1 { font-size: 22px; }
    .topbar { min-height: 66px; padding: 10px 14px; }
    .topbar-user { gap: 8px; }
    .user-copy { display: none; }
    .content-wrap { padding: 16px; }
    .welcome-card { flex-direction: column; padding: 21px; }
    .welcome-card h1 { font-size: 20px; }
    .page-heading { flex-direction: column; gap: 12px; }
    .page-heading .btn { width: 100%; }
    .filter-bar { flex-direction: column; }
    .user-row { grid-template-columns: auto 1fr auto; }
    .user-role { grid-column: 2 / -1; }
    .badge-status { grid-column: 3; grid-row: 1; }
    .user-actions { grid-column: 1 / -1; }
    .user-actions .btn { min-height: 40px; }
    .log-row { grid-template-columns: auto 1fr; }
    .log-meta { grid-column: 2; text-align: left; }
    .form-card { padding: 18px; }
}