/* Bootstrap Compact override
   Activated by .compact on the page root div (toggled by MainLayout).
   All rules scoped to .compact — no effect unless the class is present. */

.compact {
    font-size: 0.8125rem;
}

/* ── Form controls ─────────────────────────────────────── */
.compact .form-control,
.compact .form-select {
    padding: 0.1rem 0.25rem;
    font-size: 0.75rem;
    min-height: calc(1.4em + 0.2rem + 2px);
    line-height: 1.4;
}

.compact label {
    margin-bottom: 0;
    font-size: 0.75rem;
    line-height: 1.4;
}

.compact .form-group {
    margin-bottom: 0.1rem;
    margin-right: 0.25em;
}

/* ── Layout rows (Row component = .cp-row) ─────────────── */
.compact .cp-row {
    gap: 0.1rem;
    row-gap: 0.1rem;
}

/* ── Cards (Group component) ───────────────────────────── */
.compact .card {
    margin-bottom: 0.15rem;
}

.compact .card-header {
    padding: 0.15rem 0.4rem;
}

.compact .card-header .card-title,
.compact .card-title {
    margin-bottom: 0;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bs-gray-700);
}

/* Launcher menus (web shop + sales reports): blue group titles in compact mode too, matching the page heading.
   More specific than the gray rule above (extra .cp-report-cats class) so it wins. */
.compact .cp-report-cats .card-header .card-title,
.compact .cp-report-cats .card-title {
    color: #0071c1;
}

.compact .card-body {
    padding: 0.2rem 0.4rem;
}

/* ── Buttons ────────────────────────────────────────────── */
.compact .btn {
    padding: 0.1rem 0.3rem;
    font-size: 0.75rem;
    line-height: 1.4;
}
.compact .btn.btn-link{
    line-height:1;
}
.compact .btn-sm {
    padding: 0.05rem 0.2rem;
}

/* ── Tables ─────────────────────────────────────────────── */
.compact .table > :not(caption) > * > * {
    padding: 0.1rem 0.1rem !important;
    white-space: nowrap;
    font-size: 0.75rem;
}

/* TableCell content: clip long text (e.g. product descriptions) instead of letting the column
   stretch full-width. Full text stays available via the cell's title tooltip (TableCell.razor). */
.compact .cp-table-truncate {
    display: inline-block;
    max-width: 30ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
/* Resizable / fixed-layout grids (DataGrid with adjustable columns): the column width itself governs how much
   text shows, so the fixed 30ch cap above must not clip inside the cell — otherwise dragging a column wider never
   reveals more text (it just leaves empty space beyond 30 characters). max-width:100% follows the column edge, and
   the cell keeps clipping with an ellipsis there; the full text stays in the title tooltip. */
.compact .datagrid-fixed .cp-table-truncate {
    max-width: 100%;
}
/* "Fetch files" pick list: show the full file name (no 30ch cap) — the wide dialog + the list's own scroll give it
   room, and seeing the whole name is the whole point of the picker. */
.compact .isp-pick .cp-table-truncate {
    max-width: none;
}

/* Column header filter inputs */
.compact th input,
.compact th .form-control,
.compact th .form-select {
    margin: 1px;
    padding: 0.05rem 0.15rem;
    font-size: 0.7rem;
}

/* HeaderLookupFilter shrinks to match the compact column-header inputs above.
   !important is needed because the component's own scoped rule (which carries
   the scope attribute) otherwise out-specifies these. line-height 1.4 restores
   readable icon centring the generic .btn-link line-height:1 would remove. */
.compact .header-lookup .form-control {
    padding: 0.05rem 0.15rem !important;
    font-size: 0.7rem !important;
}
.compact .header-lookup .btn {
    padding: 0.05rem 0.2rem !important;
    font-size: 0.7rem !important;
    line-height: 1.4 !important;
}

/* SortHeader title matches the compact .form-label size (see .compact label).
   !important beats the component's scoped rule, which carries the scope
   attribute and would otherwise out-specify these. */
.compact .sort-header .btn-link {
    margin-bottom: 0 !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
}

/* ── Navigation / tabs ──────────────────────────────────── */
.compact .nav-tabs .nav-link {
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
}

/* ── Badges ─────────────────────────────────────────────── */
.compact .badge {
    font-size: 0.7rem;
    padding: 0.15em 0.4em;
}

/* ── Input groups ───────────────────────────────────────── */
.compact .input-group-text {
    padding: 0.1rem 0.25rem;
    font-size: 0.75rem;
    line-height: 1.4;
}

/* ── Form switch (Switch component) ────────────────────── */
.compact .form-check {
    min-height: 0;
}

.compact .form-check-input {
    height: 1em;
    margin-top: 0.2em;
}

/* ── Content area ───────────────────────────────────────── */
.compact .content {
    padding-top: 0.5rem;
}

/* ── Utility spacing overrides ──────────────────────────── */
.compact .mb-3 { margin-bottom: 0.25rem !important; }
.compact .mb-2 { margin-bottom: 0.15rem !important; }
.compact .mt-3 { margin-top: 0.25rem !important; }
.compact .p-3  { padding: 0.3rem !important; }
.compact .p-2  { padding: 0.2rem !important; }

/* ── Calculation tab (material / time / price panels) ─────
   Compact mode uses smaller fonts + padding, so the fixed panel and input widths can be tighter than the
   non-compact defaults in app.css. These widths are tuned to look perfect in compact mode. */
.compact .cp-calc-mat   { width: 22.5rem; }
.compact .cp-calc-time  { width: 43.5rem; }
.compact .cp-calc-price { width: 23rem; }
/* General tab matches the compact calculation-tab width (22.5+43.5+23 + 2x12px gap). */
.compact .cp-gen-tab    { width: 90.5rem; }
/* Standard popup capped at the compact General-tab width. */
.compact .cp-std-popup  { max-width: 90.5rem; }
.compact .cp-mf-popup   { width: 70rem; }
.compact .cp-mat-grid table { min-width: 22rem; }
.compact .cp-mat-grid input { width: 4rem; }
.compact .cp-time-grid input { width: 3.6rem; }
.compact .cp-price-row .form-control { width: 3.5rem; }


/* <Toolbar> in compact mode: less air. (div.cp-toolbar outranks the scoped .cp-toolbar rule in Toolbar.razor.css.) */
.compact div.cp-toolbar {
    padding: .25rem .5rem;
    margin-bottom: .5rem;
}