/* ==========================================================================
   SHARED.CSS — Fulfillin Member
   Rule yang dipakai rata di banyak halaman (lintas menu), di-load global
   lewat layouts/sections/styles.blade.php. Jangan taruh CSS khusus 1 menu
   di sini — pakai {nama_menu}.css untuk itu.
   ========================================================================== */

/* ── Brand theme utilities (pelengkap dari override global di
   layouts/common_master.blade.php — yang di common_master sudah cover
   .btn-primary/.text-primary/.bg-primary dasar, ini yang belum) ── */
.bg-label-primary { background-color: rgba(200, 16, 46, 0.16) !important; color: #c8102e !important; }
.btn-primary { color: #fff !important; }
.btn-primary:hover { box-shadow: 0 0.125rem 0.25rem 0 rgba(200, 16, 46, 0.4) !important; }
.btn-outline-primary { color: #c8102e !important; border-color: #c8102e !important; }
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.show,
.show > .btn-outline-primary {
    background-color: #c8102e !important;
    color: #fff !important;
}
.dropdown-item:hover, .dropdown-item:focus { background-color: rgba(200, 16, 46, 0.08) !important; color: #c8102e !important; }
.dropdown-item.active, .dropdown-item:active { background-color: #c8102e !important; color: white !important; }
.form-select:focus, .form-control:focus { border-color: #c8102e !important; box-shadow: 0 0 0 0.15rem rgba(200, 16, 46, 0.1) !important; }

/* ── Flatpickr date-range Fulfillin red overrides ── */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #c8102e !important;
    border-color: #c8102e !important;
}

/* ── Form/layout helper umum (dipakai halaman create/edit/detail di banyak menu) ── */
.small-hint { font-size: 12px; color: #6b7280; }
.section-card { border: 1px solid #e9e9e9; border-radius: 12px; padding: 16px; background: #fcfcfc; }
/* Card yang di-stack vertikal (create/edit/detail: inbound_order & outbound)
   sebelumnya nempel tanpa jarak sama sekali — .section-card sendiri tidak
   pernah punya margin, dan blade-nya juga tidak menambahkan mb-*/mt-* manual
   di antara tiap card. Adjacent-sibling selector supaya cuma nambah jarak
   ANTAR card yang bertumpuk (bukan di atas card pertama atau bawah card
   terakhir dalam satu kolom). */
.section-card + .section-card { margin-top: 1.5rem; }
.required-label::after { content: ' *'; color: #dc2626; font-weight: 600; }
.detail-label { font-size: 12px; color: #6b7280; margin-bottom: 2px; }
.detail-value { font-size: 14px; font-weight: 500; color: #111827; }

/* ── Photo upload slot (dipakai form create/edit produk & inbound) ── */
.photo-slot {
    width: 110px;
    height: 110px;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    background: #f9fafb;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color .2s;
}
.photo-slot:hover { border-color: #c8102e; }
.photo-slot.has-image { border-style: solid; border-color: #d1d5db; }
.photo-slot input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; width: 100%; height: 100%;
}
.photo-slot img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1;
}
.photo-slot .slot-placeholder {
    width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; color: #9ca3af; font-size: 11px; text-align: center; padding: 6px;
}
.photo-slot.has-image .slot-placeholder { display: none; }
.photo-slot .slot-remove {
    position: absolute; top: 4px; right: 4px; z-index: 4; width: 22px; height: 22px; border-radius: 999px;
    background: rgba(220, 38, 38, .9); color: #fff; border: 0; font-size: 11px; line-height: 1;
    display: none; align-items: center; justify-content: center; cursor: pointer;
}
.photo-slot.has-image .slot-remove { display: flex; }
.photo-slot .badge-utama {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
    background: rgba(200, 16, 46, .9); color: #fff; font-size: 10px; font-weight: 600;
    text-align: center; padding: 2px 0; letter-spacing: .3px;
}

/* ── Item picker card (dipakai form create/edit inbound & outbound) ── */
.product-item-card { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.item-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 12px 16px; background: #f9fafb; border-bottom: 1px solid #e5e7eb;
}
.item-meta { flex: 1; }
.item-meta code { color: #dc2626; background: #fee2e2; padding: 2px 6px; border-radius: 4px; font-size: 12px; }
.picker-row { cursor: pointer; transition: background .2s; }
.picker-row:hover { background: #f9fafb; }
.picker-row.already-added { opacity: 0.5; pointer-events: none; background: #f3f4f6; }

/* ── Pola halaman detail (timeline status + info grid), dipakai
   inbound_order_detail & outbound_detail. Warna per-status (mis.
   .status-badge.pending) tetap didefinisikan di css per-menu masing-masing
   karena daftar status beda antara inbound & outbound. ── */
.status-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px;
    border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .3px;
}
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.info-item label {
    font-size: 11px; font-weight: 600; color: #9ca3af; text-transform: uppercase;
    letter-spacing: .5px; display: block; margin-bottom: 3px;
}
.info-item .val { font-size: 14px; color: #111827; word-break: break-word; }
.status-timeline { display: flex; align-items: center; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.tl-step { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; }
.tl-step:not(:last-child)::after {
    content: ''; position: absolute; top: 17px; left: 50%; width: 100%; height: 2px;
    background: #e5e7eb; z-index: 0;
}
.tl-step.done:not(:last-child)::after { background: #c8102e; }
.tl-step.active:not(:last-child)::after { background: #e5e7eb; }
.tl-dot {
    width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; border: 3px solid #e5e7eb;
    display: flex; align-items: center; justify-content: center; z-index: 1; font-size: 12px; color: #9ca3af;
}
.tl-step.done .tl-dot { background: #c8102e; border-color: #c8102e; color: #fff; }
.tl-step.active .tl-dot { background: #fff; border-color: #c8102e; color: #c8102e; }
.tl-label { font-size: 10px; margin-top: 5px; color: #6b7280; text-align: center; font-weight: 500; }
.tl-step.done .tl-label { color: #c8102e; font-weight: 600; }
.tl-step.active .tl-label { color: #111827; font-weight: 700; }
#itemTable tbody tr td { vertical-align: middle; }
.action-bar { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Navbar breadcrumb (dipakai navbar_partial.blade.php, tampil di semua halaman) ── */
.breadcrumb-item.active { font-weight: 500; color: var(--bs-primary); }

/* ── Pagination (dipakai components/pagination.blade.php, <x-pagination>) ──
   SENGAJA taruh di sini (global), BUKAN di dalam file component itu sendiri,
   karena beberapa halaman (mis. outbound) me-refresh isi wrapper pagination
   via JS innerHTML setelah filter/aksi AJAX — kalau CSS-nya ikut ditulis
   sebagai <style> inline di dalam component, CSS itu ikut kehapus begitu
   innerHTML diganti, dan pagination hasil render JS jadi tanpa styling. ── */
.x-pagination { display: flex; align-items: center; gap: 4px; margin: 0; }
.xp-btn { display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 6px; border: 1px solid #d9d9d9; background: #fff; color: #555; text-decoration: none; font-size: 14px; transition: 0.2s; cursor: pointer; }
.xp-btn:hover:not(.xp-disabled) { background: #f0f0f0; border-color: #c8102e; color: #c8102e; text-decoration: none; }
.xp-btn.active, .xp-page-input { border-color: #c8102e; color: #c8102e; font-weight: 600; }
.xp-disabled { background: #f5f5f5; color: #aaa; cursor: not-allowed; border-color: #e8e8e8; }
.xp-page-input { width: 45px; height: 32px; text-align: center; border-radius: 6px; border: 1px solid #c8102e; outline: none; -moz-appearance: textfield; }
.xp-page-input::-webkit-outer-spin-button, .xp-page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.xp-ellipsis { padding: 0 4px; color: #999; }

/* ════════════════════════════════════════════════════════════════════
   MODE GELAP — komponen shared (halaman create/edit/detail inbound,
   outbound, produk). Hanya menimpa tampilan saat [data-theme="dark"];
   layout & mode terang TIDAK berubah. Token --dash-* dari member-shell.css.
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] .section-card {
    background: var(--dash-raise);
    border-color: var(--dash-line);
}
[data-theme="dark"] .small-hint,
[data-theme="dark"] .detail-label { color: var(--dash-muted); }
[data-theme="dark"] .detail-value { color: var(--dash-ink); }
/* Info grid detail (outbound_detail, dsb.) — .val dasar di atas masih
   hardcoded #111827 (hitam) sehingga tidak terbaca di mode gelap (mis.
   Ekspedisi/Kurir, Metode Pickup). Paksa ikut tema; inbound detail sudah
   punya override scoped .inbound-detail yang menang (spesifisitas lebih
   tinggi), jadi tidak bentrok. */
[data-theme="dark"] .info-item label { color: var(--dash-muted); }
/* .val disamakan dengan value Marketplace (kelas .text-dark → --dash-ink)
   supaya seluruh value info grid sama cerah/terbaca di mode gelap. */
[data-theme="dark"] .info-item .val { color: var(--dash-ink); }
[data-theme="dark"] .info-item .val code {
    background: var(--dash-brand-tint);
    color: var(--dash-brand);
    padding: .1rem .4rem;
    border-radius: 6px;
    font-size: .78rem;
}
/* Timeline status (outbound_detail) — .tl-label.active di atas hardcoded
   #111827 (hitam) di mode gelap; .tl-dot/.tl-step warna lama #e5e7eb/#c8102e
   ikut diselaraskan ke token. Inbound detail sudah di-override scoped di
   inbound_order.css (spesifisitas lebih tinggi, tetap menang). */
[data-theme="dark"] .status-timeline .tl-step:not(:last-child)::after { background: var(--dash-line-strong); }
[data-theme="dark"] .tl-step.done:not(:last-child)::after { background: var(--dash-brand); }
[data-theme="dark"] .tl-step.active:not(:last-child)::after { background: var(--dash-line-strong); }
[data-theme="dark"] .tl-dot { background: var(--dash-raise); border-color: var(--dash-line-strong); color: var(--dash-muted); }
[data-theme="dark"] .tl-step.done .tl-dot { background: var(--dash-brand); border-color: var(--dash-brand); color: #fff; }
[data-theme="dark"] .tl-step.active .tl-dot { background: var(--dash-surface); border-color: var(--dash-brand); color: var(--dash-brand); }
[data-theme="dark"] .tl-label { color: var(--dash-muted); }
[data-theme="dark"] .tl-step.done .tl-label { color: var(--dash-brand); }
[data-theme="dark"] .tl-step.active .tl-label { color: var(--dash-ink); }
[data-theme="dark"] .photo-slot {
    background: var(--dash-raise);
    border-color: var(--dash-line-strong);
}
[data-theme="dark"] .photo-slot:hover { border-color: var(--dash-brand); }
[data-theme="dark"] .photo-slot.has-image { border-color: var(--dash-line-strong); }
[data-theme="dark"] .photo-slot .slot-placeholder { color: var(--dash-muted); }
[data-theme="dark"] .product-item-card {
    background: var(--dash-surface);
    border-color: var(--dash-line);
}
[data-theme="dark"] .item-header {
    background: var(--dash-raise);
    border-bottom-color: var(--dash-line);
}
[data-theme="dark"] .item-header .item-title,
[data-theme="dark"] .item-header .item-meta b { color: var(--dash-ink); }
[data-theme="dark"] .table-light {
    --bs-table-bg: var(--dash-raise);
    --bs-table-color: var(--dash-ink-soft);
    --bs-table-striped-bg: var(--dash-raise);
}