/* =========================================================
   0. VARIABEL WARNA GLOBAL
   ========================================================= */
/* --gut-blue / --gut-blue-dark / --gut-blue-soft dipakai di banyak tempat
   di file ini (tab dashboard, kartu ringkasan, dll) tapi sebelumnya TIDAK
   PERNAH didefinisikan di mana pun -- akibatnya browser menganggap nilainya
   invalid dan mengabaikan aturan yang memakainya (mis. background warna tab
   aktif di Dashboard jadi tidak muncul, sehingga teksnya jadi putih di atas
   putih / tidak kelihatan). Didefinisikan di :root supaya berlaku global,
   memakai warna aksen yang sama persis dengan yang sudah dipakai di modal
   rincian perintah kerja & halaman login (#4f7cff / #3a63e0). */
:root {
    --gut-blue: #4f7cff;
    --gut-blue-dark: #3a63e0;
    --gut-blue-soft: rgba(79, 124, 255, .16);
}

/* =========================================================
   1. FIX ICON LOGIN & KOTAK LOGIN
   ========================================================= */
.login-card {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    box-shadow: 0 8px 30px rgba(20, 30, 50, 0.06);
}

.input-icon-group { position: relative; }
.input-icon-group > svg {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); width: 16px; height: 16px;
    color: #9aa2ad; pointer-events: none;
}
.input-icon-group > svg.input-icon-toggle {
    left: auto; right: 14px;
    pointer-events: auto; cursor: pointer;
}

/* =========================================================
   2. UI/UX MODERN LOGIN 
   ========================================================= */
.modern-login { border-radius: 24px !important; padding: 2.5rem 2rem !important; }
.modern-input { border-radius: 12px !important; font-size: 14.5px !important; color: #2c3345 !important; transition: all 0.3s ease; }
.modern-input:focus { background: #fff !important; box-shadow: 0 0 0 4px var(--gut-blue-soft) !important; }
.modern-btn { border-radius: 12px !important; letter-spacing: 0.5px; transition: all 0.3s ease; }
.modern-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 15px rgba(40, 165, 222, 0.25) !important; }
.alert-danger { border-radius: 12px !important; }

/* =========================================================
   3. UI/UX MODERN OVERVIEW (DASHBOARD)
   ========================================================= */
.nav-pills.sk-tab {
    background: #fff; padding: 8px; border-radius: 14px;
    box-shadow: 0 4px 15px rgba(20, 30, 50, 0.04); display: inline-flex;
}
.nav-pills.sk-tab .nav-link {
    border-radius: 10px; color: #6c757d; font-weight: 600;
    padding: 10px 20px; transition: all 0.3s ease; display: flex; align-items: center;
}
.nav-pills.sk-tab .nav-link i { width: 18px; height: 18px; }
.nav-pills.sk-tab .nav-link:hover { background: #f8f9fa; color: var(--gut-blue-dark); }
.nav-pills.sk-tab .nav-link.active {
    background-color: var(--gut-blue) !important; color: #fff !important;
    box-shadow: 0 4px 10px rgba(40, 165, 222, 0.3);
}
.nav-bordered { border-bottom: 2px solid #eef0f2; padding-bottom: 12px; }
.nav-bordered .nav-link {
    border: none; background: transparent; color: #8a94a6; font-weight: 600;
    padding: 8px 16px; border-radius: 8px; transition: all 0.2s ease;
}
.nav-bordered .nav-link:hover { color: var(--gut-blue); background: var(--gut-blue-soft); }
.nav-bordered .nav-link.active { background: var(--gut-blue-soft) !important; color: var(--gut-blue-dark) !important; }
.modern-card { border-radius: 20px; box-shadow: 0 10px 30px rgba(20, 30, 50, 0.05) !important; }

.overview-summary-card {
    background: #fff; border: 1px solid #eef0f2; border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.overview-summary-card:hover {
    transform: translateY(-5px); box-shadow: 0 12px 24px rgba(40, 165, 222, 0.12);
    border-color: var(--gut-blue-soft);
}
.overview-summary-card.highlight { background: linear-gradient(135deg, var(--gut-blue-soft) 0%, #ffffff 100%); border: 1px solid var(--gut-blue); }
.icon-circle { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.icon-circle i { width: 18px; height: 18px; }
.modern-table th { background-color: #f8f9fa; color: #5b6472; font-weight: 600; border-bottom: 2px solid #eef0f2; padding: 14px 16px; }
.modern-table td { padding: 14px 16px; color: #2c3345; border-bottom: 1px solid #f1f3f5; }

/* =========================================================
   4. SIDEBAR MENU SAMPING (layout baru, seperti ERP baru)
   ========================================================= */
/* Bawaan tema (app.css) kasih bullet panah "->" di depan tiap sub-menu
   sidebar (mis. di bawah "Service": Jadwal Service, Perintah Kerja, dst).
   Dari jauh/di HP kelihatan seperti icon acak/salah, jadi dihilangkan
   supaya sub-menu tampil bersih tanpa bullet -- cukup teks yang sudah
   diberi indentasi (padding-left bawaan tema tetap dipakai). */
.sidebar-dropdown .sidebar-link:before {
    content: none;
}

/* =========================================================
   5. MODAL RINCIAN PERINTAH KERJA (Overview) -- gaya ERP baru
   ========================================================= */
/* Variabel warna disamakan persis dengan resources/views/layouts/app.blade.php
   punya ERP baru (garsindo-baru). Ditaruh scoped di dalam #workOrderDetailModal
   saja supaya tidak mengubah tampilan modal lain yang sudah ada/berfungsi. */
#workOrderDetailModal {
    --wod-accent: #4f7cff;
    --wod-accent-soft: rgba(79, 124, 255, .16);
}
#workOrderDetailModal .modal-content {
    border: none;
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .18);
    overflow: hidden;
}
#workOrderDetailModal .modal-header {
    background: #fff;
    border-bottom: 1px solid #eef1f6;
    padding: .9rem 1.15rem;
}
#workOrderDetailModal .modal-title { font-weight: 600; }
#workOrderDetailModal .modal-title #wod-code { color: var(--wod-accent); }
#workOrderDetailModal .modal-body { padding: 1.15rem 1.2rem; }
#workOrderDetailModal .modal-footer {
    border-top: 1px solid #eef1f6;
    padding: .9rem 1.15rem;
}
#workOrderDetailModal .text-muted.small { letter-spacing: .2px; }
#workOrderDetailModal .badge {
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .2px;
    padding: .4em .6em;
}
#workOrderDetailModal .btn {
    border-radius: 10px;
    font-weight: 500;
    transition: all .14s ease;
}
#workOrderDetailModal .btn-primary {
    background: var(--wod-accent);
    border-color: var(--wod-accent);
    box-shadow: 0 2px 8px -2px rgba(79, 124, 255, .5);
}
#workOrderDetailModal .btn-primary:hover {
    background: #3a63e0;
    border-color: #3a63e0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(79, 124, 255, .55);
}
#workOrderDetailModal .btn-light {
    border-color: #d9e0ea;
    color: #475569;
}
#workOrderDetailModal .btn-light:hover {
    background: #f1f5f9;
    color: #1f2937;
    border-color: #cbd5e1;
}

/* Baris tabel "Perintah kerja" yang sekarang bisa diklik -- hover halus
   biar kelihatan interaktif, konsisten sama .overview-summary-card:hover. */
#workTable tbody tr[onclick] { transition: background-color .12s ease; }
#workTable tbody tr[onclick]:hover { background-color: var(--gut-blue-soft, #eaf6fc); }

/* =========================================================
   7. SUB-TAB DI DALAM CARD DASHBOARD (Penawaran/Pesanan/dst) -- fix HP
   ========================================================= */
/* Markup blade-nya pakai kelas Bootstrap "flex-nowrap" (memaksa satu baris),
   jadi begitu jumlah sub-tab banyak (mis. Penawaran/Pesanan/Pengiriman/
   Faktur/Retur), sisanya kepotong ke luar layar di HP -- dan karena wrapper
   ".main" bawaan tema pakai overflow-x:hidden (ini yang bikin halaman TIDAK
   geser ke samping), tab yang kepotong itu bukan discroll tapi jadi hilang
   sama sekali & tidak bisa diklik. Fix: izinkan wrap jadi 2 baris di bawah
   breakpoint lg -- tanpa mengubah kelas flex-nowrap di blade-nya sendiri,
   supaya tampilan desktop (satu baris) tidak berubah. */
@media (max-width: 991.98px) {
    .card-body .nav-pills.flex-nowrap {
        flex-wrap: wrap !important;
        row-gap: .4rem;
    }
    .card-body .nav-pills.flex-nowrap .nav-item {
        flex: 0 0 auto;
    }
}

/* =========================================================
   6. HALAMAN LOGIN -- split-screen, gaya ERP baru (garsindo-baru)
   ========================================================= */
/* Variabel warna disamakan persis dengan yang dipakai di modal rincian
   perintah kerja (#workOrderDetailModal). Discope di dalam .login-split
   saja supaya tidak mengubah halaman lain. */
.login-split {
    --login-accent: #4f7cff;
    --login-accent-soft: rgba(79, 124, 255, .16);
}

/* Panel kiri: form, background putih polos. Padding dipindah ke
   .login-form-wrap (bukan di sini) supaya header biru khusus HP
   (.mobile-brand-header) bisa full-bleed nempel ke tepi layar. */
.login-split-form {
    background: #fff;
    padding: 0;
}
.login-form-wrap {
    width: 100%;
    max-width: 380px;
    padding: 2rem 1.5rem;
}

/* Header biru versi HP -- cuma tampil di bawah breakpoint lg (dikontrol
   class Bootstrap d-lg-none di blade-nya). Sengaja full-bleed (nempel
   tepi kiri-kanan layar) dengan sudut bawah membulat, biar kerasa
   "branded" tanpa nambah lebar apapun yang bisa bikin geser horizontal. */
.mobile-brand-header {
    background: linear-gradient(135deg, #4f7cff 0%, #3a63e0 100%);
    color: #fff;
    padding: 2.25rem 1.5rem 1.75rem;
    border-radius: 0 0 28px 28px;
}
.mobile-brand-header p {
    font-size: .8rem;
    color: rgba(255, 255, 255, .85);
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.4;
}

/* Di layar kecil, form gak usah di-tengah-vertikalkan (justify-content-center
   dari blade) -- soalnya kalau layar HP-nya tinggi, jadinya ada jarak kosong
   janggal di atas form, di bawah header biru. Biarkan ngalir dari atas saja. */
@media (max-width: 991.98px) {
    .login-form-wrap {
        justify-content: flex-start !important;
        padding-top: 2.25rem;
    }
}

/* Panel kanan: branding, gradasi warna aksen ERP baru. Disembunyikan di
   bawah breakpoint lg (992px) lewat class Bootstrap d-none d-lg-flex di
   blade-nya, supaya di HP cuma form-nya saja yang tampil (full width). */
.login-split-brand {
    flex: 0 0 42%;
    max-width: 560px;
    background: linear-gradient(135deg, #4f7cff 0%, #3a63e0 100%);
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.login-split-brand:before {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    top: -180px;
    right: -160px;
}
.login-split-brand:after {
    content: '';
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
    bottom: -140px;
    left: -120px;
}
.login-split-brand-inner {
    position: relative;
    z-index: 1;
    max-width: 380px;
}
.login-split-brand h2 { font-size: 1.75rem; }
.text-white-75 { color: rgba(255, 255, 255, .8); }
.login-feature-list li { color: rgba(255, 255, 255, .92); font-weight: 500; }
.login-feature-list svg {
    width: 20px;
    height: 20px;
    color: #fff;
    flex-shrink: 0;
}

/* Input & tombol -- sama seperti sebelumnya, cuma sekarang discope ke
   .login-split (bukan .container.auth lagi karena markup-nya diganti). */
.login-split .modern-input:focus {
    background: #fff !important;
    box-shadow: 0 0 0 4px var(--login-accent-soft) !important;
}
.login-split .input-icon-group:focus-within > svg:not(.input-icon-toggle) {
    color: var(--login-accent);
}
.login-split .modern-btn.btn-primary {
    background: var(--login-accent);
    border-color: var(--login-accent);
    box-shadow: 0 2px 10px -2px rgba(79, 124, 255, .5);
}
.login-split .modern-btn.btn-primary:hover {
    background: #3a63e0;
    border-color: #3a63e0;
    box-shadow: 0 6px 16px -2px rgba(79, 124, 255, .55);
}
.login-split .login-link-accent {
    color: var(--login-accent);
}
.login-split .login-link-accent:hover {
    color: #3a63e0;
    text-decoration: underline !important;
}
.login-split .form-check-input:checked {
    background-color: var(--login-accent);
    border-color: var(--login-accent);
}
.login-split .form-check-input:focus {
    box-shadow: 0 0 0 4px var(--login-accent-soft);
    border-color: var(--login-accent);
}

/* =========================================================
   8. TABEL DATA -> TAMPILAN KARTU DI HP (semua halaman)
   ========================================================= */
/* Aturan ini HANYA berlaku ke tabel yang sudah ditandai class
   "gs-card-table" oleh assets/js/garsindo-mobile-tables.js -- file JS itu
   yang menentukan tabel mana yang aman diubah jadi kartu (lihat komentar
   panjang di file JS-nya). Tabel yang dilewati (mis. tabel DataTables atau
   tabel isi form) TIDAK kena aturan di bawah ini sama sekali, jadi
   perilakunya tetap seperti semula (boleh digeser di dalam tabelnya). */
@media (max-width: 991.98px) {
    table.gs-card-table thead {
        display: none;
    }
    table.gs-card-table,
    table.gs-card-table > tbody,
    table.gs-card-table > tbody > tr,
    table.gs-card-table > tbody > tr > td {
        display: block;
        width: 100%;
    }
    table.gs-card-table > tbody > tr {
        margin-bottom: .65rem;
        border: 1px solid #eef0f2;
        border-radius: 12px;
        padding: .6rem .85rem;
        box-shadow: 0 2px 8px rgba(20, 30, 50, .04);
        background: #fff;
    }
    table.gs-card-table > tbody > tr:last-child {
        margin-bottom: 0;
    }
    table.gs-card-table > tbody > tr > td {
        border: none !important;
        padding: .3rem 0 !important;
        text-align: right;
        position: relative;
        padding-left: 45% !important;
        min-height: 1.4rem;
        word-break: break-word;
    }
    table.gs-card-table > tbody > tr > td[data-label]:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: .3rem;
        width: 42%;
        text-align: left;
        font-weight: 600;
        color: #6c757d;
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .2px;
    }
    /* Baris tanpa data-label (mis. baris spinner "loading..." atau "data
       tidak ditemukan" yang cuma 1 sel lebar pakai colspan) dibiarkan
       tampil polos rata kiri -- gak perlu dikasih label semu. */
    table.gs-card-table > tbody > tr > td:not([data-label]) {
        text-align: left;
        padding-left: 0 !important;
    }
}

/* =========================================================
   9. SIDEBAR RINGKAS (icon-only + submenu melayang di hover)
   ========================================================= */
/* Mode "compact" bawaan tema (diaktifkan lewat atribut
   data-sidebar-layout="compact" di <body>, lihat template.blade.php) sudah
   menangani sebagian besar tampilannya sendiri. Dua penyesuaian yang perlu
   ditambah di sini:
   1. Tema aslinya menyembunyikan .sidebar-brand SEPENUHNYA di mode compact
      (asumsinya logo diganti icon kecil terpisah lewat markup
      .sidebar-brand-icon/.sidebar-brand-text yang gak dipakai di blade
      kita) -- akibatnya logo malah hilang total. Ditampilkan lagi supaya
      tetap ada identitas di atas sidebar.
   2. Logo di sidebar-brand aslinya lebar (150px, buat sidebar versi
      penuh) -- kalau dibiarkan, di mode ringkas (lebar rel cuma 74px)
      logo itu bakal kepotong/meluber. Diperkecil khusus pas mode compact,
      versi sidebar penuh (kalau nanti dipakai lagi) tetap ukuran asli. */
body[data-sidebar-layout="compact"] .sidebar-brand {
    display: flex !important;
    justify-content: center;
    padding: 1rem 0 .5rem;
}
body[data-sidebar-layout="compact"] .sidebar-brand img {
    max-width: 38px !important;
}

/* 3. Bug asli tema: submenu melayang punya z-index 5 (lihat app.css),
      sedangkan bar tab "Penjualan/Pembelian/Persediaan/Pengajuan Dana/
      Service" di halaman Dashboard (class .sk-tab, bukan buatan kita --
      sudah ada dari tema aslinya) punya z-index 9 supaya dia numpuk rapi
      di atas card di bawahnya. Karena 9 > 5, submenu yang melayang jadi
      KETUTUPAN/keblok sama bar tab itu -- persis area yang dilaporkan pak
      bos ("dibelakangnya dashboard"). Konten lain di bawah bar tab itu gak
      kena masalah karena z-index-nya standar (0), kalah dibanding submenu
      (5). Fix: naikkan z-index sidebar mode ringkas jauh di atas 9, tapi
      tetap di bawah modal (1050/1055) supaya modal masih benar nutupin
      semuanya kalau dibuka. */
body[data-sidebar-layout="compact"] .sidebar {
    z-index: 1035 !important;
}

/* =========================================================
   10. MODAL FOTO PRODUK (Persediaan > Barang dan Jasa) -- foto kekecilan
   ========================================================= */
/* Sebelumnya foto produk pas diklik cuma tampil kecil (kelas .img-thumbnail
   bawaan Bootstrap, numpuk berdampingan di modal ukuran default ~500px) --
   kelihatan kayak kualitasnya jelek/kurang HD. Padahal dicek di
   ProductImageController::show(), file yang di-serve itu FILE ASLINYA,
   nggak ada resize/kompres server-side sama sekali -- jadi ini murni
   masalah TAMPILAN (kekecilan), bukan foto aslinya beneran nge-blur.
   Fix: modal dibikin lebih lebar (modal-lg, lihat product/index.blade.php),
   foto ditata dalam grid rapi & jauh lebih besar, dan tiap foto bisa
   diklik buka lightbox nampilin ukuran gede -- file aslinya, 100% tanpa
   dikecilin sama sekali (lihat Section 10b buat style lightbox-nya). */
#product-photo-container .gs-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
#product-photo-container .gs-photo-item {
    display: block;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    overflow: hidden;
    background: #f8f9fa;
    cursor: zoom-in;
}
#product-photo-container .gs-photo-item img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    display: block;
    transition: transform .2s ease;
}
#product-photo-container .gs-photo-item:hover img {
    transform: scale(1.03);
}
@media (max-width: 575.98px) {
    #product-photo-container .gs-photo-grid {
        grid-template-columns: 1fr;
    }
    #product-photo-container .gs-photo-item img {
        height: 220px;
    }
}

/* =========================================================
   10b. LIGHTBOX FOTO PRODUK -- versi gede pas foto di grid atas diklik
   ========================================================= */
/* Sengaja BUKAN modal Bootstrap kedua yang numpuk di atas #productPhotoDetail
   (modal-di-dalam-modal itu rawan bikin backdrop & scroll-lock Bootstrap
   kacau, dua backdrop numpuk dsb) -- ini overlay polos sendiri, dikontrol
   lewat JS di product/script/index.blade.php. z-index-nya di atas modal
   Bootstrap (1050/1055) DAN di atas sidebar mode ringkas (1035, Section 9)
   biar selalu paling depan. */
.gs-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(15, 20, 30, .88);
    padding: 3rem;
    cursor: zoom-out;
}
.gs-lightbox.show {
    display: flex;
    align-items: center;
    justify-content: center;
}
.gs-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
    cursor: default;
}
.gs-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}
.gs-lightbox-close:hover {
    background: rgba(255, 255, 255, .22);
}
body.gs-lightbox-open {
    overflow: hidden;
}
@media (max-width: 575.98px) {
    .gs-lightbox {
        padding: 1.25rem;
    }
}