/* Sistem Informasi Telur — gaya dasar (tanpa dependensi eksternal) */
:root{
  --bg:#f4f6f8; --card:#fff; --ink:#1f2937; --muted:#6b7280;
  --line:#e5e7eb; --brand:#b45309; --brand-2:#f59e0b; --brand-ink:#fff;
  --ok:#065f46; --ok-bg:#d1fae5; --warn:#92400e; --warn-bg:#fef3c7;
  --err:#991b1b; --err-bg:#fee2e2; --accent:#0e7490;
  --radius:10px; --shadow:0 1px 3px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{display:flex;align-items:center;gap:12px;background:var(--brand);
  color:var(--brand-ink);padding:10px 16px;position:sticky;top:0;z-index:20}
.topbar .brand{color:#fff;font-weight:700;font-size:18px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.topbar .user{font-size:13px;opacity:.95}
.topbar .user small{opacity:.8}
.menu-toggle{display:none;background:transparent;border:0;color:#fff;font-size:22px;cursor:pointer}

/* Layout */
.wrap{display:flex;min-height:calc(100vh - 48px)}
.sidebar{width:220px;background:#fff;border-right:1px solid var(--line);padding:12px 8px;flex:0 0 auto}
.sidebar a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:var(--ink);margin-bottom:2px}
.sidebar a:hover{background:var(--bg);text-decoration:none}
.sidebar a.active{background:var(--warn-bg);color:var(--warn);font-weight:600}
.sidebar .ico{width:20px;text-align:center}
.content{flex:1;padding:20px 24px;min-width:0}
.page-title{font-size:22px;margin:0 0 18px}

/* Cards & grid */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.card h2{margin:0 0 12px;font-size:17px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Stat tiles */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px}
.stat .label{color:var(--muted);font-size:13px}
.stat .value{font-size:26px;font-weight:700;margin-top:4px}
.stat .sub{color:var(--muted);font-size:12px;margin-top:2px}

/* Tables */
table{width:100%;border-collapse:collapse;background:#fff}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#fafafa;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
tbody tr:hover{background:#fcfcfc}
td.num,th.num{text-align:right}
.total-row td{font-weight:700;background:#fafafa}

/* Forms */
label{display:block;font-size:13px;color:var(--muted);margin:0 0 4px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid var(--line);
  border-radius:8px;font-size:14px;font-family:inherit;background:#fff}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-2);outline-offset:-1px;border-color:var(--brand-2)}
.field{margin-bottom:14px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row > .field{flex:1;min-width:150px}

/* Buttons */
.btn{display:inline-block;padding:9px 16px;border-radius:8px;border:1px solid transparent;
  background:var(--brand);color:#fff;font-size:14px;cursor:pointer;font-family:inherit}
.btn:hover{background:#92400e;text-decoration:none;color:#fff}
.btn-sm{padding:5px 10px;font-size:13px}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.15);color:#fff}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{background:var(--bg);color:var(--ink)}
.btn-danger{background:var(--err)}
.btn-danger:hover{background:#7f1d1d}

/* Alerts & badges */
.alert{padding:11px 14px;border-radius:8px;margin-bottom:16px;font-size:14px}
.alert-ok{background:var(--ok-bg);color:var(--ok)}
.alert-err{background:var(--err-bg);color:var(--err)}
.alert-warn{background:var(--warn-bg);color:var(--warn)}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600}
.badge-own{background:#dbeafe;color:#1e40af}
.badge-partner{background:#e0e7ff;color:#3730a3}
.badge-cash{background:var(--ok-bg);color:var(--ok)}
.badge-hutang{background:var(--warn-bg);color:var(--warn)}
.badge-defect{background:var(--err-bg);color:var(--err)}

/* Toolbar */
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .spacer{margin-left:auto}
.muted{color:var(--muted)}
.right{text-align:right}
.mt{margin-top:16px}

/* Login */
.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--brand)}
.login-card{background:#fff;padding:32px;border-radius:14px;width:340px;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.login-card h1{margin:0 0 6px;font-size:22px}
.login-card p{margin:0 0 20px;color:var(--muted);font-size:14px}

/* Bottom nav (mobile) — disembunyikan di desktop */
.bottom-nav{display:none}
.nav-backdrop{display:none}

/* Responsive */
@media (max-width:860px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .menu-toggle{display:block}
  .sidebar{position:fixed;left:-260px;top:48px;bottom:0;width:250px;transition:left .2s;z-index:40;
    box-shadow:2px 0 12px rgba(0,0,0,.15);overflow-y:auto;padding-bottom:80px}
  body.nav-open .sidebar{left:0}
  body.nav-open .nav-backdrop{display:block;position:fixed;inset:48px 0 0 0;background:rgba(0,0,0,.4);z-index:35}
  .content{padding:14px 14px 84px}       /* ruang utk bottom-nav */
  .page-title{font-size:19px;margin-bottom:14px}

  /* Sentuhan lebih besar di mobile */
  input,select,textarea{font-size:16px;padding:12px}  /* 16px cegah zoom iOS */
  .btn{padding:13px 18px;font-size:15px}
  .btn-sm{padding:8px 12px}
  .row > .field{flex:1 1 100%}

  /* Bottom navigation bar */
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:38;
    background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.06);
    padding:4px 2px env(safe-area-inset-bottom)}
  .bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    padding:7px 2px;color:var(--muted);font-size:11px;border-radius:8px}
  .bottom-nav a:hover{text-decoration:none}
  .bottom-nav a.active{color:var(--brand);font-weight:600}
  .bottom-nav .bn-ico{font-size:20px;line-height:1}
  .bottom-nav .bn-label{line-height:1}
}

/* Intake per-grade: daftar kartu + stepper (touch-friendly, semua ukuran layar) */
.grade-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.grade-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);background:#fff}
.grade-card:last-child{border-bottom:0}
.grade-card:nth-child(even){background:#fbfbfb}
.grade-card .g-name{flex:1;font-weight:600;min-width:0}
.grade-card .g-name small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.stepper{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.stepper button{width:44px;height:44px;font-size:22px;border:1px solid var(--line);
  background:#fff;border-radius:10px;line-height:1;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.stepper button:active{background:var(--warn-bg)}
.stepper input{width:84px;text-align:center;font-size:18px;padding:11px 4px}
@media (max-width:600px){
  .stepper input{width:64px}
  .grade-card .g-name{font-size:15px}

  /* Item penjualan: ubah tabel jadi kartu bertumpuk di HP */
  .sale-items-wrap{overflow:visible;border:0}
  .sale-items-wrap thead{display:none}
  .sale-items-wrap table,.sale-items-wrap tbody,.sale-items-wrap tr,.sale-items-wrap td{display:block;width:100%}
  .sale-items-wrap tr[data-row]{border:1px solid var(--line);border-radius:var(--radius);
    padding:8px 10px;margin-bottom:12px;background:#fff;position:relative}
  .sale-items-wrap td{border:0;padding:6px 0;white-space:normal}
  .sale-items-wrap td::before{content:attr(data-label);display:block;font-size:12px;
    color:var(--muted);margin-bottom:3px}
  .sale-items-wrap td[data-label="Subtotal"]{font-weight:700;border-top:1px dashed var(--line);padding-top:8px;margin-top:4px}
  .sale-items-wrap td:last-child{position:absolute;top:6px;right:8px;width:auto;padding:0}
  .sale-items-wrap td:last-child::before{display:none}
}

/* ---- Offline / PWA UI ---- */
.off-banner{display:none;position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--warn);color:#fff;text-align:center;padding:8px 12px;font-size:13px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom))}
body.is-offline .off-banner{display:block}
body.is-offline .bottom-nav{bottom:38px}   /* geser nav agar tak ketutup banner */

.sync-pill{display:none;position:fixed;right:14px;bottom:86px;z-index:52;
  align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;cursor:pointer;
  padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600;
  box-shadow:0 4px 14px rgba(0,0,0,.25);font-family:inherit}
.sync-pill .sp-dot{width:9px;height:9px;border-radius:50%;background:#fff;opacity:.9}
.sync-pill.busy{opacity:.7}
.sync-pill.busy .sp-dot{animation:pulse .9s infinite}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}
@media (min-width:861px){.sync-pill{bottom:20px}}

.toast-box{position:fixed;left:50%;transform:translateX(-50%);bottom:96px;z-index:60;
  display:flex;flex-direction:column;gap:8px;width:calc(100% - 32px);max-width:420px;pointer-events:none}
.toast{background:#111827;color:#fff;padding:11px 14px;border-radius:10px;font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,.3);opacity:0;transform:translateY(12px);transition:.25s}
.toast.show{opacity:1;transform:translateY(0)}
.toast-ok{background:var(--ok)}
.toast-warn{background:var(--warn)}
.toast-err{background:var(--err)}

/* Print (kwitansi) */
@media print{
  .topbar,.sidebar,.no-print,.bottom-nav,.off-banner,.sync-pill,.toast-box,.nav-backdrop{display:none!important}
  .wrap{display:block}
  .content{padding:0}
  body{background:#fff;font-size:13px}
  .card{box-shadow:none;border:0}
}