/* ================================================================
   Craftsman theme tokens
   Inspired by the Wix "Craftsman (Modern)" manufacturing template:
   deep olive panels on warm cream paper, serif display + sans body,
   generous radius, hairline borders.
   ================================================================ */

:root {
    /* Brand palette */
    --cm-olive:           #4d5d2c;   /* primary panels, AppBar */
    --cm-olive-deep:      #3d4a22;   /* hover / pressed */
    --cm-olive-soft:      #6d8043;   /* secondary olive */
    --cm-paper:           #fbf6ec;   /* shell background */
    --cm-paper-soft:      #f3ecdc;   /* alt surface */
    --cm-surface:         #fffdf7;   /* cards */
    --cm-ivory:           #f5efd6;   /* text on olive */
    --cm-ivory-dim:       #d9d2b6;   /* secondary text on olive */
    --cm-ink:             #2a2e1f;   /* primary body text */
    --cm-ink-muted:       #6b6657;   /* secondary body text */
    --cm-line:            #e6dec9;   /* hairline borders on paper */
    --cm-line-strong:     #cdc4a8;
    --cm-accent:          #a86b3c;   /* brass / wood accent */
    --cm-accent-soft:     #c98a5a;
    --cm-success:         #4d7a3a;
    --cm-danger:          #a83232;
    --cm-warning:         #c98a1a;

    /* Typography */
    --cm-font-display:    "Fraunces", "Playfair Display", Georgia, serif;
    --cm-font-body:       "Inter", "Helvetica Neue", Arial, sans-serif;
    --cm-font-mono:       "JetBrains Mono", Consolas, monospace;

    /* Radius */
    --cm-radius-sm:       6px;
    --cm-radius-md:       14px;
    --cm-radius-lg:       24px;
    --cm-radius-pill:     999px;

    /* Elevation */
    --cm-shadow-1:        0 1px 2px rgba(42, 46, 31, .06);
    --cm-shadow-2:        0 8px 24px rgba(42, 46, 31, .08);
    --cm-shadow-3:        0 16px 40px rgba(42, 46, 31, .10);

    /* Spacing (8pt) */
    --cm-space-1:         4px;
    --cm-space-2:         8px;
    --cm-space-3:         16px;
    --cm-space-4:         24px;
    --cm-space-5:         40px;
    --cm-space-6:         64px;
}

/* ----------------------------------------------------------------
   Global typography reset
   ---------------------------------------------------------------- */
html, body {
    font-family: var(--cm-font-body) !important;
    color: var(--cm-ink);
    background: var(--cm-paper);
}

/* Display headings get the serif */
h1, h2, .cm-display, .title-header-text {
    font-family: var(--cm-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cm-ink);
}

/* ----------------------------------------------------------------
   MudBlazor overrides — palette + shape
   ---------------------------------------------------------------- */
.mud-appbar.app-shell-bar {
    background: var(--cm-olive) !important;
    color: var(--cm-ivory) !important;
    border: none !important;
    backdrop-filter: none;
    border-radius: var(--cm-radius-lg);
    margin: var(--cm-space-3) var(--cm-space-3) 0;
    width: auto;
    box-shadow: var(--cm-shadow-2);
}

.mud-appbar.app-shell-bar .app-shell-link,
.mud-appbar.app-shell-bar .mud-button-label {
    color: var(--cm-ivory) !important;
}

.mud-appbar.app-shell-bar .app-shell-link:hover {
    background: rgba(245, 239, 214, 0.12) !important;
}

.mud-appbar.app-shell-bar .mud-icon-root {
    color: var(--cm-ivory) !important;
}

/* Cards */
.mud-paper,
.mud-card,
.card {
    background: var(--cm-surface);
    border: 1px solid var(--cm-line);
    border-radius: var(--cm-radius-md);
    box-shadow: var(--cm-shadow-1);
}

.mud-card:hover,
.card:hover {
    box-shadow: var(--cm-shadow-2);
}

/* Buttons — filled = olive, ghost = bordered */
.mud-button-filled.mud-button-filled-primary {
    background: var(--cm-olive) !important;
    color: var(--cm-ivory) !important;
    border-radius: var(--cm-radius-sm);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--cm-olive-deep) !important;
}

.mud-button-outlined.mud-button-outlined-primary {
    border-color: var(--cm-olive) !important;
    color: var(--cm-olive) !important;
    border-radius: var(--cm-radius-sm);
}

/* Tables — uppercase eyebrow header, hairline rows */
.mud-table thead th,
.dxbl-grid-header,
.card .table thead th {
    font-family: var(--cm-font-body);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cm-ink-muted);
    background: var(--cm-paper-soft);
    border-bottom: 1px solid var(--cm-line-strong);
}

.mud-table tbody tr {
    border-bottom: 1px solid var(--cm-line);
}

/* Inputs */
.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--cm-line-strong);
    border-radius: var(--cm-radius-sm);
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--cm-olive);
}

/* Bootstrap card chrome alignment (legacy pages) */
.card {
    background: var(--cm-surface);
}

.card-header {
    background: var(--cm-paper-soft);
    border-bottom: 1px solid var(--cm-line);
    border-top-left-radius: var(--cm-radius-md);
    border-top-right-radius: var(--cm-radius-md);
}

/* ----------------------------------------------------------------
   Page header (eyebrow + serif H1) — used by _PageHeader.razor
   ---------------------------------------------------------------- */
.cm-page-header {
    background: var(--cm-olive-soft);
    color: var(--cm-ivory);
    border-radius: var(--cm-radius-lg);
    padding: var(--cm-space-3) var(--cm-space-5);
    margin-bottom: var(--cm-space-3);
    box-shadow: var(--cm-shadow-1);
}

.cm-page-header__eyebrow {
    font-family: var(--cm-font-body);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cm-ivory-dim);
    margin-bottom: var(--cm-space-0);
}

.cm-page-header__title {
    font-family: var(--cm-font-display);
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    font-weight: 500;
    line-height: 1.1;
    color: var(--cm-ivory);
    margin: 0;
    letter-spacing: -0.015em;
}

.cm-page-header__title a {
    color: var(--cm-ivory-dim);
    margin-right: var(--cm-space-3);
    text-decoration: none;
}

.cm-page-header__title a:hover {
    color: var(--cm-ivory);
}

.cm-page-header__actions {
    margin-top: var(--cm-space-3);
    display: flex;
    gap: var(--cm-space-2);
    flex-wrap: wrap;
}