html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Fokus form/tombol: biarkan Bootstrap + tema Materio (border ungu, dll.).
   Override biru #258cfb dari template default membuat setiap klik terlihat seperti ring Tab. */

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Textarea di .form-floating: Bootstrap set height tetap pada semua .form-control,
   sehingga atribut HTML rows diabaikan. Pakai height: auto agar rows berlaku lagi. */
.form-floating > textarea.form-control {
  height: auto;
  min-height: calc(2.940725rem + 2px);
}


body {
    background: #f4f5fa !important;
}

.font-24px {
    font-size: 24px !important;
}

/* Menu action di dalam tabel scroll — tampil di atas baris lain */
.table-responsive .dropdown-menu {
  z-index: 1090;
}

.warehouse-map {
  height: 280px;
  width: 100%;
  z-index: 0;
}
.store-map {
    height: 280px;
    width: 100%;
    z-index: 0;
}
.modal .leaflet-container {
  z-index: 0;
}

.warehouse-map-readonly {
  cursor: default;
}
.store-map-readonly {
    cursor: default;
}

/* Loading skeleton untuk RequestData / AJAX */
.api-loading-host {
    position: relative;
}

.api-loading-host.is-loading {
    pointer-events: none;
}

.api-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 1050;
    border-radius: inherit;
}

.api-skeleton-overlay {
    display: flex;
    align-items: flex-start;
    justify-content: stretch;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.88);
    min-height: 8rem;
    overflow: hidden;
}

.api-skeleton-overlay-page {
    min-height: 60vh;
    padding: 1.25rem;
}

.api-skeleton-line,
.api-skeleton-cell {
    display: block;
    height: 0.75rem;
    border-radius: 0.375rem;
    background: linear-gradient(90deg, #e8e8ea 0%, #f4f4f6 45%, #e8e8ea 90%);
    background-size: 200% 100%;
    animation: api-skeleton-shimmer 1.35s ease-in-out infinite;
}

.api-skeleton-line-lg {
    height: 1rem;
}

.api-skeleton-line-title {
    height: 1.35rem;
}

.api-skeleton-line-input {
    height: 2.375rem;
    border-radius: 0.5rem;
}

.api-skeleton-w-25 { width: 25%; }
.api-skeleton-w-30 { width: 30%; }
.api-skeleton-w-35 { width: 35%; }
.api-skeleton-w-40 { width: 40%; }
.api-skeleton-w-50 { width: 50%; }
.api-skeleton-w-60 { width: 60%; }
.api-skeleton-w-75 { width: 75%; }
.api-skeleton-w-85 { width: 85%; }
.api-skeleton-w-90 { width: 90%; }

.api-skeleton-block .api-skeleton-line + .api-skeleton-line {
    margin-top: 0.65rem;
}

.api-skeleton-card {
    padding: 1rem 1.1rem;
    border: 1px solid rgba(58, 53, 65, 0.08);
    border-radius: 0.75rem;
    background: #fff;
}

.api-skeleton-card .api-skeleton-line + .api-skeleton-line {
    margin-top: 0.55rem;
}

.api-skeleton-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(58, 53, 65, 0.06);
}

.api-skeleton-table {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.api-skeleton-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: center;
}

.api-skeleton-row-head .api-skeleton-cell {
    height: 0.875rem;
    opacity: 0.85;
}

.api-skeleton-cell {
    height: 0.75rem;
    min-width: 0;
}

.api-skeleton-modal .api-skeleton-table .api-skeleton-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@keyframes api-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 767.98px) {
    .api-skeleton-meta {
        grid-template-columns: 1fr;
    }

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

/* SweetAlert2 (ConfirmMessage) & Toastify (ShowNotif) harus di atas modal Bootstrap (z-index 1090) */
.swal2-container {
    z-index: 1110 !important;
}

.toastify {
    z-index: 1110 !important;
}

/* Sidebar — lebar default Materio 16.25rem → 20rem */
:root {
    --layout-menu-width: 20rem;
}

#layout-menu.layout-menu,
.menu-vertical,
.menu-vertical .menu-block,
.menu-vertical .menu-inner > .menu-item,
.menu-collapsed:not(:hover) .menu-inner > .menu-header,
.menu-collapsed:not(:hover) .menu-block {
    width: var(--layout-menu-width);
}

#layout-menu.layout-menu {
    flex: 0 0 var(--layout-menu-width);
    max-width: var(--layout-menu-width);
}

@media (min-width: 1200px) {
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page,
    .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page {
        padding-left: var(--layout-menu-width);
    }

    .layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
    .layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
    .layout-menu-fixed-offcanvas.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
        left: var(--layout-menu-width);
    }

    .layout-footer-fixed:not(.layout-menu-collapsed) .layout-wrapper:not(.layout-without-menu) .content-footer {
        left: var(--layout-menu-width);
    }
}

.layout-navbar-fixed .layout-navbar.navbar-detached {
    width: calc(100% - calc(1.5rem * 2) - var(--layout-menu-width));
}

.layout-navbar-fixed.layout-menu-collapsed .layout-navbar.navbar-detached {
    width: calc(100% - calc(1.5rem * 2) - 4.25rem);
}

/* Data Barang Warehouse — list (Pendataan) */
.pendataan-info-banner {
    background-color: rgba(40, 167, 69, 0.08);
    border-color: rgba(40, 167, 69, 0.25);
    color: #2f6b3a;
}

.pendataan-card {
    border: 1px solid rgba(58, 53, 65, 0.12);
    border-radius: 0.75rem;
    border-left: 4px solid #28a745;
    transition: box-shadow .2s ease;
}

.pendataan-card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(58, 53, 65, 0.08);
}

.pendataan-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: rgba(40, 167, 69, 0.12);
    color: #28a745;
}

.pendataan-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(58, 53, 65, 0.04);
    border-radius: 0.5rem;
}

.pendataan-card-meta-label {
    display: block;
    font-size: 0.75rem;
    color: #89868d;
    margin-bottom: 0.15rem;
}

.pendataan-card-meta-value {
    font-size: 0.875rem;
    font-weight: 500;
    word-break: break-word;
}

.pendataan-card-note {
    font-size: 0.8125rem;
    color: #697a8d;
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 171, 0, 0.08);
    border-radius: 0.375rem;
    border-left: 3px solid #ffab00;
}

@media (max-width: 767.98px) {
    .pendataan-card-meta {
        grid-template-columns: 1fr;
    }
}

/* Data Barang Warehouse — detail (PendataanDetail) */
.pendataan-detail-info-banner {
    background-color: rgba(40, 167, 69, 0.08);
    border-color: rgba(40, 167, 69, 0.25);
    color: #2f6b3a;
}

.pendataan-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(58, 53, 65, 0.04);
    border-radius: 0.5rem;
    border-left: 4px solid #28a745;
}

.pendataan-detail-meta-label {
    display: block;
    font-size: 0.75rem;
    color: #89868d;
    margin-bottom: 0.15rem;
}

.pendataan-detail-meta-value {
    font-size: 0.9375rem;
    font-weight: 500;
    word-break: break-word;
}

.pendataan-step {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.375rem;
    background: #fff;
    border: 1px solid rgba(58, 53, 65, 0.1);
    height: 100%;
}

.pendataan-step.active {
    border-color: rgba(255, 171, 0, 0.45);
    background: rgba(255, 171, 0, 0.06);
}

.pendataan-step.done {
    border-color: rgba(40, 167, 69, 0.35);
    background: rgba(40, 167, 69, 0.05);
}

.pendataan-step-num {
    flex-shrink: 0;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #8c57ff;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pendataan-step.done .pendataan-step-num {
    background: #28a745;
}

.pendataan-step.active .pendataan-step-num {
    background: #ffab00;
    color: #3a3541;
}

.pendataan-save-note {
    font-size: 0.8125rem;
    color: #697a8d;
    padding: 0.65rem 0.85rem;
    background: rgba(140, 87, 255, 0.06);
    border-radius: 0.375rem;
    border-left: 3px solid #8c57ff;
}

.pendataan-lines-scroll {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

#pendataan-lines-table {
    min-width: 1100px;
}

#pendataan-lines-table th:first-child,
#pendataan-lines-table td:first-child,
.pendataan-variant-product-cell {
    white-space: normal;
}

#pendataan-lines-table tr.pendataan-row-matched > td {
    background-color: rgba(40, 167, 69, 0.12) !important;
}

#pendataan-lines-table tr.pendataan-row-matched .pendataan-barcode {
    border-color: #28a745;
    background-color: #f6fff8;
}

@media (max-width: 767.98px) {
    .pendataan-detail-meta {
        grid-template-columns: 1fr;
    }
}

/* Transfer Barang ke Store (BarangStore) */
.barang-store-info-banner {
    background-color: rgba(140, 87, 255, 0.08);
    border-color: rgba(140, 87, 255, 0.25);
    color: #5e4399;
}

.barang-store-stock-banner {
    background-color: rgba(3, 195, 236, 0.08);
    border-color: rgba(3, 195, 236, 0.25);
    color: #027a96;
}

.barang-store-route {
    padding: 0.5rem 0.75rem;
    background: rgba(58, 53, 65, 0.04);
    border-radius: 0.375rem;
    border-left: 3px solid #8c57ff;
}

.barang-store-route-arrow {
    color: #8c57ff;
}

.barang-store-item-card,
.barang-store-stock-card {
    border: 1px solid rgba(58, 53, 65, 0.12);
    border-radius: 0.75rem;
    transition: box-shadow .2s ease;
}

.barang-store-item-card {
    border-left: 4px solid #8c57ff;
}

.barang-store-item-card:hover,
.barang-store-stock-card:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(58, 53, 65, 0.08);
}

.barang-store-item-card.is-selected {
    border-left-color: #28a745;
    background: rgba(40, 167, 69, 0.04);
}

.barang-store-stock-card {
    border-left: 4px solid #03c3ec;
}

.barang-store-stock-card.is-low-stock {
    border-left-color: #ff4c51;
}

.barang-store-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.barang-store-card-icon.warehouse {
    background: rgba(140, 87, 255, 0.12);
    color: #8c57ff;
}

.barang-store-card-icon.store {
    background: rgba(3, 195, 236, 0.12);
    color: #03c3ec;
}

.barang-store-card-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: rgba(58, 53, 65, 0.04);
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

.barang-store-card-meta-label {
    display: block;
    font-size: 0.7rem;
    color: #89868d;
    margin-bottom: 0.1rem;
}

.barang-store-card-meta-value {
    font-weight: 500;
    word-break: break-word;
}

.barang-store-qty-wrap {
    min-width: 120px;
}

@media (max-width: 767.98px) {
    .barang-store-card-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#barang-store-tabs .nav-link {
    font-weight: 500;
}

#barang-store-tabs .nav-link:not(.active) {
    color: #697a8d;
}

/* Purchase Order — tabel items di modal */
#order-purchase-items-table .po-item-name {
    font-weight: 500;
    word-break: break-word;
}

.po-item-variant-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.po-item-variant-line {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.35;
}

.po-item-variant-label {
    flex-shrink: 0;
    color: #697a8d;
    min-width: 4.5rem;
}

.po-item-variant-sep {
    flex-shrink: 0;
    color: #a8aab4;
}

.po-item-variant-value {
    color: #3a3541;
    word-break: break-word;
}

#order-purchase-items-tfoot th {
    font-weight: 600;
}

/* Pendataan — upload gambar variant */
.pendataan-image-cell {
    min-width: 180px;
    vertical-align: top;
}

.pendataan-image-dropzone {
    border: 1.5px dashed rgba(140, 87, 255, 0.45);
    border-radius: 0.5rem;
    padding: 0.65rem 0.5rem;
    text-align: center;
    cursor: pointer;
    background: rgba(140, 87, 255, 0.04);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.pendataan-image-dropzone:hover,
.pendataan-image-dropzone.is-dragover {
    border-color: #8c57ff;
    background: rgba(140, 87, 255, 0.08);
}

.pendataan-image-dropzone-prompt {
    font-size: 0.75rem;
    color: #697a8d;
    line-height: 1.35;
    pointer-events: none;
}

.pendataan-image-dropzone-prompt i {
    font-size: 1.35rem;
    color: #8c57ff;
}

.pendataan-image-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pendataan-image-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem;
    border: 1px solid rgba(58, 53, 65, 0.1);
    border-radius: 0.375rem;
    background: #fff;
}

.pendataan-image-thumb {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border-radius: 0.35rem;
    flex-shrink: 0;
    border: 1px solid rgba(58, 53, 65, 0.08);
}

.pendataan-image-item-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.pendataan-image-display-label {
    font-size: 0.7rem;
    color: #697a8d;
    display: flex;
    align-items: center;
    white-space: nowrap;
}