/* Our CSS, through classes: no <style> and no style="" in the Blade files (Kuno 18.10.2026). The layout loads this file
   after Bootstrap, with ?v=filemtime so the browser takes a changed file. A Bootstrap utility class first; a class of our
   own only where Bootstrap has none */

/* ---------- the look (layouts/app.blade.php) ---------- */

/* The look (Hebe 16.10.2026, Pakkumiste liidese disain 3a): Bootstrap as it is, only its variables set — the system font
   (as macOS has it), one blue, 8 px corners. The Figtree font and the Tailwind classes are gone (Tailwind was never built
   into the pages) */
:root, [data-bs-theme=light] {
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: .875rem;
    --bs-body-color: #1d1d1f;
    --bs-border-radius: .5rem;
    --bs-border-radius-sm: .4rem;
    --bs-primary: #0071e3;
    --bs-primary-rgb: 0, 113, 227;
    --bs-link-color-rgb: 0, 113, 227;
    --bs-link-hover-color-rgb: 0, 119, 237;
}

.btn-primary {
    --bs-btn-bg: #0071e3; --bs-btn-border-color: #0071e3;
    --bs-btn-hover-bg: #0077ed; --bs-btn-hover-border-color: #0077ed;
    --bs-btn-active-bg: #006edb; --bs-btn-active-border-color: #006edb;
    --bs-btn-disabled-bg: #0071e3; --bs-btn-disabled-border-color: #0071e3;
}

.form-control:focus, .form-select:focus { border-color: #0071e3; box-shadow: 0 0 0 .2rem rgba(0, 113, 227, .18); }

.nav-tabs .nav-link.active { font-weight: 600; }

/* the panel the open step tab opens into (requests/_header): a shade lighter than the page, so the white cards in it
   stand out (Hebe 17.10.2026, disain 2a); the open tab has the same shade */
.step-panel, .nav-tabs .nav-link.active.step-tab { background: #fafafa; }
.nav-tabs .nav-link.active.step-tab { border-bottom-color: #fafafa; }

/* the page under the panels and cards: Apple's light grey (Hebe 18.10.2026, „dv-card“ of disain 4a) */
body { background-color: #f5f5f7; }

/* a phone: the title smaller, a button row under it (w-md-auto is Bootstrap's gap: no responsive widths) */
@media (max-width: 767.98px) { .h3 { font-size: 1.25rem; } }
@media (min-width: 768px) { .w-md-auto { width: auto !important; } }

[x-cloak] { display: none !important; }

/* ---------- sizes Bootstrap has no utility for ---------- */

/* a page of one form or one document, narrower than the container */
.page-w-400 { max-width: 400px; }
.page-w-560 { max-width: 560px; }
.page-w-720 { max-width: 720px; }
.page-w-900 { max-width: 900px; }

/* the login and password pages: the card in the middle of the window */
.min-vh-80 { min-height: 80vh; }

/* the logo: in the login card and in the navigation */
.logo-sm { width: 26px; height: 26px; }
.logo-xs { width: 22px; height: 22px; }

/* a thin progress bar (admin/imports/show, requests/working) */
.progress-thin { --bs-progress-height: 6px; }

/* the name column of a view table (admin/offers/view, offer/view) */
.th-label { width: 200px; }

/* a text that keeps its line breaks (pre-line) or its spaces too (pre-wrap) */
.text-pre-line { white-space: pre-line; }
.text-pre-wrap { white-space: pre-wrap; }

/* numbers in columns, the digits one width */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* a flex item that may shrink below its content (a select on a phone) */
.min-w-0 { min-width: 0; }

.cursor-pointer { cursor: pointer; }

/* ---------- lists ---------- */

/* a table row that opens its page on a click (public/js/scripts.js) */
.clickable-row { cursor: pointer; }

/* the column names stay at the top of the window (Kuno 24.10.2026); --sticky-top under a fixed bar (doc-table).
   No scroll box around the table, or they stay in it: table-responsive-lg, and the card clips (not hidden) its corners */
.table-sticky thead th { position: sticky; top: var(--sticky-top, 0); z-index: 2;
    box-shadow: inset 0 -1px 0 var(--bs-border-color); }
.card-clip { overflow: clip; }

/* the status „saadetud“ (App\Defs\Offers::STATUSES, components/status-badge) */
.status-sent-icon { color: #28a745; font-size: 1.2em; }

/* a column's filter (components/column-filter): the button is the column's name, in its font */
.column-filter-toggle { font: inherit; }
.column-filter-menu { min-width: 14rem; }

/* ---------- offer/view, offer/_statements ---------- */

.offer-img { max-width: 70%; }
.statement-img { max-height: 45vh; }

/* ---------- components/alert ---------- */

/* a Bootstrap alert on the lines' colours at 18% (.line-2, .line-7, .line-5; Kuno 18.10.2026) */
.alert-success { --bs-alert-bg: #30d1582e; }
.alert-warning { --bs-alert-bg: #ffd60a2e; }
.alert-danger { --bs-alert-bg: #ff375f2e; }

/* ---------- components/toast ---------- */

/* A Bootstrap toast in our four colours (Kuno 16.10.2026): light grey with the colour on the left and in the bar at the
   bottom; the bar runs out in the toast's 5 seconds (data-bs-delay). A very light grey (Kuno 18.10.2026) */
.app-toast { --bs-toast-bg: rgb(252, 252, 252); overflow: hidden; border-left: 4px solid var(--app-toast-color); }
.app-toast-success { --app-toast-color: #28a745; }
.app-toast-error { --app-toast-color: #dc3545; }
.app-toast-warning { --app-toast-color: #ffc107; }
.app-toast-info { --app-toast-color: #007bff; }
.app-toast-bar { height: 3px; background: var(--app-toast-color); transform-origin: left; animation: app-toast-bar 5s linear forwards; }
@keyframes app-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---------- requests/_header: the steps ---------- */

/* scrolled: a bar over the whole width, so a page's column names can stay right under it (Hebe 14.10.2026) */
.step-buttons-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; justify-content: flex-end;
    height: 3.5rem; padding: 0 1.5rem; background: var(--bs-body-bg); box-shadow: var(--bs-box-shadow-sm); }

/* the tabs scroll sideways on a phone, without a scrollbar */
[data-step-tabs] { scrollbar-width: none; }
[data-step-tabs]::-webkit-scrollbar { display: none; }
.step-tabs-list { min-width: max-content; }

/* the open tab with a menu (requests/_header.blade.php 'tabMenu'): Bootstrap isolates a hovered tab
   (.nav-tabs .nav-link:hover { isolation: isolate }), which kept its menu under the cards of the tab below it; the tab
   stands over them */
.step-tab-menu {
    position: relative;
    z-index: 1000;
}

/* ---------- requests/preview_body (disain 1e, Hebe 17.10.2026) ---------- */

.preview-col-nr { width: 2.5rem; }
.preview-col-size { width: 5rem; }
.preview-col-qty { width: 5.5rem; }
.preview-col-price { width: 6.5rem; }
.preview-col-sum { width: 7rem; }
.preview-total { min-width: 18rem; }

/* ---------- requests/request_body ---------- */

/* the request's text: folded by default, the title opens it (Hebe 16.10.2026) */
.request-text-toggle .bi-chevron-right { display: inline-block; transition: transform .15s ease-in-out; }
.request-text-toggle[aria-expanded="true"] .bi-chevron-right { transform: rotate(90deg); }
.request-text { white-space: pre-wrap; max-height: 12rem; }

/* the boxes of a request line */
.request-code { max-width: 8rem; }
.request-stage { max-width: 9rem; }
.request-quantity { max-width: 6rem; }
.request-unit { max-width: 5rem; }

/* the files */
.doc-table .doc-file { min-width: 8rem; max-width: 13rem; overflow-wrap: anywhere; }
.doc-table .doc-role { min-width: 6.5rem; }
.doc-table .doc-stage { min-width: 8rem; }
.doc-table .doc-measure { min-width: 10rem; }
/* a file left out with × stays in the list faintly till „Salvesta“ (Hebe 15.10.2026) */
.doc-table tr:has(.doc-remove:checked) > td:not(:last-child) { opacity: .35; }
.doc-table tr:has(.doc-remove:checked) .doc-file a { text-decoration: line-through; }
/* the column names (table-sticky) stay under the step buttons (.step-buttons-fixed, 3.5rem; Hebe 14.10.2026);
   a sent request has no buttons (doc-table-sent) */
.doc-table { --sticky-top: 3.5rem; }
.doc-table-sent { --sticky-top: 0; }

/* ---------- requests/lines_body, _line, _other_line ---------- */

/* the drawing's tooltips on the fields (requests/_drawing): a line per opening, left aligned */
.drawing-tip .tooltip-inner {
    white-space: pre-line;
    text-align: left;
    max-width: 420px;
}

/* the colours of an opening's lines, in turn: the dot of a row and its fields on the strip (opening-card.js reads
   --line-color) */
.line-1 { --line-color: #0a84ff; }
.line-2 { --line-color: #30d158; }
.line-3 { --line-color: #ff9f0a; }
.line-4 { --line-color: #bf5af2; }
.line-5 { --line-color: #ff375f; }
.line-6 { --line-color: #64d2ff; }
.line-7 { --line-color: #ffd60a; }
.line-8 { --line-color: #ac8e68; }
.line-dot { width: 12px; height: 12px; background: var(--line-color); }

/* the field strip */
.field-strip { height: 2.625rem; }

/* the column names on the grid of the rows: the row box's border and padding */
.offer-rows-head { padding-inline: calc(1rem + 1px); }
.line-col-remove { width: 28px; }

/* the boxes of a row; the width box is in an input-group, which gives its boxes flex and width of their own */
.size-text { width: 4.5rem; }
.input-group > .size-box { flex: 0 0 4.5rem; width: 4.5rem; }
.color-box { width: 7.5rem; }

/* „Kangas“ and „Profiil“ (disain 4a, Hebe 18.10.2026): the type and the colour with its dot; they may shrink on a phone,
   so the row never grows wider than the page (_line, _defaults) */
.choice-half { flex: 1 1 50%; min-width: 0; }
.choice-dot { width: 12px; height: 12px; }

/* „Lisavalikud“: an option's name, its quantity and the select that adds one, a link more than a box */
.option-label { max-width: 16rem; }
.option-qty { width: 4rem; }
.option-add-select { width: 4.5rem; padding-right: .25rem; background-image: none; }

/* disain 3a (Hebe 17.10.2026): every row of an opening its own rounded box with a gap (the light grey line under a row,
   Kuno 13.10.2026, is its border now); the chosen row blue, light blue when it has no colour of its own (a yellow, grey
   or red row keeps it), one on the page (opening-card.js); a row marked × faded. The rows stay list-group-items:
   step-scroll.js finds them so. „Paigaldus, transport ja muu“ a table without lines */
.offer-rows > .list-group-item {
    border-width: var(--bs-list-group-border-width);
    border-radius: var(--bs-border-radius-lg);
}

.offer-rows > .list-group-item.is-chosen {
    --bs-list-group-border-color: var(--bs-primary);
}

.offer-rows > .list-group-item.is-chosen:not(.list-group-item-warning) {
    --bs-list-group-bg: rgba(var(--bs-primary-rgb), .05);
}

.offer-rows > .list-group-item:has(.line-remove:checked), .offer-other-rows > .list-group-item:has(.line-remove:checked) {
    opacity: .5;
}

.btn-check:checked + .line-remove-label {
    color: var(--bs-danger) !important;
}

.offer-other-rows > .list-group-item {
    --bs-list-group-bg: transparent;
    border: 0;
    padding: .25rem 0;
}

@media (min-width: 768px) {
    .offer-line-sub {
        padding-left: 20px;
    }

    .offer-col-quantity {
        flex: 0 0 90px;
    }

    .offer-col-unit {
        flex: 0 0 80px;
    }

    .offer-col-price {
        flex: 0 0 110px;
    }

    /* the first line of a row of an opening (Hebe 18.10.2026): the same col classes over the rows (lines_body) and in
       them, so every column name stands over its box; the name takes the room left, the sizes and Kogus their own width
       on the right before × */
    .offer-col-name { flex: 1 1 0; min-width: 0; }
    .offer-col-size { flex: 0 0 11rem; }
    .offer-col-price { flex: 0 0 10rem; }
    .offer-col-drive { flex: 0 0 8rem; }
    .offer-col-qty { flex: 0 0 4.5rem; }
    .offer-col-remove { flex: 0 0 2rem; }
}

/* a wider page gives the sizes and Kogus a little more room, the name the rest */
@media (min-width: 992px) {
    .offer-col-size { flex-basis: 11.5rem; }
    .offer-col-price { flex-basis: 13rem; }
    .offer-col-drive { flex-basis: 9rem; }
    .offer-col-qty { flex-basis: 5.5rem; }
}