/* =========================================================
   Mia Analytics — dashboard styles
   Brand palette mirrors Mia Accounting (Mia Bazo guidelines):
     #c46412  primary deep (burnt orange)
     #dd7904  primary (mid orange) ← anchor
     #f7931e  primary bright
     #333333  ink (charcoal)
     #f5bb3b  amber (supporting)
   ========================================================= */

:root {
    --mb-primary: #dd7904;
    --mb-primary-deep: #c46412;
    --mb-primary-bright: #f7931e;
    --mb-amber: #f5bb3b;
    --mb-ink: #333333;
    --mb-ink-soft: #4a4a4a;
    --mb-page: #faf8f5;
    --mb-surface: #ffffff;
    --mb-muted: #6b6b6b;
    --mb-line: #ececec;
    --mb-line-strong: #d8d8d8;
}

* { box-sizing: border-box; }

body {
    background: var(--mb-page);
    color: var(--mb-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "ss01" on, "cv11" on;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    line-height: 1.5;
    font-size: 14px;
}

/* ---- Top nav (matches Mia Accounting's .public-nav exactly) ---- */
.app-nav {
    background: var(--mb-ink);
    color: #fff;
    padding: 14px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}
.app-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.app-brand,
.app-brand:hover {
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.app-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
    font-size: 14px;
}
.app-nav-links a {
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}
.app-nav-links a:hover { color: #fff; }
.app-nav-links a.active { color: var(--mb-primary-bright); }
.app-nav-user { color: rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 400; }

@media (max-width: 768px) {
    .app-nav-links .hide-on-mobile { display: none; }
}

/* ---- Logo lockup (mia + analytics) — matches Mia Accounting dimensions ---- */
.mia-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.mia-logo-mark { height: 32px; width: auto; display: block; }
.mia-logo-mark--orange { display: block; }
.mia-logo-mark--white { display: none; }
.app-nav .mia-logo-mark--orange { display: none; }
.app-nav .mia-logo-mark--white { display: block; }
.mia-logo-word {
    font-size: 20px;
    color: var(--mb-ink);
    letter-spacing: 0.01em;
}
.app-nav .mia-logo-word { color: #fff; }
.mia-logo-bold { font-weight: 700; }
.mia-logo-light { font-weight: 400; opacity: 0.75; }

/* ---- Layout ---- */
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

h1 {
    font-size: 26px;
    font-weight: 700;
    color: var(--mb-ink);
    margin: 0 0 6px;
    letter-spacing: -0.01em;
}
h1 small {
    font-weight: 400;
    color: var(--mb-muted);
    font-size: 14px;
}
h2 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mb-muted);
    margin: 28px 0 10px;
    font-weight: 600;
}

a {
    color: var(--mb-primary);
    text-decoration: none;
}
a:hover { color: var(--mb-primary-deep); text-decoration: underline; }

/* ---- Cards ---- */
.card {
    background: var(--mb-surface);
    border: 1px solid var(--mb-line);
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}
.card.tight { padding: 0; overflow: hidden; }

/* ---- Stat tiles ---- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.stat .label {
    color: var(--mb-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.stat .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--mb-ink);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
    letter-spacing: -0.01em;
}

/* ---- Tables ---- */
table {
    width: 100%;
    border-collapse: collapse;
}
.card table { margin: -18px -18px 0; width: calc(100% + 36px); }
.card.tight table { margin: 0; width: 100%; }
th, td {
    text-align: left;
    padding: 10px 18px;
    border-bottom: 1px solid var(--mb-line);
}
tr:last-child td { border-bottom: none; }
th {
    font-weight: 600;
    color: var(--mb-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: #fafafa;
}
td.num, th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
tr:hover td { background: rgba(221, 121, 4, 0.03); }
td.truncate {
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Forms ---- */
form.filter {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 0 18px;
}
label.field {
    display: block;
    margin-bottom: 4px;
    color: var(--mb-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
input, select {
    background: var(--mb-surface);
    color: var(--mb-ink);
    border: 1px solid var(--mb-line-strong);
    border-radius: 6px;
    padding: 8px 12px;
    font: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus {
    outline: none;
    border-color: var(--mb-primary);
    box-shadow: 0 0 0 3px rgba(221, 121, 4, 0.12);
}

/* ---- Buttons (CTA orange) ---- */
.btn,
button {
    background: var(--mb-primary);
    color: #fff;
    border: 1px solid var(--mb-primary);
    border-radius: 6px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn:hover,
button:hover {
    background: var(--mb-primary-deep);
    border-color: var(--mb-primary-deep);
    color: #fff;
}
.btn.btn-quiet,
button.btn-quiet {
    background: transparent;
    color: var(--mb-ink);
    border-color: var(--mb-line-strong);
}
.btn.btn-quiet:hover,
button.btn-quiet:hover {
    background: var(--mb-page);
    border-color: var(--mb-line-strong);
    color: var(--mb-ink);
}

/* ---- Grid for paired cards ---- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) {
    .grid-2 { grid-template-columns: 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Validation messages (login etc.) ---- */
.validation-summary {
    color: #c13936;
    font-size: 13px;
    margin-bottom: 12px;
}

/* ---- Auth pages (centred narrow card) ---- */
.auth-shell {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.auth-card {
    background: var(--mb-surface);
    border: 1px solid var(--mb-line);
    border-radius: 10px;
    padding: 32px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 4px 24px rgba(51, 51, 51, 0.04);
}
.auth-card h1 { font-size: 22px; margin-bottom: 4px; }
.auth-card .auth-sub { color: var(--mb-muted); margin: 0 0 22px; }
.auth-card input { width: 100%; }
.auth-card .auth-field { margin-bottom: 14px; }
.auth-card button { width: 100%; }
.auth-card .auth-checkbox { display: flex; align-items: center; gap: 6px; color: var(--mb-muted); font-size: 13px; }