/* General styles */
html,
body {
    height: 100%;
    margin: 0;
    font-family: "Poppins", sans-serif; /* Use modern font */
}

body {
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
}

footer {
    background-color: #f8f9fa;
    padding: 10px 0;
    text-align: center;
    margin-top: auto; /* Push footer to the bottom */
}

footer a {
    color: #f0246c; /* Change link color to pink */
    text-decoration: none; /* Remove underline if desired */
}

footer a:hover {
    text-decoration: underline; /* Add underline on hover (optional) */
}

table {
    font-size: 0.95rem;
    color: #333;
}

.table {
    border: 1px solid #dee2e6;
    font-size: 0.85rem; /* Adjust the value as needed */
}

.table th {
    background-color: #f8f9fa;
    color: #495057;
    text-align: center;
    white-space: normal; /* Enable text wrapping */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

/* Optionally reduce the padding for table cells */
.table td,
.table th {
    padding: 6px; /* Adjust for tighter spacing */
}

.fa {
    margin-left: 5px; /* Add spacing for icons */
}

/* Constrain the main content width */
.main-content {
    max-width: 1600px; /* Adjust the value to your needs */
    margin: 0 auto; /* Center horizontally */
}

/* Override Bootstrap primary color */
:root {
    --bs-primary: #f0246c;
}

.btn-primary {
    background-color: #f0246c !important;
    border-color: #f0246c !important;
}

.btn-primary:hover {
    background-color: #d01f5f !important;
    border-color: #c01e56 !important;
}

.icon-custom {
    color: #f0246c; /* Custom pink color for the icons */
}

.icon-custom:hover {
    color: #d01f5f; /* Slightly darker pink on hover (optional) */
}

.bootstrap-table .search {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.bootstrap-table .search input {
    width: 50%;
    max-width: 600px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.bootstrap-table .fixed-table-toolbar {
    justify-content: space-between;
}

/* Minimal and simplified autocomplete dropdown styling */
.autocomplete-items {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    font-size: 1rem;
    color: #212121;
    border-bottom: 1px solid #ccc;
}

.autocomplete-items div:hover,
.autocomplete-active {
    background-color: #eee;
}

/* ===== 50 × 20 mm label ===================================== */
/* The outer “.label” container represents the physical 50×20 mm sticker. */
.label {
    width: 50mm; /* Exactly 50 mm wide on screen/print. */
    height: 20mm; /* Exactly 20 mm tall on screen/print. */
    display: flex; /* Use flexbox to lay out children in a row. */
    align-items: center; /* Vertically center all immediate children. */
    border: 1px solid #333; /* Outline the label so we see its edges. */
    box-sizing: border-box; /* Include border in width/height calculations. */
    padding: 0; /* Remove any internal padding so children start flush. */
    background: white;
}

/* -- vertical price strip (rotated text) -------------------- */
/* This block handles the left-hand price, rotated 90°. */
.label .price {
    flex: 0 0 1mm;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
    transform-origin: center;
    font: bold 8pt/1 Arial, sans-serif;
    white-space: nowrap;
    margin-left: 0;
}

/* -- QR block (≈13 mm) --------------------------------------- */
.label .qr {
    flex: 0 0 15mm;
    padding-top: 0.3mm;
    padding-bottom: 0.3mm;
    margin-left: 0;
}

.label .qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* -- Reference + Description -------------------------------- */
/* The “.info” section takes up whatever space remains. */
.label .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0.5mm 0.8mm;
}

/* Style for the product reference line */
.label .info .ref {
    font-weight: bold;
    font-size: 7pt;
    line-height: 1;
}

/* Style for the product description line(s) */
.label .info .desc {
    font-size: 6pt;
    line-height: 1;
}

/* ===== scaled thumbnail inside off-canvas ================== */
/* When previewing in the off-canvas, shrink the whole label by 50%. */
#labelPreview.scaled {
    transform: scale(1);
    transform-origin: top left;
}

/* ===== full‐modal upscaling ================================= */
#fullLabelModal .modal-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
}

/* ── Make the white “sheet” collapse to content ── */
#fullLabelModal .modal-content {
    background-color: transparent !important;
    border: none;
    padding: 0;
    overflow: visible;
}

/* ── No inner scrolling or caps ── */
#fullLabelModal .modal-body {
    padding: 0;
    overflow: visible;
}

/* ── Blow up your 50×20 mm canvas around its center ── */
#fullLabelModal #fullLabelPreview.amplified {
    width: 50mm;
    height: 20mm;
    transform: scale(4);
    transform-origin: center center;
}

#labelPreviewContainer {
    cursor: pointer;
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: bold;
    color: rgb(240, 36, 108);
    background: rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    z-index: 10;
    text-align: center;
}

@media print {
    body * {
        visibility: hidden;
    }

    #labelPreviewContainer,
    #labelPreviewContainer * {
        visibility: visible;
    }

    #labelPreviewContainer {
        position: absolute;
        top: 0;
        left: 0;
    }

    @page {
        size: 50mm 20mm;
        margin: 0;
    }
}

/* =========================================================
   Product modals UX pass
   ========================================================= */

/* ---------- General modal polish ---------- */
#editFullProductModal .modal-dialog,
#createProductModal .modal-dialog {
    max-width: 1320px;
}

#editFullProductModal .modal-content,
#createProductModal .modal-content {
    border-radius: 14px;
    overflow: hidden;
}

#editFullProductModal .modal-header,
#createProductModal .modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e9ecef;
    background: #fff;
}

#editFullProductModal .modal-body,
#createProductModal .modal-body {
    padding: 1rem 1.25rem 1.1rem;
}

#editFullProductModal .modal-footer,
#createProductModal .modal-footer {
    padding: 0.9rem 1.25rem 1rem;
    border-top: 1px solid #e9ecef;
}

#editFullProductModal .modal-title,
#createProductModal .modal-title {
    letter-spacing: 0.2px;
}

/* ---------- Top image / summary ---------- */
#editFullProductImagePreview {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    background: #fff;
}

#editFullProductModal .border.rounded.bg-white.shadow-sm {
    min-height: 190px !important;
}

/* ---------- Accordion visual hierarchy ---------- */
#editFullProductModal .accordion-item,
#createProductModal .accordion-item {
    border: 1px solid #e9ecef;
    border-radius: 12px !important;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: none;
}

#editFullProductModal .accordion-button,
#createProductModal .accordion-button {
    font-weight: 600;
    background: #f8f9fa;
    color: #212529;
    padding: 0.9rem 1rem;
    box-shadow: none !important;
}

#editFullProductModal .accordion-button:not(.collapsed),
#createProductModal .accordion-button:not(.collapsed) {
    background: #f3f5f7;
    color: #111827;
}

#editFullProductModal .accordion-button:focus,
#createProductModal .accordion-button:focus {
    box-shadow: none;
    border-color: #dee2e6;
}

#editFullProductModal .accordion-body,
#createProductModal .accordion-body {
    padding: 1rem 1rem 0.95rem;
    background: #fff;
}

/* ---------- Labels / inputs / selects ---------- */
#editFullProductModal .form-label,
#createProductModal .form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.35rem;
}

#editFullProductModal .form-control,
#editFullProductModal .form-select,
#createProductModal .form-control,
#createProductModal .form-select {
    min-height: 42px;
    border-radius: 10px;
}

#editFullProductModal textarea.form-control,
#createProductModal textarea.form-control {
    min-height: auto;
    resize: vertical;
}

#editFullProductModal textarea#editFullProductName,
#createProductModal textarea#createProductName {
    min-height: 70px;
}

#editFullProductModal textarea#editFullProductShortName,
#createProductModal textarea#createProductShortName {
    min-height: 44px;
}

#editFullProductModal textarea#editFullProductShortDescription,
#createProductModal textarea#createProductShortDescription {
    min-height: 86px;
}

#editFullProductModal textarea#editFullProductLongDescription,
#createProductModal textarea#createProductLongDescription {
    min-height: 110px;
}

#editFullProductModal textarea#editFullProductComment,
#createProductModal textarea#createProductComment {
    min-height: 72px;
}

/* readonly fields */
#editFullProductModal input[readonly],
#editFullProductModal textarea[readonly],
#createProductModal input[readonly],
#createProductModal textarea[readonly] {
    background-color: #f8f9fa;
}

/* ---------- Better spacing in modal rows ---------- */
#editFullProductModal .row.g-3,
#createProductModal .row.g-3 {
    --bs-gutter-y: 0.8rem;
}

#editFullProductModal .mb-3,
#createProductModal .mb-3 {
    margin-bottom: 0.8rem !important;
}

/* ---------- Brand searchable field ---------- */
#createProductBrandSearch {
    padding-right: 2.25rem;
    background-image: linear-gradient(45deg, transparent 50%, #6c757d 50%),
        linear-gradient(135deg, #6c757d 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* ---------- Numeric / logistics fields ---------- */
#editFullProductQtyPerBox,
#editFullProductQtyPerPallet,
#editFullProductMinimumSellingQuantity,
#editFullProductSellingQuantityStep,
#editFullProductUnitLengthMm,
#editFullProductUnitWidthMm,
#editFullProductUnitHeightMm,
#editFullProductUnitNetWeightKg,
#editFullProductUnitGrossWeightKg,
#createProductQtyPerBox,
#createProductQtyPerPallet,
#createProductMinimumSellingQuantity,
#createProductSellingQuantityStep,
#createProductUnitLengthMm,
#createProductUnitWidthMm,
#createProductUnitHeightMm,
#createProductUnitNetWeightKg,
#createProductUnitGrossWeightKg {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

/* ---------- Switch alignment ---------- */
#editFullProductModal .form-check.form-switch,
#createProductModal .form-check.form-switch {
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding-left: 2.5rem;
    margin-bottom: 0;
}

#editFullProductModal .form-check.form-switch .form-check-input,
#createProductModal .form-check.form-switch .form-check-input {
    margin-left: -2.5rem;
    margin-top: 0;
}

/* ---------- Table inside stock locations ---------- */
#productLocationsBody td {
    vertical-align: middle;
}

#editFullProductModal table.table-sm td,
#editFullProductModal table.table-sm th {
    padding: 0.5rem 0.55rem;
}

/* ---------- Product list table polish ---------- */
#productsTable td,
#productsTable th {
    vertical-align: middle !important;
}

#productsTable .fw-semibold {
    line-height: 1.2;
}

#productsTable .small.text-muted,
#productsTable .text-muted.small {
    line-height: 1.1;
}

#productsTable img {
    background: #fff;
    border-radius: 6px;
    padding: 2px;
}

#productsTable .btn {
    white-space: nowrap;
}

#productsTable .text-start {
    min-width: 180px;
}

#productsTable .text-start .fw-semibold,
#productsTable .text-start .text-muted.small {
    word-break: break-word;
}

#productsTable .bootstrap-table .table {
    margin-bottom: 0;
}

/* ---------- Toolbar controls ---------- */
.btn-group[aria-label="Prices or Margins"] .btn {
    min-width: 108px;
}

#toggleExtraDetailsBtn {
    white-space: nowrap;
}

/* Better toolbar wrapping */
#productsSection .card-body > .d-flex.flex-wrap.justify-content-between.align-items-center.mb-3 {
    gap: 12px;
}

#productsSection .form-check.form-switch {
    margin-bottom: 0;
}

/* Category filters */
#categoryLevel1,
#categoryLevel2,
#categoryLevel3 {
    min-width: 180px;
}

/* ---------- Small UX helpers ---------- */
#nameSuggestionWrapper .alert,
#shortnameSuggestionWrapper .alert,
#createNameSanitizedWrapper .alert {
    border-radius: 10px;
}

#editFullProductModal .text-muted,
#createProductModal .text-muted {
    color: #6c757d !important;
}

/* ---------- Better spacing on product page ---------- */
#productsSection .card,
#documentsSection .card {
    border-radius: 12px;
    overflow: hidden;
}

#productsSection .card-header h5,
#documentsSection .card-header h5 {
    margin-bottom: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    #editFullProductModal .modal-body,
    #createProductModal .modal-body {
        padding: 0.9rem 1rem 1rem;
    }

    #editFullProductModal .accordion-body,
    #createProductModal .accordion-body {
        padding: 0.9rem 0.9rem 0.85rem;
    }

    #productsTable .text-start {
        min-width: 140px;
    }

    .btn-group[aria-label="Prices or Margins"] .btn {
        min-width: auto;
    }
}

@media (max-width: 767.98px) {
    #editFullProductModal .modal-header,
    #createProductModal .modal-header,
    #editFullProductModal .modal-footer,
    #createProductModal .modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    #editFullProductModal .form-control,
    #editFullProductModal .form-select,
    #createProductModal .form-control,
    #createProductModal .form-select {
        min-height: 40px;
    }

    #productsSection .d-flex.flex-wrap.align-items-center.gap-3,
    #productsSection .d-flex.flex-wrap.align-items-center.gap-2 {
        gap: 8px !important;
    }

    #productsTable img {
        max-width: 72px !important;
        max-height: 72px !important;
    }
}

/* Legacy ERP consultation banner */
:root {
    --legacy-readonly-banner-height: 30px;
}

body.legacy-readonly-mode {
    box-sizing: border-box;
    padding-top: var(--legacy-readonly-banner-height);
}

.legacy-readonly-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    height: var(--legacy-readonly-banner-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: var(--flacto-secondary, #aa81f3);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-align: center;
    box-shadow: 0 1px 4px rgba(49, 58, 70, 0.18);
}

body.legacy-readonly-mode .app-topbar {
    top: var(--legacy-readonly-banner-height);
}

body.legacy-readonly-mode .sidenav-menu {
    top: var(--legacy-readonly-banner-height);
}

body.legacy-readonly-mode .auth-bg.min-vh-100 {
    min-height: calc(100vh - var(--legacy-readonly-banner-height)) !important;
}

@media (max-width: 575.98px) {
    :root {
        --legacy-readonly-banner-height: 34px;
    }

    .legacy-readonly-banner {
        padding: 0 10px;
        font-size: 0.72rem;
    }
}