/*
 * A thin layer over Bootstrap. Deliberately small: the point is that it looks like a
 * considered product rather than a Bootstrap template, not that it is a design system.
 */
:root {
    --app-ink: #1e2430;
    --app-nav: #1b2333;
    --app-accent: #3d5afe;
    --app-accent-dark: #2f45c5;
    --app-bg: #f4f6fa;
    --app-line: #e3e8f0;
}

body {
    background: var(--app-bg);
    color: var(--app-ink);
    -webkit-font-smoothing: antialiased;
}

/* --- chrome ------------------------------------------------------------- */

.app-nav {
    background: var(--app-nav);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

.app-nav .navbar-brand {
    font-weight: 700;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.app-nav .navbar-brand i { color: #8ea2ff; }

.app-nav .nav-link.active {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--app-accent);
}

.app-nav .app-pos-btn {
    font-weight: 600;
    padding-inline: .9rem;
    white-space: nowrap;
}

/* --- surfaces ----------------------------------------------------------- */

.card {
    border: 1px solid var(--app-line);
    border-radius: .6rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.card-header {
    background: #fff;
    border-bottom: 1px solid var(--app-line);
    font-weight: 600;
}

.page-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
}

.page-subtitle {
    color: #6b7688;
    font-size: .9rem;
    margin: .15rem 0 0;
}

/* --- numbers -----------------------------------------------------------
   Money lines up only if the digits are the same width, so every figure on
   a screen or a bill uses tabular numerals. */

.num, .stat-value, table td.num, table th.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.stat-card .stat-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7688;
    font-weight: 600;
}

.stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
}

/* --- forms -------------------------------------------------------------- */

label.form-label {
    font-weight: 600;
    font-size: .82rem;
    color: #46506180;
    color: #465061;
    margin-bottom: .25rem;
}

.form-section + .form-section { margin-top: 1.25rem; }

.form-section-title {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7688;
    font-weight: 700;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--app-line);
    margin-bottom: .9rem;
}

.btn-primary {
    background: var(--app-accent);
    border-color: var(--app-accent);
}

.btn-primary:hover, .btn-primary:focus {
    background: var(--app-accent-dark);
    border-color: var(--app-accent-dark);
}

/* Touch targets on a phone at a counter. */
@media (max-width: 576px) {
    .btn-lg, .form-control-lg, .form-select-lg { min-height: 48px; }
    .stat-card .stat-value { font-size: 1.25rem; }
}

/* --- tables ------------------------------------------------------------- */

.table > :not(caption) > * > * { padding: .6rem .75rem; }

.table thead th {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7688;
    font-weight: 700;
    border-bottom-width: 1px;
}

/* Any table wide enough to overflow scrolls inside its own box rather than
   pushing the whole page sideways on a phone. */
.table-scroll { overflow-x: auto; }

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #6b7688;
}

.empty-state i {
    font-size: 2rem;
    display: block;
    margin-bottom: .5rem;
    opacity: .5;
}

/* --- document totals ---------------------------------------------------
   Shared by the billing form and the document view, so the figures a user
   confirms while typing sit exactly where they sit once it is saved. */

.totals { border-collapse: collapse; }
.totals td { padding: .3rem .25rem; }
.totals td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.totals tr.grand td {
    border-top: 2px solid var(--app-ink);
    font-size: 1.1rem;
    font-weight: 700;
    padding-top: .5rem;
}

/* The screen lock: the page keeps its state but cannot be read past the dialog. */
body.locked > main, body.locked > nav { filter: blur(6px); pointer-events: none; user-select: none; }
#lockModal .modal-content { border: 0; }