/* =========================================================
   UPTD Pasar Sentral Mimika — tema visual Amungme & Kamoro
   Merah oker (ukir Kamoro), hitam arang, krem, hijau Nemangkawi, emas noken
   ========================================================= */
:root {
  --ochre: #b23a26; --ochre-dk: #8c2b1b; --char: #1e1b18; --char-2: #2b2723;
  --cream: #f6efe3; --sand: #e9dcc4; --green: #1f5f4a; --green-dk: #154536;
  --gold: #d9a441; --navy: #26364a;
  --bg: #fbf8f2; --surface: #ffffff; --ink: #1e1b18; --muted: #6d655b; --line: #e6dccb;
  --ok: #1f7a4d; --ok-bg: #e3f3ea; --warn: #9a6a00; --warn-bg: #fdf1d6; --danger: #a8321f; --danger-bg: #fbe5e0;
  --info: #23527c; --info-bg: #e2edf7; --mutedc: #5f5a52; --muted-bg: #efebe3;
  --radius: 14px; --shadow: 0 1px 2px rgba(30,27,24,.06), 0 8px 24px rgba(30,27,24,.06);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Fraunces', Georgia, serif;
  --zig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12 L6 0 L12 12 L18 0 L24 12' fill='none' stroke='%23b23a26' stroke-width='3'/%3E%3C/svg%3E");
  --zig-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 12 L6 0 L12 12 L18 0 L24 12' fill='none' stroke='%23d9a441' stroke-width='3'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel-body {
    --bg: #171513; --surface: #211e1b; --ink: #f1ebe0; --muted: #a99f92; --line: #3a342e;
    --ok-bg: #173527; --warn-bg: #3a2e12; --danger-bg: #3d1f19; --info-bg: #1b2c3d; --muted-bg: #2c2824;
    --ok: #7fd1a5; --warn: #f0c46b; --danger: #f29a88; --info: #8dbbe6; --mutedc: #c9c0b4;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 15px; }
img { max-width: 100%; display: block; }
a { color: var(--ochre); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; }
h1, h2, .display { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
.container { width: min(1200px, 100% - 32px); margin-inline: auto; }
.ico { width: 18px; height: 18px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.zig { height: 12px; background: var(--zig) repeat-x; }
.zig.gold { background-image: var(--zig-gold); }

/* ---------- Tombol & formulir ---------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .62rem 1.1rem; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 .92rem var(--font); cursor: pointer; text-decoration: none !important; transition: .15s; white-space: nowrap; }
.btn-primary { background: var(--ochre); color: #fff; }
.btn-primary:hover { background: var(--ochre-dk); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dk); }
.btn-dark { background: var(--char); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-light { background: var(--cream); color: var(--char); }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn-sm { padding: .38rem .8rem; font-size: .82rem; }
.btn-block { width: 100%; justify-content: center; }
label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; }
.field { margin-bottom: 1rem; }
.hint { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], input[type=url], input[type=month], input[type=file], select, textarea {
  width: 100%; padding: .65rem .8rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
textarea { min-height: 110px; resize: vertical; }
.check { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
.check input { width: 18px; height: 18px; accent-color: var(--green); }
.error { color: var(--danger); font-size: .82rem; margin-top: .25rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Badge, kartu, tabel ---------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.danger { background: var(--danger-bg); color: var(--danger); } .badge.info { background: var(--info-bg); color: var(--info); }
.badge.muted { background: var(--muted-bg); color: var(--mutedc); }
.badge.cat { background: var(--char); color: var(--cream); letter-spacing: .03em; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-pad { padding: 1.25rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.card-head h3 { margin: 0; font-size: 1rem; font-family: var(--font); font-weight: 700; }
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th, .table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; background: color-mix(in srgb, var(--muted-bg) 60%, transparent); }
.table tr:hover td { background: color-mix(in srgb, var(--muted-bg) 40%, transparent); }
.flash { padding: .85rem 1.1rem; border-radius: 12px; margin-bottom: 1.25rem; font-weight: 600; display: flex; gap: .6rem; align-items: center; }
.flash.ok { background: var(--ok-bg); color: var(--ok); } .flash.err { background: var(--danger-bg); color: var(--danger); }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--muted); }
.pagination { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: 1.25rem; justify-content: center; }
.pagination a, .pagination span { min-width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0 .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .88rem; }
.pagination .active { background: var(--char); color: var(--cream); border-color: var(--char); }
.pagination .disabled { opacity: .45; }
.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.toolbar input, .toolbar select { width: auto; min-width: 160px; padding: .5rem .75rem; }
.toolbar .spacer { flex: 1; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.stat { padding: 1.1rem 1.2rem; }
.stat .label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.stat .value { font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.9rem); overflow-wrap: anywhere; font-weight: 700; line-height: 1.15; margin-top: .2rem; }
.stat .sub { font-size: .82rem; color: var(--muted); }
.stat.accent { background: var(--char); color: var(--cream); border-color: var(--char); }
.stat.accent .label, .stat.accent .sub { color: color-mix(in srgb, var(--cream) 70%, transparent); }
.progress { height: 8px; border-radius: 99px; background: var(--muted-bg); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--green); border-radius: 99px; }

/* ================= SITUS PUBLIK ================= */
.topstrip { background: var(--char); color: color-mix(in srgb, var(--cream) 80%, transparent); font-size: .8rem; }
.topstrip .container { display: flex; justify-content: space-between; gap: 1rem; padding-block: .4rem; flex-wrap: wrap; }
.topstrip a { color: var(--gold); }
.site-header { background: var(--surface); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--line); }
.site-header .container { display: flex; align-items: center; gap: 1rem; min-height: 74px; }
.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none !important; }
.brand img { width: 50px; height: 50px; }
.brand b { display: block; font-family: var(--display); font-size: 1.12rem; line-height: 1.1; }
.brand small { display: block; font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.nav > a, .nav .dd > button { padding: .55rem .8rem; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .92rem; background: none; border: 0; font-family: inherit; cursor: pointer; display: inline-flex; gap: .3rem; align-items: center; }
.nav > a:hover, .nav .dd > button:hover, .nav a.active { background: var(--cream); text-decoration: none; }
.nav a.active { color: var(--ochre); }
.dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: .4rem; display: none; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu, .dd.open .dd-menu { display: block; }
.dd-menu a { display: block; padding: .55rem .75rem; border-radius: 8px; color: var(--ink); font-size: .9rem; }
.dd-menu a small { display: block; color: var(--muted); font-size: .76rem; }
.dd-menu a:hover { background: var(--cream); text-decoration: none; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1.5px solid var(--line); border-radius: 10px; padding: .45rem .6rem; cursor: pointer; }
@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); flex-direction: column; align-items: stretch; padding: .6rem 16px 1rem; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav.open { display: flex; }
  .dd-menu { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 .75rem; }
  .brand small { display: none; }
}
.hero { position: relative; background: var(--char); color: var(--cream); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: url('../images/galeri/pasar-kini.svg') center/cover; opacity: .22; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--char) 25%, transparent); }
.hero .container { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr .9fr; gap: 2rem; align-items: center; padding-block: 4.5rem 4rem; }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: .4em; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero p.lead { font-size: 1.08rem; max-width: 560px; color: color-mix(in srgb, var(--cream) 85%, transparent); }
.hero .actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hero .emblem { justify-self: center; width: min(320px, 70vw); filter: drop-shadow(0 20px 40px rgba(0,0,0,.4)); }
.kicker { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 800; color: var(--gold); }
@media (max-width: 820px) { .hero .container { grid-template-columns: 1fr; padding-block: 3rem; } .hero .emblem { width: 180px; grid-row: 1; } }
.statbar { background: var(--ochre); color: #fff; }
.statbar .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.statbar div { padding: 1.2rem .5rem; text-align: center; border-right: 1px solid rgba(255,255,255,.2); }
.statbar div:last-child { border: 0; }
.statbar b { display: block; font-family: var(--display); font-size: 1.9rem; line-height: 1.1; }
.statbar span { font-size: .8rem; opacity: .9; }
@media (max-width: 640px) { .statbar .container { grid-template-columns: repeat(2, 1fr); } .statbar div:nth-child(2) { border: 0; } }
.section { padding-block: 3.5rem; }
.section.alt { background: var(--cream); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .2rem 0 0; }
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.service { padding: 1.4rem; display: block; color: var(--ink); transition: .15s; }
.service:hover { transform: translateY(-3px); text-decoration: none; border-color: var(--ochre); }
.service .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--cream); color: var(--ochre); margin-bottom: .9rem; }
.service .ic .ico { width: 24px; height: 24px; }
.service h3 { font-size: 1.05rem; font-family: var(--font); }
.service p { margin: 0; color: var(--muted); font-size: .9rem; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.news-card { overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.news-card:hover { text-decoration: none; border-color: var(--ochre); }
.news-card img { aspect-ratio: 16/10; object-fit: cover; width: 100%; background: var(--sand); }
.news-card .body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.news-card h3 { font-size: 1.08rem; font-family: var(--display); margin: 0; }
.news-card p { margin: 0; color: var(--muted); font-size: .9rem; }
.news-card .meta { font-size: .78rem; color: var(--muted); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: auto; }
.feature { display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; color: var(--ink); }
.feature:hover { text-decoration: none; }
.feature img { height: 100%; object-fit: cover; min-height: 260px; }
.feature .body { padding: 1.8rem; display: flex; flex-direction: column; gap: .7rem; justify-content: center; }
.feature h3 { font-family: var(--display); font-size: 1.6rem; margin: 0; }
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; } }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.gallery-grid figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--sand); }
.gallery-grid img { aspect-ratio: 4/3; object-fit: cover; width: 100%; transition: .3s; }
.gallery-grid figure:hover img { transform: scale(1.04); }
.gallery-grid figcaption { position: absolute; inset: auto 0 0 0; padding: 1.6rem .8rem .6rem; color: #fff; font-size: .84rem; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.lightbox { position: fixed; inset: 0; background: rgba(15,13,11,.92); z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; flex-direction: column; gap: .8rem; }
.lightbox.open { display: flex; }
.lightbox img { max-height: 78vh; max-width: min(1100px, 100%); border-radius: 10px; }
.lightbox .cap { color: var(--cream); text-align: center; max-width: 700px; font-size: .92rem; }
.lightbox .cap a { color: var(--gold); }
.lightbox button { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0; width: 46px; height: 46px; border-radius: 50%; font-size: 1.4rem; cursor: pointer; }
.lightbox .close { top: 16px; right: 16px; } .lightbox .prev { left: 16px; top: 50%; } .lightbox .next { right: 16px; top: 50%; }
.tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.tabs a, .tabs button { padding: .45rem .95rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .86rem var(--font); cursor: pointer; }
.tabs a.active, .tabs button.active { background: var(--char); color: var(--cream); border-color: var(--char); }
.tabs a:hover { text-decoration: none; border-color: var(--ink); }
.page-hero { background: var(--char); color: var(--cream); padding-block: 2.6rem 2.2rem; position: relative; }
.page-hero h1 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); margin: .3rem 0 .3rem; }
.page-hero p { margin: 0; color: color-mix(in srgb, var(--cream) 78%, transparent); max-width: 720px; }
.crumbs { font-size: .8rem; color: color-mix(in srgb, var(--cream) 60%, transparent); }
.crumbs a { color: var(--gold); }
.prose { max-width: 760px; font-size: 1.04rem; }
.prose p, .prose ul { margin: 0 0 1.1em; }
.source-box { border-left: 4px solid var(--gold); background: var(--cream); padding: .9rem 1.1rem; border-radius: 0 10px 10px 0; font-size: .9rem; }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: .3rem; }
.blockmap { display: grid; gap: 1.2rem; }
.block-row h3 { font-family: var(--font); font-size: .95rem; display: flex; gap: .6rem; align-items: center; }
.stalls { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .45rem; }
.stall { border-radius: 10px; padding: .5rem .3rem; text-align: center; font-weight: 700; font-size: .82rem; border: 1.5px solid transparent; color: var(--ink); display: block; line-height: 1.25; }
.stall small { display: block; font-weight: 500; font-size: .68rem; opacity: .8; }
.stall:hover { text-decoration: none; transform: translateY(-2px); }
.st-tersedia { background: #dff1e6; border-color: #9fd3b3; } .st-dipesan { background: #fbecc8; border-color: #ecc66e; }
.st-terisi { background: #ebe6dd; color: #8a8278; } .st-perbaikan { background: #f6d9d2; border-color: #e3a090; }
.merchant-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.merchant { padding: 1.1rem; display: flex; gap: .9rem; }
.avatar { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--green); color: #fff; font-weight: 800; flex: none; font-size: .95rem; }
.avatar.ochre { background: var(--ochre); }
.site-footer { background: var(--char); color: color-mix(in srgb, var(--cream) 78%, transparent); font-size: .9rem; }
.site-footer .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-block: 3rem 2rem; }
.site-footer h4 { color: var(--cream); font-family: var(--font); font-size: .95rem; }
.site-footer a { color: color-mix(in srgb, var(--cream) 78%, transparent); display: block; padding: .15rem 0; }
.site-footer a:hover { color: var(--gold); }
.site-footer .copy { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 0; font-size: .8rem; text-align: center; }
@media (max-width: 820px) { .site-footer .container { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer .container { grid-template-columns: 1fr; } }
.two-col { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: 140px 1fr; gap: .45rem .8rem; font-size: .92rem; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 600; }
.timeline { border-left: 3px solid var(--gold); padding-left: 1.2rem; margin: 0; list-style: none; }
.timeline li { position: relative; padding-bottom: 1.2rem; }
.timeline li::before { content: ""; position: absolute; left: -1.62rem; top: .35rem; width: 13px; height: 13px; border-radius: 50%; background: var(--ochre); border: 3px solid var(--bg); }
.timeline b { font-family: var(--display); color: var(--ochre); }

/* ================= PANEL INTERNAL ================= */
.panel-body { background: var(--bg); }
.shell { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar { background: var(--char); color: var(--cream); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar .brand { color: var(--cream); padding: 1.1rem 1.1rem .9rem; }
.sidebar .brand img { width: 42px; height: 42px; }
.sidebar .brand small { color: var(--gold); }
.sidebar nav { padding: .5rem .7rem 1.5rem; flex: 1; }
.sidebar .sec { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: color-mix(in srgb, var(--cream) 45%, transparent); padding: 1rem .6rem .35rem; font-weight: 800; }
.sidebar a.item { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 10px; color: color-mix(in srgb, var(--cream) 82%, transparent); font-weight: 600; font-size: .9rem; }
.sidebar a.item:hover { background: rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.sidebar a.item.active { background: var(--ochre); color: #fff; }
.sidebar a.item .count { margin-left: auto; background: var(--gold); color: var(--char); border-radius: 99px; font-size: .72rem; padding: .05rem .5rem; font-weight: 800; }
.sidebar .foot { padding: 1rem; border-top: 1px solid rgba(255,255,255,.08); font-size: .8rem; }
.sidebar .foot a { color: var(--gold); }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.6rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar h1 { font-family: var(--font); font-size: 1.15rem; margin: 0; font-weight: 800; }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.topbar .who .avatar { width: 38px; height: 38px; border-radius: 50%; font-size: .82rem; }
.topbar .who b { display: block; font-size: .88rem; line-height: 1.2; } .topbar .who span { font-size: .75rem; color: var(--muted); }
.main { padding: 1.6rem; min-width: 0; }
.menu-btn { display: none; background: none; border: 1.5px solid var(--line); border-radius: 10px; padding: .4rem .55rem; cursor: pointer; color: var(--ink); }
@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 60; transform: translateX(-100%); transition: .2s; }
  .sidebar.open { transform: none; box-shadow: 0 0 0 100vmax rgba(0,0,0,.45); }
  .menu-btn { display: inline-flex; }
  .main { padding: 1rem; } .topbar { padding: .7rem 1rem; }
  .topbar .who div { display: none; }
}
.page-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.page-title h2 { margin: 0; font-size: 1.55rem; }
.page-title p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.1rem; }
.span-12 { grid-column: span 12; } .span-8 { grid-column: span 8; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; }
@media (max-width: 1080px) { .span-8, .span-6, .span-4 { grid-column: span 12; } }
.welcome { background: var(--char) var(--zig-gold) repeat-x bottom/24px 12px; color: var(--cream); padding: 1.6rem 1.6rem 2.2rem; border-radius: var(--radius); }
.welcome h2 { margin: 0 0 .3rem; }
.welcome p { margin: 0; color: color-mix(in srgb, var(--cream) 75%, transparent); }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: .8rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--line); }
.list li:last-child { border: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .grow b { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .grow span { font-size: .8rem; color: var(--muted); }
.shift-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: 8px; color: #fff; font-size: .75rem; font-weight: 700; white-space: nowrap; }
/* Jadwal */
.sched { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .85rem; min-width: 880px; }
.sched th, .sched td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: .5rem; vertical-align: top; }
.sched th { background: var(--muted-bg); font-size: .78rem; text-align: center; position: sticky; top: 0; }
.sched th.today { background: var(--ochre); color: #fff; }
.sched td.name { min-width: 190px; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.sched td.name b { display: block; } .sched td.name span { font-size: .75rem; color: var(--muted); }
.sched td.today { background: color-mix(in srgb, var(--ochre) 6%, transparent); }
.sched .slot { display: block; border-radius: 8px; padding: .3rem .45rem; color: #fff; margin-bottom: .3rem; font-size: .74rem; line-height: 1.3; text-decoration: none; }
.sched .slot small { display: block; opacity: .85; font-size: .68rem; }
.sched .off { color: var(--muted); font-size: .72rem; text-align: center; display: block; padding-top: .4rem; }
.daypicker { display: flex; gap: .4rem; flex-wrap: wrap; }
.daypicker label { margin: 0; }
.daypicker input { display: none; }
.daypicker span { display: inline-block; padding: .45rem .8rem; border-radius: 10px; border: 1.5px solid var(--line); cursor: pointer; font-weight: 600; font-size: .85rem; }
.daypicker input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.staffpick { max-height: 300px; overflow-y: auto; border: 1.5px solid var(--line); border-radius: 10px; padding: .4rem; }
.staffpick label { display: flex; gap: .6rem; align-items: center; padding: .45rem .5rem; border-radius: 8px; margin: 0; font-weight: 500; cursor: pointer; }
.staffpick label:hover { background: var(--muted-bg); }
.staffpick .grp { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: .5rem .5rem .2rem; font-weight: 800; }
/* Laporan */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 700px) { .ba { grid-template-columns: 1fr; } }
.ba h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; display: flex; gap: .4rem; align-items: center; }
.ba h4.before { color: var(--danger); } .ba h4.after { color: var(--ok); }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.thumbs figure { margin: 0; position: relative; border-radius: 10px; overflow: hidden; background: var(--sand); }
.thumbs img { aspect-ratio: 4/3; object-fit: cover; width: 100%; cursor: zoom-in; }
.thumbs form { position: absolute; top: 4px; right: 4px; }
.thumbs form button { background: rgba(0,0,0,.6); color: #fff; border: 0; border-radius: 6px; padding: 0 .4rem; cursor: pointer; }
.dropzone { border: 2px dashed var(--line); border-radius: 12px; padding: 1rem; text-align: center; background: color-mix(in srgb, var(--muted-bg) 40%, transparent); }
.dropzone.before { border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.dropzone.after { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: .4rem; margin-top: .6rem; }
.preview img { aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.report-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 1rem; align-items: center; padding: .9rem 1.25rem; border-bottom: 1px solid var(--line); color: var(--ink); }
.report-row:hover { background: color-mix(in srgb, var(--muted-bg) 40%, transparent); text-decoration: none; }
.report-row img { width: 96px; height: 70px; object-fit: cover; border-radius: 8px; }
.report-row b { display: block; }
.report-row .meta { font-size: .8rem; color: var(--muted); }
@media (max-width: 600px) { .report-row { grid-template-columns: 70px 1fr; } .report-row img { width: 70px; height: 56px; } .report-row > :last-child { grid-column: 2; } }
.decision { display: flex; gap: .5rem; flex-wrap: wrap; }
.decision label { margin: 0; flex: 1; min-width: 130px; }
.decision input { display: none; }
.decision span { display: block; text-align: center; padding: .65rem; border-radius: 10px; border: 1.5px solid var(--line); cursor: pointer; font-weight: 700; }
.decision input:checked + span.d-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.decision input:checked + span.d-rev { background: var(--info); color: #fff; border-color: var(--info); }
.decision input:checked + span.d-rej { background: var(--danger); color: #fff; border-color: var(--danger); }
.stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: .2rem; }
.stars input { display: none; }
.stars label { font-size: 1.6rem; color: var(--line); cursor: pointer; margin: 0; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: var(--gold); }
/* Matriks hak akses */
.matrix { border-collapse: separate; border-spacing: 0; font-size: .85rem; }
.matrix th, .matrix td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
.matrix thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; height: 170px; font-size: .78rem; vertical-align: bottom; white-space: nowrap; }
.matrix td.perm { position: sticky; left: 0; background: var(--surface); min-width: 280px; z-index: 1; }
.matrix td.perm code { font-size: .72rem; color: var(--muted); }
.matrix td.cell { text-align: center; }
.matrix td.cell input { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.matrix tr.grp td { background: var(--char); color: var(--cream); font-weight: 800; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; }
.matrix tr:hover td.cell { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.bars { display: grid; gap: .6rem; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 50px; gap: .7rem; align-items: center; font-size: .85rem; }
.bar-row .track { height: 12px; background: var(--muted-bg); border-radius: 99px; overflow: hidden; }
.bar-row .track span { display: block; height: 100%; background: var(--ochre); border-radius: 99px; }
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { background: var(--char); color: var(--cream); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; text-align: center; position: relative; overflow: hidden; }
.auth-art::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--zig-gold); }
.auth-art img { width: 220px; margin-bottom: 1.5rem; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 16px; background: var(--bg); }
.auth-form .card { width: 100%; max-width: 420px; padding: 2rem; }
@media (max-width: 820px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { padding: 2rem 1rem 2.5rem; } .auth-art img { width: 120px; margin-bottom: .8rem; } }
.demo-accounts { font-size: .8rem; margin-top: 1rem; }
.demo-accounts button { background: var(--muted-bg); border: 0; border-radius: 8px; padding: .3rem .55rem; margin: .15rem; cursor: pointer; font: 600 .76rem var(--font); color: var(--ink); }

/* Jadwal: baris milik pengguna yang sedang masuk */
.sched tr.me td.name { box-shadow: inset 4px 0 0 var(--gold, #d4a73c); }
.sched .me-tag { display: inline-block; margin-top: .25rem; font-style: normal; font-size: .7rem; font-weight: 700; padding: .1rem .55rem; border-radius: 99px; background: var(--gold); color: #1b1b1b; }

/* Situs demo */
.demo-banner { background: repeating-linear-gradient(135deg, #d9a441 0 14px, #e3b65a 14px 28px); color: #1b1b1b; text-align: center; font-size: .82rem; padding: .45rem 1rem; position: relative; z-index: 60; }
.demo-banner a { color: #1b1b1b; text-decoration: underline; font-weight: 700; }