/* ============================================================
   TRACKER HARGA TANAH KETAPANG
   Palet: kertas ukur lapangan (field survey ledger)
   - Kertas   : #F0EDE3
   - Tinta    : #23312A
   - Hutan    : #2C4A3E
   - Ochre    : #B98527
   - Bata     : #A6472B
   - Garis    : #D8D2C2
   Tipe: display "Fraunces" (judul), UI "IBM Plex Sans", data "IBM Plex Mono"
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --kertas: #F0EDE3;
    --kertas-gelap: #E5E0D2;
    --tinta: #23312A;
    --hutan: #2C4A3E;
    --hutan-terang: #3D6353;
    --ochre: #B98527;
    --bata: #A6472B;
    --garis: #D8D2C2;
    --putih: #FFFFFF;
    --font-judul: 'Fraunces', serif;
    --font-ui: 'IBM Plex Sans', sans-serif;
    --font-data: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-ui);
    color: var(--tinta);
    background: var(--kertas);
}

/* ---------- Halaman Login ---------- */
.auth-page {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(var(--kertas), var(--kertas)),
        repeating-linear-gradient(0deg, transparent, transparent 27px, var(--garis) 28px);
}
.auth-box {
    background: var(--putih);
    border: 1px solid var(--garis);
    border-radius: 4px;
    padding: 2.5rem 2.25rem;
    width: 320px;
    box-shadow: 0 12px 28px rgba(35, 49, 42, 0.10);
}
.auth-brand { text-align: center; margin-bottom: 1.75rem; }
.auth-brand-mark {
    display: inline-block;
    font-size: 1.4rem;
    color: var(--ochre);
    margin-bottom: .35rem;
}
.auth-brand h1 {
    font-family: var(--font-judul);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
    color: var(--hutan);
}
.auth-brand p {
    margin: .2rem 0 0;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #7A7566;
}
.auth-form label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    margin-bottom: .3rem;
    color: var(--hutan);
}
.auth-form input {
    width: 100%;
    padding: .6rem .7rem;
    margin-bottom: 1rem;
    border: 1px solid var(--garis);
    border-radius: 3px;
    font-family: var(--font-ui);
    font-size: .92rem;
    background: var(--kertas);
}
.auth-form input:focus { outline: 2px solid var(--hutan-terang); outline-offset: 1px; }
.auth-form button {
    width: 100%;
    padding: .7rem;
    background: var(--hutan);
    color: var(--kertas);
    border: none;
    border-radius: 3px;
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: background .15s;
}
.auth-form button:hover { background: var(--hutan-terang); }
.auth-error {
    background: #F7E4DE;
    color: var(--bata);
    padding: .6rem .8rem;
    border-radius: 3px;
    font-size: .85rem;
    margin-bottom: 1rem;
}

/* ---------- Layout Aplikasi ---------- */
.app {
    display: grid;
    grid-template-columns: 360px 1fr;
    grid-template-rows: 56px 1fr;
    height: 100vh;
    grid-template-areas:
        "topbar topbar"
        "sidebar map";
}

.topbar {
    grid-area: topbar;
    background: var(--hutan);
    color: var(--kertas);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: .6rem;
    z-index: 10;
}
.topbar .mark { color: var(--ochre); font-size: 1.1rem; }
.topbar h1 {
    font-family: var(--font-judul);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}
.topbar .user-chip {
    font-size: .8rem;
    color: #D9E4DD;
    font-family: var(--font-data);
}
.topbar a.logout {
    color: var(--kertas);
    opacity: .75;
    text-decoration: none;
    font-size: .8rem;
    margin-left: .75rem;
    border: 1px solid rgba(255,255,255,.25);
    padding: .3rem .6rem;
    border-radius: 3px;
}
.topbar a.logout:hover { opacity: 1; }

.sidebar {
    grid-area: sidebar;
    background: var(--putih);
    border-right: 1px solid var(--garis);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-header {
    padding: 1rem 1.1rem .8rem;
    border-bottom: 1px solid var(--garis);
}
.sidebar-header .btn-tambah {
    width: 100%;
    padding: .65rem;
    background: var(--ochre);
    color: var(--putih);
    border: none;
    border-radius: 3px;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
    margin-bottom: .6rem;
}
.sidebar-header .btn-tambah:hover { background: #A17421; }
.sidebar-header .btn-acuan { background: var(--hutan); }
.sidebar-header .btn-acuan:hover { background: var(--hutan-terang); }

.sidebar-tabs { display: flex; border-bottom: 1px solid var(--garis); }
.sidebar-tab {
    flex: 1;
    padding: .55rem;
    border: none;
    background: var(--kertas);
    font-size: .78rem;
    font-weight: 600;
    color: #7A7566;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}
.sidebar-tab.aktif { color: var(--hutan); border-bottom-color: var(--ochre); background: #fff; }

.toggle-layer {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-top: .6rem;
    font-size: .74rem;
    color: var(--tinta);
    cursor: pointer;
}
.toggle-layer input { margin: 0; }
.sidebar-header input[type="search"] {
    width: 100%;
    padding: .5rem .6rem;
    border: 1px solid var(--garis);
    border-radius: 3px;
    font-family: var(--font-ui);
    font-size: .85rem;
}
.sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: .4rem 0;
}
.lokasi-item {
    padding: .75rem 1.1rem;
    border-bottom: 1px solid var(--kertas-gelap);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.lokasi-item:hover { background: var(--kertas); }
.lokasi-item.aktif { background: var(--kertas-gelap); border-left: 3px solid var(--ochre); }
.lokasi-item .nama {
    font-weight: 600;
    font-size: .9rem;
    color: var(--tinta);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.lokasi-item .tipe-badge {
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .35rem;
    border-radius: 2px;
    background: var(--kertas-gelap);
    color: #7A7566;
    font-weight: 600;
}
.lokasi-item .lokasi-meta {
    font-size: .76rem;
    color: #7A7566;
}
.lokasi-item .harga-per-m2 {
    font-family: var(--font-data);
    font-size: .82rem;
    font-weight: 600;
    color: var(--hutan);
}
.sidebar-empty {
    padding: 2rem 1.1rem;
    color: #9C9686;
    font-size: .85rem;
    text-align: center;
}

.legenda {
    padding: .7rem 1.1rem;
    border-top: 1px solid var(--garis);
    font-size: .72rem;
    color: #7A7566;
}
.legenda-scale {
    height: 8px;
    border-radius: 4px;
    margin: .4rem 0 .3rem;
    background: linear-gradient(90deg, #4F8F6D, #B98527, #A6472B);
}
.legenda-labels { display: flex; justify-content: space-between; font-family: var(--font-data); }

#map { grid-area: map; position: relative; }

.banner-mode {
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    background: var(--hutan);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 4px;
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    max-width: 90%;
}
.banner-mode button {
    background: var(--ochre);
    color: #fff;
    border: none;
    padding: .3rem .6rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.sidebar-header .btn-tambah.aktif { outline: 3px solid var(--ochre); outline-offset: 2px; }
.sidebar-header .btn-acuan.aktif { outline: 3px solid var(--ochre); outline-offset: 2px; }

/* ---------- Marker & Popup ---------- */
.marker-harga {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-data);
    font-weight: 600;
    font-size: .68rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    width: 34px;
    height: 34px;
}
.marker-landmark {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px solid var(--hutan);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    width: 30px;
    height: 30px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.marker-landmark span { transform: rotate(45deg); font-size: 14px; }

.leaflet-popup-content-wrapper { border-radius: 5px; font-family: var(--font-ui); }
.popup-kategori {
    display: inline-block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hutan);
    background: var(--kertas-gelap);
    padding: .1rem .4rem;
    border-radius: 2px;
    margin-bottom: .3rem;
}
.popup-title { font-family: var(--font-judul); font-weight: 600; font-size: 1rem; margin: 0 0 .3rem; color: var(--hutan); }
.popup-harga { font-family: var(--font-data); font-size: 1.05rem; font-weight: 600; color: var(--bata); margin: .2rem 0; }
.popup-meta { font-size: .78rem; color: #7A7566; margin-bottom: .5rem; }
.popup-actions { display: flex; gap: .4rem; margin-top: .5rem; }
.popup-actions button {
    flex: 1;
    font-size: .75rem;
    padding: .35rem;
    border: 1px solid var(--garis);
    background: var(--kertas);
    border-radius: 3px;
    cursor: pointer;
}
.popup-actions button.hapus { color: var(--bata); }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(35,49,42,.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-overlay.terbuka { display: flex; }
.modal-box {
    background: #fff;
    width: 420px;
    max-width: 92vw;
    max-height: 88vh;
    overflow-y: auto;
    border-radius: 6px;
    padding: 1.5rem;
}
.modal-box h2 {
    font-family: var(--font-judul);
    font-size: 1.2rem;
    color: var(--hutan);
    margin: 0 0 1rem;
}
.modal-box label {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    margin: .7rem 0 .3rem;
    color: var(--hutan);
}
.modal-box input, .modal-box select, .modal-box textarea {
    width: 100%;
    padding: .55rem .65rem;
    border: 1px solid var(--garis);
    border-radius: 3px;
    font-family: var(--font-ui);
    font-size: .88rem;
}
.modal-box textarea { resize: vertical; min-height: 50px; }
.form-row { display: flex; gap: .6rem; }
.form-row > div { flex: 1; }
.modal-footer {
    display: flex;
    gap: .6rem;
    margin-top: 1.4rem;
}
.modal-footer button {
    flex: 1;
    padding: .65rem;
    border: none;
    border-radius: 3px;
    font-weight: 600;
    font-size: .85rem;
    cursor: pointer;
}
.btn-simpan { background: var(--hutan); color: #fff; }
.btn-batal { background: var(--kertas-gelap); color: var(--tinta); }
.hint-gambar {
    background: var(--kertas);
    border: 1px dashed var(--garis);
    padding: .6rem .7rem;
    border-radius: 3px;
    font-size: .78rem;
    color: #7A7566;
    margin-top: .5rem;
}

/* ---------- Riwayat harga ---------- */
.riwayat-table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .8rem; }
.riwayat-table th {
    text-align: left;
    font-size: .68rem;
    text-transform: uppercase;
    color: #9C9686;
    border-bottom: 1px solid var(--garis);
    padding: .3rem .2rem;
}
.riwayat-table td { padding: .4rem .2rem; border-bottom: 1px solid var(--kertas-gelap); font-family: var(--font-data); }
.riwayat-table .hapus-riwayat { color: var(--bata); cursor: pointer; font-family: var(--font-ui); font-size: .72rem; }
.tab-toggle { display: flex; gap: .4rem; margin-bottom: .8rem; }
.tab-toggle button {
    flex: 1;
    padding: .45rem;
    border: 1px solid var(--garis);
    background: var(--kertas);
    border-radius: 3px;
    font-size: .78rem;
    cursor: pointer;
    font-weight: 600;
}
.tab-toggle button.aktif { background: var(--hutan); color: #fff; border-color: var(--hutan); }

/* leaflet draw toolbar sedikit disesuaikan */
.leaflet-draw-toolbar a { background-color: #fff !important; }

@media (max-width: 820px) {
    .app { grid-template-columns: 1fr; grid-template-rows: 56px 40vh 1fr; grid-template-areas: "topbar" "sidebar" "map"; }
    .sidebar { border-right: none; border-bottom: 1px solid var(--garis); }
}