/*
 * "Kaffeehaus": cream paper, espresso, crema and coffee-cherry red; green beans in the
 * colors of raw coffee. Loaded after app.css; the fonts are served locally (vendor/fonts).
 *
 * --accent is the color of headings, marks and highlights: caramel, or green inside
 * .green-scope (the green beans of bags and roasts, the dashboard's green beans).
 */

:root {
    --coffee-espresso: #3b2418;
    --coffee-roast: #6b4027;
    --coffee-caramel: #b87333;
    --coffee-crema: #d9a45b;
    --coffee-paper: #fffaf2;
    --coffee-cherry: #a4262c;
    --bean-green: #6f8a4a;
    --bean-green-strong: #4f6a33;
    --accent: var(--coffee-caramel);
    --accent-strong: var(--coffee-roast);
    --accent-soft: rgba(184, 115, 51, .14);
    --accent-line: rgba(184, 115, 51, .35);
    --bs-body-bg: #f5ede1;
    --bs-body-bg-rgb: 245, 237, 225;
    --bs-body-color: #2e2019;
    --bs-body-color-rgb: 46, 32, 25;
    --bs-secondary-color: #7a6555;
    --bs-tertiary-color: #b3a08d;
    --bs-tertiary-bg: #efe4d4;
    --bs-tertiary-bg-rgb: 239, 228, 212;
    --bs-secondary-bg: #e9dcc8;
    --bs-border-color: #e3d3bd;
    --bs-border-color-translucent: rgba(107, 64, 39, .12);
    --bs-emphasis-color: #1f140e;
    --bs-primary: var(--coffee-roast);
    --bs-primary-rgb: 107, 64, 39;
    --bs-link-color: #8a4f22;
    --bs-link-color-rgb: 138, 79, 34;
    --bs-link-hover-color: var(--coffee-espresso);
    --bs-link-hover-color-rgb: 59, 36, 24;
    --bs-primary-bg-subtle: #f1e2cf;
    --bs-primary-border-subtle: #dcc0a0;
    --bs-primary-text-emphasis: var(--coffee-roast);
    --bs-success: #5f7a4e;
    --bs-success-rgb: 95, 122, 78;
    --bs-danger: var(--coffee-cherry);
    --bs-danger-rgb: 164, 38, 44;
    --bs-warning: #d99a2b;
    --bs-warning-rgb: 217, 154, 43;
    --bs-focus-ring-color: rgba(184, 115, 51, .3);
    --bs-body-font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --heading-font: "Fraunces Variable", Georgia, "Times New Roman", serif;
}


/* everything about green beans: the green of raw coffee instead of caramel */
.green-scope {
    --accent: var(--bean-green);
    --accent-strong: var(--bean-green-strong);
    --accent-soft: rgba(111, 138, 74, .14);
    --accent-line: rgba(111, 138, 74, .4);
    --bs-link-color: #557035;
    --bs-link-color-rgb: 85, 112, 53;
    --bs-link-hover-color: #3c5124;
    --bs-link-hover-color-rgb: 60, 81, 36;
    --bs-primary: #5a7340;
    --bs-primary-rgb: 90, 115, 64;
    --bs-primary-bg-subtle: #e4ebd6;
    --bs-primary-border-subtle: #c3d1a8;
    --bs-primary-text-emphasis: #44592c;
}

/* tablets (iPad): touch screens from 768 px on get somewhat larger text; everything is sized in rem */
@media (pointer: coarse) and (min-width: 768px) {
    html { font-size: 17.5px; }
}

/* the page: warm light falling in from the top right */
body.bg-body-tertiary { background: var(--bs-body-bg) !important; }
.app-main { background: radial-gradient(ellipse at 85% -10%, var(--accent-soft), transparent 55%); }

/* header: paper with a thin line of the accent */
.app-header.bg-body { background: var(--coffee-paper) !important; box-shadow: inset 0 -2px 0 var(--accent-soft); }

/* sidebar: dark roast; the current page glows like crema (green beans: like raw coffee) */
.app-sidebar { background: linear-gradient(180deg, #2c1c13 0%, #3a261a 100%) !important; }
.app-sidebar,
.app-sidebar[data-bs-theme] {
    --lte-sidebar-color: #d9c7b3;
    --lte-sidebar-hover-bg: rgba(217, 164, 91, .12);
    --lte-sidebar-hover-color: #fff4e4;
    --lte-sidebar-menu-active-color: #fff4e4;
    --lte-sidebar-header-color: #a8866a;
}
.sidebar-menu .nav-link.active { background: linear-gradient(90deg, rgba(217, 164, 91, .32), rgba(217, 164, 91, .06)) !important; box-shadow: inset 3px 0 0 #d9a45b; }
.sidebar-menu .nav-green .nav-link.active { background: linear-gradient(90deg, rgba(150, 180, 105, .32), rgba(150, 180, 105, .06)) !important; box-shadow: inset 3px 0 0 #9fbc72; }
.sidebar-menu .nav-green .nav-icon { color: #b3c98b; }
.sidebar-brand { border-bottom-color: rgba(217, 164, 91, .2) !important; }
.sidebar-brand .brand-text { font-family: var(--heading-font); font-weight: 600 !important; color: #f3e3cc; }
.app-sidebar .nav-header { letter-spacing: .12em; font-size: .7rem !important; }

/* headings in a warm serif */
.app-content-header h1,
.card-title,
.prop-group-title,
.modal-title,
.welcome h2 { font-family: var(--heading-font); }
.app-content-header h1 { font-weight: 600; color: var(--coffee-espresso); letter-spacing: -.01em; }
.card-title.h6 { font-size: 1.05rem; font-weight: 600; }
.prop-group-title { color: var(--accent) !important; font-weight: 600 !important; letter-spacing: .08em !important; border-bottom-color: var(--accent-line) !important; }

/* cards: paper, softly rounded, a warm shadow */
.card { --bs-card-bg: var(--coffee-paper); --bs-card-border-color: var(--bs-border-color); --bs-card-border-radius: .9rem; --bs-card-inner-border-radius: calc(.9rem - 1px); box-shadow: 0 1px 2px rgba(59, 36, 24, .06), 0 6px 18px -8px rgba(59, 36, 24, .18); }
.card-header { background: transparent; border-bottom: 1px dashed var(--bs-border-color); }
.card.green-scope { border-top: 3px solid var(--accent); }
.dashboard .card { border-top: 3px solid var(--accent); }

/* buttons: outlined in the accent, Save in coffee-cherry red */
.btn-outline-primary,
.btn-outline-secondary {
    --bs-btn-color: var(--accent-strong);
    --bs-btn-border-color: var(--accent-line);
    --bs-btn-hover-bg: var(--accent-strong);
    --bs-btn-hover-border-color: var(--accent-strong);
    --bs-btn-hover-color: var(--coffee-paper);
    --bs-btn-active-bg: var(--accent-strong);
    --bs-btn-active-border-color: var(--accent-strong);
    --bs-btn-active-color: var(--coffee-paper);
    border-radius: 999px;
}
.btn-danger { --bs-btn-bg: var(--coffee-cherry); --bs-btn-border-color: var(--coffee-cherry); --bs-btn-hover-bg: #861e23; --bs-btn-hover-border-color: #861e23; border-radius: 999px; box-shadow: 0 4px 12px -4px rgba(164, 38, 44, .55); }
.btn-primary { --bs-btn-bg: var(--accent-strong); --bs-btn-border-color: var(--accent-strong); --bs-btn-hover-bg: var(--coffee-espresso); --bs-btn-hover-border-color: var(--coffee-espresso); --bs-btn-color: var(--coffee-paper); --bs-btn-hover-color: var(--coffee-paper); border-radius: 999px; }
.dt-buttons .btn-secondary { --bs-btn-bg: var(--bs-tertiary-bg); --bs-btn-color: var(--accent-strong); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-secondary-bg); --bs-btn-hover-color: var(--accent-strong); --bs-btn-active-bg: var(--bs-secondary-bg); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .2rem var(--accent-soft); }
.form-check-input:checked { background-color: var(--accent-strong); border-color: var(--accent-strong); }

/* values, rating, steps, tables */
.prop { border-bottom-style: dotted !important; }
.rating-stars { color: var(--coffee-crema) !important; }
.rating-source.is-current { border-color: var(--coffee-crema) !important; background: rgba(217, 164, 91, .15) !important; }
.step::before { background: var(--bs-primary-bg-subtle) !important; color: var(--accent-strong) !important; }
.table { --bs-table-bg: transparent; --bs-table-striped-bg: var(--accent-soft); --bs-table-hover-bg: var(--accent-soft); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: color-mix(in srgb, var(--accent) 6%, transparent); }
/* DataTables stripes and highlights rows in its own grey: warm them up */
table.dataTable { --dt-row_background-stripe: 184, 115, 51; --dt-row_background-hover: 184, 115, 51; }
.green-scope table.dataTable { --dt-row_background-stripe: 111, 138, 74; --dt-row_background-hover: 111, 138, 74; }
table.table.dataTable,
table.table.dataTable > tbody > tr > *,
div.dt-scroll-body,
div.dt-scroll-head { background-color: transparent !important; }
table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1) > * { box-shadow: inset 0 0 0 9999px rgba(var(--dt-row_background-stripe), .08); }
table.table.dataTable.table-hover > tbody > tr:hover > * { box-shadow: inset 0 0 0 9999px rgba(var(--dt-row_background-hover), .14); }
.btn-outline-primary, .btn-outline-secondary { --bs-btn-disabled-color: var(--accent-strong); --bs-btn-disabled-border-color: var(--accent-line); }
.app-footer { background: transparent !important; border-top: 1px dashed var(--bs-border-color); }
.alert-danger { --bs-alert-bg: #f6dcd8; --bs-alert-color: #7a1d22; --bs-alert-border-color: #ebbcb6; }

/* dashboard tiles in coffee tones instead of traffic lights; green beans in green */
.kpi { border-radius: .9rem; box-shadow: 0 6px 16px -8px rgba(59, 36, 24, .45); }
.kpi.text-bg-success { background: linear-gradient(135deg, #6b4027, #8a5634) !important; color: #fff4e4 !important; }
.kpi.text-bg-danger { background: linear-gradient(135deg, #3b2418, #563423) !important; color: #f3e3cc !important; }
.kpi.text-bg-warning { background: linear-gradient(135deg, #c98a3a, #dfae62) !important; color: #2e1a0e !important; }
/* the counts at the top of the dashboard */
.small-box { border-radius: .9rem; box-shadow: 0 6px 16px -8px rgba(59, 36, 24, .45); color: #fff4e4; }
.small-box .inner p { margin-bottom: 0; }
.small-box.box-roaster { background: linear-gradient(135deg, #7a4a2c, #9a6440); }
.small-box.box-bag { background: linear-gradient(135deg, #a8672d, #c8894a); }
.small-box.box-shot { background: linear-gradient(135deg, #c98a3a, #dfae62); color: #2e1a0e; }
.small-box.box-roast { background: linear-gradient(135deg, #3b2418, #563423); }
.small-box:hover { color: inherit; filter: brightness(1.05); }
.kpi.kpi-green { background: linear-gradient(135deg, #4f6a33, #728c4c) !important; color: #f1f5e6 !important; }