/* ==========================================================================
   ld-theme.css — Tema POSLD "Opsi A: Terang & Rapi"
   Fase 1 redesign. Dimuat PALING AKHIR di layouts/main.php, sesudah
   style.css (INSPINIA) supaya bisa menimpa seperlunya.

   CARA MEMATIKAN TEMA (kembali ke tampilan lama):
   hapus kelas "ld-theme" dari <body> di protected/views/layouts/main.php.
   Semua aturan di bawah di-scope ke .ld-theme, jadi satu baris itu cukup —
   tidak perlu menghapus <link> atau me-revert apa pun.

   Struktur berkas:
     1. Token         — warna, tipografi, jarak, radius
     2. Dasar         — body, tipografi, tautan, fokus
     3. Kerangka      — sidebar, topbar, isi halaman
     4. Komponen      — tombol, kartu, tabel, form, modal, pill, kartu angka
     5. Pola interaksi— kerangka muat, state kosong, state gagal, notifikasi
   ========================================================================== */

/* ---------- 1. Token ---------------------------------------------------- */

.ld-theme {
    /* permukaan */
    --ld-bg: #F7F6F3;
    --ld-surface: #FFFFFF;
    --ld-surface-2: #F0EDE7;
    --ld-nav: #2A231C;
    --ld-nav-ink: #E8E0D5;

    /* teks */
    --ld-ink: #1F1D19;
    --ld-ink-2: #54503F;
    --ld-muted: #8A8478;
    --ld-line: #E4E0D8;

    /* aksen — cokelat LD */
    --ld-accent: #7A4A21;
    --ld-accent-ink: #FFFFFF;
    --ld-accent-soft: #F2E6D9;

    /* status */
    --ld-ok: #2C7A57;
    --ld-ok-soft: #E3F1E9;
    --ld-warn: #9A6B14;
    --ld-warn-soft: #F8EDD8;
    --ld-crit: #A83A30;
    --ld-crit-soft: #F8E4E1;

    /* bentuk & jarak */
    --ld-radius: 8px;
    --ld-radius-sm: 6px;
    --ld-pad: 18px;
    --ld-tap: 36px;

    /* skala tipografi */
    --ld-fs: 13.5px;
    --ld-fs-sm: 12.5px;
    --ld-fs-xs: 11px;
    --ld-fs-h1: 20px;
    --ld-fs-h2: 16px;

    --ld-font: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
    --ld-display: "Archivo", "Segoe UI", system-ui, sans-serif;
    --ld-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}

/* Tablet showroom: target sentuh diperbesar, teks sedikit naik.
   ponytail: satu breakpoint saja — desktop dan tablet, bukan ponsel. */
@media (max-width: 1024px) {
    .ld-theme {
        --ld-tap: 44px;
        --ld-fs: 14.5px;
        --ld-fs-sm: 13px;
        --ld-pad: 16px;
    }
}

/* ---------- 2. Dasar ---------------------------------------------------- */

.ld-theme,
.ld-theme body {
    font-family: var(--ld-font);
    font-size: var(--ld-fs);
    color: var(--ld-ink);
    -webkit-font-smoothing: antialiased;
}

.ld-theme #page-wrapper,
.ld-theme .gray-bg { background: var(--ld-bg); }

.ld-theme h1, .ld-theme h2, .ld-theme h3,
.ld-theme h4, .ld-theme h5 {
    font-family: var(--ld-display);
    color: var(--ld-ink);
    font-weight: 600;
    letter-spacing: -0.01em;
}
.ld-theme h1 { font-size: var(--ld-fs-h1); }
.ld-theme h2 { font-size: var(--ld-fs-h2); }

/* Tautan biasa saja. Anchor yang jadi komponen (.ld-tile, .ld-btn, .ld-chip,
   .ld-back) mengatur warnanya sendiri — tanpa :not() aturan ini lebih
   spesifik daripada kelas komponennya dan menimpanya.
   .btn juga dikecualikan: <a class="btn ..."> harus ikut warna tombolnya,
   bukan cokelat-di-atas-cokelat. */
.ld-theme a:not([class*="ld-"]):not(.btn) { color: var(--ld-accent); }
.ld-theme a:not([class*="ld-"]):not(.btn):hover,
.ld-theme a:not([class*="ld-"]):not(.btn):focus { color: #5E381A; }

.ld-theme :focus-visible {
    outline: 2px solid var(--ld-accent);
    outline-offset: 2px;
}

/* Angka selalu rata kolom — harga, stok, jumlah. */
.ld-num, .ld-theme .ld-table td.ld-num {
    font-variant-numeric: tabular-nums;
    font-family: var(--ld-mono);
    text-align: right;
}

/* ---------- 3. Kerangka ------------------------------------------------- */

/* Sidebar INSPINIA — warna diganti, struktur dibiarkan. */
/* Di-scope ke sidebar — tanpa ini .nav-tabs di isi halaman ikut gelap. */
.ld-theme .navbar-default.navbar-static-side,
.ld-theme .navbar-static-side .nav > li > a,
.ld-theme .nav-header { background: var(--ld-nav); }

.ld-theme .navbar-static-side .nav > li > a {
    color: var(--ld-nav-ink);
    opacity: 0.78;
    font-size: var(--ld-fs-sm);
}
.ld-theme .navbar-static-side .nav > li > a:hover,
.ld-theme .navbar-static-side .nav > li > a:focus {
    opacity: 1;
    background: rgba(255, 255, 255, 0.07);
    color: var(--ld-nav-ink);
}
.ld-theme .navbar-static-side .nav > li.active > a,
.ld-theme .navbar-static-side .nav > li.active {
    background: var(--ld-accent);
    color: var(--ld-accent-ink);
    opacity: 1;
    font-weight: 600;
}

/* Nama & jabatan pengguna di atas menu */
.ld-theme .nav-header a,
.ld-theme .nav-header a:hover,
.ld-theme .nav-header a:focus { color: var(--ld-nav-ink); }
.ld-theme .nav-header .text-muted { color: var(--ld-nav-ink) !important; opacity: 0.65; }

/* Tab di isi halaman: tab mati tetap terbaca, tab aktif bertanda cokelat. */
.ld-theme .nav-tabs > li > a { color: var(--ld-ink-2); opacity: 1; }
.ld-theme .nav-tabs > li > a:hover,
.ld-theme .nav-tabs > li > a:focus { color: var(--ld-accent); background: var(--ld-accent-soft); }
.ld-theme .nav-tabs > li > a.active:hover { background: var(--ld-surface); }
.ld-theme .nav-tabs > li > a.active,
.ld-theme .nav-tabs > li.active > a { color: var(--ld-accent); font-weight: 600; }

/* Judul kelompok menu: Jual / Kirim / Tagih / Kelola */
.ld-theme .ld-navgroup {
    font-family: var(--ld-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ld-muted);
    padding: 16px 20px 5px;
}

.ld-theme .navbar-static-top {
    background: var(--ld-surface);
    border-bottom: 1px solid var(--ld-line);
}

.ld-theme .ld-page {
    padding: var(--ld-pad);
    display: flex;
    flex-direction: column;
    gap: var(--ld-pad);
}

.ld-head {
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}
.ld-head h1 { margin: 0; }
.ld-head p { margin: 3px 0 0; color: var(--ld-muted); font-size: var(--ld-fs-sm); }
.ld-head .ld-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* ---------- 4. Komponen ------------------------------------------------- */

/* Tombol */
.ld-btn {
    border: 1px solid var(--ld-line);
    background: var(--ld-surface);
    color: var(--ld-ink);
    border-radius: var(--ld-radius);
    padding: 0 14px;
    height: var(--ld-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: var(--ld-fs-sm);
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
}
.ld-btn:hover { border-color: var(--ld-muted); text-decoration: none; }
.ld-btn:disabled, .ld-btn.ld-disabled { opacity: 0.45; cursor: not-allowed; }
.ld-btn-primary {
    background: var(--ld-accent);
    color: var(--ld-accent-ink);
    border-color: var(--ld-accent);
    font-weight: 600;
}
.ld-btn-primary:hover { filter: brightness(1.06); color: var(--ld-accent-ink); }
.ld-btn-danger { background: var(--ld-crit); color: #fff; border-color: var(--ld-crit); }
.ld-btn-block { width: 100%; }

/* Tombol Bootstrap yang sudah ada ikut warna baru, supaya halaman yang
   belum di-reskin tidak terlihat asing di sebelah komponen ld-. */
.ld-theme .btn-primary,
.ld-theme .btn-primary:hover,
.ld-theme .btn-primary:focus {
    background-color: var(--ld-accent);
    border-color: var(--ld-accent);
    color: var(--ld-accent-ink);
}

/* Kartu */
.ld-card {
    background: var(--ld-surface);
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
}
.ld-card-pad { padding: var(--ld-pad); }
.ld-card-head {
    padding: 13px 15px;
    border-bottom: 1px solid var(--ld-line);
    font-family: var(--ld-display);
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Kartu angka */
.ld-stats {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}
.ld-stat {
    background: var(--ld-surface);
    border: 1px solid var(--ld-line);
    border-left: 3px solid var(--ld-accent);
    border-radius: var(--ld-radius);
    padding: 13px 15px;
}
.ld-stat .ld-stat-l {
    display: block;
    font-size: var(--ld-fs-xs);
    color: var(--ld-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ld-stat .ld-stat-v {
    display: block;
    margin-top: 3px;
    font-family: var(--ld-display);
    font-size: 23px;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.ld-stat .ld-stat-d { font-size: var(--ld-fs-sm); margin-top: 2px; color: var(--ld-muted); }
.ld-stat .ld-stat-d.ld-up { color: var(--ld-ok); }
.ld-stat .ld-stat-d.ld-down { color: var(--ld-crit); }

/* Tabel */
.ld-tablewrap {
    overflow-x: auto;
    background: var(--ld-surface);
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
}
table.ld-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ld-fs-sm);
}
.ld-table th, .ld-table td {
    text-align: left;
    padding: 10px 13px;
    border-bottom: 1px solid var(--ld-line);
}
.ld-table th {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ld-muted);
    background: var(--ld-surface-2);
    font-weight: 600;
    white-space: nowrap;
}
.ld-table tbody tr:last-child td { border-bottom: 0; }
.ld-table tbody tr:hover td { background: var(--ld-surface-2); }
.ld-table td small { display: block; color: var(--ld-muted); font-size: var(--ld-fs-xs); margin-top: 1px; }

/* Form */
.ld-field label {
    display: block;
    font-size: var(--ld-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ld-muted);
    margin-bottom: 4px;
}
.ld-field input, .ld-field select, .ld-field textarea,
.ld-theme .form-control {
    width: 100%;
    min-height: var(--ld-tap);
    border: 1px solid var(--ld-line);
    background: var(--ld-surface);
    color: var(--ld-ink);
    border-radius: var(--ld-radius-sm);
    padding: 0 10px;
    font: inherit;
    font-size: var(--ld-fs-sm);
}
.ld-field textarea, .ld-theme textarea.form-control { padding: 8px 10px; }
.ld-theme .form-control:focus {
    border-color: var(--ld-accent);
    box-shadow: none;
}

.ld-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ld-surface);
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    padding: 0 12px;
    height: var(--ld-tap);
    min-width: 210px;
    max-width: 340px;
    flex: 1;
}
.ld-search input { border: 0; background: none; outline: none; font: inherit; font-size: var(--ld-fs-sm); width: 100%; min-height: 0; }

/* Pill status */
.ld-pill {
    display: inline-block;
    font-size: var(--ld-fs-xs);
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 20px;
    white-space: nowrap;
}
.ld-pill-ok { background: var(--ld-ok-soft); color: var(--ld-ok); }
.ld-pill-warn { background: var(--ld-warn-soft); color: var(--ld-warn); }
.ld-pill-crit { background: var(--ld-crit-soft); color: var(--ld-crit); }
.ld-pill-mute { background: var(--ld-surface-2); color: var(--ld-muted); }

/* Chip filter berjumlah */
.ld-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.ld-chip {
    background: var(--ld-surface);
    border: 1px solid var(--ld-line);
    color: var(--ld-ink-2);
    border-radius: 20px;
    padding: 0 13px;
    height: calc(var(--ld-tap) - 4px);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--ld-fs-sm);
    cursor: pointer;
    text-decoration: none;
}
.ld-chip:hover { border-color: var(--ld-muted); text-decoration: none; }
.ld-chip.ld-on { background: var(--ld-accent); border-color: var(--ld-accent); color: var(--ld-accent-ink); font-weight: 600; }
.ld-chip .ld-n { font-size: var(--ld-fs-xs); opacity: 0.7; }

/* Badge source (LD / SOLO / lainnya) */
.ld-src {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ld-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--ld-accent-soft);
    color: var(--ld-accent);
    border: 1px solid rgba(122, 74, 33, 0.35);
}
.ld-src-alt { background: var(--ld-ok-soft); color: var(--ld-ok); border-color: rgba(44, 122, 87, 0.35); }

/* Banner / alert */
.ld-alert {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    border-radius: var(--ld-radius);
    padding: 11px 14px;
    font-size: var(--ld-fs-sm);
    line-height: 1.5;
    border: 1px solid;
}
.ld-alert b { display: block; margin-bottom: 2px; }
.ld-alert .ld-alert-act { margin-left: auto; white-space: nowrap; text-decoration: underline; font-weight: 600; color: inherit; }
.ld-alert-info { background: var(--ld-accent-soft); color: var(--ld-accent); border-color: rgba(122, 74, 33, 0.3); }
.ld-alert-ok { background: var(--ld-ok-soft); color: var(--ld-ok); border-color: rgba(44, 122, 87, 0.4); }
.ld-alert-warn { background: var(--ld-warn-soft); color: var(--ld-warn); border-color: rgba(154, 107, 20, 0.4); }
.ld-alert-crit { background: var(--ld-crit-soft); color: var(--ld-crit); border-color: rgba(168, 58, 48, 0.4); }

/* Modal — INSPINIA/Bootstrap tetap dipakai, hanya dirapikan. */
.ld-theme .modal-content {
    border-radius: var(--ld-radius);
    border: 1px solid var(--ld-line);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.13);
}
.ld-theme .modal-header, .ld-theme .modal-footer { border-color: var(--ld-line); }
.ld-theme .modal-title { font-family: var(--ld-display); font-size: 15px; font-weight: 600; }

/* ---------- 4b. Portal (pilih cabang, pilih sales, login) --------------
   Tiga halaman ini berdiri sendiri — punya <html> sendiri, tidak lewat
   layouts/main.php — jadi masing-masing memuat ld-theme.css dan memasang
   kelas ld-theme di body-nya sendiri. */

.ld-portal {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    padding: 40px 24px;
    background: var(--ld-bg);
}
.ld-portal-logo { text-align: center; max-width: 520px; width: 100%; }
.ld-portal-logo img { width: 100%; height: auto; }

.ld-portal-body { width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 16px; }

.ld-tiles {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    width: 100%;
}
.ld-tile {
    background: var(--ld-surface);
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-align: center;
    min-height: 150px;
    color: var(--ld-ink-2);
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s;
}
.ld-tile:hover, .ld-tile:focus {
    border-color: var(--ld-accent);
    transform: translateY(-2px);
    color: var(--ld-ink);
    text-decoration: none;
}
.ld-tile .fa { font-size: 38px; color: var(--ld-muted); }
.ld-tile-logo { max-height: 45px; max-width: 100%; width: auto; }
.ld-tile-photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.ld-tile-name {
    font-family: var(--ld-display);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}
.ld-tile-name small { display: block; font-weight: 400; color: var(--ld-muted); font-size: var(--ld-fs-sm); margin-top: 2px; }

.ld-portal-foot { font-size: var(--ld-fs-sm); color: var(--ld-muted); text-align: center; }

.ld-back {
    /* Sejajar tepi kiri konten portal, bukan tepi layar. */
    width: 100%;
    max-width: 680px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ld-ink-2);
    text-decoration: none;
    font-size: var(--ld-fs-sm);
}
.ld-back:hover { color: var(--ld-accent); text-decoration: none; }

/* Kartu login: satu orang, satu kolom sandi. */
.ld-login {
    background: var(--ld-surface);
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    padding: 30px 26px;
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.ld-login-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.ld-login-name { font-family: var(--ld-display); font-size: 19px; font-weight: 600; }
.ld-login form { width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* Kolom sandi dengan tombol mata di dalamnya. */
.ld-pass { position: relative; width: 100%; }
.ld-pass input {
    width: 100%;
    height: var(--ld-tap);
    border: 1px solid var(--ld-line);
    border-radius: var(--ld-radius);
    background: var(--ld-surface);
    color: var(--ld-ink);
    padding: 0 40px 0 12px;
    font: inherit;
    font-size: var(--ld-fs-sm);
    text-align: center;
}
.ld-pass input:focus { border-color: var(--ld-accent); outline: none; }
.ld-pass .ld-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ld-muted);
    cursor: pointer;
}
.ld-pass .ld-eye:hover { color: var(--ld-ink); }
.ld-login .errorMessage { color: var(--ld-crit); font-size: var(--ld-fs-sm); }

/* ---------- 5. Pola interaksi ------------------------------------------- */

/* Kerangka muat (skeleton) — dipakai saat menunggu AJAX, menggantikan
   spinner penuh layar supaya posisi isi tidak melompat. */
.ld-skel {
    background: linear-gradient(90deg, var(--ld-surface-2) 25%, #E7E3DB 37%, var(--ld-surface-2) 63%);
    background-size: 400% 100%;
    animation: ld-shimmer 1.3s ease-in-out infinite;
    border-radius: var(--ld-radius-sm);
    min-height: 12px;
}
.ld-skel-line { height: 12px; margin-bottom: 8px; }
.ld-skel-line:last-child { width: 60%; margin-bottom: 0; }
.ld-skel-card { height: 190px; }
@keyframes ld-shimmer {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .ld-skel { animation: none; }
}

/* State kosong & state gagal */
.ld-empty {
    padding: 44px 20px;
    text-align: center;
    color: var(--ld-muted);
}
.ld-empty b {
    display: block;
    color: var(--ld-ink);
    font-family: var(--ld-display);
    font-size: 15px;
    margin-bottom: 4px;
}
.ld-empty p { margin: 0 auto 14px; max-width: 44ch; font-size: var(--ld-fs-sm); line-height: 1.55; }
.ld-empty .fa { font-size: 34px; opacity: 0.35; margin-bottom: 10px; display: block; }
.ld-fail b { color: var(--ld-crit); }

/* Notifikasi + tombol Batalkan.
   ponytail: toastr sudah terpasang di layout — pakai itu, jangan tulis
   sistem notifikasi baru. CSS di sini hanya menyelaraskan warnanya. */
.ld-theme #toast-container > div {
    border-radius: var(--ld-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    opacity: 1;
    font-family: var(--ld-font);
    font-size: var(--ld-fs-sm);
}
.ld-theme #toast-container > .toast-success { background-color: var(--ld-ok); }
.ld-theme #toast-container > .toast-error { background-color: var(--ld-crit); }
.ld-theme #toast-container > .toast-warning { background-color: var(--ld-warn); }
.ld-theme #toast-container > .toast-info { background-color: var(--ld-accent); }
.ld-theme .ld-undo {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    color: #fff;
    font-weight: 600;
    font-size: var(--ld-fs-xs);
    cursor: pointer;
    text-decoration: none;
}
.ld-theme .ld-undo:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }

/* Utilitas kecil yang dipakai berulang, supaya tidak lahir lagi sebagai
   style="" inline di view. */
.ld-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ld-col { display: flex; flex-direction: column; gap: 10px; }
.ld-push { margin-left: auto; }
.ld-muted { color: var(--ld-muted); }
.ld-mono { font-family: var(--ld-mono); }
.ld-hide { display: none !important; }

/* Cetak: sidebar dan tombol tidak ikut tercetak. */
@media print {
    .ld-theme .navbar-static-side,
    .ld-theme .navbar-static-top,
    .ld-btn, .ld-chips { display: none !important; }
    .ld-theme #page-wrapper { margin: 0 !important; }
}