:root {
    --green: #1e6e3c;
    --green-dark: #17532d;
    --red: #b30000;
    --red-bg: #f8d0d0;
    --yellow-bg: #fff0b3;
    --gray-bg: #f4f6f5;
    --border: #dfe3e1;
    --text: #222;
    --muted: #6b7280;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--gray-bg);
    color: var(--text);
}

/* --- Top bar --- */
.topbar {
    background: var(--green);
    color: #fff;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.brand { font-weight: 700; font-size: 1.1rem; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-right a { color: #fff; }

/* --- Layout --- */
.container { max-width: 1100px; margin: 24px auto; padding: 0 20px; }
.container-narrow { max-width: 560px; }

/* --- Alerts --- */
.alert {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.95rem;
}
.alert-error { background: var(--red-bg); color: var(--red); }
.alert-success { background: #d7f0dd; color: var(--green-dark); }

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    border: none;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    background: #e5e7eb;
    color: #111;
}
.btn:hover { opacity: 0.9; }
.btn-primary { background: var(--green); color: #fff; }
.btn-small { padding: 5px 10px; font-size: 0.82rem; }
.btn-success { background: #2f855a; color: #fff; }
.btn-danger { background: var(--red); color: #fff; }

/* --- Toolbar --- */
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    gap: 12px;
    flex-wrap: wrap;
}
.search-box {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    min-width: 240px;
}

/* --- Table --- */
.table-wrap { overflow-x: auto; background: #fff; border-radius: 10px; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { background: #fafbfa; font-size: 0.85rem; text-transform: uppercase; color: var(--muted); }
.row-overdue { background: var(--red-bg); }
.row-due_soon { background: var(--yellow-bg); }
.actions { display: flex; gap: 6px; }
.empty { text-align: center; color: var(--muted); padding: 30px; }

.badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-overdue { background: var(--red); color: #fff; }
.badge-due_soon { background: #b8860b; color: #fff; }
.badge-ok { background: #2f855a; color: #fff; }

/* --- Forms --- */
.card-form {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.card-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: #333; }
.card-form input, .card-form textarea {
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
}

/* --- Auth pages --- */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
.auth-box {
    background: #fff;
    padding: 32px;
    border-radius: 12px;
    border: 1px solid var(--border);
    width: 100%;
    max-width: 380px;
}
.auth-box h1 { font-size: 1.3rem; margin-top: 0; color: var(--green-dark); }
.auth-box form { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.auth-box label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.auth-box input {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
}
.muted { color: var(--muted); font-size: 0.85rem; }