/* =============================================
   RePanel CNC Calculator v1 — Styles
   ============================================= */

:root {
    --bg: #f5f5f5;
    --bg-card: #ffffff;
    --bg-dark: #1a1a1a;
    --text: #333;
    --text-secondary: #666;
    --text-muted: #999;
    --border: #e0e0e0;
    --green: #2d5016;
    --green-light: #4a7c28;
    --green-bg: #e8f5e9;
    --accent: #ff6b00;
    --blue: #1565c0;
    --purple: #7b1fa2;
    --red: #c62828;
    --radius: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 12px rgba(0,0,0,0.1);
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --transition: 0.2s ease;
}


/* =============================================
   1. Reset & Base
   ============================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
}

.calc-delivery-widget {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fafafa;
}

.calc-delivery-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.calc-delivery-package {
    grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(120px, 1fr));
}

.delivery-dimensions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.delivery-package-helper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.delivery-package-helper .hint {
    min-width: 260px;
    flex: 1;
}

.delivery-quotes {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.delivery-quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
}

.delivery-quote.is-selected {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(45,80,22,0.12);
}

.delivery-quote.is-muted {
    background: #f7f7f7;
    color: var(--text-secondary);
}

.delivery-quote-provider {
    font-weight: 800;
}

.delivery-quote-title {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-secondary);
}

.delivery-quote-meta {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.delivery-quote-side {
    display: flex;
    align-items: center;
    gap: 8px;
}

.delivery-quote-price {
    min-width: 92px;
    text-align: right;
    font-weight: 800;
    color: var(--green);
}

.delivery-quote-error {
    padding: 10px 12px;
    border-radius: var(--radius);
    background: #ffebee;
    color: var(--red);
    font-size: 13px;
}

.designer-fee-control {
    display: grid;
    grid-template-columns: repeat(3, minmax(54px, 1fr)) minmax(80px, 1.1fr);
    gap: 6px;
    align-items: stretch;
}

.designer-fee-btn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    min-height: 40px;
    padding: 0 10px;
}

.designer-fee-btn:hover,
.designer-fee-btn.active {
    border-color: var(--brand);
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.designer-fee-control input {
    min-width: 0;
}


/* =============================================
   2. Auth Screen
   ============================================= */

.auth-screen {
    position: fixed;
    inset: 0;
    background: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.auth-box {
    background: var(--bg-card);
    max-width: 400px;
    width: 90%;
    padding: 48px;
    border-radius: 12px;
    text-align: center;
}

.auth-box h1 {
    font-size: 28px;
    color: var(--green);
    margin-bottom: 4px;
}

.auth-box p {
    color: var(--text-muted);
    margin-bottom: 32px;
}

.auth-box input[type="password"] {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    margin-bottom: 12px;
    text-align: center;
}

.auth-box input[type="password"]:focus {
    border-color: var(--green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(45,80,22,0.15);
}

.auth-error {
    display: none;
    color: var(--red);
    font-size: 13px;
    margin-bottom: 12px;
}

.auth-box .btn {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}


/* =============================================
   3. Layout
   ============================================= */

.app-layout {
    display: none;
    min-height: 100vh;
}

.app-layout.active {
    display: flex;
}

.main-content {
    margin-left: 240px;
    padding: 24px 32px;
    flex: 1;
    max-width: calc(100% - 240px);
}


/* =============================================
   4. Sidebar
   ============================================= */

.sidebar {
    width: 240px;
    background: var(--bg-dark);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 24px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-brand h2 {
    color: white;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.sidebar-brand span {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 0;
}

.sidebar-nav-section {
    padding: 10px 20px 6px;
    color: rgba(255,255,255,0.38);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sidebar-nav-divider {
    height: 1px;
    margin: 10px 20px;
    background: rgba(255,255,255,0.12);
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: var(--transition);
}

.sidebar-nav a:hover {
    color: white;
    background: rgba(255,255,255,0.05);
}

.sidebar-nav a.active {
    color: white;
    background: rgba(255,255,255,0.1);
    border-left-color: var(--green-light);
}

.nav-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

.sidebar-footer a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
}

.sidebar-footer a:hover {
    color: white;
}

.sidebar-prices-link {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
}


/* =============================================
   5. Pages
   ============================================= */

.page {
    display: none;
}

.page.active {
    display: block;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}

.page-header-actions {
    display: flex;
    gap: 8px;
}


/* =============================================
   6. Cards & Containers
   ============================================= */

.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.card h2 {
    font-size: 16px;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}


/* =============================================
   7. Buttons
   ============================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
}

.btn-primary {
    background: var(--green);
    color: white;
}

.btn-primary:hover {
    background: var(--green-light);
}

.btn-success {
    background: #16a34a;
    color: white;
}

.btn-danger {
    background: var(--red);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-outline:hover {
    background: var(--bg);
    border-color: var(--text-muted);
}

.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 15px;
}


/* =============================================
   8. Form Elements
   ============================================= */

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

input,
select,
textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font);
    transition: var(--transition);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--green);
    outline: none;
    box-shadow: 0 0 0 3px rgba(45,80,22,0.1);
}

.hint {
    font-size: 11px;
    color: var(--text-muted);
}

/* Quick sheet lines: compact and readable */
#quick-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quick-line {
    display: grid;
    grid-template-columns: 140px 120px 170px 180px 220px 46px;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px;
    background: #fafafa;
    margin-bottom: 0;
    align-items: start;
}

.quick-line .form-group {
    margin: 0;
}

.quick-col-1 { grid-column: span 1; }
.quick-col-2 { grid-column: span 2; }
.quick-col-3 { grid-column: span 3; }
.quick-col-4 { grid-column: span 4; }
.quick-col-8 { grid-column: span 8; }
.quick-col-full { grid-column: 1 / -1; }

.quick-mix-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
}

.quick-mix-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px 44px;
    gap: 6px;
    align-items: center;
}

.quick-mix-item input,
.quick-mix-item select {
    height: 36px;
}

.quick-stock-dropdown {
    position: relative;
}

.quick-stock-dropdown summary {
    list-style: none;
}

.quick-stock-dropdown summary::-webkit-details-marker {
    display: none;
}

.quick-stock-summary {
    height: 46px;
    border: 1px solid #d6d9de;
    border-radius: 8px;
    background: #fff;
    padding: 5px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.quick-stock-summary-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.quick-stock-thumb {
    width: 52px;
    height: 34px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-stock-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-stock-thumb-empty,
.quick-stock-summary-empty {
    color: #9ca3af;
    font-size: 12px;
}

.quick-stock-title {
    font-size: 13px;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quick-stock-options {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 300px;
    overflow: auto;
    background: #fff;
    border: 1px solid #d6d9de;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    z-index: 40;
    padding: 6px;
}

.quick-stock-option {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    text-align: left;
}

.quick-stock-option:last-child {
    margin-bottom: 0;
}

.quick-stock-option:hover,
.quick-stock-option.active {
    border-color: var(--green);
    background: #f4fbf4;
}

.quick-stock-opt-thumb {
    width: 64px;
    height: 48px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.quick-stock-opt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-stock-opt-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.quick-stock-opt-title {
    font-size: 13px;
    color: #111827;
}

.quick-stock-opt-meta {
    font-size: 11px;
    color: #6b7280;
}

.quick-mix-add {
    margin-top: 4px;
}

.quick-mix-hint {
    min-height: 16px;
    margin-top: 4px;
}

.base-color-selector {
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
    margin: 8px 0 10px;
}

.base-color-selector-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    color: #111827;
    font-size: 13px;
}

.base-color-selector-head span {
    color: #6b7280;
    font-weight: 600;
}

.base-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}

.base-color-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 1px solid #d6d9de;
    border-radius: 8px;
    background: #fff;
    padding: 6px;
    text-align: left;
    cursor: pointer;
}

.base-color-card:hover,
.base-color-card:focus-visible,
.base-color-card.active {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(48, 89, 32, 0.12);
    outline: none;
}

.base-color-card-soft {
    border-style: dashed;
}

.base-color-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1.65;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
}

.base-color-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.base-color-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.base-color-title {
    font-weight: 800;
    color: #111827;
    font-size: 13px;
}

.base-color-meta,
.base-color-stock {
    color: #6b7280;
    font-size: 11px;
    line-height: 1.25;
}

.granule-ratio-hints {
    border: 1px dashed #d6d9de;
    border-radius: 8px;
    background: #fbfbfa;
    padding: 8px;
    margin: 0 0 10px;
}

.granule-ratio-hints-head {
    color: #374151;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
}

.granule-ratio-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
    gap: 6px;
}

.granule-ratio-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #374151;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.granule-ratio-mini img {
    width: 40px;
    height: 28px;
    border-radius: 5px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.countertop-order-shell {
    padding: 12px;
    margin-bottom: 12px;
}

.countertop-order-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
    margin-bottom: 8px;
}

.countertop-frame {
    width: 100%;
    min-height: calc(100vh - 190px);
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
}

@media (max-width: 1100px) {
    .countertop-order-meta {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 720px) {
    .countertop-order-meta {
        grid-template-columns: 1fr;
    }
}

.quick-paint-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding-top: 2px;
}

.quick-paint-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    color: #4b5563;
}

@media (max-width: 1280px) {
    .quick-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .quick-col-2, .quick-col-3, .quick-col-4, .quick-col-8 {
        grid-column: span 1;
    }
    .quick-col-full { grid-column: 1 / -1; }
}

@media (max-width: 840px) {
    .quick-line {
        grid-template-columns: 1fr;
    }
.quick-col-2, .quick-col-3, .quick-col-4, .quick-col-8 {
        grid-column: span 1;
    }
    .quick-col-full { grid-column: 1 / -1; }
}

.manager-sales-grid {
    display: grid;
    grid-template-columns: 1fr 160px;
    gap: 6px 10px;
    align-items: center;
}

.manager-sales-row-label {
    color: var(--text-secondary);
    font-size: 12px;
}

.manager-sales-row-label .manager-reco {
    color: #9ca3af;
    font-size: 11px;
    margin-left: 6px;
}

.manager-sales-grid input {
    height: 34px;
    padding: 8px 10px;
    font-size: 13px;
}

.manager-sales-grid input[type="number"]::-webkit-outer-spin-button,
.manager-sales-grid input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.manager-sales-grid input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.manager-sales-total {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: 13px;
    color: var(--text-secondary);
}


/* =============================================
   9. SVG / DXF Upload Area
   ============================================= */

.drop-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg);
}

.drop-zone:hover,
.drop-zone.dragover {
    border-color: var(--green);
    background: var(--green-bg);
}

.drop-zone .hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

#svg-preview {
    display: none;
}

#svg-preview.visible {
    display: block;
}

.svg-filename {
    font-weight: 600;
    margin-bottom: 8px;
}

#svg-render {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    max-height: 200px;
    background: white;
}

#svg-analysis {
    display: none;
    margin-top: 16px;
}

#svg-analysis.visible {
    display: block;
}


/* =============================================
   10. SVG Elements List
   ============================================= */

.svg-element {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 13px;
}

.color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.color-dot-sm {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
}

.svg-element .cat {
    font-weight: 500;
}

.svg-element .val {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 12px;
}


/* =============================================
   11. Operations Table
   ============================================= */

#ops-table {
    display: none;
}

.ops-table-visible #ops-table {
    display: block;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 16px;
}

th {
    background: var(--green-bg);
    color: var(--green);
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.total-row {
    font-weight: 700;
    background: #f8f8f8;
}

.total-row td {
    border-top: 2px solid var(--green);
}

.text-right {
    text-align: right;
}


/* =============================================
   12. Results Display
   ============================================= */

.result-table {
    width: 100%;
    font-size: 14px;
}

.result-table td:first-child {
    color: var(--text-secondary);
}

.result-table td:last-child {
    text-align: right;
    font-weight: 600;
}

.result-table tr {
    border-bottom: 1px solid #eee;
}

.result-table td {
    padding: 8px 0;
}

.result-highlight td {
    font-size: 16px;
    color: var(--green);
}


/* =============================================
   13. Price Grid (Markup Variants)
   ============================================= */

/* Hero price (40% markup — main working price) */
.price-hero {
    text-align: center;
    padding: 20px 16px 16px;
    background: var(--green-bg);
    border: 2px solid var(--green);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.price-hero-label {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.price-hero-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}

.price-hero-order {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.price-hero-order strong {
    color: var(--text);
}

/* Small variant chips for other markups */
.price-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.price-variant {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.price-variant-pct {
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 30px;
}

.price-variant-val {
    font-weight: 600;
    color: var(--text);
}

.price-variant-total {
    color: var(--text-muted);
    font-size: 11px;
}

.marketplace-row {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}


/* =============================================
   14. Capacity Bars
   ============================================= */

.capacity-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cap-bar-value {
    font-size: 13px;
    font-weight: 600;
    margin-top: 4px;
}


/* =============================================
   15. Stat Grid
   ============================================= */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-box {
    background: var(--bg);
    padding: 14px;
    border-radius: var(--radius);
    text-align: center;
}

.stat-box .stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--green);
}

.stat-box .stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}


/* =============================================
   16. Nesting Info
   ============================================= */

.nesting-info {
    background: var(--green-bg);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =============================================
   17. Color Legend
   ============================================= */

.color-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--bg);
    border-radius: var(--radius);
}

.color-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.color-legend-item .dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    flex-shrink: 0;
}

.hex-code {
    color: var(--text-muted);
    font-family: monospace;
    font-size: 10px;
}


/* =============================================
   18. Modal
   ============================================= */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: white;
    border-radius: 12px;
    padding: 32px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal h3 {
    font-size: 18px;
    margin-bottom: 16px;
    color: var(--green);
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: flex-end;
}

.new-calc-modal {
    width: min(92vw, 560px);
    max-width: 560px;
    border-radius: 8px;
    padding: 22px;
}

.new-calc-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.new-calc-modal__head h3 {
    margin: 0;
    color: var(--text);
}

.new-calc-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.new-calc-close:disabled {
    cursor: wait;
    opacity: 0.55;
}

.new-calc-attach-view {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
}

.new-calc-attach-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.new-calc-attach-search input {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

.new-calc-attach-search input:focus {
    outline: none;
    border-color: rgba(45, 80, 22, 0.45);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.08);
}

.new-calc-attach-list {
    display: grid;
    gap: 8px;
    max-height: min(52vh, 420px);
    overflow-y: auto;
    padding-right: 2px;
}

.new-calc-attach-status {
    min-height: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
}

.new-calc-attach-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #dce7de;
    border-top-color: var(--green);
    border-radius: 50%;
    animation: repanel-spin .75s linear infinite;
}

.new-calc-status {
    min-height: 24px;
    margin-top: 12px;
}

.new-calc-progress {
    position: relative;
    overflow: hidden;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    background: #eef8ef;
    color: #246833;
    font-size: 13px;
    font-weight: 700;
}

.new-calc-progress__bar {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(42, 122, 58, 0.22), transparent);
    animation: repanel-progress-slide 1s linear infinite;
    transform: translateX(-100%);
}

.new-calc-progress > span:not(.new-calc-progress__bar) {
    position: relative;
    z-index: 1;
}

@keyframes repanel-spin {
    to { transform: rotate(360deg); }
}

@keyframes repanel-progress-slide {
    to { transform: translateX(100%); }
}

.new-calc-attach-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    align-items: center;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #d9e2dc;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    text-align: left;
}

.new-calc-attach-row:hover {
    border-color: var(--green);
    box-shadow: 0 6px 18px rgba(39, 124, 73, 0.1);
}

.new-calc-attach-row--selected,
.new-calc-attach-row--selected:hover {
    border-color: #2a7a3a;
    background: #f0fff5;
    box-shadow: 0 0 0 2px rgba(42, 122, 58, 0.14);
}

.new-calc-attach-row__main {
    min-width: 0;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.new-calc-attach-row__meta {
    grid-column: 1 / 2;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.new-calc-attach-row__badge {
    grid-row: 1 / span 2;
    grid-column: 2 / 3;
    padding: 4px 8px;
    border-radius: 999px;
    background: #eef8ef;
    color: var(--green);
    font-size: 12px;
    font-weight: 800;
}

.new-calc-attach-empty {
    padding: 18px 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    text-align: center;
}

.new-calc-attach-footer {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.new-calc-attach-footer__hint,
.new-calc-attach-footer__selected {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.35;
}

.new-calc-attach-footer__selected strong {
    color: var(--text);
}

.new-calc-attach-footer__actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.new-calc-error {
    min-height: 18px;
    margin-top: 12px;
    color: var(--red);
    font-size: 13px;
}

@media (max-width: 620px) {
    .new-calc-attach-search,
    .new-calc-attach-row {
        grid-template-columns: 1fr;
    }

    .new-calc-attach-row__meta,
    .new-calc-attach-row__badge {
        grid-column: 1;
        grid-row: auto;
    }

    .new-calc-attach-row__badge {
        justify-self: flex-start;
    }

    .new-calc-attach-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .new-calc-attach-footer__actions {
        width: 100%;
    }

    .new-calc-attach-footer__actions .btn {
        flex: 1 1 0;
    }
}

.sales-order-modal {
    max-width: 1240px;
    width: min(96vw, 1240px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sales-order-modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
}

.sales-order-modal-actions {
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    background: #fff;
}


/* =============================================
   19. Material Type Info
   ============================================= */

.material-info {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.material-info strong {
    color: var(--text);
}


/* =============================================
   20. Auto Tag
   ============================================= */

.auto-tag {
    display: none;
    background: var(--green-bg);
    color: var(--green);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
    font-weight: 600;
}


/* =============================================
   21. History Page — Kanban Board
   ============================================= */

.kanban-board {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    min-height: calc(100vh - 140px);
    align-items: flex-start;
}

.kanban-column {
    flex: 0 0 280px;
    min-width: 260px;
    background: var(--bg);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 140px);
}

.kanban-column.drag-over {
    outline: 2px dashed var(--green);
    outline-offset: -4px;
}

.kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    border-radius: var(--radius) var(--radius) 0 0;
    z-index: 1;
}

.kanban-col-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.2;
    padding-right: 8px;
}

.kanban-col-count {
    background: var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 24px;
    text-align: center;
}

.kanban-col-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kanban-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 12px;
    box-shadow: var(--shadow);
    transition: box-shadow 0.2s ease;
}

.kanban-card:hover {
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,0.1));
}

.kanban-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.kanban-card-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kanban-card-id {
    font-weight: 700;
    color: var(--green);
    font-size: 13px;
}

.kanban-card-date {
    font-size: 11px;
    color: var(--text-muted);
}

.kanban-card-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #f3c4c4;
    border-radius: 999px;
    background: #fff5f5;
    color: #c62828;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.kanban-card-delete:hover {
    background: #fde8e8;
}

.kanban-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
    line-height: 1.3;
}

.kanban-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.kanban-card-meta span {
    background: var(--bg);
    padding: 2px 6px;
    border-radius: 4px;
}

.kanban-card-cost {
    display: flex;
    justify-content: space-between;
    padding: 2px 0 0;
    font-size: 12px;
}

.kanban-card-cost .cost-label {
    color: var(--text-muted);
}

.kanban-card-cost .cost-value {
    font-weight: 700;
    color: var(--green);
}

.kanban-material-warning {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #ef9a9a;
    background: #ffebee;
    color: #b71c1c;
    font-size: 12px;
    line-height: 1.35;
}

.kanban-material-warning-title {
    font-weight: 800;
    margin-bottom: 4px;
}

.kanban-material-warning-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-weight: 600;
}

.kanban-material-info {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #f8faf8;
    color: var(--text);
    font-size: 12px;
    line-height: 1.4;
}

.kanban-material-photos {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.kanban-material-photos img {
    width: 38px;
    height: 38px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
}

.kanban-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.kanban-card-actions .btn {
    flex: 1;
    font-size: 11px;
    padding: 5px 8px;
    text-align: center;
}

.kanban-btn-delete {
    color: #c62828 !important;
    border-color: #c62828 !important;
}

.kanban-status-select {
    width: 100%;
    padding: 6px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    margin-top: 8px;
    cursor: pointer;
}

.wh-reserve-orders {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wh-reserve-order {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Production stepper */
.production-stepper {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.production-stepper-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 8px;
}

.stepper-bar {
    display: flex;
    gap: 2px;
    margin-bottom: 6px;
}

.stepper-segment {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--border);
    transition: background 0.2s ease;
}

.stepper-segment.completed {
    background: var(--green);
}

.stepper-segment.active {
    background: var(--accent);
}

.stepper-current {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 6px;
}

.stepper-next-btn {
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    background: var(--green);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

.stepper-next-btn:hover {
    opacity: 0.85;
}

.stepper-complete {
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
    text-align: center;
    padding: 6px;
}

.stepper-stage-select {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
    display: flex;
    align-items: center;
    gap: 8px;
}
.stepper-stage-select label {
    font-size: 11px;
    color: #888;
    white-space: nowrap;
}
.stepper-stage-select select {
    flex: 1;
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
}

/* ── Material Colors (per-color plastic) ── */
.mc-section { margin-top: 12px; border: 1px solid #e5e5e5; border-radius: 8px; padding: 10px 12px; background: #fafafa; }
.mc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.mc-header strong { font-size: 13px; }
.mc-rows { display: flex; flex-direction: column; gap: 6px; }
.mc-row { display: flex; align-items: center; gap: 6px; }
.mc-label { flex: 1; min-width: 100px; max-width: 160px; padding: 3px 6px; font-size: 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.mc-plan, .mc-fact, .mc-scrap { font-size: 11px; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.mc-plan { color: #888; }
.mc-plan-input { width: 60px; padding: 3px 4px; font-size: 12px; border: 1px solid #ddd; border-radius: 4px; text-align: right; background: #f5f5f5; }
.mc-fact-input { width: 65px; padding: 3px 4px; font-size: 12px; border: 2px solid #d32f2f; border-radius: 4px; text-align: right; background: #fff3f3; font-weight: 600; color: #c62828; }
.mc-fact-input:focus { outline: none; border-color: #b71c1c; box-shadow: 0 0 0 2px rgba(211,47,47,0.15); }
.mc-scrap { color: #aaa; font-size: 10px; min-width: 55px; }
.mc-remove { background: none; border: none; color: #ccc; cursor: pointer; font-size: 14px; padding: 2px 4px; line-height: 1; }
.mc-remove:hover { color: #e53935; }
.mc-totals { margin-top: 8px; padding-top: 6px; border-top: 1px solid #e0e0e0; font-size: 12px; color: #666; }
.mc-totals span { font-weight: 600; color: #333; }

/* ── Photo / File thumbnails ── */
.so-files-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.so-file-item { position: relative; }
.so-file-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid #e0e0e0; transition: opacity .2s; }
.so-file-thumb:hover { opacity: 0.85; }
.so-file-link { display: inline-flex; align-items: center; padding: 6px 10px; background: #f5f5f5; border-radius: 6px; font-size: 12px; color: #333; text-decoration: none; border: 1px solid #e0e0e0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-file-link:hover { background: #eee; }
.so-file-delete { position: absolute; top: -6px; right: -6px; background: #fff; border: 1px solid #ddd; border-radius: 50%; width: 20px; height: 20px; font-size: 11px; line-height: 18px; text-align: center; cursor: pointer; color: #999; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.so-file-delete:hover { color: #e53935; border-color: #e53935; }
.so-invoice-card {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #dbe8df;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfefb 0%, #f5faf6 100%);
}
.so-invoice-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.so-invoice-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--green-dark);
}
.so-finance-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.so-finance-chip {
    background: #fff;
    border: 1px solid #e2ece5;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.so-finance-chip span {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.so-finance-chip strong {
    font-size: 14px;
    color: var(--text);
}
.so-invoice-file {
    position: relative;
    display: inline-flex;
}

.kanban-empty {
    text-align: center;
    padding: 24px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Loading skeletons — shared shimmer block for Заказы (kanban/list) and
   Сегодня, shown while the initial ?view=cards / crm-digest fetch is in
   flight instead of bare "Загрузка..." text or an empty board. Pure CSS
   animation, no JS timers. Page-scoped wrappers (.orders-skeleton /
   .today-skeleton) control layout; .skeleton-card is the shimmering block
   itself, reused by both. */
.skeleton-card {
    height: 132px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, #eef0f3 25%, #f8f9fb 37%, #eef0f3 63%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.4s ease infinite;
    border: 1px solid var(--border);
}
@keyframes skeletonShimmer {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}
/* Infinite shimmer is exactly the kind of animation this media query exists
   for — show a calm static placeholder instead. */
@media (prefers-reduced-motion: reduce) {
    .skeleton-card { animation: none; }
}
.orders-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}
/* Kanban board shows one skeleton column-body per stage column, each with
   a couple of placeholder cards, so the empty board doesn't look broken
   while orders load. */
.kanban-col-body.orders-skeleton {
    padding: 12px;
}

.history-view-toggle {
    display: inline-flex;
    gap: 6px;
}

.history-view-toggle .btn.active {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.history-inline-editor {
    margin-top: 10px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

.history-inline-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.history-inline-field label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.history-inline-field input,
.history-inline-field select,
.history-inline-field textarea {
    width: 100%;
    font-size: 12px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.history-inline-field textarea {
    min-height: 88px;
    resize: vertical;
    font-family: inherit;
}

.history-inline-field.actual-highlight input {
    border: 2px solid #f59e0b;
    background: #fff8e6;
    font-weight: 700;
}

.history-inline-help {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.history-inline-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.history-list {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.history-list .wh-table td,
.history-list .wh-table th {
    font-size: 12px;
    vertical-align: middle;
}

.history-list-row-title {
    font-weight: 700;
    color: var(--text);
}

.so-shell {
    display: grid;
    gap: 16px;
}

.sales-order-page-content {
    max-width: 1480px;
    margin: 0 auto;
}

.so-order-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 16px;
    align-items: start;
}

.so-order-main,
.so-order-sidebar {
    min-width: 0;
}

.so-order-main {
    display: grid;
    gap: 14px;
}

.so-order-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.so-order-backline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 13px;
}

.so-order-backline a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 700;
}

.so-order-backline a:hover {
    color: var(--green);
}

.so-order-type-card select,
.so-order-type-card input {
    min-height: 34px;
}

.so-order-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 0 4px;
    background: linear-gradient(180deg, rgba(244, 247, 242, 0), var(--bg) 28%);
}

.so-order-sidebar {
    position: sticky;
    top: 12px;
    display: grid;
    gap: 12px;
}

.so-order-sidebar-section {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
}

.so-order-sidebar-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.so-order-client-name {
    font-weight: 900;
    color: var(--text);
    overflow-wrap: anywhere;
}

.so-order-client-handle,
.so-order-client-card .so-client-telegram-line {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 13px;
}

.so-order-open-tg {
    margin-top: 10px;
}

.so-order-messages-preview {
    display: grid;
    gap: 6px;
}

.so-order-messages-preview .today-card__msg {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid #f0f2f5;
}

.so-order-messages-preview .today-card__msg:last-child {
    border-bottom: 0;
}

.so-order-messages-preview .today-card__msg span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.so-order-messages-preview .today-card__msg small {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 11px;
}

.so-order-sidebar-files {
    display: grid;
    gap: 6px;
}

.so-order-file-row {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid #f0f2f5;
}

.so-order-file-row:hover .so-order-file-name {
    color: var(--green);
}

.so-order-file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.so-order-file-source {
    color: var(--text-muted);
    font-size: 11px;
}

.so-order-file-upload {
    margin-top: 10px;
}

.so-order-file-upload input[type="file"] {
    display: none;
}

.so-order-sidebar-details summary {
    cursor: pointer;
    font-weight: 800;
    list-style: none;
}

.so-order-sidebar-details summary::-webkit-details-marker {
    display: none;
}

.so-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.so-head-main {
    min-width: 0;
}

.so-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.so-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}

.so-subtitle {
    margin-top: 4px;
    color: var(--text-muted);
}

.so-client-telegram-line a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: none;
}

.so-client-telegram-line a:hover {
    text-decoration: underline;
}

.so-client-telegram-line-compact {
    margin-top: 4px;
}

.so-status-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 10px;
    background: var(--green-bg);
    color: var(--green);
    font-size: 12px;
    font-weight: 700;
}

.so-status-badge--draft {
    background: #fff7d6;
    color: #9a6700;
}

.so-status-badge--saved {
    background: #e8f6e8;
    color: var(--green);
}

.so-status-badge--production {
    background: #e6f0ff;
    color: #175cd3;
}

.so-status-badge--done {
    background: #eef8f1;
    color: #067647;
}

.so-status-badge--cancelled {
    background: #f2f4f7;
    color: #667085;
}

.so-head-actions,
.so-inline-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.so-stage-move {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.so-stage-move select {
    min-width: 220px;
}

.so-summary-line {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.so-summary-line-item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #eaecf0;
    color: #344054;
}

.so-summary-line-item strong {
    font-size: 14px;
    color: #101828;
}

.so-summary-line-item small {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.so-summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.so-summary-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    gap: 4px;
}

.so-summary-chip span {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.2px;
}

.so-summary-chip strong {
    font-size: 16px;
    color: var(--text);
}

.so-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.so-tab-btn {
    appearance: none;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.so-tab-btn.active {
    background: var(--green-bg);
    border-color: rgba(45, 90, 19, 0.2);
    color: var(--green);
}

.so-tab-panel {
    display: none;
}

.so-tab-panel.active {
    display: block;
}

.so-section-grid {
    display: grid;
    gap: 16px;
}

.so-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.so-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.so-grid-1 {
    grid-template-columns: 1fr;
}

.so-section-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(28, 32, 29, 0.05)  /* calc-family mood shadow */;
}

.so-crm-card {
    background: var(--green-bg);
    border: 1px solid var(--green);
}

.so-crm-card .so-section-title {
    color: var(--green);
}

/* Must stay after .so-section-card/.so-crm-card: [open] background/box-shadow
   win the equal-specificity tie by cascade order (shared element classes). */
.so-order-details {
    padding: 0;
    overflow: hidden;
    border-style: dashed;
    background: var(--bg);
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.so-order-details[open] {
    border-style: solid;
    background: var(--bg-card);
    box-shadow: 0 2px 12px rgba(28, 32, 29, 0.05)  /* calc-family mood shadow */;
}

.so-order-details > summary {
    cursor: pointer;
    padding: 14px 16px;
    font-weight: 800;
    color: var(--text);
    list-style: none;
}

.so-order-details > summary::-webkit-details-marker {
    display: none;
}

.so-service-details summary {
    color: var(--text-muted);
}

.so-order-details > summary::before {
    content: "▸";
    display: inline-block;
    width: 18px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.so-order-details[open] > summary::before {
    transform: rotate(90deg);
}

.so-order-details > div {
    padding: 0 16px 16px;
}

.so-crm-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.so-crm-history-details {
    margin-top: 12px;
    border-top: 1px dashed var(--green);
    padding-top: 10px;
}

.so-crm-history-details[open] {
    border-top-style: solid;
}

.so-crm-history-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--green);
    list-style: none;
}

.so-crm-history-details summary::before {
    content: "▸";
    display: inline-block;
    width: 14px;
    transition: transform 0.2s ease;
}

.so-crm-history-details[open] summary::before {
    transform: rotate(90deg);
}

.so-crm-history-details summary::-webkit-details-marker {
    display: none;
}

.so-overview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 12px;
}

.so-client-readonly {
    margin-top: 12px;
    border: 1px solid #eaecf0;
    background: #fcfcfd;
    border-radius: 12px;
    padding: 12px;
}

.so-client-readonly-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    color: #344054;
    font-size: 13px;
    margin-bottom: 8px;
}

.so-client-readonly-head a {
    font-weight: 600;
    font-size: 12px;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
}

.so-client-readonly-head a:hover {
    text-decoration: underline;
}

.so-client-readonly-row {
    display: flex;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
    border-top: 1px solid #f0f1f3;
}

.so-client-readonly-row:first-of-type {
    border-top: none;
}

.so-client-readonly-label {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 110px;
    flex-shrink: 0;
}

.so-client-readonly-value {
    color: #101828;
    font-weight: 800;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.so-client-readonly-value a {
    color: var(--blue);
    text-decoration: none;
}

.so-client-readonly-value a:hover {
    text-decoration: underline;
}

.so-overview-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.so-overview-metric {
    border: 1px solid #eaecf0;
    background: #fcfcfd;
    border-radius: 12px;
    padding: 12px;
    min-width: 0;
}

.so-overview-metric-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.so-overview-metric-value {
    font-size: 15px;
    font-weight: 800;
    color: #101828;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.so-telegram-shell {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.so-telegram-sidebar,
.so-telegram-chat-card {
    min-height: 0;
}

.so-telegram-sidebar {
    display: grid;
    gap: 14px;
}

.so-telegram-sidebar-section {
    display: grid;
    gap: 10px;
}

.so-telegram-side-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.so-telegram-order-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #101828;
    font-weight: 700;
}

.so-telegram-linker {
    display: grid;
    gap: 8px;
}

.so-telegram-linker-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.so-telegram-thread-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid #d0d5dd;
    border-radius: 14px;
    background: #fff;
}

.so-telegram-thread-card.active {
    border-color: rgba(45, 80, 22, 0.35);
    background: #f4fbf2;
}

.so-telegram-thread-main {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.so-telegram-chat-card {
    display: grid;
    gap: 12px;
}

.so-telegram-chat-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.so-telegram-chat-header-main {
    min-width: 0;
}

.so-telegram-chat-title {
    font-size: 20px;
    font-weight: 800;
    color: #101828;
    line-height: 1.2;
}

.so-telegram-chat-subtitle,
.so-telegram-chat-status {
    color: var(--text-muted);
}

.so-telegram-thread-picker {
    min-width: min(320px, 100%);
}

.so-telegram-messages-host {
    max-height: min(56vh, 760px);
    overflow: auto;
    padding-right: 4px;
}

.so-telegram-compose {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #eaecf0;
    border-radius: 18px;
    background: #fcfcfd;
}

.so-telegram-smart-reply:empty {
    display: none;
}

.so-telegram-smart-card {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #eef8ef;
    border: 1px solid #d5ead7;
}

.so-telegram-smart-text {
    white-space: pre-wrap;
    color: #101828;
}

.so-telegram-send-text {
    width: 100%;
    min-height: 104px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 16px;
    font: inherit;
    background: #fff;
}

.so-telegram-send-text:focus,
.so-telegram-thread-picker:focus,
.so-telegram-linker input:focus,
.so-telegram-linker select:focus {
    outline: none;
    border-color: rgba(45, 80, 22, 0.45);
    box-shadow: 0 0 0 3px rgba(45, 80, 22, 0.08);
}

.so-telegram-compose-footer,
.so-telegram-compose-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.so-telegram-compose-tools {
    justify-content: flex-start;
}

.so-telegram-file-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #101828;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.so-telegram-file-name {
    max-width: 260px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.so-telegram-invoice-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #344054;
}

@media (max-width: 1100px) {
    .so-telegram-shell {
        grid-template-columns: 1fr;
    }

    .so-telegram-thread-picker {
        min-width: 0;
        width: 100%;
    }
}

.so-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
}

.so-quick-modal {
    max-width: 760px;
    width: min(94vw, 760px);
}

.so-files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.so-file-item {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.so-file-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.so-file-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--green-bg);
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
}

.so-file-source {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

.so-file-thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
}

.so-file-link {
    color: var(--blue);
    text-decoration: none;
    font-weight: 700;
    word-break: break-word;
}

.so-file-delete {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--red);
    border-radius: 999px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.so-crm-history-list {
    display: grid;
    gap: 10px;
}

.so-crm-history-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    background: #fff;
    display: grid;
    gap: 6px;
}

.so-crm-history-head {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 980px) {
    .so-order-page {
        grid-template-columns: 1fr;
    }

    .so-order-sidebar,
    .so-order-footer {
        position: static;
    }

    .so-order-head {
        display: grid;
    }

    .so-overview-metrics,
    .so-grid-2,
    .so-grid-3 {
        grid-template-columns: 1fr;
    }

    .so-stage-move select {
        min-width: 0;
        width: 100%;
    }
}


/* =============================================
   22. Stats Page
   ============================================= */

.capacity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.cap-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.cap-card h3 {
    font-size: 14px;
    color: var(--green);
    margin-bottom: 12px;
}

.cap-card .cap-detail {
    font-size: 13px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
}

.progress-bar {
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}


/* =============================================
   23. Instruction Page
   ============================================= */

.flow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--green-bg);
    padding: 16px 20px;
    border-radius: var(--radius);
    margin-bottom: 28px;
    font-size: 14px;
    font-weight: 500;
}

.flow-step {
    background: var(--green);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
}

.flow-arrow {
    color: var(--green);
    font-size: 18px;
}

.stage {
    margin-bottom: 32px;
}

.stage-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--green-bg);
}

.stage-num {
    background: var(--green);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

.stage-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--green);
}

.swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid #ddd;
}

.swatch-stroke {
    background: transparent;
    border: 3px solid;
}

.alert {
    padding: 14px 18px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}

.alert-warn {
    background: #fff3e0;
    border-left: 4px solid var(--accent);
    color: #e65100;
}

.alert-info {
    background: #e3f2fd;
    border-left: 4px solid var(--blue);
    color: #0d47a1;
}

.alert-danger {
    background: #fce4ec;
    border-left: 4px solid var(--red);
    color: #b71c1c;
}

.alert strong {
    font-weight: 700;
}

.checklist {
    list-style: none;
    padding-left: 0;
}

.checklist li {
    padding: 10px 14px;
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.checklist li::before {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    flex-shrink: 0;
}

.markup-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.markup-tier {
    padding: 14px;
    border-radius: var(--radius);
    text-align: center;
}

.markup-tier-base {
    background: var(--green-bg);
    border: 2px solid var(--green);
}

.markup-tier-high {
    background: #fff3e0;
    border: 2px solid var(--accent);
}

.markup-tier-max {
    background: #fce4ec;
    border: 2px solid var(--red);
}

.markup-tier-ban {
    background: var(--bg);
    border: 2px dashed #999;
}

.markup-val {
    font-size: 22px;
    font-weight: 700;
}

.markup-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}


/* =============================================
   24. Warehouse Page (placeholder)
   ============================================= */

.placeholder-page {
    text-align: center;
    padding: 80px 20px;
}

.placeholder-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.placeholder-text {
    font-size: 16px;
    color: var(--text-muted);
}


/* =============================================
   25. Toast Notification
   ============================================= */

.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-dark);
    color: white;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 13px;
    box-shadow: var(--shadow-lg);
    z-index: 2000;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.update-banner {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2100;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff8e1;
    border: 1px solid #ffd54f;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

.update-banner.show {
    display: flex;
}

.update-banner-text {
    font-size: 12px;
    color: #6d4c00;
    font-weight: 600;
}


/* =============================================
   26. Parts Tabs (multi-part products)
   ============================================= */

.part-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    user-select: none;
    white-space: nowrap;
}

.part-tab-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-right: 4px;
}

.part-tab:hover {
    border-color: var(--green-light);
}

.part-tab.active {
    border-color: var(--green);
    background: var(--green-bg);
    color: var(--green);
    font-weight: 600;
}

.part-tab .part-tab-close {
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    margin-left: 2px;
    padding: 0 2px;
    line-height: 1;
    border-radius: 3px;
}

.part-tab .part-tab-close:hover {
    color: var(--red);
    background: #fee;
}

.part-tab-add {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: transparent;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}

.part-tab-add:hover {
    border-color: var(--green-light);
    color: var(--green);
    background: var(--green-bg);
}

.blank-part-group {
    border: 2px solid #dcebdc !important;
    background: #fbfefb;
    padding: 14px;
}

.blank-part-group-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--green-dark);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.blank-part-group-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.blank-part-group-body {
    display: grid;
    gap: 10px;
}

.blank-part-group-body > .card {
    margin: 0;
    border: 1px solid #e6efe6;
    background: #fff;
}

/* Order mode: per-part visual group */
.order-part-group {
    border: 2px solid #d6e4f0 !important;
    background: #f8fbff;
    padding: 14px;
}

.order-part-group-title {
    font-size: 14px;
    font-weight: 800;
    color: #1565c0;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.order-part-group-hint {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.order-part-group-body {
    display: grid;
    gap: 10px;
}

.order-part-group-body > .card {
    margin: 0;
    border: 1px solid #dce8f0;
    background: #fff;
}

/* Multi-part results: per-part accordion */
.mp-results-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.mp-result-tab {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.mp-result-tab:hover {
    border-color: var(--green-light);
}

.mp-result-tab.active {
    border-color: var(--green);
    background: var(--green-bg);
    font-weight: 600;
}


/* =============================================
   27. Typography & General
   ============================================= */

h3 {
    font-size: 15px;
    color: var(--text);
    margin-bottom: 10px;
    margin-top: 20px;
}

code {
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
    font-size: 12px;
    color: var(--text);
    letter-spacing: 0.5px;
}

p {
    margin-bottom: 12px;
    line-height: 1.6;
}

ul, ol {
    margin-bottom: 12px;
    padding-left: 24px;
}

li {
    margin-bottom: 6px;
    line-height: 1.5;
}

a {
    color: var(--green-light);
}


/* =============================================
   27. Missing Utility Classes
   ============================================= */

.result-section {
    display: none;
}

.result-section.visible {
    display: block;
}

.btn-accent {
    background: var(--accent);
    color: white;
}

.btn-accent:hover {
    background: #e05d00;
}

.svg-preview {
    margin-top: 12px;
    padding: 12px;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: none;
}

.svg-preview.visible {
    display: block;
}

.svg-analysis {
    margin-top: 12px;
    display: none;
}

.svg-analysis.visible {
    display: block;
}

.ops-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 12px;
}

.ops-table th {
    background: var(--green-bg);
    color: var(--green);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 8px;
    text-align: left;
}

.ops-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
}

.ops-table td:nth-child(n+2) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ops-table .total-row {
    font-weight: 700;
    background: var(--green-bg);
}

.discount-row {
    color: #c62828;
    font-style: italic;
}

.section-header {
    background: var(--bg);
    font-weight: 600;
    color: var(--green);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mp-card {
    border-radius: var(--radius);
    padding: 10px 8px;
    text-align: center;
}

.mp-card .label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
}

.mp-card .price {
    font-size: 18px;
    font-weight: 700;
    margin: 4px 0;
}

.mp-card .detail {
    font-size: 10px;
    opacity: 0.7;
}

.mp-card.mp-x4 {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.mp-card.mp-rev {
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.mp-card.mp-small {
    padding: 6px;
    font-size: 0.85em;
}

.mp-card.mp-small .price {
    font-size: 14px;
    margin: 2px 0;
}

.marketplace-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.cap-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cap-row .cap-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.cap-row .cap-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cap-row .cap-bar {
    flex: 1;
    height: 22px;
    background: #eee;
    border-radius: 11px;
    overflow: hidden;
}

.cap-row .cap-fill {
    height: 100%;
    border-radius: 11px;
    transition: width 0.4s ease;
    min-width: 4px;
}

.cap-row .cap-fill.low {
    background: #4caf50;
}

.cap-row .cap-fill.mid {
    background: #f59e0b;
}

.cap-row .cap-fill.high {
    background: #c62828;
}

.cap-row .cap-text {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--text-secondary);
}


/* =============================================
   28. Warehouse
   ============================================= */

.wh-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

/* Type plates — primary visual split between ПС and ПНД */
.wh-type-plates {
    display: grid;
    grid-template-columns: 1fr 1fr 0.7fr;
    gap: 10px;
    margin-bottom: 12px;
}
@media (max-width: 720px) {
    .wh-type-plates { grid-template-columns: 1fr 1fr; }
    .wh-type-plates .wh-type-plate.is-all { grid-column: 1 / -1; }
}
.wh-type-plate {
    background: var(--card-bg);
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: inherit;
}
.wh-type-plate:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}
.wh-type-plate.is-active {
    border-color: var(--green);
    background: linear-gradient(180deg, #eaf6ec 0%, #ffffff 100%);
    box-shadow: 0 4px 14px rgba(31, 107, 47, 0.15);
}
.wh-type-plate-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.2px;
}
.wh-type-plate.is-active .wh-type-plate-title {
    color: var(--green);
}
.wh-type-plate-sub {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.wh-type-plate.is-all .wh-type-plate-title {
    font-size: 16px;
}

/* Visibility eye toggle in warehouse rows */
.wh-vis-btn {
    border: 1px solid #e5e7eb;
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    color: #475569;
}
.wh-vis-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.wh-vis-btn.is-hidden {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #b45309;
}
.wh-vis-btn.is-hidden::after {
    content: " скрыт";
    font-size: 11px;
    font-weight: 600;
    margin-left: 2px;
}

/* "Show hidden" toggle in toolbar */
.wh-show-hidden {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
    user-select: none;
    transition: background 0.15s;
}
.wh-show-hidden:hover { background: #f8fafc; }
.wh-show-hidden input { margin: 0; }
.wh-hidden-count {
    color: var(--text-muted);
    font-size: 12px;
}

/* Hidden row (shown only when "Show hidden" is on) */
.wh-row-hidden { background: #f8fafc; opacity: 0.65; }
.wh-row-hidden:hover { opacity: 0.85; }
.wh-hidden-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    background: #fef3c7;
    color: #b45309;
    border: 1px solid #fcd34d;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ──────────────────────────────────────────────────────────────────
   Mobile: warehouse table → cards
   On narrow screens the 9-column table is unreadable. Convert each
   <tr> into a card, each <td> into a labelled row. Headers hidden.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .wh-table thead { display: none; }
    .wh-table, .wh-table tbody { display: block; width: 100%; }
    .wh-table tbody tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card-bg);
        margin-bottom: 10px;
        padding: 12px;
        box-shadow: 0 1px 3px rgba(15,23,42,0.04);
    }
    .wh-table tbody tr:hover { background: var(--card-bg); }
    .wh-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        border: none;
        text-align: right;
    }
    .wh-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 700;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        flex-shrink: 0;
        text-align: left;
    }
    /* Photo cell on top, full width, no label */
    .wh-table td.wh-photo-cell {
        justify-content: center;
        padding: 0 0 10px;
        margin-bottom: 6px;
        border-bottom: 1px dashed var(--border);
    }
    .wh-table td.wh-photo-cell::before { display: none; }
    .wh-table td.wh-photo-cell img,
    .wh-table td.wh-photo-cell .wh-no-photo {
        width: 96px;
        height: 96px;
        border-radius: 8px;
    }
    /* Reserve cell: stack the order list under the kg total */
    .wh-table .wh-reserve-orders {
        margin-top: 4px;
        text-align: right;
    }
    /* Action buttons get a bit of breathing room on touch */
    .wh-vis-btn { padding: 8px 12px; font-size: 16px; }
    .wh-table td[data-label="Действия"] {
        justify-content: flex-end;
        gap: 8px;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px dashed var(--border);
    }
    /* Filter toolbar: stack vertically */
    .wh-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .wh-toolbar select,
    .wh-toolbar input[type="text"],
    .wh-show-hidden { width: 100%; }
    .wh-show-hidden { justify-content: flex-start; }
    /* Type plates: stack 2 per row, "Все" full-width below */
    .wh-type-plates { gap: 8px; }
    .wh-type-plate { padding: 12px 14px; }
    .wh-type-plate-title { font-size: 16px; }
}

.wh-tabs-card {
    padding: 10px 12px;
    margin-bottom: 12px;
}

.wh-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.wh-tab-btn {
    min-width: 170px;
}

.wh-tab-btn.is-active {
    border-color: var(--green);
    color: var(--green);
    background: #eef8ef;
    font-weight: 700;
}

.wh-stat-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.wh-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--green);
}

.wh-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.wh-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: center;
}

.wh-toolbar select,
.wh-toolbar input[type="text"] {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--card-bg);
}

.wh-toolbar input[type="text"] {
    flex: 1;
}

.wh-table {
    width: 100%;
    border-collapse: collapse;
}

.wh-table thead th {
    background: #f8f9fa;
    padding: 10px 12px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid var(--border);
}

.wh-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}

.wh-table tbody tr:hover {
    background: #f8f9fa;
}

.wh-table td {
    padding: 8px 12px;
    font-size: 13px;
    vertical-align: middle;
    overflow: visible;
}

.wh-consume-cost {
    color: #c62828;
    font-weight: 800;
    white-space: nowrap;
}

.wh-consume-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: #fff3e0;
    border: 1px solid #ffcc80;
    color: #9a4f00;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

.wh-photo-cell {
    width: 60px;
    padding: 6px 8px !important;
}

.wh-photo-cell img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.wh-no-photo {
    width: 52px;
    height: 52px;
    background: #f0f0f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0.4;
}

.wh-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
}

.wh-badge-ps {
    background: #dbeafe;
    color: #1d4ed8;
}

.wh-badge-pnd {
    background: #fef3c7;
    color: #92400e;
}

.wh-badge-granula {
    background: #d1fae5;
    color: #065f46;
}

.wh-badge-droblenka {
    background: #fce7f3;
    color: #9d174d;
}

.wh-stock-ok {
    color: #2e7d32;
    font-weight: 600;
}

.wh-stock-low {
    color: #f57f17;
    font-weight: 600;
}

.wh-stock-out {
    color: #c62828;
    font-weight: 600;
}

.wh-photo-preview {
    width: 140px;
    height: 140px;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.wh-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wh-no-photo-lg {
    text-align: center;
    color: var(--text-muted);
    font-size: 24px;
    line-height: 1.6;
}

.toast-error {
    background: #c62828 !important;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

#production-plan-body input[type="date"],
#production-plan-body input[type="number"],
#production-plan-body input[type="text"] {
    min-width: 90px;
    font-size: 12px;
    padding: 6px 8px;
}

/* =============================================
   29. Color Mix (warehouse integration)
   ============================================= */

.sheet-color-mode {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
}

.sheet-color-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.sheet-poral-fields {
    margin-top: 12px;
    padding: 12px;
    border: 1px dashed var(--green);
    border-radius: 8px;
    background: #f6fbf8;
}

.color-mix-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.cm-thumb {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #f0f0f0;
}
.cm-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cm-thumb-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: #e8e8e8;
}
.color-mix-row .cm-item {
    flex: 1 1 150px;
    min-width: 150px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
}

.cm-pct-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 70px;
}

.cm-pct-wrap input {
    width: 50px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    text-align: center;
}

.cm-pct-wrap span {
    font-size: 12px;
    color: var(--text-muted);
}

.cm-need {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.cm-stock {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.cm-stock.cm-ok {
    color: #2e7d32;
}

.cm-stock.cm-deficit {
    color: #c62828;
}

.cm-summary-header {
    font-size: 13px;
    padding: 8px 0;
    border-top: 1px solid var(--border);
}

.cm-warn {
    color: #f57f17;
    font-size: 12px;
    margin-left: 8px;
}

.cm-deficit-alert {
    color: #c62828;
    font-weight: 600;
    font-size: 13px;
    margin-top: 8px;
}

.cm-deficit-list {
    margin: 4px 0 0 16px;
    font-size: 13px;
    color: #c62828;
}

.cm-deficit-list li {
    margin-bottom: 2px;
}

.cm-ok-alert {
    color: #2e7d32;
    font-weight: 600;
    font-size: 13px;
    margin-top: 8px;
}

/* =============================================
   30. Responsive
   ============================================= */

@media (max-width: 900px) {
    .sidebar {
        display: none;
    }

    .main-content {
        margin-left: 0;
        max-width: 100%;
    }

    .kanban-board {
        gap: 10px;
    }

    .kanban-column {
        flex: 0 0 260px;
        min-width: 240px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .update-banner {
        left: 12px;
        right: 12px;
        top: 12px;
        justify-content: space-between;
    }
}

/* =============================================
   31. Sheet Cost Page
   ============================================= */

/* Two-column layout: indirect costs | amortization */
.sc-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.sc-base-inline {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 10px;
    align-items: end;
}

.sc-collapse-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-weight: 700;
    color: var(--green);
    margin-bottom: 8px;
}

.sc-collapse-summary::-webkit-details-marker {
    display: none;
}

.pp-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    margin-bottom: 10px;
}

.pp-table-wrap {
    overflow-x: auto;
}
.pp-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
    min-width: 1100px;
}

.pp-table th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.2px;
    color: var(--text-muted);
    background: #f7f8fa;
    border-bottom: 2px solid var(--border);
    padding: 8px 6px;
    text-align: left;
    vertical-align: top;
}

.pp-table th:nth-child(1) { width: 14%; }
.pp-table th:nth-child(2) { width: 27%; }
.pp-table th:nth-child(3) { width: 7%; }
.pp-table th:nth-child(4) { width: 6%; }
.pp-table th:nth-child(5) { width: 11%; }
.pp-table th:nth-child(6) { width: 10%; }
.pp-table th:nth-child(7) { width: 10%; }
.pp-table th:nth-child(8) { width: 6%; }
.pp-table th:nth-child(9) { width: 9%; }

.pp-table td {
    border-bottom: 1px solid var(--border);
    padding: 6px;
    vertical-align: top;
    word-break: break-word;
}

.pp-table input,
.pp-table select,
.pp-table textarea {
    width: 100%;
    font-size: 12px;
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #fff;
}

.pp-table textarea {
    resize: vertical;
    min-height: 240px;
}

.pp-order-main {
    font-weight: 700;
    margin-bottom: 6px;
}

.pp-summary-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pp-summary-client {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-muted);
    font-weight: 600;
}

.pp-collapsible-summary-row td {
    padding: 10px 12px;
    background: #fbfcfe;
}

.pp-collapsible-details-row td {
    padding: 12px;
    background: #fff;
}

.pp-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.pp-summary-main {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pp-summary-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
}

.pp-summary-arrow {
    font-size: 18px;
    color: var(--green-dark);
    line-height: 1;
}

.pp-summary-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.pp-summary-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 128px;
    padding: 8px 14px;
    border-radius: 18px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.16);
}

.pp-summary-timer-value {
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    color: var(--red);
}

.pp-summary-timer-label {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b91c1c;
    text-align: center;
}

.pp-summary-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f3f6f8;
    color: #475569;
    font-size: 12px;
    font-weight: 700;
}

.pp-summary-chip-strong {
    background: #e8f4ea;
    color: #1f5f2c;
}

.pp-collapsible-grid {
    display: grid;
    grid-template-columns: minmax(240px, 0.9fr) minmax(220px, 1fr) minmax(280px, 1.15fr) minmax(180px, 0.8fr);
    gap: 12px;
}

.pp-collapsible-grid-sample {
    grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.4fr) minmax(160px, 0.6fr);
}

.pp-collapsible-block {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
}

.pp-collapsible-block-title {
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-order-dates {
    display: grid;
    gap: 4px;
    font-size: 11px;
}

.pp-order-days-live {
    font-weight: 800;
    color: var(--red);
}

.pp-date-label {
    color: var(--text-muted);
    font-weight: 600;
}

.pp-deadline {
    color: var(--red);
    font-weight: 700;
}

.pp-tz-readonly {
    min-height: 60px;
    max-height: none;
    overflow: visible;
    white-space: normal;
    line-height: 1.45;
    font-size: 12px;
}

.pp-inline-grid {
    display: grid;
    gap: 6px;
}

.pp-inline-grid label,
.pp-stack label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.pp-stack {
    display: grid;
    gap: 6px;
}

.pp-readonly-stack {
    line-height: 1.4;
    font-size: 12px;
}

.pp-stack strong {
    color: var(--text-secondary);
}

.pp-sheets-highlight {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    background: #fff3cd;
    color: #8a5300;
    font-weight: 700;
}

.pp-photo-line {
    font-size: 11px;
    color: var(--text-secondary);
}

.pp-thumb {
    width: 100%;
    max-width: 140px;
    height: auto;
    aspect-ratio: 4/3;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
}

.pp-ship-readonly {
    font-size: 12px;
    font-weight: 600;
}

.pp-required {
    color: var(--red);
}

/* Факт field when EMPTY — bright red alert to fill it */
.pp-fact-missing {
    border: 2px solid #ef4444 !important;
    background: #fee2e2 !important;
    color: #b91c1c !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}
/* Факт field when FILLED — red value to highlight actual consumption */
.pp-fact-filled {
    color: #dc2626 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border-color: #fca5a5 !important;
    background: #fff5f5 !important;
}

/* Per-color plastic in production plan */
.pp-mc-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pp-mc-row {
    padding: 4px 6px;
    border-radius: 4px;
    background: var(--bg);
    border-left: 3px solid var(--green-light);
}
.pp-mc-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pp-mc-vals {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
}
.pp-mc-plan {
    color: var(--text-muted);
    white-space: nowrap;
    font-size: 10px;
    min-width: 0;
}
#production-plan-body input.pp-mc-fact,
.pp-table input.pp-mc-fact,
input.pp-mc-fact {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 0 !important;
    height: 24px !important;
    padding: 2px 3px !important;
    border: 1.5px solid #ef4444;
    border-radius: 3px;
    background: #fff5f5;
    color: #dc2626;
    font-weight: 700;
    font-size: 11px !important;
    font-family: var(--font);
    box-sizing: border-box;
}
.pp-mc-fact:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3);
}
.pp-mc-fact::placeholder {
    color: #fca5a5;
    font-weight: 400;
}
.pp-mc-scrap {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}
.pp-mc-total {
    font-size: 10px;
    color: var(--text-muted);
    padding: 3px 6px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
}
.pp-mc-total-fact {
    font-weight: 600;
    color: var(--text);
}
.pp-mc-wrap-readonly .pp-mc-row {
    align-items: flex-start;
}

.pp-row {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}

.pp-row:last-child {
    margin-bottom: 0;
}

.wh-consume-add-row {
    margin-top: 14px;
    display: flex;
    justify-content: flex-start;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.wh-consume-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.wh-consume-period-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.wh-consume-period-controls label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.wh-consume-period-controls input[type="date"] {
    width: 150px;
    padding: 7px 9px;
    font-size: 13px;
}

.wh-consume-period-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 10px;
}

.wh-consume-total-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    background: #fafafa;
}

.wh-consume-total-card span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: 4px;
}

.wh-consume-total-card b {
    color: var(--green);
    font-size: 20px;
    line-height: 1.2;
}

.wh-transform-history-details {
    margin-top: 14px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

.wh-transform-history-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    color: var(--green-dark);
    font-weight: 800;
    list-style: none;
}

.wh-transform-history-details > summary::-webkit-details-marker {
    display: none;
}

.wh-transform-history-details > summary::before {
    content: "▸";
    color: var(--green);
    margin-right: 4px;
}

.wh-transform-history-details[open] > summary::before {
    content: "▾";
}

.wh-transform-history-details > summary span {
    flex: 1;
}

.wh-transform-history-details > summary small {
    color: var(--text-muted);
    font-weight: 600;
    text-align: right;
}

.wh-transform-history-details .wh-table {
    margin-top: 10px;
}

.wh-consume-analytics-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}

.wh-consume-analytics-tabs .btn.is-active {
    background: var(--green);
    color: #fff;
    border-color: var(--green);
}

.wh-consume-period-breakdown {
    margin-top: 12px;
}

.wh-consume-breakdown-list,
.wh-consume-project-list {
    display: grid;
    gap: 8px;
}

.wh-consume-breakdown-row,
.wh-consume-project-details {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.wh-consume-breakdown-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
}

.wh-consume-breakdown-main b,
.wh-consume-project-title {
    display: block;
    color: var(--text);
    font-weight: 800;
}

.wh-consume-breakdown-main span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 2px;
}

.wh-consume-breakdown-metrics {
    text-align: right;
    white-space: nowrap;
}

.wh-consume-breakdown-metrics strong {
    display: block;
    color: var(--green);
}

.wh-consume-breakdown-metrics span,
.wh-consume-project-plastic small {
    color: var(--text-muted);
    font-size: 12px;
}

.wh-consume-project-details > summary {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    padding: 10px 12px;
}

.wh-consume-project-details > summary::-webkit-details-marker {
    display: none;
}

.wh-consume-project-details > summary::before {
    content: "▸";
    color: var(--green);
    font-weight: 800;
    flex: 0 0 auto;
}

.wh-consume-project-details[open] > summary::before {
    content: "▾";
}

.wh-consume-project-title {
    flex: 1 1 auto;
    min-width: 0;
}

.wh-consume-project-total {
    color: var(--green);
    font-weight: 800;
    white-space: nowrap;
}

.wh-consume-project-plastics {
    display: grid;
    gap: 6px;
    padding: 0 12px 12px 30px;
}

.wh-consume-project-plastic {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    background: #fafafa;
}

.wh-consume-project-plastic span {
    color: var(--text-secondary);
}

.wh-consume-project-plastic b {
    color: var(--text);
    white-space: nowrap;
}

.pp-row input,
.pp-row textarea {
    font-size: 12px;
    padding: 6px 8px;
}

.pp-row-top {
    grid-template-columns: 80px 1fr 140px;
    align-items: center;
}

.pp-order {
    font-weight: 700;
}

.pp-title {
    font-weight: 700;
}

.pp-status {
    justify-self: end;
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
}

.pp-row-meta {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
}

.pp-row-body {
    grid-template-columns: 2fr 1.2fr 1fr;
}

.pp-row-mat {
    grid-template-columns: 120px 120px 1fr auto;
    align-items: end;
}

.pp-actions {
    display: flex;
    gap: 4px;
    align-items: stretch;
    flex-direction: column;
}
.pp-actions .btn {
    white-space: nowrap;
    font-size: 11px;
    padding: 5px 8px;
}

.pp-row label {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.pp-section-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-secondary);
    margin: 6px 0 8px;
}

.pp-top-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.pp-top-summary-card {
    padding: 14px 16px;
    border: 1px solid #e4e9ef;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.pp-top-summary-title {
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pp-top-summary-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}

.pp-top-summary-days {
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    color: var(--red);
}

.pp-top-summary-count {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
    color: #1f2937;
    white-space: nowrap;
}

.pp-top-summary-hint {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: #64748b;
}

.pp-table-sample th:nth-child(1) { width: 18%; }
.pp-table-sample th:nth-child(2) { width: 66%; }
.pp-table-sample th:nth-child(3) { width: 16%; }

/* Заказ → Листы → ТЗ → Упаковка/доставка → Действия */
.pp-table-production th:nth-child(1) { width: 18%; }  /* Заказ */
.pp-table-production th:nth-child(2) { width: 24%; }  /* Листы */
.pp-table-production th:nth-child(3) { width: 38%; }  /* ТЗ */
.pp-table-production th:nth-child(4) { width: 12%; }  /* Упаковка / доставка */
.pp-table-production th:nth-child(5) { width: 8%; }   /* Действия */

.pp-tz-sample {
    min-height: 80px;
    max-height: none;
}

.pp-sample-sheet-card {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #d7dde4;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%);
}

.pp-sample-sheet-card:last-child {
    margin-bottom: 0;
}

.pp-sheet-line-card .pp-sample-sheet-card {
    margin-bottom: 0;
    padding: 10px;
}

.pp-sample-sheet-head {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 999px;
    background: #e8f1ff;
    color: #174ea6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pp-sample-sheet-meta {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.pp-sample-details-wrap {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px dashed #cfd8e3;
}

.pp-sample-details-title {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pp-sample-detail-card {
    display: grid;
    gap: 6px;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.pp-sample-detail-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.pp-sample-detail-line,
.pp-sample-detail-block {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
}

.pp-sample-empty {
    font-size: 12px;
    color: var(--text-muted);
}

.pp-sample-photo-thumb-wrap {
    display: inline-flex;
    margin-top: 6px;
}

.pp-sample-detail-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.pp-sample-photo-thumb-btn {
    padding: 0;
    width: 88px;
    height: 88px;
    border: 1px solid #d7dde4;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
}

.pp-sample-photo-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-production-tz-intro {
    margin-top: 8px;
    margin-bottom: 10px;
    display: grid;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d7dde4;
    border-radius: 12px;
    background: #fff;
    font-size: 12px;
    line-height: 1.45;
}

.pp-production-tz-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pp-production-tz-flag {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.pp-project-thumb-btn {
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.pp-inline-photo-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #3f6f1d;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    cursor: zoom-in;
}

.pp-project-attachment-row {
    margin-top: 6px;
}

.pp-order-attachments {
    margin-top: 10px;
}

.pp-order-attachments-title {
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.pp-order-detail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pp-order-detail-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #f8fafc;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.pp-order-file-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pp-order-file-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    text-decoration: none;
}

.pp-order-file-badge:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.pp-order-file-badge-static {
    cursor: default;
}

.pp-order-file-ext {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pp-order-file-ext-pdf {
    background: #fff1f2;
    color: #dc2626;
}

.pp-order-file-ext-cut {
    background: #eff6ff;
    color: #1d4ed8;
}

.pp-order-file-ext-other {
    background: #f3f4f6;
    color: #475569;
}

.pp-order-file-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pp-order-file-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pp-order-file-source {
    font-size: 11px;
    color: var(--text-muted);
}

.pp-image-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.82);
}

.pp-image-modal-overlay.active {
    display: flex;
}

.pp-image-modal-card {
    position: relative;
    display: grid;
    gap: 12px;
    width: min(92vw, 1100px);
    max-height: 90vh;
    padding: 20px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.pp-image-modal-title {
    padding-right: 36px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.pp-image-modal-img {
    display: block;
    max-width: 100%;
    max-height: calc(90vh - 90px);
    margin: 0 auto;
    border-radius: 12px;
    object-fit: contain;
    background: #f8fafc;
}

.pp-image-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.pp-sheets-count {
    font-size: 22px;
    text-align: center;
}

.pp-sheet-lines {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.3;
}
.pp-sheet-lines-visual {
    display: grid;
    gap: 8px;
}

.pp-sheet-line {
    margin-bottom: 2px;
}
.pp-sheet-line-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 8px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fafafa;
}
.pp-sheet-qty-big {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    border-radius: 12px;
    background: #fff3cd;
    color: #8a5300;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
}
.pp-sheet-line-info {
    min-width: 0;
}
.pp-sheet-main {
    font-weight: 700;
    margin-bottom: 4px;
}
.pp-sheet-sub {
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.25;
}

.pp-sheet-meta {
    margin-top: 4px;
    font-size: 12px;
}
.pp-sheets-total {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.pp-sheets-total-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 999px;
    background: #e6f4ea;
    color: #1b5e20;
    font-weight: 800;
    font-size: 18px;
}

.pp-nowrap {
    white-space: nowrap;
}

.pp-files-cell .pp-stack {
    margin-bottom: 6px;
}

.pp-files-upload .btn {
    width: 100%;
}

.pp-fact-missing-label {
    color: #dc2626 !important;
    font-weight: 700;
    font-size: 12px !important;
}

/* ── Production stages progress bar in Production Plan ── */
.pp-stages-row td {
    padding: 0 12px 14px !important;
    background: #f8fafc;
    border-top: none !important;
}
.pp-stages-row td { border-bottom: 2px solid var(--border) !important; }

.pp-progress-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pp-progress-track {
    display: flex;
    flex: 1;
    gap: 2px;
}

.pp-progress-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: default;
}

.pp-step-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.pp-step-done .pp-step-dot {
    background: #22c55e;
    color: #fff;
}

.pp-step-active .pp-step-dot {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.pp-step-label {
    font-size: 9px;
    color: #94a3b8;
    text-align: center;
    line-height: 1.1;
    max-width: 80px;
    word-wrap: break-word;
}

.pp-step-done .pp-step-label {
    color: #16a34a;
    font-weight: 600;
}

.pp-step-active .pp-step-label {
    color: #2563eb;
    font-weight: 700;
}

.pp-progress-bar-bg {
    display: none;
}

.pp-stage-btn {
    white-space: nowrap;
    padding: 6px 14px;
    border: none;
    border-radius: 6px;
    background: #3b82f6;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.pp-stage-btn:hover {
    background: #2563eb;
}
.pp-stage-btn-done {
    background: #22c55e;
}
.pp-stage-btn-done:hover {
    background: #16a34a;
}

/* Tags for Да/Нет in sheets column */
.pp-tag-yes {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    background: #dcfce7;
    color: #166534;
}
.pp-tag-no {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #ef4444;
    border-radius: 999px;
    background: #fee2e2;
    font-size: 11px;
    font-weight: 800;
    color: #b91c1c;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sc-list-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Header row: title + running total badge */
.sc-items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.sc-items-header h2 {
    margin: 0;
}

.sc-list-total {
    font-size: 14px;
    font-weight: 700;
    color: var(--green);
    background: #f0f9f0;
    padding: 3px 12px;
    border-radius: 12px;
    white-space: nowrap;
}

/* Scrollable list of item rows */
.sc-items-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Single item row (3 columns: label | amount | delete) */
.sc-item-row {
    display: grid;
    grid-template-columns: 1fr 120px auto;
    gap: 6px;
    align-items: center;
}

/* Amortization rows have an extra note field (4 columns) */
.sc-item-row.has-amort {
    grid-template-columns: 1fr 130px 90px 130px auto;
}

.sc-item-label,
.sc-item-amount,
.sc-item-note,
.sc-item-price,
.sc-item-months,
.sc-item-monthly {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

.sc-item-label:focus,
.sc-item-amount:focus,
.sc-item-note:focus {
    outline: none;
    border-color: var(--green);
}

.sc-item-amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sc-item-price,
.sc-item-months,
.sc-item-monthly {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sc-item-monthly {
    background: #f8f8f8;
    color: #555;
}

.sc-item-note {
    color: #777;
    font-size: 12px;
}

.sc-item-delete {
    background: none;
    border: 1px solid transparent;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.sc-item-delete:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}

.sc-add-btn {
    align-self: flex-start;
    font-size: 12px;
    padding: 5px 14px;
    margin-top: 2px;
}

/* Per-thickness parameter table */
.sc-param-label {
    text-align: left;
    padding: 7px 16px;
    font-size: 13px;
    color: #444;
    white-space: nowrap;
}

.sc-param-cell {
    text-align: center;
    padding: 5px 8px;
}

.sc-num-input {
    width: 84px;
    text-align: center;
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: 5px;
    font-size: 13px;
    transition: border-color 0.15s;
}

.sc-num-input:focus {
    outline: none;
    border-color: var(--green);
}

/* Section divider rows in thickness table */
.sc-divider-row td {
    background: #f3f4f6;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    padding: 6px 16px;
    border-top: 1px solid var(--border);
}

/* Tooltip hint */
.sc-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    background: #ddd;
    border-radius: 50%;
    font-size: 10px;
    color: #666;
    cursor: help;
    margin-left: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Results table row types */
.sc-subtotal-row td {
    border-top: 1px solid var(--border);
    font-weight: 600;
    background: #fafafa;
}

.sc-cost-row td {
    background: #f0f7ff;
    font-weight: 700;
    font-size: 14px;
    border-top: 2px solid #cce0ff;
}

.sc-compare-row td {
    background: #fafafa;
    border-top: 1px dashed #ddd;
    font-size: 12px;
    line-height: 1.7;
}

.sc-weight-row td {
    background: #f9f9f9;
    font-size: 12px;
    color: #aaa;
    border-top: 1px solid #f0f0f0;
}

.sc-res-label {
    text-align: left;
    padding: 8px 16px;
    font-size: 13px;
    color: #444;
    white-space: nowrap;
}

.sc-res-cell {
    text-align: right;
    padding: 8px 12px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* =============================================
   32. Calculator: Action Bar & Client Details
   ============================================= */

/* Action bar (top and bottom of calculator) */
.calc-action-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    align-items: center;
}

.calc-mode-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -24px -32px 16px;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
    background: #fff;
}

.calc-mode-btn {
    min-width: 140px;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #f6f7f8;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.calc-mode-btn.active {
    background: var(--green-bg);
    border-color: var(--green);
    color: var(--green);
}

.calc-mode-reset-wrap {
    margin-left: auto;
}

.calc-reset-btn {
    font-weight: 700;
}

/* Order badge in top bar */
.calc-order-badge {
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    background: var(--green-bg);
    border: 1px solid var(--green);
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap;
}

/* Client legal details (collapsible) */
.client-legal-details {
    margin-top: 16px;
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.client-legal-details summary {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}

.client-legal-details summary:hover {
    color: var(--green);
}

.client-legal-details[open] summary {
    color: var(--green);
    margin-bottom: 4px;
}

/* Responsive: stack two-col on small screens */
@media (max-width: 900px) {
    .pp-top-summary {
        grid-template-columns: 1fr;
    }
    .pp-summary-head {
        flex-direction: column;
        align-items: stretch;
    }
    .pp-summary-timer {
        align-self: flex-start;
        min-width: 0;
    }
    .pp-summary-timer-value {
        font-size: 28px;
    }
    .pp-summary-meta {
        justify-content: flex-start;
    }
    .pp-collapsible-grid,
    .pp-collapsible-grid-sample {
        grid-template-columns: 1fr;
    }
    .sc-two-col {
        grid-template-columns: 1fr;
    }
    .sc-base-inline {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }
    .pp-row-top {
        grid-template-columns: 70px 1fr;
    }
    .pp-status {
        justify-self: start;
    }
    .pp-row-meta {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }
    .pp-row-body {
        grid-template-columns: 1fr;
    }
    .pp-row-mat {
        grid-template-columns: 1fr 1fr;
    }
    .pp-note {
        grid-column: 1 / -1;
    }
    .pp-actions {
        grid-column: 1 / -1;
    }
}

/* =============================================
   33. Global Visual Alignment Pass
   ============================================= */

/* Unified rhythm for cards/sections */
.page .card {
    border: 1px solid #eceff3;
}

/* Keep rows visually aligned even with multi-line labels */
.page .form-row {
    align-items: end;
}

.page .form-group > label {
    display: flex;
    align-items: flex-end;
    min-height: 36px;
    line-height: 1.25;
}

/* Same baseline for all standard fields */
.page input:not([type="checkbox"]):not([type="radio"]),
.page select {
    height: 50px;
}

.page textarea {
    min-height: 90px;
}

/* Better spacing for headers with many controls */
.page-header {
    gap: 12px;
}

.page-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Orders filters: stable grid */
#page-orders .card > div[style*="grid-template-columns:1fr 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: minmax(240px, 1.2fr) minmax(180px, 1fr) minmax(180px, 1fr) !important;
    gap: 10px !important;
    align-items: end;
}

/* List cards in Orders: keep action buttons aligned and visible */
#orders-list .pp-card > div:first-child {
    align-items: flex-start !important;
}

#orders-list .pp-card .btn {
    white-space: nowrap;
}

#orders-list .pp-card .btn.btn-danger {
    border-color: #c62828;
}

/* Quick-order lines: compact, readable, no overlaps */
.quick-line {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    padding: 12px;
    align-items: end;
}

.quick-line > .quick-col-1 {
    grid-column: span 2;
}

.quick-line > .quick-col-full {
    grid-column: 1 / -1;
}

.quick-line .form-group > label {
    min-height: 42px;
    margin-bottom: 2px;
}

.quick-sheet-actions-wrap {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #dfe3e8;
}

.quick-sheet-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.quick-sheet-actions .btn {
    white-space: nowrap;
}

.btn-danger-soft {
    border-color: #e7b4b4;
    color: #b3261e;
}

.btn-danger-soft:hover {
    border-color: #d96b6b;
    background: #fff4f4;
}

.quick-paint-box {
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #fff;
    min-height: 50px;
    padding: 6px 8px;
}

.quick-paint-item {
    font-size: 13px;
    line-height: 1.2;
}

.quick-mix-list {
    margin-top: 0;
}

.quick-mix-item {
    grid-template-columns: minmax(0, 1fr) 96px 44px;
    gap: 8px;
}

.quick-mix-item input,
.quick-mix-item select {
    height: 42px;
}

/* Production plan table: denser and aligned */
.pp-table th,
.pp-table td {
    vertical-align: top;
}

.pp-table th {
    line-height: 1.2;
}

.pp-table input,
.pp-table select,
.pp-table textarea {
    min-height: 40px;
}

/* Sheet-cost controls: consistent heights and wrapping */
#page-sheet-cost .sc-base-inline .form-group > label {
    min-height: 34px;
}

#page-sheet-cost .sc-item-row input {
    height: 40px;
}

@media (max-width: 1280px) {
    #page-orders .card > div[style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    .quick-line {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quick-line > .quick-col-1,
    .quick-line > .quick-col-2,
    .quick-line > .quick-col-3,
    .quick-line > .quick-col-4,
    .quick-line > .quick-col-8 {
        grid-column: span 1;
    }

    .quick-line > .quick-col-full {
        grid-column: 1 / -1;
    }

    .quick-sheet-actions .btn {
        flex: 1 1 100%;
    }
}

/* =============================================
   Time Tracking
   ============================================= */

.tt-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    flex-wrap: wrap;
}
.tt-filter-bar label {
    font-size: 13px;
    white-space: nowrap;
    color: var(--text-muted);
}
.tt-filter-bar input[type="date"] {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--bg-card);
    font-family: var(--font);
    width: 160px;
}
.tt-filter-bar select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--bg-card);
    font-family: var(--font);
    width: 200px;
}

.tt-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.tt-stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 12px;
    text-align: center;
}
.tt-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--green);
}
.tt-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.tt-order-tag {
    display: inline-block;
    background: var(--green-bg);
    color: var(--green);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 4px;
}
.tt-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.tt-badge-tg { background: #e3f2fd; color: #1565c0; }
.tt-badge-web { background: #f3e5f5; color: #7b1fa2; }

.tt-employees-textarea {
    width: 100%;
    font-size: 13px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    resize: vertical;
}

/* Employee cards */
.tt-emp-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--bg);
}
.tt-emp-card-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.tt-emp-name {
    flex: 1;
    min-width: 100px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
}
.tt-emp-type {
    width: 120px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--bg-card);
}
.tt-emp-del {
    color: var(--red) !important;
    border-color: var(--red) !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    line-height: 1;
}
.tt-emp-card-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.tt-emp-card-fields label {
    display: flex;
    flex-direction: column;
    font-size: 11px;
    color: var(--text-muted);
    gap: 2px;
}
.tt-emp-card-fields input {
    width: 110px;
    padding: 5px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
}

/* Salary tab */
.tt-salary-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.tt-salary-controls select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--bg-card);
    width: auto;
    flex: 0 0 auto;
}
.tt-salary-period-btns {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
button.tt-period-btn.btn {
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    background: var(--bg) !important;
    background-color: var(--bg) !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    display: inline-block !important;
}
button.tt-period-btn.btn.active {
    background: var(--green) !important;
    background-color: var(--green) !important;
    color: #fff !important;
}
.tt-salary-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
}
.tt-salary-table tbody td {
    padding: 8px;
}
.tt-salary-table tfoot td {
    padding: 10px 8px;
    border-top: 2px solid var(--border);
}
.tt-salary-type {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}
.tt-salary-type-hourly {
    background: #e8f5e9;
    color: #2e7d32;
}
.tt-salary-type-fixed {
    background: #e3f2fd;
    color: #1565c0;
}
.tt-salary-detail td {
    border-top: none !important;
}

.tt-manual-card {
    margin-bottom: 14px;
}
.tt-manual-head h3 {
    margin-bottom: 4px;
}
.tt-manual-top {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr 0.8fr;
    gap: 10px;
    margin-top: 12px;
}
.tt-manual-lines-wrap {
    margin-top: 10px;
    overflow-x: auto;
}
.tt-manual-table select,
.tt-manual-table input {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: var(--font);
    background: var(--bg-card);
}
.tt-manual-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.tt-manual-sum {
    margin-left: auto;
    margin-right: 8px;
    font-size: 13px;
    font-weight: 600;
}
.tt-manual-sum.is-ok {
    color: var(--green);
}
.tt-manual-sum.is-warning {
    color: #b35f00;
}
@media (max-width: 600px) {
    .tt-emp-card-row { flex-wrap: wrap; }
    .tt-emp-name { min-width: 80px; }
    .tt-emp-type { width: 100%; }
    .tt-emp-card-fields { flex-direction: column; }
    .tt-emp-card-fields input { width: 100%; }
    .tt-salary-controls { flex-direction: column; align-items: stretch; }
    .tt-manual-top { grid-template-columns: 1fr; }
    .tt-manual-sum { margin-left: 0; margin-right: 0; }
}

/* Modal */
.tt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.tt-modal {
    background: var(--bg-card);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    width: 440px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
}
.tt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}
.tt-modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}
.tt-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0 4px;
    line-height: 1;
}
.tt-modal-close:hover { color: var(--text); }
.tt-modal-body {
    padding: 16px 20px;
}
.tt-form-row {
    margin-bottom: 14px;
}
.tt-form-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tt-form-row select,
.tt-form-row input,
.tt-form-row textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    font-family: var(--font);
    background: var(--bg-card);
}
.tt-form-row textarea { resize: vertical; }
.tt-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border);
}

/* ── Time Tracking: Tabs ─────────────────────── */
.tt-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
}
.tt-tab {
    padding: 8px 20px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition), border-color var(--transition);
}
.tt-tab:hover { color: var(--text); }
.tt-tab.active {
    color: var(--green);
    border-bottom-color: var(--green);
}

/* ── Time Tracking: Analytics ────────────────── */
.tt-analytics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
.tt-analytics-card {
    padding: 16px;
}
.tt-analytics-card h3 {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

/* Bar chart rows */
.tt-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.tt-bar-row.is-clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 3px 4px;
    margin-left: -4px;
    margin-right: -4px;
}
.tt-bar-row.is-clickable:hover,
.tt-bar-row.is-selected {
    background: #f3f6f1;
}
.tt-bar-row.is-selected .tt-bar-label {
    font-weight: 700;
    color: var(--green);
}
.tt-bar-label {
    width: 120px;
    flex-shrink: 0;
    font-size: 13px;
    text-align: right;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-bar-track {
    flex: 1;
    height: 22px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
}
.tt-bar-fill {
    height: 100%;
    background: var(--green);
    border-radius: 4px;
    min-width: 2px;
    transition: width 0.3s ease;
}
.tt-bar-fill-blue {
    background: var(--blue);
}
.tt-bar-fill-orange {
    background: var(--orange);
}
.tt-bar-value {
    width: 55px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: right;
}
.tt-project-detail-card {
    margin-top: 12px;
}
.tt-project-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}
.tt-project-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.tt-project-detail-total {
    font-size: 22px;
    font-weight: 800;
    color: var(--green);
    white-space: nowrap;
}
.tt-project-detail-meta {
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 14px;
}
.tt-project-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 16px;
}
.tt-project-detail-grid h4,
.tt-project-detail-subtitle {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0;
}
.tt-project-detail-table th,
.tt-project-detail-table td {
    font-size: 13px;
}

/* Daily vertical chart */
.tt-daily-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 180px;
    padding-top: 24px;
}
.tt-daily-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 30px;
}
.tt-daily-value {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}
.tt-daily-bar-wrap {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.tt-daily-bar {
    width: 70%;
    max-width: 40px;
    background: var(--green);
    border-radius: 4px 4px 0 0;
    min-height: 2px;
    transition: height 0.3s ease;
}
.tt-daily-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Empty state */
.tt-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 24px;
    font-size: 13px;
}

/* ── Time Tracking: Instructions ──────────────── */
.tt-instructions h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 6px;
    color: var(--text);
}
.tt-instructions h4:first-child { margin-top: 4px; }
.tt-instructions ol {
    margin: 0 0 4px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.tt-instructions code {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 12px;
}
.tt-instructions-note {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.6;
    margin-top: 12px;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .tt-analytics-grid {
        grid-template-columns: 1fr;
    }
    .tt-project-detail-grid {
        grid-template-columns: 1fr;
    }
    .tt-bar-label {
        width: 80px;
    }
    .wh-consume-period-summary {
        grid-template-columns: 1fr;
    }
    .wh-consume-period-controls input[type="date"] {
        width: 135px;
    }
    .wh-consume-breakdown-row,
    .wh-consume-project-details > summary {
        align-items: flex-start;
        flex-direction: column;
    }
    .wh-consume-breakdown-metrics {
        text-align: left;
    }
    .wh-consume-project-total {
        white-space: normal;
    }
    .wh-consume-project-plastics {
        padding-left: 12px;
    }
    .wh-consume-project-plastic {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   Production Plan — Drag-and-drop reordering
   ============================================= */

.pp-table-production tbody[draggable="true"] {
    cursor: grab;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
}
.pp-table-production tbody[draggable="true"]:active {
    cursor: grabbing;
}
.pp-table-production tbody.pp-dragging {
    opacity: 0.35;
}
.pp-table-production tbody.pp-drag-over-top {
    box-shadow: 0 -3px 0 0 var(--green);
}
.pp-table-production tbody.pp-drag-over-bottom {
    box-shadow: 0 3px 0 0 var(--green);
}
.pp-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    padding-right: 6px;
    font-size: 16px;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}
.pp-drag-handle:hover {
    color: var(--green);
}
.pp-table-production tbody[draggable="true"]:hover {
    background: rgba(45, 80, 22, 0.02);
}

/* ===== Throughput planner ===== */
#stats-throughput-root .cap-top-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

#stats-throughput-root .cap-scenario-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 10px;
}

#stats-throughput-root .cap-scenario-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    background: #fff;
}

#stats-throughput-root .cap-scenario-head {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 4px;
}

#stats-throughput-root .cap-scenario-main {
    font-size: 22px;
    font-weight: 800;
    color: var(--green-dark);
    line-height: 1.1;
}

#stats-throughput-root .cap-scenario-sub {
    font-size: 14px;
    font-weight: 700;
    margin-top: 4px;
}

#stats-throughput-root .cap-scenario-note {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 6px;
}

#stats-throughput-root .cap-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 10px;
}

#stats-throughput-root .cap-edit-table .input {
    min-width: 0;
    width: 100%;
    height: 36px;
    padding: 6px 8px;
}

@media (max-width: 1100px) {
    #stats-throughput-root .cap-top-grid,
    #stats-throughput-root .cap-scenario-grid,
    #stats-throughput-root .cap-details-grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   Unified Calculator — Collapsible Sections
   ============================================= */

.calc-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    margin-bottom: 12px;
    overflow: hidden;
}

.calc-section > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    user-select: none;
    list-style: none;
    border-bottom: 1px solid transparent;
    transition: background var(--transition);
}

.calc-section > summary::-webkit-details-marker { display: none; }

.calc-section > summary::before {
    content: '▸';
    font-size: 12px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.calc-section[open] > summary::before {
    transform: rotate(90deg);
}

.calc-section > summary:hover {
    background: #f8f9fa;
}

.calc-section[open] > summary {
    border-bottom-color: var(--border);
}

.calc-section-summary-info {
    font-weight: 400;
    font-size: 13px;
    color: var(--text-muted);
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
}

.calc-section-body {
    padding: 14px 18px;
}

.order-costs-section {
    border-color: #e8c76a;
    background: #fff9df;
    box-shadow: 0 8px 20px rgba(122, 91, 0, 0.08);
}

.order-costs-section > summary {
    background: #fff4c2;
}

.order-costs-section[open] > summary,
.order-costs-section > summary:hover {
    background: #ffefaa;
}

.order-costs-body {
    display: grid;
    gap: 14px;
}

.order-costs-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.order-costs-section--finished .order-costs-grid {
    grid-template-columns: minmax(0, 1fr);
}

.order-costs-section--finished .order-costs-group--with-margin {
    display: none;
}

.order-costs-section--finished .order-costs-group--no-margin .order-costs-head p::after {
    content: " · металлоконструкция, подряд, доставка, дизайнер";
}

.order-costs-group {
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* Badge on no-margin-group labels: flags that these expenses skip the
   40% margin markup entirely (shared between order and blank forms). */
.margin-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 1px 6px;
    background: #F7F0E3;
    color: #B07D2B;
    vertical-align: middle;
}

.order-costs-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    border-bottom: 1px solid rgba(122, 91, 0, 0.18);
    padding-bottom: 10px;
}

.order-costs-head h3 {
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
}

.order-costs-head p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.order-costs-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.order-costs-fields .form-group {
    min-width: 0;
}

.order-extra-items {
    display: grid;
    gap: 8px;
}

.order-extra-item-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(90px, 0.7fr) auto;
    gap: 8px;
    align-items: center;
}

.order-extra-item-row input {
    min-width: 0;
}

.order-costs-total {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    border-top: 1px solid rgba(122, 91, 0, 0.18);
    padding-top: 10px;
    color: #594400;
    font-size: 13px;
}

.order-costs-total strong {
    color: #2f2500;
}

@media (max-width: 820px) {
    .order-costs-grid,
    .order-costs-fields {
        grid-template-columns: 1fr;
    }

    .order-extra-item-row {
        grid-template-columns: minmax(0, 1fr) minmax(88px, 0.45fr) auto;
    }
}

/* Level tag inside summary */
.calc-section-level {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.calc-section-level.order-level {
    background: #e0f2f1;
    color: #00695c;
}

.calc-section-level.part-level {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Summary info highlight when section has non-default data */
.calc-section-summary-info.has-data {
    color: var(--green-dark);
    font-weight: 600;
}


/* =============================================
   Unified Calculator — Input Method Tabs
   ============================================= */

.calc-inline-hint {
    font-size: 12px;
    line-height: 1.45;
}

.calc-files-grid {
    align-items: flex-start;
}

.calc-kp-card summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
    list-style: none;
}

.calc-kp-card summary::-webkit-details-marker {
    display: none;
}

.calc-kp-card summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 8px;
    color: var(--text-muted);
    transition: transform .15s ease;
}

.calc-kp-card[open] summary::before {
    transform: rotate(90deg);
}

.finished-goods-calc-card h2 {
    margin: 0;
}

.finished-goods-calc-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.visually-hidden-select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

.fg-status-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.fg-product-picker {
    min-height: 76px;
}

.fg-product-preview-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.fg-product-dropdown {
    position: relative;
}

.fg-product-summary,
.fg-product-option {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.fg-product-summary::-webkit-details-marker {
    display: none;
}

.fg-product-summary::after {
    content: "▾";
    position: absolute;
    right: 14px;
    top: 30px;
    color: var(--text-muted);
}

.fg-product-summary img,
.fg-product-option img,
.fg-variant-card img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid var(--border);
    object-fit: cover;
    background: #f5f5f5;
}

.fg-product-summary small,
.fg-product-option small,
.fg-variant-card small {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 4px;
}

.fg-product-options {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    display: grid;
    gap: 6px;
    max-height: 320px;
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}

.fg-product-option.active,
.fg-variant-card.active {
    border-color: var(--green);
    background: #f4fbf4;
}

.fg-variant-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 8px;
}

.fg-variant-card {
    display: grid;
    gap: 6px;
    justify-items: start;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.fg-variant-card span {
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 800;
}

.fg-pending-colors-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-weight: 700;
}

.fg-product-preview-card img,
.fg-product-preview-empty {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    border: 1px solid var(--border);
    object-fit: cover;
    background: #f5f5f5;
    flex: 0 0 auto;
}

.fg-product-preview-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.fg-status-btn {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text);
    font-weight: 700;
    cursor: pointer;
}

.fg-status-btn.active {
    border-color: var(--green);
    background: #f4fbf4;
    color: var(--green-dark);
}

.finished-goods-color-row {
    grid-template-columns: minmax(0, 1fr);
}

.finished-goods-summary {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fafafa;
    line-height: 1.45;
}

.fg-stock-panel {
    display: none;
    margin-top: 10px;
}

.fg-plastic-mix-wrap {
    display: none;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fbfbfb;
}

.fg-mix-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px auto;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* ── Part Group Container (wraps all per-part sections) ── */

.part-group-container {
    border: 2px solid #c8e6c9;
    border-radius: 14px;
    padding: 12px;
    background: #f9fdf9;
    margin-bottom: 12px;
    position: relative;
}

.part-group-container > .card,
.part-group-container > .calc-section {
    margin-bottom: 10px;
}

.part-group-container > .card:last-child,
.part-group-container > .calc-section:last-child,
.part-group-container > *:last-child {
    margin-bottom: 0;
}

.calc-sheet-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 10px;
}

.calc-card-subtitle {
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.calc-subpanel {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.calc-subpanel-open {
    background: #fbfcfd;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    margin-top: 16px;
}

.calc-subpanel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.calc-subpanel-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.calc-inline-check {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.project-structure-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.project-structure-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sheet-stack-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    width: 100%;
    display: grid;
    gap: 8px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.sheet-stack-card.active {
    border-color: var(--green);
    background: #f7fcf7;
    box-shadow: 0 2px 10px rgba(46, 125, 50, 0.08);
}

.sheet-stack-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.sheet-stack-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.sheet-stack-details {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.sheet-stack-label {
    margin: 0;
}

.sheet-detail-chip {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sheet-detail-chip-btn {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.sample-sheet-card {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    gap: 12px;
}

.sample-sheet-card .sample-sheet-meta {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.sample-sheet-card .sample-sheet-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.sample-sheet-card .sample-details-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sample-sheet-card .sample-detail-item {
    border: 1px solid #d7dee5;
    border-radius: 12px;
    padding: 12px;
    background: #f9fbfd;
}

.sample-sheet-card .sample-detail-item.active {
    border-color: var(--green);
    background: #f7fcf7;
    box-shadow: 0 2px 10px rgba(46, 125, 50, 0.08);
}

@media (max-width: 1100px) {
    .sample-sheet-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .sample-sheet-card {
        grid-template-columns: 1fr;
    }
}

/* ── Input Method Tabs (SVG / Manual) ── */

.input-method-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #f0f1f3;
    border-radius: 8px;
    margin-bottom: 14px;
}

.input-method-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.input-method-btn:hover {
    background: #e4e5e7;
    color: var(--text);
}

.input-method-btn.active {
    background: #fff;
    color: var(--green);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.input-method-content {
    display: none;
}

.input-method-content.active {
    display: block;
}

@media (max-width: 960px) {
    .calc-sheet-detail-grid {
        grid-template-columns: 1fr;
    }

    .calc-files-grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================
   Unified Calculator — Bottom Action Bar
   ============================================= */

.calc-bottom-actions {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    margin-top: 8px;
    position: sticky;
    bottom: 0;
    background: var(--bg);
    z-index: 10;
}

.calc-bottom-actions .btn {
    flex: 1;
}

.calc-bottom-actions .quick-upgrade-btn {
    border-color: var(--green);
    color: var(--green-dark);
    font-weight: 700;
    white-space: nowrap;
}

.calc-bottom-actions .quick-upgrade-btn:hover {
    background: #eef9f3;
    border-color: var(--green-dark);
}

.calc-after-results-actions {
    display: none;
    gap: 8px;
    margin: 12px 0 16px;
}

.calc-after-results-actions .btn {
    flex: 1;
}

.btn-save-blank {
    background: #1565c0 !important;
    color: #fff !important;
    border: none !important;
}

.btn-save-blank:hover {
    background: #0d47a1 !important;
}


/* =============================================
   Unified Calculator — Reset bar (replaces mode toggle)
   ============================================= */

.calc-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.pf-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.pf-hero-card {
    margin-bottom: 16px;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid #d7e8db;
    background: radial-gradient(circle at top left, rgba(66, 133, 91, 0.16), rgba(255,255,255,0.95) 55%), #f7fbf8;
}

.pf-hero-label {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.pf-hero-value {
    margin-top: 8px;
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
    color: var(--green-dark);
}

.pf-hero-hint {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text);
}

.pf-metric-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px 16px;
}

.pf-metric-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.pf-metric-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
}

.pf-metric-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.pf-metric-success .pf-metric-value {
    color: var(--green-dark);
}

.pf-metric-danger .pf-metric-value {
    color: var(--red);
}

.pf-metric-warning .pf-metric-value {
    color: #b45309;
}

.pf-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pf-section {
    margin-bottom: 0;
    padding: 16px;
}

.pf-fold {
    margin-bottom: 16px;
    padding: 0;
    overflow: hidden;
}

.pf-fold-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
}

.pf-fold-summary::-webkit-details-marker {
    display: none;
}

.pf-fold-main {
    min-width: 0;
    flex: 1;
}

.pf-fold-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.pf-fold-title-row h2 {
    margin: 0;
}

.pf-fold-summary-text {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
}

.pf-fold-chevron {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--text-muted);
    transition: transform 0.18s ease;
    transform: rotate(-90deg);
    margin-top: 2px;
}

.pf-fold[open] .pf-fold-chevron {
    transform: rotate(0deg);
}

.pf-fold-body {
    padding: 0 16px 16px;
    border-top: 1px solid var(--border);
}

.pf-fold-danger .pf-fold-summary {
    background: rgba(220, 38, 38, 0.04);
}

.pf-fold-success .pf-fold-summary {
    background: rgba(29, 122, 73, 0.04);
}

.pf-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.pf-section-head h2 {
    margin-bottom: 0;
}

.pf-section-count {
    min-width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgba(29, 122, 73, 0.12);
    color: var(--green-dark);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.pf-table-wrap {
    overflow-x: auto;
}

.pf-table {
    width: 100%;
    border-collapse: collapse;
}

.pf-table th {
    text-align: left;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.pf-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.pf-order-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}

.pf-order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.pf-order-note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
}

.pf-red-note {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
}

.pf-muted-note {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.pf-cell-main {
    font-weight: 700;
    color: var(--text);
}

.pf-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--text);
}

.pf-finance-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.pf-margin {
    font-weight: 800;
    font-size: 18px;
}

.pf-margin.pos {
    color: var(--green-dark);
}

.pf-margin.neg {
    color: var(--red);
}

.pf-margin-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.pf-internal-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.pf-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-muted);
}

.pf-fin-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
}

.ft-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ft-grid-top {
    margin-top: 12px;
}

.ft-top-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 12px;
}

.ft-top-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.ft-sections {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.ft-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.ft-assignment-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 260px;
}

.ft-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
}

.ft-card h2 {
    margin-bottom: 12px;
}

.ft-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ft-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ft-period {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ft-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.ft-sync-panel {
    margin-top: 16px;
}

.ft-sync-panel summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-muted);
}

.so-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f5f7f6;
    border: 1px solid var(--border);
    font-size: 12px;
    color: var(--text);
}

.telegram-inbox-layout {
    display: grid;
    grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
    gap: 16px;
    min-height: 70vh;
}

.telegram-inbox-toolbar-card {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfb 100%);
}

.telegram-inbox-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.telegram-inbox-toolbar-main {
    display: grid;
    gap: 10px;
}

.telegram-inbox-mode-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.telegram-inbox-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #d9e1db;
    background: #fff;
    color: #344054;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.telegram-inbox-mode-btn:hover {
    border-color: #2f5e2b;
    color: #163b17;
}

.telegram-inbox-mode-btn.active {
    background: #eff8f0;
    border-color: #2f5e2b;
    color: #163b17;
    box-shadow: 0 0 0 2px rgba(47, 94, 43, 0.08);
}

.telegram-inbox-mode-count {
    padding: 2px 7px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d9e1db;
    font-size: 11px;
}

.telegram-inbox-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.telegram-inbox-summary-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inbox-toolbar-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.inbox-channel-switch {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.inbox-channel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
    cursor: pointer;
    font-weight: 700;
}

.inbox-channel-btn.active {
    background: #eef8ef;
    border-color: #2f5e2b;
    color: #143d10;
    box-shadow: 0 0 0 2px rgba(47, 94, 43, 0.08);
}

.telegram-inbox-summary-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid #eaecf0;
    background: #fff;
    color: #344054;
}

.telegram-inbox-summary-pill strong {
    font-size: 18px;
    color: #101828;
}

.telegram-inbox-summary-pill span {
    font-size: 13px;
    font-weight: 700;
    color: #101828;
}

.telegram-inbox-summary-pill small {
    font-size: 12px;
    color: var(--text-muted);
}

.telegram-inbox-summary-card {
    border: 1px solid #eaecf0;
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    display: grid;
    gap: 4px;
}

.telegram-inbox-summary-card strong {
    font-size: 18px;
    color: #101828;
}

.telegram-inbox-summary-card .hint {
    font-size: 12px;
}

.telegram-inbox-list-card,
.telegram-inbox-detail-card {
    padding: 12px;
}

.telegram-inbox-list-card {
    overflow: auto;
}

.telegram-inbox-group + .telegram-inbox-group {
    margin-top: 18px;
}

.telegram-inbox-group-title {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 0 8px;
    padding: 4px 2px 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #667085;
    background: linear-gradient(180deg, #fff 75%, rgba(255,255,255,0));
}

.telegram-inbox-detail-card {
    overflow: hidden;
}

.telegram-inbox-item {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.telegram-inbox-item:hover,
.telegram-inbox-item.active {
    border-color: #2f5e2b;
    box-shadow: 0 0 0 2px rgba(47, 94, 43, 0.08);
    background: #f9fcf8;
}

.telegram-inbox-item-head,
.telegram-order-row,
.telegram-thread-row,
.telegram-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.telegram-inbox-item-sub,
.telegram-inbox-meta,
.telegram-thread-last {
    font-size: 12px;
    color: var(--text-muted);
}

.telegram-inbox-item-sub {
    margin-top: 3px;
}

.telegram-inbox-item-reason {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #175cd3;
}

.telegram-inbox-item-text {
    margin-top: 6px;
    font-size: 13px;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.telegram-inbox-item-foot,
.telegram-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.telegram-context-panel {
    padding: 14px;
    border: 1px solid #eaecf0;
    border-radius: 16px;
    background: #fcfcfd;
}

.telegram-context-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.telegram-context-summary,
.telegram-context-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.telegram-context-summary {
    flex: 1 1 360px;
}

.telegram-context-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #e4e7ec;
    background: #fff;
    color: #344054;
}

.telegram-context-pill strong {
    color: #101828;
    font-size: 13px;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.telegram-context-pill-label {
    color: #667085;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.telegram-context-order-row {
    margin-top: 10px;
}

.telegram-detail-advanced {
    margin-top: 12px;
    border-top: 1px solid #eaecf0;
    padding-top: 12px;
}

.telegram-detail-advanced summary {
    cursor: pointer;
    list-style: none;
    font-weight: 700;
    color: #344054;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.telegram-detail-advanced summary::-webkit-details-marker {
    display: none;
}

.telegram-detail-advanced summary::before {
    content: "▸";
    font-size: 12px;
    color: #667085;
    transition: transform .15s ease;
}

.telegram-detail-advanced[open] summary::before {
    transform: rotate(90deg);
}

.telegram-detail-advanced-body {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.telegram-detail-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.telegram-detail-advanced-body label {
    gap: 4px !important;
}

.telegram-detail-advanced-body textarea,
.telegram-detail-advanced-body input,
.telegram-detail-advanced-body select {
    margin: 0;
}

.telegram-detail-advanced-body textarea {
    min-height: 72px;
}

.telegram-followup-quick-row,
.telegram-followup-custom-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.telegram-followup-custom-row {
    margin-top: 2px;
}

.telegram-followup-custom-row input[type="number"] {
    width: 76px;
    min-width: 76px;
}

.telegram-inbox-order-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.telegram-inbox-order-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 5px 9px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e4e7ec;
    font-size: 11px;
    color: #344054;
}

.telegram-inbox-order-pill strong {
    color: #101828;
}

.telegram-detail-section {
    margin-top: 18px;
}

.telegram-detail-section h3 {
    margin-bottom: 10px;
}

.telegram-chat-shell {
    padding-bottom: 2px;
}

.telegram-order-row,
.telegram-thread-row,
.telegram-message {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
}

.telegram-order-row + .telegram-order-row,
.telegram-thread-row + .telegram-thread-row,
.telegram-message + .telegram-message {
    margin-top: 10px;
}

.telegram-messages-list {
    max-height: 520px;
    overflow: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    overflow-anchor: none;
}

.telegram-message {
    background: #fff;
    max-width: 82%;
    width: fit-content;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.telegram-message.out {
    background: #eef8ef;
    margin-left: auto;
}

.telegram-message-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.telegram-chat-viewport {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 4px 10px 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(47, 94, 43, 0.04), transparent 22%),
        radial-gradient(circle at 80% 15%, rgba(23, 92, 211, 0.03), transparent 18%),
        #f8fafc;
    border: 1px solid #eaecf0;
    border-radius: 16px;
    overflow-anchor: none;
}

.telegram-chat-load-older {
    text-align: center;
    padding: 8px 12px 4px;
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, #f8fafc 70%, rgba(248,250,252,0));
}

.telegram-contact-head-main {
    min-width: 0;
}

.telegram-contact-title {
    margin: 0;
    line-height: 1.2;
}

.telegram-contact-subtitle {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 13px;
}

.telegram-migration-banner {
    display: grid;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid #fedf89;
    background: #fffaeb;
}

.telegram-migration-banner.is-success {
    border-color: #a6f4c5;
    background: #ecfdf3;
}

.telegram-migration-banner-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.telegram-migration-banner-title {
    font-weight: 700;
    color: #b54708;
}

.telegram-migration-banner.is-success .telegram-migration-banner-title {
    color: #027a48;
}

.telegram-migration-banner-text {
    margin-top: 4px;
    color: #7a2e0e;
    line-height: 1.45;
}

.telegram-migration-banner.is-success .telegram-migration-banner-text {
    color: #05603a;
}

.telegram-migration-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.telegram-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.telegram-order-panel {
    padding-bottom: 2px;
}

.telegram-order-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.telegram-order-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
    cursor: pointer;
    font-weight: 600;
}

.telegram-order-pill-btn.active {
    border-color: #2f5e2b;
    background: #eef8ef;
    color: #143d10;
}

.telegram-order-meta {
    margin-top: 8px;
}

.telegram-order-picker {
    margin-top: 10px;
}

.telegram-order-picker summary {
    cursor: pointer;
    font-weight: 600;
}

.telegram-compose-panel {
    border: 1px solid #eaecf0;
    border-radius: 16px;
    padding: 14px;
    background: #fcfcfd;
}

.telegram-compose-head,
.telegram-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.telegram-compose-order-slot {
    min-width: 0;
    flex: 1 1 280px;
}

.telegram-compose-order-select {
    width: 100%;
}

.telegram-compose-order-pill {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #d0d5dd;
    font-weight: 600;
    color: #101828;
}

.telegram-compose-textarea {
    width: 100%;
    margin-top: 10px;
    min-height: 120px;
    resize: vertical;
}

.telegram-compose-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.telegram-compose-file-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
    cursor: pointer;
    font-weight: 800;
    font-size: 20px;
}

.telegram-compose-file-btn input {
    display: none;
}

.telegram-compose-invoice-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #344054;
}

.telegram-smart-reply-inline {
    margin-top: 10px;
}

.telegram-smart-reply-box {
    display: grid;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #eaecf0;
}

.telegram-smart-reply-text {
    color: #101828;
    white-space: pre-wrap;
}

.inbox-detail-lite {
    display: grid;
    gap: 14px;
}

.inbox-detail-lite-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.inbox-detail-lite-title {
    min-width: 0;
}

.inbox-detail-lite-title h2 {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.2;
}

.inbox-detail-lite-actions,
.inbox-lite-followups {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.inbox-word-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.inbox-word-chip.is-us {
    background: #ecfdf3;
    color: #027a48;
}

.inbox-word-chip.is-client {
    background: #fff4e5;
    color: #b54708;
}

.inbox-detail-lite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.inbox-lite-card,
.inbox-lite-section {
    border: 1px solid #eaecf0;
    border-radius: 8px;
    background: #fff;
}

.inbox-lite-card {
    padding: 12px;
    min-width: 0;
}

.inbox-lite-card-label {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

.inbox-lite-card strong {
    display: block;
    overflow-wrap: anywhere;
}

.inbox-lite-section {
    padding: 14px;
}

.inbox-lite-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.inbox-lite-section-head h3 {
    margin: 0;
    font-size: 16px;
}

.inbox-lite-messages {
    max-height: none;
    overflow: visible;
}

.inbox-quiet-empty {
    padding: 10px 0;
}

.inbox-lite-orders {
    margin-top: 12px;
}

.inbox-lite-details {
    border: 1px solid #eaecf0;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fcfcfd;
}

.inbox-lite-details summary {
    cursor: pointer;
    font-weight: 700;
}

.inbox-lite-edit-grid {
    display: grid;
    grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
    gap: 10px;
    margin: 12px 0;
}

.inbox-lite-edit-grid label {
    display: grid;
    gap: 6px;
}

.inbox-lite-edit-wide {
    grid-column: 1 / -1;
}

@media (max-width: 1100px) {
    .pf-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pf-fin-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ft-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .so-finance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .telegram-inbox-layout {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .inbox-detail-lite-grid,
    .inbox-lite-edit-grid {
        grid-template-columns: 1fr;
    }

    .telegram-compose-head,
    .telegram-compose-footer {
        align-items: stretch;
    }

    .telegram-compose-order-slot {
        flex-basis: 100%;
    }

    .telegram-inbox-summary-grid {
        grid-template-columns: 1fr;
    }

    .telegram-inbox-toolbar {
        grid-template-columns: 1fr;
    }

    .telegram-detail-compact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .pf-summary-grid {
        grid-template-columns: 1fr;
    }

    .pf-table thead {
        display: none;
    }

    .pf-table,
    .pf-table tbody,
    .pf-table tr,
    .pf-table td {
        display: block;
        width: 100%;
    }

    .pf-table tr {
        border: 1px solid var(--border);
        border-radius: 14px;
        margin-bottom: 12px;
        overflow: hidden;
    }

    .pf-table td {
        border-bottom: 1px solid var(--border);
    }

    .pf-table td:last-child {
        border-bottom: none;
    }

    .pf-fin-form {
        grid-template-columns: 1fr;
    }

    .ft-grid,
    .ft-summary-grid,
    .ft-period {
        grid-template-columns: 1fr;
    }

    .ft-top-head,
    .ft-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .pf-hero-value {
        font-size: 32px;
    }

    .so-finance-summary {
        grid-template-columns: 1fr;
    }
}

.delivery-layout {
    display: grid;
    grid-template-columns: minmax(420px, 1.3fr) minmax(360px, 0.9fr);
    gap: 16px;
    align-items: start;
}

.delivery-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.delivery-overview-card,
.delivery-list-card,
.delivery-detail-card {
    padding: 16px;
}

.delivery-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.delivery-metric {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    background: #fbfbfb;
}

.delivery-metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--green);
    line-height: 1.1;
}

.delivery-metric-label {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}

.delivery-overview-next {
    margin-top: 14px;
}

.delivery-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.delivery-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.delivery-chip-btn,
.delivery-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: white;
    color: var(--text);
    font-size: 12px;
    text-decoration: none;
}

.delivery-chip-btn {
    cursor: pointer;
}

.delivery-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.delivery-toolbar input,
.delivery-toolbar select,
.delivery-form-grid input,
.delivery-form-grid select,
.delivery-blocker-field textarea,
#delivery-detail-comment {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    font: inherit;
    background: white;
}

.delivery-list-caption {
    margin-top: 10px;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.delivery-task-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.delivery-task-row {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: white;
    padding: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.delivery-task-row:hover,
.delivery-task-row.active {
    border-color: var(--green-light);
    box-shadow: 0 0 0 2px rgba(45, 80, 22, 0.08);
}

.delivery-task-row-top,
.delivery-detail-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.delivery-task-row-key,
.delivery-task-key {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.delivery-task-row-title {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.delivery-task-row-meta,
.delivery-detail-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    color: var(--text-muted);
    font-size: 12px;
}

.delivery-inline-flag {
    color: var(--green);
    font-weight: 700;
}

.delivery-task-row-badges,
.delivery-status-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.delivery-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--border);
    background: #f7f7f7;
}

.delivery-priority-p0 {
    color: #a61b1b;
    background: #fdeaea;
    border-color: #f4c9c9;
}

.delivery-priority-p1 {
    color: #9a5200;
    background: #fff3e6;
    border-color: #ffd5a8;
}

.delivery-priority-p2 {
    color: #0e5c3f;
    background: #e8f7f0;
    border-color: #bfe7d4;
}

.delivery-status-backlog {
    color: var(--text-secondary);
}

.delivery-status-ready {
    color: #0f5b9f;
    background: #e8f1fc;
    border-color: #bfd3f5;
}

.delivery-status-in_progress {
    color: #0e5c3f;
    background: #e8f7f0;
    border-color: #bfe7d4;
}

.delivery-status-in_review,
.delivery-status-qa,
.delivery-status-ready_for_release {
    color: #7b1fa2;
    background: #f5ebfb;
    border-color: #e1c8f1;
}

.delivery-status-blocked {
    color: #a61b1b;
    background: #fdeaea;
    border-color: #f4c9c9;
}

.delivery-status-done {
    color: var(--green);
    background: #edf8ea;
    border-color: #cfe8c7;
}

.delivery-status-canceled {
    color: var(--text-muted);
    background: #f3f3f3;
}

.delivery-detail-card {
    position: sticky;
    top: 20px;
}

.delivery-detail-head h2 {
    margin-top: 2px;
    font-size: 20px;
    line-height: 1.2;
}

.delivery-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.delivery-form-grid label,
.delivery-blocker-field,
.delivery-checkbox-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.delivery-checkbox-row {
    margin-top: 12px;
    flex-direction: row;
    align-items: center;
}

.delivery-blocker-field {
    margin-top: 12px;
}

.delivery-detail-sections {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delivery-detail-section {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}

.delivery-detail-list {
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.delivery-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    margin-bottom: 10px;
}

.delivery-event-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.delivery-event {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    background: #fbfbfb;
}

.delivery-event-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.delivery-empty {
    padding: 24px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    text-align: center;
    background: #fafafa;
}

.delivery-empty-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

#page-blanks .page-header {
    margin-bottom: 8px;
    align-items: center;
}

#page-blanks .page-header h1 {
    font-size: 24px;
    line-height: 1.1;
}

.blanks-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}

.blank-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.blank-category-tab {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 999px;
    padding: 6px 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}

#blanks-table {
    min-width: 1130px;
    table-layout: fixed;
}

#blanks-table thead th {
    padding: 7px 6px;
    font-size: 10px;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

#blanks-table td {
    padding: 6px;
    font-size: 12px;
}

#blanks-table th:nth-child(1),
#blanks-table td:nth-child(1) {
    width: 60px;
}

#blanks-table th:nth-child(2),
#blanks-table td:nth-child(2) {
    width: 240px;
}

#blanks-table th:nth-child(3),
#blanks-table td:nth-child(3) {
    width: 56px;
}

#blanks-table th:nth-child(4),
#blanks-table td:nth-child(4) {
    width: 44px;
    text-align: center;
}

#blanks-table th:nth-child(5),
#blanks-table td:nth-child(5) {
    width: 42px;
    text-align: center;
}

#blanks-table th:nth-child(6),
#blanks-table td:nth-child(6),
#blanks-table th:nth-child(7),
#blanks-table td:nth-child(7) {
    width: 92px;
}

/* Колонка действий (8-я после упрощения таблицы 03.07): 5 кнопок с подписями */
#blanks-table th:nth-child(8),
#blanks-table td:nth-child(8) {
    width: 320px;
}

.blank-photo-cell {
    text-align: center;
}

.blank-photo-thumb {
    position: relative;
    width: 52px;
    height: 52px;
    margin: 0 auto;
}

.blank-photo-thumb img,
.blank-photo-empty {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    border: 1px solid var(--border);
    object-fit: cover;
}

.blank-photo-empty {
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 10px;
    border-style: dashed;
}

.blank-name-cell strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blank-layout-cell,
.blank-thickness-cell {
    font-weight: 800;
    color: var(--text);
}

.blank-category-tab.active {
    border-color: var(--green);
    background: #eef7ea;
    color: var(--green-dark);
}

.blank-category-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    border-radius: 999px;
    background: #f3f4f6;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.blank-publish-state {
    margin-top: 2px;
    color: var(--green-dark);
    font-size: 10px;
    font-weight: 800;
}

.blank-publish-state.muted {
    color: var(--text-muted);
}

.blank-pricing-row > td {
    background: #f8faf7;
    padding: 0;
}

.blank-actions-cell {
    text-align: right;
    vertical-align: middle;
}

/* flex живёт на внутренней обёртке — display:flex на <td> ломает раскладку колонок */
.blank-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}

.blank-icon-btn {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
}

.blank-icon-btn.danger {
    color: var(--red);
}

.blank-pricing-panel {
    padding: 16px 18px 18px;
    border-top: 1px solid var(--border);
}

.blank-pricing-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: start;
    margin-bottom: 12px;
}

.blank-pricing-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--text);
}

.blank-pricing-sub {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.blank-production-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 800;
}

.blank-production-files a {
    color: var(--green-dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(46, 125, 50, 0.35);
}

.blank-production-files.muted {
    color: var(--text-muted);
}

.blank-pricing-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.blank-pricing-controls label {
    display: grid;
    gap: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.blank-pricing-controls input,
.blank-pricing-table input[type="number"] {
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 8px;
    background: #fff;
    font: inherit;
    min-width: 82px;
}

.blank-pricing-controls input[type="text"] {
    min-width: 180px;
}

.blank-site-copy {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 12px 0;
}

.blank-site-copy label {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
}

.blank-site-copy textarea {
    width: 100%;
    min-height: 62px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    background: #fff;
    font: inherit;
    font-size: 12px;
    color: var(--text);
}

.blank-pricing-table-wrap {
    overflow-x: auto;
}

.blank-pricing-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid var(--border);
}

.blank-pricing-table th,
.blank-pricing-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    white-space: nowrap;
}

.blank-pricing-table th {
    background: #f3f6f2;
    color: var(--text-muted);
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
}

.blank-tier-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.blank-tier-status.good {
    color: var(--green-dark);
    background: #e9f7e7;
}

.blank-tier-status.waste {
    color: #8a4b00;
    background: #fff4dc;
}

.blank-pricing-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.blank-order-picker {
    display: none;
}

.blank-order-picker.active {
    display: block;
}

.blank-order-picker__shade {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.blank-order-picker__panel {
    width: min(860px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.24);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.blank-order-picker__head,
.blank-order-picker__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.blank-order-picker__foot {
    border-top: 1px solid var(--border);
    border-bottom: 0;
}

.blank-order-picker__title {
    font-weight: 800;
    font-size: 18px;
}

.blank-order-picker__list {
    overflow: auto;
    padding: 8px;
    display: grid;
    gap: 8px;
}

.blank-order-picker__row {
    display: grid;
    grid-template-columns: 24px 56px minmax(0, 1fr) 120px 88px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.blank-order-picker__row:has(input[type="checkbox"]:checked) {
    border-color: var(--primary);
    background: #f4f8ff;
}

.blank-order-picker__thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: var(--bg);
}

.blank-order-picker__thumb--empty {
    border-style: dashed;
}

.blank-order-picker__name {
    font-weight: 800;
}

.blank-order-picker__price {
    text-align: right;
    font-weight: 800;
    white-space: nowrap;
}

.blank-order-picker__qty {
    width: 88px;
}

@media (max-width: 720px) {
    .blank-site-copy {
        grid-template-columns: 1fr;
    }

    .blank-order-picker__shade {
        align-items: stretch;
        padding: 10px;
    }

    .blank-order-picker__row {
        grid-template-columns: 24px 48px minmax(0, 1fr) 78px;
    }

    .blank-order-picker__price {
        grid-column: 3 / 5;
        text-align: left;
    }
}

@media (max-width: 1200px) {
    .delivery-layout {
        grid-template-columns: 1fr;
    }

    .delivery-detail-card {
        position: static;
    }
}

@media (max-width: 860px) {
    .delivery-overview-grid,
    .delivery-form-grid,
    .delivery-toolbar {
        grid-template-columns: 1fr;
    }
}

/* Quick line: collapsible description */
.quick-line-desc-toggle summary {
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
}
.quick-line-desc-toggle input {
    margin-top: 6px;
}

/* Compact calc header: 4-up, stepping 2x2 before the global 1-col breakpoint */
.calc-header-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1151px) and (min-width: 901px) {
    .calc-header-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 900px) {
    .calc-header-row {
        grid-template-columns: 1fr;
    }
}

/* Sticky calc summary (unified new-calc flow) */
.calc-sticky-summary {
    position: sticky;
    bottom: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    border-radius: var(--radius);
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.calc-sticky-summary__price {
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.calc-sticky-summary__meta {
    flex: 1;
    font-size: 12px;
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =============================================
   Unified Calculator — Mockup visual polish (T12)
   Scoped to #page-calculator only: this is a mood
   pass on top of the existing markup, not a rebuild.
   Do not let these selectors leak onto other pages.
   ============================================= */

/* 1. Calc sections + quick card as one calm card family. */
#page-calculator .calc-section,
#page-calculator #quick-sheet-calc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(28, 32, 29, 0.05);
}

#page-calculator #quick-sheet-calc-card {
    padding: 20px;
}

#page-calculator .calc-section > summary {
    padding: 16px 20px;
}

#page-calculator .calc-section-body {
    padding: 18px 20px;
}

/* Order-costs section: collapsed reads as a quiet hint-row like its
   siblings; the yellow wall only reappears once it's actually open
   (soft tint for orientation, not a permanent alarm).
   Section shared with blank mode via _syncOrderCostsTitle — этап 2
   handled collapsed chrome + hint copy for blank context: see
   .order-costs-section--blank (toggled by _applyBlankModeUI /
   _restoreDefaultModeUI) and the two hint::after rules further down. */
#page-calculator .order-costs-section {
    border: 1px dashed var(--border);
    background: transparent;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#page-calculator .order-costs-section > summary {
    background: transparent;
    padding: 10px 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

#page-calculator .order-costs-section > summary:hover {
    background: #f8f9fa;
}

#page-calculator .order-costs-section[open] {
    border: 1px solid #e8c76a;
    background: #fff9df;
    box-shadow: 0 8px 20px rgba(122, 91, 0, 0.08);
}

#page-calculator .order-costs-section[open] > summary {
    background: #fff4c2;
    padding: 16px 20px;
    font-weight: 700;
    color: var(--text);
}

#page-calculator .order-costs-section[open] > summary:hover {
    background: #ffefaa;
}

/* Badge stays visible in both states; only turns green once there's
   a non-zero sum to report. */
#page-calculator .order-costs-section #section-order-extras-summary.has-data {
    color: var(--green);
    font-weight: 600;
}

/* 2. Collapsed spoilers → quiet dashed hint-rows. */
#page-calculator .client-legal-details,
#page-calculator .quick-line-desc-toggle {
    margin-top: 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    background: transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#page-calculator .client-legal-details summary,
#page-calculator .quick-line-desc-toggle summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
}

#page-calculator .client-legal-details[open],
#page-calculator .quick-line-desc-toggle[open] {
    border-style: solid;
    padding: 14px 16px;
}

#page-calculator .client-legal-details[open] summary,
#page-calculator .quick-line-desc-toggle[open] summary {
    margin-bottom: 4px;
    font-weight: 600;
}

/* Right-aligned usage hints (timeless static copy — no live counts,
   nothing to go stale; they say how rarely the field is touched). */
#page-calculator #quick-paint-toggle > summary::after,
#page-calculator #delivery-toggle > summary::after {
    margin-left: auto;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    white-space: nowrap;
}

#page-calculator #quick-paint-toggle > summary::after {
    content: 'обычно не нужно';
}

#page-calculator #delivery-toggle > summary::after {
    content: 'нужно редко';
}

#page-calculator #quick-paint-toggle[open] > summary::after,
#page-calculator #delivery-toggle[open] > summary::after {
    display: none;
}

/* Hint only while the section is empty: once the badge carries a sum
   (has-data lands on this same span, see _updateSectionSummaries), the
   hint would clip inside the badge's nowrap/ellipsis box — and it's
   redundant next to real data anyway. Order-context copy only — excluded
   when .order-costs-section--blank (see below) since "~7% заказов" makes
   no sense while editing a типовое изделие template. */
#page-calculator .calc-section#section-order-extras:not(.order-costs-section--blank):not([open]) .calc-section-summary-info:not(.has-data)::after {
    content: 'нужно в ~7% заказов';
    margin-left: 10px;
    font-weight: 400;
    color: var(--text-muted);
}

/* Blank-context hint: applied by _applyBlankModeUI (order-costs-section--blank
   class), removed by _restoreDefaultModeUI. Points at the only two fields
   that matter at blank level — подряд и вознаграждение. */
#page-calculator .calc-section#section-order-extras.order-costs-section--blank:not([open]) .calc-section-summary-info:not(.has-data)::after {
    content: 'нужно, если есть подряд или вознаграждение';
    margin-left: 10px;
    font-weight: 400;
    color: var(--text-muted);
}

/* 3. Sticky bar → mockup summary style: light green backdrop, bigger
   green price. Layout/IDs untouched. */
#page-calculator .calc-sticky-summary {
    background: var(--green-bg);
    border: 1px solid var(--green);
}

#page-calculator .calc-sticky-summary__price {
    font-size: 22px;
    color: var(--green);
}

/* 4. Labels: already small/muted/uppercase — soften weight slightly
   and calm the letter-spacing so it reads quieter, not louder. */
#page-calculator .form-group label {
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}

/* Blank category chips (stage 2, task B1) */
#page-calculator .blank-category-chips { display: flex; gap: 8px; flex-wrap: wrap; }
#page-calculator .blank-category-chips .chip {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 5px 14px;
    background: var(--bg-card); /* outline-only pill on the white card; --bg would read gray-on-white */
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
#page-calculator .blank-category-chips .chip.active {
    background: var(--green);
    border-color: var(--green);
    color: #fff;
    font-weight: 600;
}

/* =============================================
   Blank form — mockup visual layer (stage 2, B3.5)
   Scoped to #page-calculator.calc--blank-mode only
   (class toggled by _applyBlankModeUI /
   _restoreDefaultModeUI). The regular order form
   never gets this class, so none of this bleeds
   into it. Category chips above are B1; this block
   is the SVG drop-zone treatment that makes the rest
   of the blank form read as the same "+ Бланк" family
   as the research mockup «вариант А» — the compact
   param grid and dashed hint-rows already inherit the
   unscoped #page-calculator .calc-section / hint-row
   rules above, so there is nothing to duplicate here.
   ============================================= */
#page-calculator.calc--blank-mode #svg-drop {
    border: 2px dashed var(--green);
    background: var(--green-bg);
    color: var(--green);
    font-weight: 600;
}

#page-calculator.calc--blank-mode #svg-drop .hint {
    color: var(--green);
    font-weight: 400;
}