:root {
    /* Typografia */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    --font-size-h1: 32px;
    --font-size-h3: 18px;
    --font-size-body: 14px;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;

    /* Kolory */
    --color-bg-primary: #f8f9fa;
    --color-surface: #ffffff;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #666;
    --color-text-secondary-alt: #757575;
    --color-primary: #5b6eff;
    --color-primary-hover: #4c5bd9;
    --color-border: #e5e7eb;
    
    /* Spacing */
    --spacing-unit: 8px;
    --spacing-lg: 24px;
    --spacing-md: 16px;
    --spacing-sm: 8px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* Border Radius */
    --radius-lg: 12px;
    --radius-md: 8px;
}

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

body {
    font-family: var(--font-family);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    min-height: 100vh;
    padding: var(--spacing-lg);
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
    background: var(--color-bg-primary);
    min-height: 100vh;
}

.panel-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

header {
    text-align: center;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.panel-title,
header h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

header p {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    margin: 0;
    font-weight: 400;
}

.customer-form {
    background: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
}

.customer-form h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8em;
}

.customer-form .form-group-row {
    align-items: center;
}

.customer-form .form-group-row label {
    align-items: center;
    min-height: auto;
    height: auto;
    padding-top: 0;
    padding-bottom: 0;
}

.customer-form .form-group-row input,
.customer-form .form-group-row select {
    width: 8.4%;
    font-size: 14px;
    vertical-align: middle;
}

.customer-form .form-group-row textarea {
    width: 28%;
    font-size: 14px;
    vertical-align: middle;
}

.customer-form .form-group-row-inline {
    gap: 5px;
}

.customer-form .form-group-row-inline .form-group input {
    width: 25.2%;
    font-size: 14px;
    vertical-align: middle;
}

.customer-form .form-group-row-inline .form-group:has(#contactPosition) {
    margin-left: -30.24%;
}

.customer-form .form-group-row-inline .form-group:has(#contactPhone) {
    margin-left: -25.3%;
}

/* Horizontal grid form layout - labels in one row, inputs in next row */
.form-horizontal-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Zlecenia – pola główne: etykieta nad kontenerem, responsywna siatka */
.form-main-fields {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
    gap: 12px 14px;
    align-items: end;
}

.form-main-fields .form-stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.form-main-fields .form-stack > label {
    color: #555;
    font-weight: 600;
    font-size: 0.95em;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    line-height: 1.2;
}

.form-main-fields .form-stack .form-field {
    width: 100%;
    min-width: 0;
}

/* Klient i Towar – szersze na większych ekranach */
.form-main-fields .form-stack--customer,
.form-main-fields .form-stack--product {
    grid-column: span 2;
}

@media (max-width: 520px) {
    .form-main-fields .form-stack--customer,
    .form-main-fields .form-stack--product {
        grid-column: span 1;
    }
}

@media (min-width: 1100px) {
    .form-main-fields {
        grid-template-columns: repeat(12, 1fr);
        gap: 10px 12px;
    }

    /* 2+2+1+1+1+1+1+2+1 = 12 */
    .form-main-fields .form-stack--customer {
        grid-column: span 2;
    }

    .form-main-fields .form-stack--product {
        grid-column: span 2;
    }

    .form-main-fields .form-stack--compact {
        grid-column: span 1;
    }

    .form-main-fields .form-stack:not(.form-stack--customer):not(.form-stack--product):not(.form-stack--compact):not(.form-stack--recipe) {
        grid-column: span 1;
    }

    .form-main-fields .form-stack--recipe {
        grid-column: span 2;
    }
}

.form-main-fields #orderCustomer,
.form-main-fields #orderProduct,
.form-main-fields #orderQuantity,
.form-main-fields #orderUnit,
.form-main-fields #orderGloss,
.form-main-fields #orderCategory,
.form-main-fields #orderCategory2,
.form-main-fields #orderRecipe,
.form-main-fields #orderPrice {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    min-width: 0;
}

.form-main-fields #orderGloss {
    min-width: 3rem;
}

/* Zlecenia – wyśrodkowany tekst / wartość w polach */
#orderForm .form-main-fields .form-field input,
#orderForm .form-main-fields .form-field select,
#orderForm .form-main-fields .form-field .autocomplete-wrapper input {
    text-align: center;
    text-align-last: center;
}

#orderForm .form-comment-field textarea {
    text-align: center;
}

#orderForm .form-order-meta-row .form-field input,
#orderForm .form-order-meta-row .form-field select {
    text-align: center;
    text-align-last: center;
}

/* Order form specific sizing (meta / numer – poza główną siatką) */
#orderDate {
    width: 115px;
    min-width: 115px;
    margin-left: -18px;
}

#orderNumber {
    width: 99px;
    min-width: 99px;
}

#orderQuantity {
    /* Hide spinner arrows */
    -moz-appearance: textfield;
}

/* Hide spinner arrows for WebKit browsers (Chrome, Safari, Edge) */
#orderQuantity::-webkit-outer-spin-button,
#orderQuantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#orderPerson {
    width: 70%;
    min-width: 70%;
    margin-left: 25px;
}

.form-field {
    display: flex;
    flex-direction: column;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.95em;
    transition: border-color 0.3s;
}

.form-field .autocomplete-wrapper {
    width: 100%;
}

.form-field .autocomplete-wrapper input {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.95em;
    transition: border-color 0.3s;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.form-field .autocomplete-wrapper input:focus {
    outline: none;
    border-color: #667eea;
}

.form-field textarea {
    resize: vertical;
    min-height: auto;
    height: calc(1.9em + 24px + 2px); /* Podwojona wysokość dla rows="2" */
    line-height: 1.5;
    overflow: hidden;
    box-sizing: border-box;
}

.form-comment-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) 1fr;
    gap: 8px 12px;
    align-items: start;
    margin-top: 10px;
    margin-bottom: 0;
}

.form-comment-row label {
    grid-column: 1;
    padding-top: 8px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    text-align: left;
}

.form-comment-field {
    grid-column: 2;
    width: 100%;
    min-width: 0;
}

/* Numer, data, wprowadził, status – jedna pozioma linia tuż pod komentarzem */
.form-order-meta-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 10px;
    margin-top: 2px;
}

.form-order-meta-row > label {
    color: #555;
    font-weight: 600;
    font-size: 0.95em;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
    padding-top: 0;
}

.form-order-meta-row > .form-field {
    flex: 0 0 auto;
    width: auto;
}

.form-order-meta-row #orderPerson {
    margin-left: 0;
    width: auto;
    min-width: 9em;
}

.form-order-meta-row #orderStatus {
    min-width: 10em;
}

.form-comment-field textarea {
    width: 100%;
    padding: 6px 8px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    /* Komentarz - większa czcionka (o ~50%) */
    font-size: 1.425em;
    transition: border-color 0.3s;
    resize: vertical;
    min-height: calc(1.9em + 24px + 2px);
    line-height: 1.5;
}

.form-comment-field textarea:focus {
    outline: none;
    border-color: #667eea;
}

.form-submit-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 1%;
}

.form-submit-row button {
    width: auto;
    min-width: 200px;
}

.form-submit-row .btn-add-order {
    width: auto;
    min-width: 140px;
}

.btn-clear-form {
    background: #dc3545;
    color: #000000;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.7em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    white-space: nowrap;
    cursor: pointer;
    min-width: 140px;
}

.btn-clear-form:hover {
    background: #c82333;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

.btn-clear-form:active {
    background: #c82333;
    color: #000000;
    transform: translateY(0);
}

/* Row-based form layout (for other forms) */
.form-group-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px 20px;
    align-items: start;
    margin-bottom: 20px;
}

.form-group-row-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
    justify-content: space-between;
}

.form-group-row-inline > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.form-group-row-inline > div label {
    font-weight: 600;
    color: #555;
    font-size: 1em;
    text-align: left;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
    min-height: auto;
    height: auto;
    line-height: 1.2;
    justify-content: flex-start;
    white-space: nowrap;
    display: block;
}

.form-group-row-inline > div select,
.form-group-row-inline > div input,
.form-group-row-inline > div .customer-select-wrapper {
    width: 100%;
    font-size: 1em;
    font-family: inherit;
}

.form-group-row-inline > div select,
.form-group-row-inline > div input[type="date"] {
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    min-height: 44px;
    box-sizing: border-box;
}

.form-group-row-inline > div .customer-select-display {
    min-height: 44px;
    padding: 12px;
    box-sizing: border-box;
}

.form-group-row label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 44px;
    color: #555;
    font-weight: 600;
    font-size: 1em;
    white-space: nowrap;
    text-align: right;
    padding-right: 15px;
    margin: 0;
}

.form-group-row:has(textarea) label {
    align-items: flex-start;
    padding-top: 12px;
    min-height: 80px;
}

.form-group-row input,
.form-group-row select,
.form-group-row textarea,
.form-group-row .autocomplete-wrapper {
    width: 100%;
}

.form-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.form-section {
    margin-bottom: 25px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.form-section h3 {
    margin-bottom: 15px;
    color: #333;
    font-size: 1.1em;
    font-weight: 600;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

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

.form-group-inline {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 600;
    font-size: 1em;
    order: 1;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s;
    order: 2;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: #667eea;
}

.form-group input[readonly] {
    background-color: #f8f9fa;
    cursor: not-allowed;
}

.form-group input[readonly]:focus {
    border-color: #e0e0e0;
}

.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.3s;
    order: 2;
}

.form-group select {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    background-color: white;
    cursor: pointer;
    transition: border-color 0.3s;
    order: 2;
}

#employeeSelect:not(.form-group-row-inline select) {
    max-width: 30ch;
    width: 30ch;
}

#assignmentDate:not(.form-group-row-inline input) {
    max-width: 30ch;
    width: 30ch;
}

.form-group-row-inline #employeeSelect,
.form-group-row-inline #assignmentDate {
    max-width: none;
    width: 100%;
}

/* Autocomplete Styles */
.autocomplete-wrapper {
    position: relative;
    width: 100%;
    order: 2;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 2px solid #667eea;
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-top: -2px;
    min-width: 350px;
    width: max-content;
    max-width: 500px;
}

.autocomplete-item {
    padding: 12px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background-color: #90EE90;
    color: #000;
}

.autocomplete-item strong {
    display: block;
    color: #333;
    margin-bottom: 4px;
}

.autocomplete-detail {
    display: block;
    font-size: 0.85em;
    color: #666;
    margin-top: 2px;
}

/* Search Container */
.search-container {
    margin-bottom: 20px;
}

.search-container .autocomplete-wrapper {
    max-width: 100%;
}

.search-container input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.search-container input:focus {
    outline: none;
    border-color: #667eea;
}

.btn-move {
    background: #667eea;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 24px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-move:hover:not(:disabled) {
    background: #5568d3;
}

.btn-move:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-primary);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    width: 100%;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-copy-last-order {
    background: #ff9800;
    color: #000000;
}

.btn-copy-last-order:hover {
    background: #f57c00;
}

.btn-copy-last-order:active {
    background: #f57c00;
}

/* Przycisk "Zapisz trasę" - zielony z czarnym tekstem */
.btn-save-route {
    background: #2ecc71 !important;
    color: #000000 !important;
}

.btn-save-route:hover {
    background: #27ae60 !important;
    color: #000000 !important;
}

.btn-save-route:active {
    background: #27ae60 !important;
    color: #000000 !important;
}

#toggleOrderNumberBtn {
    border-radius: 4px;
}

.customers-list {
    background: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

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

.customers-list h2 {
    color: #333;
    font-size: 1.8em;
    margin: 0;
}

.btn-print {
    background: #2ecc71;
    color: #000000;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-print:hover {
    background: #27ae60;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
}

.btn-print-selected {
    background: #3498db;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.6em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-print-selected:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}

.btn-delete-selected {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.6em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-delete-selected:hover {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

.btn-deselect-all {
    background: #95a5a6;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.6em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-deselect-all:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(149, 165, 166, 0.4);
}

.btn-show-selected {
    background: #9b59b6;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.6em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.btn-show-selected:hover {
    background: #8e44ad;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(155, 89, 182, 0.4);
}

#changeStatusContainer {
    display: flex;
    gap: 5px;
    align-items: center;
}

#bulkStatusSelect {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9em;
    min-width: 150px;
}

#changeStatusBtn {
    padding: 5px 10px;
    font-size: 0.9em;
    white-space: nowrap;
}

.btn-restore-selected {
    background: #2ecc71;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-restore-selected:hover:not(:disabled) {
    background: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
}

.btn-restore-selected:disabled {
    background: #95a5a6;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-delete-permanently {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-delete-permanently:hover:not(:disabled) {
    background: #c0392b;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
}

.btn-delete-permanently:disabled {
    background: #95a5a6;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-restore-small {
    background: #2ecc71;
    color: white;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75em;
    transition: background 0.3s;
    margin-right: 3px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-restore-small:hover {
    background: #27ae60;
}

.btn-print:active {
    transform: translateY(0);
}

.empty-message {
    text-align: center;
    color: #999;
    padding: 40px;
    font-style: italic;
}

.customer-card {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 10px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: transform 0.2s, box-shadow 0.2s;
    border-left: 4px solid #667eea;
}


.customer-card:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.customer-info {
    flex: 1;
}

.customer-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6px;
    gap: 15px;
}

.customer-name {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.customer-header-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.customer-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.customer-header .customer-buttons {
    margin-bottom: 0;
}

.customer-details {
    margin-top: 4px;
}

.customer-details ul {
    margin-top: 4px !important;
    padding-left: 20px;
}

.customer-details li {
    margin: 2px 0 !important;
    line-height: 1.3;
    font-size: 0.9em;
}

.customer-phone,
.customer-email,
.customer-address,
.customer-street {
    color: #666;
    font-size: 0.95em;
    margin-top: 6px;
    line-height: 1.4;
}

.btn-delete {
    background: #ff4757;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    white-space: nowrap;
}

.btn-delete:hover {
    background: #ff3838;
    transform: translateY(-1px);
}

.btn-add-order {
    background: #2ecc71;
    color: #000000;
    border: none;
    padding: 7px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.7em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    white-space: nowrap;
    display: inline-block;
    cursor: pointer;
}

.btn-add-order:hover {
    background: #27ae60;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(46, 204, 113, 0.3);
}

.btn-edit {
    background: #3498db;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    white-space: nowrap;
    cursor: pointer;
}

.btn-edit:hover {
    background: #2980b9;
    transform: translateY(-1px);
}

/* Przycisk Edytuj przy zapisanych trasach (strona Plan) – zielony */
.btn-edit-route {
    background: #27ae60;
    color: white;
}
.btn-edit-route:hover {
    background: #219a52;
}

/* Przycisk nawigacji "Zlecenia" (strona Plan) */
.btn-to-orders {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
}

.btn-to-orders:hover {
    background: #219a52;
    transform: none;
}

/* Przycisk nawigacji "Trasa" (strona Zlecenia) */
.btn-to-plan {
    background: #27ae60;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
    display: inline-block;
}

.btn-to-plan:hover {
    background: #219a52;
    transform: none;
}

/* Przeciąganie klientów na trasie (strona Plan) */
.route-drag-handle {
    color: #b38600 !important;
    background-color: #ffeb99;
    opacity: 1;
    display: inline-block;
    min-width: 1.2em;
    padding: 2px 4px;
    border-radius: 3px;
}
.route-customer-item.route-dragging {
    opacity: 0.5;
}
.route-customer-item.route-dragging .route-drag-handle {
    opacity: 1;
    color: #b38600 !important;
    background-color: #ffeb99;
}
.route-customer-item.route-drag-over {
    border-top: 2px solid #27ae60;
    margin-top: 2px;
}
.route-drop-placeholder {
    min-height: 28px;
}
.route-drop-placeholder.route-drag-over {
    border-color: #27ae60;
    background: rgba(39, 174, 96, 0.08);
    color: #219a52;
}

.btn-toggle-orders {
    background: #95a5a6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    white-space: nowrap;
    cursor: pointer;
}

.btn-toggle-orders:hover {
    background: #7f8c8d;
    transform: translateY(-1px);
}

.formula-order-numbers {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e6f0;
    font-size: 0.85em;
    color: #6c7a89;
    text-transform: lowercase;
}

.btn-email {
    background: #27ae60;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    white-space: nowrap;
    cursor: pointer;
}

.btn-email:hover {
    background: #229954;
    transform: translateY(-1px);
}

.btn-show-details {
    background: #9b59b6;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    white-space: nowrap;
}

.btn-show-details:hover {
    background: #8e44ad;
    transform: translateY(-1px);
}

.btn-cancel {
    background: #95a5a6;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin-left: 10px;
}

.btn-cancel:hover {
    background: #7f8c8d;
    transform: translateY(-2px);
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Admin Panel Styles */
.admin-section {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
}

.admin-section h2 {
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8em;
    border-bottom: 2px solid #667eea;
    padding-bottom: 10px;
}

.admin-card {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #667eea;
}

.admin-card h3 {
    color: #333;
    margin-bottom: 10px;
    font-size: 1.3em;
}

.admin-description {
    color: #666;
    margin-bottom: 20px;
    font-size: 0.95em;
}

.admin-form-group {
    margin-bottom: 15px;
}

.admin-form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-weight: 600;
    font-size: 1em;
}

.admin-form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    transition: border-color 0.3s;
}

.admin-form-group input:focus {
    outline: none;
    border-color: #667eea;
}

.status-message {
    margin-top: 15px;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    display: none;
}

.status-message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.status-message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    background: white;
    border-radius: 8px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
}

.info-item strong {
    color: #333;
}

.info-item span {
    color: #667eea;
    font-weight: 600;
}

.data-preview {
    margin-top: 10px;
}

.data-preview pre {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    font-size: 0.85em;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 1px solid #e0e0e0;
    max-height: 300px;
    overflow-y: auto;
}

/* Tabs Styles */
.tabs-container {
    margin-top: 20px;
}

.tabs-header {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e0e0e0;
}

.tab-button {
    background: transparent;
    border: none;
    padding: 12px 24px;
    font-size: 1em;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    margin-bottom: -2px;
}

.tab-button:hover {
    color: #667eea;
    background: #f8f9fa;
}

.tab-button.active {
    color: #667eea;
    border-bottom-color: #667eea;
    background: #f8f9fa;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Quote of the Day Styles */
.quote-of-the-day {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) auto;
    max-width: 1600px;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    border-left: 4px solid var(--color-primary);
    transition: box-shadow 0.3s ease;
}

.quote-of-the-day:hover {
    box-shadow: var(--shadow-md);
}

.quote-icon {
    font-size: 48px;
    line-height: 1;
    flex-shrink: 0;
}

.quote-content {
    flex: 1;
}

.quote-title {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--spacing-sm) 0;
}

.quote-text {
    font-size: 18px;
    font-weight: 400;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    padding: 0;
    border: none;
    font-style: italic;
    line-height: var(--line-height-normal);
}

.quote-author {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin: 0;
    text-align: right;
}

/* Menu Page Styles */
.menu-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    max-width: 1600px;
    margin: 0 auto;
}

.menu-card {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.menu-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.menu-icon {
    font-size: 56px;
    margin-bottom: var(--spacing-md);
    line-height: 1;
}

.menu-card h2 {
    color: var(--color-text-primary);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    margin: 0 0 var(--spacing-sm) 0;
}

.menu-card p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body);
    margin: 0 0 var(--spacing-md) 0;
    line-height: var(--line-height-normal);
    font-weight: 400;
}

.btn-menu {
    display: inline-block;
    background: var(--color-primary);
    color: white;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    transition: background 0.2s ease, transform 0.1s ease;
    border: none;
    cursor: pointer;
}

.btn-menu:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
}

.btn-menu:active {
    transform: translateY(0);
}

/* Navigation Button */
.nav-button-container {
    margin-bottom: 10px;
}

/* Page Header Actions */
.page-header-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.nav-left-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.nav-summary {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-summary-btn,
.btn-secondary.nav-summary-btn {
    background: #ffc107 !important;
    color: #000 !important;
    border: none !important;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-summary-btn:hover,
.btn-secondary.nav-summary-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 193, 7, 0.5);
    background: #ffb300 !important;
    color: #000 !important;
}

.nav-summary-btn:active,
.btn-secondary.nav-summary-btn:active {
    transform: translateY(0);
    background: #ffc107 !important;
    color: #000 !important;
}

.nav-summary-result {
    min-width: 180px;
    font-size: 0.85em;
    font-weight: 600;
    color: #2c3e50;
}

.nav-button-container {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-add-new {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    white-space: nowrap;
}

.btn-add-new:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.btn-back {
    display: inline-block;
    /* Płaski przycisk jak "Trasa" */
    background: #dc3545;
    color: #000000;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    border: none;
    transition: background 0.2s;
    box-shadow: none;
    transform: none;
    outline: none;
}

.btn-back:hover {
    background: #c82333;
    transform: none;
    box-shadow: none;
}

.btn-view-orders {
    display: inline-block;
    background: #9b59b6;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: background 0.3s, transform 0.2s;
    white-space: nowrap;
}

.btn-view-orders:hover {
    background: #8e44ad;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(155, 89, 182, 0.3);
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: 600;
}

.status-new {
    background: #3498db;
    color: white;
}

.status-in-progress {
    background: #f39c12;
    color: white;
}

.status-completed {
    background: #2ecc71;
    color: white;
}

.status-settled {
    background: #22b14c;
    color: white;
}

.status-done {
    background: #9b59b6;
    color: white;
}

.status-warning {
    background: #8b00ff;
    color: white;
}

.status-cancelled {
    background: #e74c3c;
    color: white;
}

/* Orders Table Styles */
.orders-table-wrapper {
    overflow-x: auto;
    margin-top: 10px;
    max-width: 100%;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    table-layout: auto;
}


.orders-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.orders-table th {
    padding: 4px 6px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 10;
    line-height: 1.3;
}

.orders-table td {
    padding: 4px 6px;
    border-bottom: 1px solid #000000;
    font-size: 0.85em;
    word-wrap: break-word;
    text-align: left;
    vertical-align: middle;
    line-height: 1.2;
}

.orders-table tbody td {
    height: 28px;
}

.orders-table tbody td .table-edit-input,
.orders-table tbody td .table-edit-select,
.orders-table tbody td .status-select {
    height: 24px;
    line-height: 1.2;
    box-sizing: border-box;
}

/* Czarny kolor tekstu dla kolumn od "Data" do "Wprowadził" */
.orders-table td:nth-child(3),
.orders-table td:nth-child(4),
.orders-table td:nth-child(5),
.orders-table td:nth-child(6),
.orders-table td:nth-child(7),
.orders-table td:nth-child(8),
.orders-table td:nth-child(9),
.orders-table td:nth-child(10),
.orders-table td:nth-child(11),
.orders-table td:nth-child(12),
.orders-table td:nth-child(13) {
    color: #000000 !important;
}

.orders-table th:nth-child(1),
.orders-table td:nth-child(1) {
    min-width: 40px;
    max-width: 40px;
    text-align: center;
}

.orders-table th:nth-child(2),
.orders-table td:nth-child(2) {
    min-width: 120px;
    max-width: 120px;
}

.orders-table th:nth-child(3),
.orders-table td:nth-child(3) {
    min-width: 100px;
    max-width: 100px;
}

.orders-table th:nth-child(4),
.orders-table td:nth-child(4) {
    min-width: 120px;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-table.price-visible th:nth-child(4),
.orders-table.price-visible td:nth-child(4) {
    min-width: 100px;
    max-width: 100px;
}

/* Towar - rozszerzony o 50% + dodatkowa przestrzeń z kolumny Dodatek */
/* Towar - szeroka kolumna */
.orders-table th:nth-child(6),
.orders-table td:nth-child(6) {
    min-width: 190px;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-table.price-visible th:nth-child(6),
.orders-table.price-visible td:nth-child(6) {
    min-width: 170px;
    max-width: 170px;
}

/* Dodatek - zmniejszona kolumna */
.orders-table th:nth-child(7),
.orders-table td:nth-child(7) {
    min-width: 50px;
    max-width: 50px;
    width: 50px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recipe-cell .cell-truncate {
    display: block;
    width: 50px;
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ilość */
.orders-table th:nth-child(8),
.orders-table td:nth-child(8) {
    min-width: 70px;
    max-width: 70px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* J.m */
.orders-table th:nth-child(9),
.orders-table td:nth-child(9) {
    min-width: 35px;
    max-width: 35px;
    text-align: center;
    white-space: nowrap;
    padding-left: 2px;
    padding-right: 2px;
}

/* Gloss - mały kontener na 5 znaków */
.orders-table th:nth-child(5),
.orders-table td:nth-child(5) {
    min-width: 50px;
    max-width: 50px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Baza - poszerzona kosztem kolumny Wprowadził */
.orders-table th:nth-child(10),
.orders-table td:nth-child(10) {
    min-width: 70px;
    max-width: 70px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Baza 2 - poszerzona kosztem kolumny Wprowadził */
.orders-table th:nth-child(11),
.orders-table td:nth-child(11) {
    min-width: 70px;
    max-width: 70px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cena - poszerzona kosztem kolumny Wprowadził */
.orders-table th:nth-child(12),
.orders-table td:nth-child(12) {
    min-width: 60px;
    max-width: 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
}

/* Wprowadził - zmniejszona, aby dać przestrzeń dla Baza i Cena */
.orders-table th:nth-child(13),
.orders-table td:nth-child(13) {
    min-width: 9ch;
    max-width: 9ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-table th:nth-child(14),
.orders-table td:nth-child(14) {
    min-width: 100px;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-table th:nth-child(15),
.orders-table td:nth-child(15) {
    min-width: 90px;
    max-width: 90px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-table th:nth-child(16),
.orders-table td:nth-child(16) {
    min-width: 70px;
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-table td:nth-child(14) input.table-edit-input,
.orders-table td:nth-child(15) input.table-edit-input,
.orders-table td:nth-child(16) input.table-edit-input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.9em;
    box-sizing: border-box;
}

.orders-table th:nth-child(17),
.orders-table td:nth-child(17) {
    min-width: 5ch;
    max-width: 5ch;
    width: 5ch;
    text-align: center;
    padding-right: 2px;
}

.orders-table th:nth-child(18),
.orders-table td:nth-child(18) {
    min-width: 110px;
    max-width: 110px;
    width: 110px;
    text-align: center;
    white-space: nowrap;
    padding: 4px 2px 4px 2px;
}

.orders-table td:nth-child(18) button {
    vertical-align: middle;
}

.orders-table th:nth-child(19),
.orders-table td:nth-child(19) {
    min-width: 140px;
    max-width: 140px;
    text-align: right;
    padding-right: 6px;
}

.orders-table tbody tr:hover {
    background-color: #ffeb3b;
}

.orders-table tbody tr:last-child td {
    border-bottom: 1px solid #000000;
}

/* Style dla zaznaczonych komórek do kopiowania */
.copyable-cell {
    position: relative;
    cursor: cell;
    user-select: none;
}

.copyable-cell.cell-selected {
    background-color: #b3d9ff !important;
    outline: 2px solid #0066cc;
    outline-offset: -2px;
}

.copyable-cell input,
.copyable-cell select {
    pointer-events: auto;
}

.copyable-cell.cell-selected input,
.copyable-cell.cell-selected select {
    background-color: #b3d9ff;
}

.btn-print-small {
    background: #2ecc71;
    color: white;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75em;
    transition: background 0.3s;
    margin-right: 3px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-print-small:hover {
    background: #27ae60;
}

.btn-kem-small {
    background: #9b59b6;
    color: white;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75em;
    transition: background 0.3s;
    margin-right: 3px;
    min-width: 32px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.btn-kem-small:hover {
    background: #8e44ad;
}

.btn-search-small {
    background: #f39c12;
    color: white;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75em;
    transition: background 0.3s;
    margin-right: 3px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-search-small:hover {
    background: #e67e22;
}

.btn-edit-small {
    background: #3498db;
    color: white;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75em;
    transition: background 0.3s;
    margin-right: 3px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-edit-small:hover {
    background: #2980b9;
}

.btn-delete-small {
    background: #ff4757;
    color: white;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75em;
    transition: background 0.3s;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-delete-small:hover {
    background: #ff3838;
}

.btn-duplicate-small {
    background: #3498db;
    color: white;
    border: none;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.75em;
    transition: background 0.3s;
    margin-right: 3px;
    min-width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-duplicate-small:hover {
    background: #2980b9;
}

/* Checkbox styles */
.order-checkbox,
#selectAllOrders {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.order-checkbox:hover,
#selectAllOrders:hover {
    transform: scale(1.1);
    transition: transform 0.2s;
}

/* Filter row styles */
.filter-row {
    background-color: #f8f9fa;
}

.filter-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.8em;
    box-sizing: border-box;
}

.filter-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* Styl dla kontenera wyszukiwania formuł - powiększony o 50% */
#searchFormula {
    width: 150% !important;
    padding: 9px 15px !important; /* 6px * 1.5 = 9px, 10px * 1.5 = 15px */
    font-size: 1.2em !important; /* 0.8em * 1.5 = 1.2em */
    min-height: 45px !important; /* zwiększona wysokość o 50% */
}

/* Żółte tło gdy kontener ma tekst */
#searchFormula:not(:placeholder-shown),
#searchFormula.has-text {
    background-color: #ffeb3b !important;
    border-color: #fbc02d !important;
}

/* Żółte tło dla pola nazwy formuły gdy ma tekst */
#formulaName.has-text {
    background-color: #ffeb3b !important;
    border-color: #fbc02d !important;
}

/* Styl dla przycisku kopiowania */
.btn-copy-formula {
    transition: background 0.3s, transform 0.2s;
}

.btn-copy-formula:hover {
    background: #27ae60 !important;
    transform: translateY(-1px);
}

/* Upewnij się, że select w filtrach ma width 100% */
select.filter-input {
    width: 100% !important;
    box-sizing: border-box;
}

#filterQuantity {
    width: 50% !important;
    box-sizing: border-box;
}

#filterCustomer {
    /* +30% szerokości względem poprzednich 80% (0.8 × 1.3 ≈ 1.04) */
    width: 104% !important;
    box-sizing: border-box;
}

/* Żółte tło, gdy w polu filtra Klient jest wpisany tekst (nie dla pola readonly/disabled) */
#filterCustomer:not(:placeholder-shown):not(:disabled):not(:read-only) {
    background-color: #ffeb3b !important;
    border-color: #fbc02d !important;
}

/* Towar – te same zasady co filtr Klient (szerokość + żółte tło przy wpisanym tekście) */
#filterProduct {
    width: 104% !important;
    box-sizing: border-box;
}

#filterProduct:not(:placeholder-shown):not(:disabled):not(:read-only) {
    background-color: #ffeb3b !important;
    border-color: #fbc02d !important;
}

#filterStatus {
    width: 70% !important;
    box-sizing: border-box;
}

.btn-clear-filters {
    background: #007bff;
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background 0.3s;
}

.btn-clear-filters:hover {
    background: #0056b3;
}

.btn-undo-order {
    cursor: pointer;
}
.btn-undo-order:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Status Select Styles */
.status-select {
    padding: 4px 4px;
    border: 2px solid;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.status-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.status-select.status-new {
    background-color: #3498db;
    color: white;
    border-color: #2980b9;
}

.status-select.status-new:hover {
    background-color: #2980b9;
}

.status-select.status-in-progress {
    background-color: #f39c12;
    color: white;
    border-color: #e67e22;
}

.status-select.status-in-progress:hover {
    background-color: #e67e22;
}

.status-select.status-completed {
    background-color: #2ecc71;
    color: white;
    border-color: #27ae60;
}

.status-select.status-completed:hover {
    background-color: #27ae60;
}

.status-select.status-settled {
    background-color: #22b14c;
    color: white;
    border-color: #1e9b3f;
}

.status-select.status-settled:hover {
    background-color: #1e9b3f;
}

.status-select.status-done {
    background-color: #9b59b6;
    color: white;
    border-color: #8e44ad;
}

.status-select.status-done:hover {
    background-color: #8e44ad;
}

.status-select.status-warning {
    background-color: #8b00ff;
    color: white;
    border-color: #7b00e0;
}

.status-select.status-warning:hover {
    background-color: #7b00e0;
}

.status-select.status-cancelled {
    background-color: #e74c3c;
    color: white;
    border-color: #c0392b;
}

.status-select.status-cancelled:hover {
    background-color: #c0392b;
}

.status-select.status-incomplete {
    background-color: #ff8c00;
    color: white;
    border-color: #e67e22;
}

.status-select.status-incomplete:hover {
    background-color: #e67e22;
}

/* Status Cell Colors */
.status-cell-new {
    background-color: rgba(52, 152, 219, 0.15) !important;
    color: #2980b9;
    font-weight: 500;
}

.status-cell-in-progress {
    background-color: rgba(243, 156, 18, 0.15) !important;
    color: #e67e22;
    font-weight: 500;
}

.status-cell-completed {
    background-color: rgba(46, 204, 113, 0.15) !important;
    color: #27ae60;
    font-weight: 500;
}

.status-cell-settled {
    background-color: rgba(34, 177, 76, 0.2) !important;
    color: #1e9b3f;
    font-weight: 500;
}

.status-cell-done {
    background-color: rgba(155, 89, 182, 0.15) !important;
    color: #8e44ad;
    font-weight: 500;
}

.status-cell-warning {
    background-color: rgba(139, 0, 255, 0.15) !important;
    color: #6a00cc;
    font-weight: 500;
}

.status-cell-cancelled {
    background-color: rgba(231, 76, 60, 0.15) !important;
    color: #c0392b;
    font-weight: 500;
}

.status-cell-incomplete {
    background-color: rgba(255, 140, 0, 0.25) !important;
    color: #e67e22;
    font-weight: 500;
}

.status-row-new:hover .status-cell-new {
    background-color: rgba(52, 152, 219, 0.25) !important;
}

.status-row-incomplete:hover .status-cell-incomplete {
    background-color: rgba(255, 140, 0, 0.35) !important;
}

/* Blue background for all cells from order number to T column (inclusive) when status is "Nowe" */
.status-row-new td:nth-child(2),
.status-row-new td:nth-child(3),
.status-row-new td:nth-child(4),
.status-row-new td:nth-child(5),
.status-row-new td:nth-child(6),
.status-row-new td:nth-child(7),
.status-row-new td:nth-child(8),
.status-row-new td:nth-child(9),
.status-row-new td:nth-child(10),
.status-row-new td:nth-child(11),
.status-row-new td:nth-child(12),
.status-row-new td:nth-child(13),
.status-row-new td:nth-child(14),
.status-row-new td:nth-child(15),
.status-row-new td:nth-child(16),
.status-row-new td:nth-child(17) {
    background-color: rgba(52, 152, 219, 0.7) !important;
    color: #1a4d7a;
    font-weight: 600;
}

.status-row-new:hover td:nth-child(2),
.status-row-new:hover td:nth-child(3),
.status-row-new:hover td:nth-child(4),
.status-row-new:hover td:nth-child(5),
.status-row-new:hover td:nth-child(6),
.status-row-new:hover td:nth-child(7),
.status-row-new:hover td:nth-child(8),
.status-row-new:hover td:nth-child(9),
.status-row-new:hover td:nth-child(10),
.status-row-new:hover td:nth-child(11),
.status-row-new:hover td:nth-child(12),
.status-row-new:hover td:nth-child(13),
.status-row-new:hover td:nth-child(14),
.status-row-new:hover td:nth-child(15),
.status-row-new:hover td:nth-child(16),
.status-row-new:hover td:nth-child(17) {
    background-color: rgba(52, 152, 219, 0.85) !important;
}

/* Blue background for inputs and selects in new status rows */
.status-row-new td:nth-child(14) input.table-edit-input,
.status-row-new td:nth-child(15) input.table-edit-input,
.status-row-new td:nth-child(16) input.table-edit-input,
.status-row-new td:nth-child(17) select.table-edit-select {
    background-color: rgba(52, 152, 219, 0.5) !important;
    border-color: rgba(52, 152, 219, 0.8) !important;
}

.status-row-in-progress:hover .status-cell-in-progress {
    background-color: rgba(243, 156, 18, 0.25) !important;
}

/* Intense pink background for all cells from order number to T column (inclusive) when status is "W trakcie" */
.status-row-in-progress td:nth-child(2),
.status-row-in-progress td:nth-child(3),
.status-row-in-progress td:nth-child(4),
.status-row-in-progress td:nth-child(5),
.status-row-in-progress td:nth-child(6),
.status-row-in-progress td:nth-child(7),
.status-row-in-progress td:nth-child(8),
.status-row-in-progress td:nth-child(9),
.status-row-in-progress td:nth-child(10),
.status-row-in-progress td:nth-child(11),
.status-row-in-progress td:nth-child(12),
.status-row-in-progress td:nth-child(13),
.status-row-in-progress td:nth-child(14),
.status-row-in-progress td:nth-child(15),
.status-row-in-progress td:nth-child(16),
.status-row-in-progress td:nth-child(17) {
    background-color: rgba(255, 20, 147, 0.7) !important;
    color: #8b0a50;
    font-weight: 600;
}

.status-row-in-progress:hover td:nth-child(2),
.status-row-in-progress:hover td:nth-child(3),
.status-row-in-progress:hover td:nth-child(4),
.status-row-in-progress:hover td:nth-child(5),
.status-row-in-progress:hover td:nth-child(6),
.status-row-in-progress:hover td:nth-child(7),
.status-row-in-progress:hover td:nth-child(8),
.status-row-in-progress:hover td:nth-child(9),
.status-row-in-progress:hover td:nth-child(10),
.status-row-in-progress:hover td:nth-child(11),
.status-row-in-progress:hover td:nth-child(12),
.status-row-in-progress:hover td:nth-child(13),
.status-row-in-progress:hover td:nth-child(14),
.status-row-in-progress:hover td:nth-child(15),
.status-row-in-progress:hover td:nth-child(16),
.status-row-in-progress:hover td:nth-child(17) {
    background-color: rgba(255, 20, 147, 0.85) !important;
}

/* Pink background for inputs and selects in in-progress status rows */
.status-row-in-progress td:nth-child(14) input.table-edit-input,
.status-row-in-progress td:nth-child(15) input.table-edit-input,
.status-row-in-progress td:nth-child(16) input.table-edit-input,
.status-row-in-progress td:nth-child(17) select.table-edit-select {
    background-color: rgba(255, 20, 147, 0.5) !important;
    border-color: rgba(255, 20, 147, 0.8) !important;
}

/* Intense yellow background for all cells from order number to T column (inclusive) when status is "Zrobione" */
.status-row-done td:nth-child(2),
.status-row-done td:nth-child(3),
.status-row-done td:nth-child(4),
.status-row-done td:nth-child(5),
.status-row-done td:nth-child(6),
.status-row-done td:nth-child(7),
.status-row-done td:nth-child(8),
.status-row-done td:nth-child(9),
.status-row-done td:nth-child(10),
.status-row-done td:nth-child(11),
.status-row-done td:nth-child(12),
.status-row-done td:nth-child(13),
.status-row-done td:nth-child(14),
.status-row-done td:nth-child(15),
.status-row-done td:nth-child(16),
.status-row-done td:nth-child(17) {
    background-color: rgba(255, 193, 7, 0.7) !important;
    color: #856404;
    font-weight: 600;
}

.status-row-done:hover td:nth-child(2),
.status-row-done:hover td:nth-child(3),
.status-row-done:hover td:nth-child(4),
.status-row-done:hover td:nth-child(5),
.status-row-done:hover td:nth-child(6),
.status-row-done:hover td:nth-child(7),
.status-row-done:hover td:nth-child(8),
.status-row-done:hover td:nth-child(9),
.status-row-done:hover td:nth-child(10),
.status-row-done:hover td:nth-child(11),
.status-row-done:hover td:nth-child(12),
.status-row-done:hover td:nth-child(13),
.status-row-done:hover td:nth-child(14),
.status-row-done:hover td:nth-child(15),
.status-row-done:hover td:nth-child(16),
.status-row-done:hover td:nth-child(17) {
    background-color: rgba(255, 193, 7, 0.85) !important;
}

/* Yellow background for inputs and selects in done status rows */
.status-row-done td:nth-child(14) input.table-edit-input,
.status-row-done td:nth-child(15) input.table-edit-input,
.status-row-done td:nth-child(16) input.table-edit-input,
.status-row-done td:nth-child(17) select.table-edit-select {
    background-color: rgba(255, 193, 7, 0.5) !important;
    border-color: rgba(255, 193, 7, 0.8) !important;
}

.status-row-warning:hover .status-cell-warning {
    background-color: rgba(139, 0, 255, 0.25) !important;
}

/* Intense purple background for all cells from order number to T column (inclusive) when status is "Uwaga" */
.status-row-warning td:nth-child(2),
.status-row-warning td:nth-child(3),
.status-row-warning td:nth-child(4),
.status-row-warning td:nth-child(5),
.status-row-warning td:nth-child(6),
.status-row-warning td:nth-child(7),
.status-row-warning td:nth-child(8),
.status-row-warning td:nth-child(9),
.status-row-warning td:nth-child(10),
.status-row-warning td:nth-child(11),
.status-row-warning td:nth-child(12),
.status-row-warning td:nth-child(13),
.status-row-warning td:nth-child(14),
.status-row-warning td:nth-child(15),
.status-row-warning td:nth-child(16),
.status-row-warning td:nth-child(17) {
    background-color: rgba(139, 0, 255, 0.7) !important;
    color: #4a0080;
    font-weight: 600;
}

.status-row-warning:hover td:nth-child(2),
.status-row-warning:hover td:nth-child(3),
.status-row-warning:hover td:nth-child(4),
.status-row-warning:hover td:nth-child(5),
.status-row-warning:hover td:nth-child(6),
.status-row-warning:hover td:nth-child(7),
.status-row-warning:hover td:nth-child(8),
.status-row-warning:hover td:nth-child(9),
.status-row-warning:hover td:nth-child(10),
.status-row-warning:hover td:nth-child(11),
.status-row-warning:hover td:nth-child(12),
.status-row-warning:hover td:nth-child(13),
.status-row-warning:hover td:nth-child(14),
.status-row-warning:hover td:nth-child(15),
.status-row-warning:hover td:nth-child(16),
.status-row-warning:hover td:nth-child(17) {
    background-color: rgba(139, 0, 255, 0.85) !important;
}

/* Purple background for inputs and selects in warning status rows */
.status-row-warning td:nth-child(14) input.table-edit-input,
.status-row-warning td:nth-child(15) input.table-edit-input,
.status-row-warning td:nth-child(16) input.table-edit-input,
.status-row-warning td:nth-child(17) select.table-edit-select {
    background-color: rgba(139, 0, 255, 0.5) !important;
    border-color: rgba(139, 0, 255, 0.8) !important;
}

.status-row-completed:hover .status-cell-completed {
    background-color: rgba(46, 204, 113, 0.25) !important;
}

/* Green background for all cells from order number to T column (inclusive) when status is "Zakończone" */
.status-row-completed td:nth-child(2),
.status-row-completed td:nth-child(3),
.status-row-completed td:nth-child(4),
.status-row-completed td:nth-child(5),
.status-row-completed td:nth-child(6),
.status-row-completed td:nth-child(7),
.status-row-completed td:nth-child(8),
.status-row-completed td:nth-child(9),
.status-row-completed td:nth-child(10),
.status-row-completed td:nth-child(11),
.status-row-completed td:nth-child(12),
.status-row-completed td:nth-child(13),
.status-row-completed td:nth-child(14),
.status-row-completed td:nth-child(15),
.status-row-completed td:nth-child(16),
.status-row-completed td:nth-child(17) {
    background-color: rgba(46, 204, 113, 0.7) !important;
    color: #0d5d2e;
    font-weight: 600;
}

.status-row-completed:hover td:nth-child(2),
.status-row-completed:hover td:nth-child(3),
.status-row-completed:hover td:nth-child(4),
.status-row-completed:hover td:nth-child(5),
.status-row-completed:hover td:nth-child(6),
.status-row-completed:hover td:nth-child(7),
.status-row-completed:hover td:nth-child(8),
.status-row-completed:hover td:nth-child(9),
.status-row-completed:hover td:nth-child(10),
.status-row-completed:hover td:nth-child(11),
.status-row-completed:hover td:nth-child(12),
.status-row-completed:hover td:nth-child(13),
.status-row-completed:hover td:nth-child(14),
.status-row-completed:hover td:nth-child(15),
.status-row-completed:hover td:nth-child(16),
.status-row-completed:hover td:nth-child(17) {
    background-color: rgba(46, 204, 113, 0.85) !important;
}

/* Green background for inputs and selects in completed status rows */
.status-row-completed td:nth-child(14) input.table-edit-input,
.status-row-completed td:nth-child(15) input.table-edit-input,
.status-row-completed td:nth-child(16) input.table-edit-input,
.status-row-completed td:nth-child(17) select.table-edit-select {
    background-color: rgba(46, 204, 113, 0.5) !important;
    border-color: rgba(46, 204, 113, 0.8) !important;
}

.status-row-settled:hover .status-cell-settled {
    background-color: rgba(34, 177, 76, 0.3) !important;
}

/* More intense green background for all cells from order number to T column (inclusive) when status is "Rozliczone" */
.status-row-settled td:nth-child(2),
.status-row-settled td:nth-child(3),
.status-row-settled td:nth-child(4),
.status-row-settled td:nth-child(5),
.status-row-settled td:nth-child(6),
.status-row-settled td:nth-child(7),
.status-row-settled td:nth-child(8),
.status-row-settled td:nth-child(9),
.status-row-settled td:nth-child(10),
.status-row-settled td:nth-child(11),
.status-row-settled td:nth-child(12),
.status-row-settled td:nth-child(13),
.status-row-settled td:nth-child(14),
.status-row-settled td:nth-child(15),
.status-row-settled td:nth-child(16),
.status-row-settled td:nth-child(17) {
    background-color: rgba(34, 177, 76, 0.75) !important;
    color: #0a4d1f;
    font-weight: 600;
}

.status-row-settled:hover td:nth-child(2),
.status-row-settled:hover td:nth-child(3),
.status-row-settled:hover td:nth-child(4),
.status-row-settled:hover td:nth-child(5),
.status-row-settled:hover td:nth-child(6),
.status-row-settled:hover td:nth-child(7),
.status-row-settled:hover td:nth-child(8),
.status-row-settled:hover td:nth-child(9),
.status-row-settled:hover td:nth-child(10),
.status-row-settled:hover td:nth-child(11),
.status-row-settled:hover td:nth-child(12),
.status-row-settled:hover td:nth-child(13),
.status-row-settled:hover td:nth-child(14),
.status-row-settled:hover td:nth-child(15),
.status-row-settled:hover td:nth-child(16),
.status-row-settled:hover td:nth-child(17) {
    background-color: rgba(34, 177, 76, 0.9) !important;
}

/* More intense green background for inputs and selects in settled status rows */
.status-row-settled td:nth-child(14) input.table-edit-input,
.status-row-settled td:nth-child(15) input.table-edit-input,
.status-row-settled td:nth-child(16) input.table-edit-input,
.status-row-settled td:nth-child(17) select.table-edit-select {
    background-color: rgba(34, 177, 76, 0.6) !important;
    border-color: rgba(34, 177, 76, 0.9) !important;
}

.status-row-done:hover .status-cell-done {
    background-color: rgba(155, 89, 182, 0.25) !important;
}

.status-row-cancelled:hover .status-cell-cancelled {
    background-color: rgba(231, 76, 60, 0.25) !important;
}

.orders-table td.comment-cell {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Chmurka (popover) przy kliknięciu komentarza – dostosowuje się do tekstu (szerokość i wysokość) */
.comment-popover {
    position: fixed;
    z-index: 10000;
    display: inline-block;
    max-width: min(400px, 90vw);
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 13px;
    line-height: 1.4;
    color: #333;
}
.comment-popover-text {
    display: block;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    min-height: 0;
}
.comment-popover-arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    transform: rotate(45deg);
}
.comment-popover-below .comment-popover-arrow {
    top: -6px;
    left: 20px;
}
.comment-popover-above .comment-popover-arrow {
    bottom: -6px;
    left: 20px;
    border-left: none;
    border-top: none;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

/* Kolory statusów dla kolumny komentarz */
.orders-table td.comment-cell.status-cell-new {
    background-color: rgba(52, 152, 219, 0.7) !important;
    color: #000000 !important;
    font-weight: 600;
}

.orders-table td.comment-cell.status-cell-in-progress {
    background-color: rgba(255, 20, 147, 0.7) !important;
    color: #000000 !important;
    font-weight: 600;
}

.orders-table td.comment-cell.status-cell-done {
    background-color: rgba(255, 193, 7, 0.7) !important;
    color: #000000 !important;
    font-weight: 600;
}

.orders-table td.comment-cell.status-cell-completed {
    background-color: rgba(46, 204, 113, 0.7) !important;
    color: #000000 !important;
    font-weight: 600;
}

.orders-table td.comment-cell.status-cell-settled {
    background-color: rgba(34, 177, 76, 0.75) !important;
    color: #000000 !important;
    font-weight: 600;
}

.orders-table td.comment-cell.status-cell-warning {
    background-color: rgba(139, 0, 255, 0.7) !important;
    color: #000000 !important;
    font-weight: 600;
}

.orders-table td.comment-cell.status-cell-cancelled {
    background-color: rgba(231, 76, 60, 0.15) !important;
    color: #000000 !important;
    font-weight: 500;
}

.orders-table td.product-cell {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
    max-width: 110px !important;
}

.orders-table td.product-cell.expanded {
    white-space: normal;
    overflow: visible;
    max-width: 400px !important;
}

.orders-table td.recipe-cell {
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s ease;
    max-width: 110px !important;
}

/* Skopiowane zlecenia - czerwony kolor tekstu */
.orders-table tr.copied-order td,
.orders-table tr.copied-order td * {
    color: #dc3545 !important;
}

.orders-table tr.copied-order td input,
.orders-table tr.copied-order td select,
.orders-table tr.copied-order td textarea {
    color: #dc3545 !important;
}

.orders-table tr.copied-order td.status-cell-new,
.orders-table tr.copied-order td.status-cell-in-progress,
.orders-table tr.copied-order td.status-cell-done,
.orders-table tr.copied-order td.status-cell-completed,
.orders-table tr.copied-order td.status-cell-settled,
.orders-table tr.copied-order td.status-cell-warning,
.orders-table tr.copied-order td.status-cell-cancelled,
.orders-table tr.copied-order td.status-cell-incomplete {
    color: #dc3545 !important;
}

.orders-table tr.copied-order:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

@media (max-width: 600px) {
    .page-header-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-add-new {
        width: 100%;
        text-align: center;
    }

    .nav-button-container {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-view-orders {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
        text-align: center;
    }

    .menu-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    .menu-card {
        padding: var(--spacing-lg);
        max-width: 100%;
    }

    .menu-icon {
        font-size: 48px;
    }

    .menu-card h2 {
        font-size: var(--font-size-h3);
    }

    .btn-menu {
        width: 100%;
        padding: 10px 20px;
    }
    
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .user-dropdown {
        width: 100%;
    }
    
    .user-dropdown-menu {
        right: auto;
        left: 0;
    }
    
    .quote-of-the-day {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--spacing-md);
        margin: var(--spacing-md) auto;
    }
    
    .quote-icon {
        font-size: 40px;
    }
    
    .quote-text {
        font-size: 16px;
    }
    
    .quote-author {
        text-align: center;
    }

    .list-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .btn-print {
        width: 100%;
        justify-content: center;
    }

    .customer-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .customer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .customer-header-actions {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    .btn-add-order,
    .btn-view-orders {
        width: 100%;
        text-align: center;
    }

    .customer-buttons {
        flex-direction: column;
    }

    .btn-show-details,
    .btn-edit,
    .btn-delete {
        width: 100%;
        text-align: center;
    }

    .form-actions {
        flex-direction: column;
    }

    .btn-cancel {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }

    .form-horizontal-grid {
        gap: 20px;
    }

    .form-main-fields {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .form-main-fields .form-stack--customer,
    .form-main-fields .form-stack--product {
        grid-column: span 1;
    }

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

    .form-comment-field {
        grid-column: 1;
    }

    .form-order-meta-row {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .form-group-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .form-group-row label {
        text-align: left;
        padding-right: 0;
        padding-top: 0;
        min-height: auto;
        margin-bottom: 5px;
        justify-content: flex-start;
    }

    .form-group-row:has(textarea) label {
        min-height: auto;
        padding-top: 0;
    }
}

/* Customer Select Dropdown Styles */
.customer-select-wrapper {
    position: relative;
    width: 100%;
}

.customer-select-display {
    width: 30ch;
    max-width: 30ch;
    padding: 8px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 40px;
    transition: border-color 0.3s;
}

.form-group-row-inline .customer-select-display {
    width: 100%;
    max-width: 100%;
}

.customer-select-display:hover {
    border-color: #667eea;
}

.customer-select-arrow {
    color: #666;
    font-size: 0.8em;
    transition: transform 0.3s;
}

.customer-select-wrapper.open .customer-select-arrow {
    transform: rotate(180deg);
}

.customer-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 50ch;
    max-width: 50ch;
    background: white;
    border: 2px solid #667eea;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 4px;
}

.customer-select-search {
    padding: 4px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.customer-select-search input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 0.85em;
    transition: border-color 0.3s;
}

.customer-select-search input:focus {
    outline: none;
    border-color: #667eea;
}

.customer-select-header {
    display: flex;
    gap: 6px;
    padding: 4px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
}

.customer-select-all-btn,
.customer-select-none-btn {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #667eea;
    border-radius: 4px;
    background: white;
    color: #667eea;
    font-size: 0.75em;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    max-width: 30ch;
}

.customer-select-all-btn:hover,
.customer-select-none-btn:hover {
    background: #667eea;
    color: white;
}

.customer-select-list {
    padding: 2px;
    max-height: 250px;
    overflow-y: auto;
}

.customer-select-item {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    transition: background 0.2s;
    border-radius: 3px;
    margin: 1px 0;
}

.customer-select-item:hover {
    background: #f0f0f0;
}

.customer-select-item input[type="checkbox"] {
    margin-right: auto;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.customer-select-item label {
    cursor: pointer;
    flex: 0;
    user-select: none;
    font-size: 0.9em;
    text-align: right;
    margin-left: auto;
}

.login-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body);
}

/* User dropdown menu */
.user-dropdown {
    position: relative;
    display: inline-block;
}

.user-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    transition: background 0.2s ease;
}

.user-dropdown-toggle:hover {
    background: #f0f0f0;
}

.user-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 200px;
    z-index: 1000;
    padding: var(--spacing-sm) 0;
}

.user-dropdown-menu.show {
    display: block;
}

.user-dropdown-item {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-body);
    transition: background 0.2s ease;
}

.user-dropdown-item:hover {
    background: #f8f9fa;
}

.user-dropdown-divider {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-sm) 0;
}

.login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
    backdrop-filter: blur(3px);
}

.login-modal {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px;
    max-width: 360px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.login-modal h2 {
    margin: 0 0 20px;
    text-align: center;
    color: #333;
}

.login-form .form-group-row {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.login-form label {
    margin-bottom: 6px;
    font-weight: 600;
    color: #555;
}

.login-form input {
    padding: 8px 10px;
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    font-size: 0.95em;
}

.login-error {
    min-height: 18px;
    font-size: 0.9em;
    color: #d93025;
    text-align: center;
    margin-bottom: 10px;
}

.btn-secondary {
    background: #6c757d;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    transition: background 0.2s ease, transform 0.1s ease;
}

.btn-secondary:hover {
    background: #5a6268;
    transform: translateY(-1px);
}

/* Przycisk Podziel - czerwony */
#divideFormulaBtn {
    background: #e74c3c !important;
    color: #ffffff !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    transition: background 0.3s, transform 0.2s !important;
}

#divideFormulaBtn:hover {
    background: #c0392b !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4) !important;
}

/* Przycisk Pomóż (Pomnóż) - zielony */
#helpFormulaBtn {
    background: #2ecc71 !important;
    color: #000000 !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    transition: background 0.3s, transform 0.2s !important;
}

#helpFormulaBtn:hover {
    background: #27ae60 !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4) !important;
}

/* Przycisk "Załóż formułę" - zielone tło i czarna czcionka */
#applyFormulaBtn {
    background: #2ecc71 !important;
    color: #000000 !important;
    border: none !important;
}

#applyFormulaBtn:hover {
    background: #27ae60 !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4);
}

.customer-note-banner {
    margin-bottom: 16px;
    background: #fff6d8;
    border-left: 4px solid #f1b100;
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.customer-note-content {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #705100;
    font-size: 0.95em;
}

.customer-note-close {
    margin-left: auto;
    background: transparent;
    border: none;
    color: #705100;
    font-size: 1.2em;
    cursor: pointer;
    line-height: 1;
    padding: 0 6px;
}

.customer-note-close:hover {
    color: #a16f00;
}

.customer-details .customer-note {
    margin-top: 8px;
    padding: 6px 10px;
    background: #f3f8ff;
    border-radius: 6px;
    color: #2d5d9f;
    font-size: 0.9em;
}

.formula-pigments-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #f9fbff;
    border: 1px solid #e0e6f0;
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
}

.formula-component-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: #f9fbff;
    border: 1px solid #e0e6f0;
    border-radius: 8px;
}

.formula-pigment-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e0e6f0;
    border-radius: 6px;
}

.formula-pigment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.formula-pigment-name {
    font-weight: 600;
    color: #2d5d9f;
}

.formula-pigment-meta {
    font-size: 0.85em;
    color: #6c7a89;
}

.formula-pigment-qty {
    display: flex;
    align-items: center;
    gap: 6px;
}

.formula-pigment-qty input {
    width: 90px;
    padding: 4px 6px;
    border: 1px solid #cfd6e3;
    border-radius: 4px;
    font-size: 0.9em;
}

.formula-pigment-unit {
    font-size: 0.85em;
    color: #6c7a89;
}

.formula-components {
    margin-top: 6px;
    padding: 8px;
    background: #f7f9ff;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.formula-component-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e0e6f0;
    border-radius: 6px;
}

.formula-component-row select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #cfd6e3;
    border-radius: 4px;
    font-size: 0.9em;
}

.formula-component-row input[type="number"] {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid #cfd6e3;
    border-radius: 4px;
    font-size: 0.9em;
    text-align: center;
    font-weight: bold;
}

.formula-component-row input[data-component-value] {
    width: 110px;
    padding: 6px 8px;
    border: 1px solid #cfd6e3;
    border-radius: 4px;
    font-size: 0.9em;
    text-align: center;
    font-weight: bold;
}

.formula-component-row input[data-component-amount] {
    text-align: center;
    font-weight: bold;
}

.btn-add-component {
    margin-top: 8px;
    background: #2ecc71 !important;
    color: #000000 !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 0.9em !important;
    font-weight: 600 !important;
    transition: background 0.3s, transform 0.2s !important;
}

.btn-add-component:hover {
    background: #27ae60 !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(46, 204, 113, 0.4) !important;
}

.btn-remove-component {
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.85em;
    transition: background 0.2s ease;
}

.btn-remove-component:hover {
    background: #c0392b;
}

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

.formula-section .form-submit-row {
    justify-content: center;
}

/* Przycisk Widok */
.btn-view {
    background: #dc3545 !important;
    color: #000000 !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    /* Płaski (bez "podskakiwania") */
    transition: background 0.2s !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

.btn-view:hover {
    background: #c82333 !important;
    color: #000000 !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-view:active {
    background: #c82333 !important;
    color: #000000 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Trasa: zielony kolor (override na #routeBtn) */
#routeBtn.btn-view {
    background: #27ae60 !important;
    color: #000000 !important;
}

#routeBtn.btn-view:hover {
    background: #219a52 !important;
    color: #000000 !important;
    transform: none !important;
    box-shadow: none !important;
}

#routeBtn.btn-view:active {
    background: #219a52 !important;
    color: #000000 !important;
    transform: none !important;
}

/* Menu rozwijane Widok */
.view-dropdown-container {
    position: relative;
}

.view-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 150px;
    margin-top: 5px;
}

.view-menu-item {
    display: block;
    width: 100%;
    padding: 10px 15px;
    text-align: left;
    background: white;
    border: none;
    cursor: pointer;
    font-size: 0.95em;
    color: #333;
    transition: background 0.2s;
}

.view-menu-item:hover {
    background: #f8f9fa;
}

.view-menu-item:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.view-menu-item:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Checkboxy dla Widoku 3 */
.column-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    margin: 2px 0;
}

.column-selector input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.column-selector label {
    cursor: pointer;
    user-select: none;
    font-size: 0.9em;
}

.column-selector-container {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    max-height: 300px;
    overflow-y: auto;
}

.column-selector-container h3 {
    margin-bottom: 10px;
    color: #333;
    font-size: 1.1em;
}

.column-selector-container button {
    padding: 10px 20px;
    font-size: 1em;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

.column-selector-container button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Tabela tras - kompaktowa */
#routesTableContainer {
    margin-bottom: 10px;
}

#routesTableContainer > div {
    font-size: 0.9em;
}

#routesTableContainer button {
    font-size: 0.85em;
    padding: 5px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

#routesTableContainer button:hover {
    background: #c82333 !important;
}