/* ============================================================
   The Chore Drawer — "Card Catalog" theme
   Warm walnut + brass hardware + cream paper slips
   ============================================================ */

:root {
    --paper:        #f7efdb;
    --paper-2:      #efe3c6;
    --paper-edge:   #e3d3ad;
    --cream:        #ece0c4;
    --cream-deep:   #e2d3b0;

    --ink:          #3b2e20;
    --ink-soft:     #6f5d44;
    --ink-faint:    #9b8a6e;

    --walnut:       #5a3a22;
    --walnut-dark:  #3a2413;
    --walnut-light: #7c5230;
    --walnut-grain: #4a2e19;

    --brass:        #c8a85e;
    --brass-light:  #e2c987;
    --brass-dark:   #9a7a36;

    --sage:         #6f7d4a;
    --sage-dark:    #586338;
    --amber:        #bd842a;
    --rust:         #a8412a;

    --shadow-soft:  0 2px 6px rgba(58, 36, 19, 0.12);
    --shadow-card:  0 10px 30px -12px rgba(58, 36, 19, 0.45);
    --shadow-deep:  0 26px 60px -20px rgba(40, 24, 12, 0.6);

    --radius:       14px;
}

html, body {
    font-family: 'Hanken Grotesk', system-ui, sans-serif;
    color: var(--ink);
    background-color: var(--cream);
    /* layered atmosphere: warm vignette + faint paper grain */
    background-image:
        radial-gradient(120% 90% at 50% -10%, #f3e9cf 0%, var(--cream) 45%, var(--cream-deep) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display-title {
    font-family: 'Fraunces', Georgia, serif;
    color: var(--walnut-dark);
    letter-spacing: -0.01em;
}

h1, .display-title {
    font-weight: 600;
}

a, .btn-link {
    color: var(--walnut-light);
    text-decoration-color: rgba(124, 82, 48, 0.35);
    text-underline-offset: 2px;
}

a:hover {
    color: var(--walnut);
}

.text-muted {
    color: var(--ink-soft) !important;
}

/* ---------- Buttons ---------- */

.btn {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus, .btn:active:focus,
.form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(200, 168, 94, 0.45);
    border-color: var(--brass-dark);
}

/* Brass — primary actions */
.btn-primary {
    background: linear-gradient(180deg, var(--brass-light), var(--brass));
    border-color: var(--brass-dark);
    color: #43340f;
    box-shadow: var(--shadow-soft);
}
.btn-primary:hover {
    background: linear-gradient(180deg, #ecd496, var(--brass-light));
    color: #3a2d0c;
    box-shadow: 0 6px 16px -6px rgba(154, 122, 54, 0.7);
}

/* Sage — accept / save */
.btn-success {
    background: linear-gradient(180deg, #808e5a, var(--sage));
    border-color: var(--sage-dark);
    color: #f6f3e4;
}
.btn-success:hover {
    background: linear-gradient(180deg, #8c9a64, var(--sage-dark));
    color: #fff;
}

/* Rust — destructive */
.btn-danger {
    background: linear-gradient(180deg, #bc5036, var(--rust));
    border-color: #8a3320;
    color: #fbeee9;
}
.btn-danger:hover { background: linear-gradient(180deg, #c25b40, #93371f); color: #fff; }

.btn-outline-primary {
    color: var(--walnut);
    border-color: var(--brass-dark);
    background: rgba(247, 239, 219, 0.5);
}
.btn-outline-primary:hover {
    background: var(--brass);
    color: #3a2d0c;
    border-color: var(--brass-dark);
}

.btn-outline-secondary {
    color: var(--ink-soft);
    border-color: rgba(111, 93, 68, 0.4);
    background: rgba(247, 239, 219, 0.4);
}
.btn-outline-secondary:hover {
    background: rgba(111, 93, 68, 0.12);
    color: var(--ink);
    border-color: var(--ink-soft);
}

.btn-outline-danger {
    color: var(--rust);
    border-color: rgba(168, 65, 42, 0.5);
    background: rgba(247, 239, 219, 0.4);
}
.btn-outline-danger:hover { background: var(--rust); color: #fff; }

/* ---------- Cards (paper) ---------- */

.card {
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.card-header {
    background: linear-gradient(180deg, var(--paper-2), var(--paper));
    border-bottom: 1px solid var(--paper-edge);
    color: var(--walnut-dark);
    font-family: 'Fraunces', serif;
}

/* ---------- Alerts ---------- */

.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-weight: 500;
}
.alert-success {
    background: #e9ead2;
    border-color: #c4cb9e;
    color: var(--sage-dark);
}
.alert-info {
    background: var(--paper);
    border-color: var(--paper-edge);
    color: var(--ink-soft);
}

/* ---------- Badges ---------- */

.badge {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    padding: 0.4em 0.75em;
}
.badge.bg-secondary { background: var(--walnut-light) !important; color: var(--paper); }
.badge.bg-success   { background: var(--sage) !important;  color: #f6f3e4; }
.badge.bg-warning   { background: var(--amber) !important; color: #2e2208 !important; }
.badge.bg-danger    { background: var(--rust) !important;  color: #fbeee9; }
.badge.bg-accepted  { background: var(--brass-dark) !important; color: var(--paper); }

/* ---------- Tables (ledger) ---------- */

.table {
    --bs-table-bg: transparent;
    color: var(--ink);
    border-color: var(--paper-edge);
}
.table > thead {
    font-family: 'Fraunces', serif;
}
.table-light, .table > thead.table-light th {
    --bs-table-bg: var(--paper-2);
    background: var(--paper-2);
    color: var(--walnut-dark);
    border-color: var(--paper-edge);
}
.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(124, 82, 48, 0.06);
}
.table-success { --bs-table-bg: rgba(111, 125, 74, 0.16); }
.table-warning { --bs-table-bg: rgba(189, 132, 42, 0.16); }
.table-danger  { --bs-table-bg: rgba(168, 65, 42, 0.15); }

/* ---------- Forms ---------- */

.form-control, .form-select {
    background: #fbf6e8;
    border: 1px solid var(--paper-edge);
    border-radius: 10px;
    color: var(--ink);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-label {
    font-weight: 600;
    color: var(--ink-soft);
}

/* ---------- Modal ---------- */

.modal-content {
    background: var(--paper);
    border: 1px solid var(--paper-edge);
    border-radius: var(--radius);
    box-shadow: var(--shadow-deep);
}
.modal-header, .modal-footer { border-color: var(--paper-edge); }
.modal-title { font-family: 'Fraunces', serif; color: var(--walnut-dark); }

/* ---------- Misc / framework leftovers ---------- */

.content { padding-top: 1.1rem; }
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--sage); }
.invalid { outline: 1px solid var(--rust); }
.validation-message { color: var(--rust); font-size: 0.875rem; }

.blazor-error-boundary {
    background: var(--rust);
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    border-radius: var(--radius);
}
.blazor-error-boundary::after { content: "An error has occurred." }

.darker-border-checkbox.form-check-input { border-color: #929292; }