/* ============================================================
   POS Laundry — Light UI
   Desain profesional, elegan, responsif, print-friendly
   ============================================================ */

:root{
  --bg:#F6F8FC;          /* latar lembut */
  --surface:#FFFFFF;     /* kartu / panel */
  --ink:#0F172A;         /* teks utama */
  --muted:#6B7280;       /* teks sekunder */
  --line:#E5E7EB;        /* garis halus */
  --brand:#16A34A;       /* hijau utama */
  --brand-2:#15803D;     /* hover brand */
  --accent:#F59E0B;      /* aksen (peringatan ringan) */
  --danger:#DC2626;      /* merah tombol hapus */
  --shadow-sm:0 1px 3px rgba(15,23,42,0.07);
  --shadow:0 4px 14px rgba(15,23,42,0.10);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
}

/* ====== Reset ringkas & base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.6 "Inter","Segoe UI",system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ====== Layout util ====== */
.container{max-width:1200px;margin:0 auto;padding:18px}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}

/* ====== Navbar ====== */
.navbar{
  position:sticky; top:0; z-index:1000;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.navbar-inner{
  display:flex; align-items:center; gap:16px;
  max-width:1200px; margin:0 auto; padding:10px 16px;
}
.navbar-brand{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.navbar-brand .logo{
  width:34px;height:34px;border-radius:10px;
  /*background:linear-gradient(135deg,#22C55E,#16A34A);*/
  box-shadow:0 6px 18px rgba(34,197,94,.35);
}
.navbar-brand .title{
  font-weight:800; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.navbar-links{
  display:flex; align-items:center; gap:8px; margin-left:auto;
}
.nav-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:12px; color:#334155;
}
.nav-link:hover{ background:#F1F5F9 }
.nav-link.active{ background:#DCFCE7; color:#166534; font-weight:600 }

.navbar-actions{ display:flex; align-items:center; gap:8px; margin-left:8px }
.navbar .btn{ padding:8px 12px }

/* Mobile nav */
.nav-toggle{
  display:none; margin-left:auto; border:1px solid var(--line);
  padding:8px 10px; border-radius:10px; background:var(--surface)
}
@media (max-width:860px){
  .navbar-links{ display:none }
  .navbar-actions{ display:none }
  .nav-toggle{ display:inline-flex }
  .navbar.open .navbar-links,
  .navbar.open .navbar-actions{
    display:flex; flex-direction:column; align-items:stretch;
    width:100%; gap:6px; padding:10px 16px 14px;
    border-top:1px solid var(--line);
  }
}

/* ====== Card, table, grid ====== */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:2fr 1fr}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){ .grid.cols-4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
}

/* Tabel */
.table{
  width:100%; border-collapse:collapse; background:var(--surface);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
}
.table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left }
.table th{
  background:#F8FAFC; color:#334155; font-weight:600; font-size:13.5px;
}
.table tr:last-child td{ border-bottom:0 }

/* ====== Form ====== */
label{display:block; margin:8px 0 6px; color:#334155; font-weight:600; font-size:13.5px}
input[type="text"], input[type="number"], input[type="datetime-local"],
select, textarea{
  width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  outline:none; transition:all .15s ease;
}
textarea{min-height:84px; resize:vertical}
input:focus, select:focus, textarea:focus{
  border-color:#94A3B8; box-shadow:0 0 0 4px rgba(148,163,184,.2)
}

/* Row kecil */
.row{display:flex; gap:10px; align-items:flex-end}
.row > *{flex:1}
@media (max-width:640px){ .row{flex-direction:column} }

/* ====== Button ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border:0; border-radius:12px;
  background:var(--brand); color:#fff; cursor:pointer;
  box-shadow:0 6px 18px rgba(22,163,74,.25); transition:transform .05s ease, filter .2s ease;
}
.btn:hover{ filter:brightness(.98) }
.btn:active{ transform:translateY(1px) }
.btn.secondary{ background:#374151; box-shadow:0 6px 18px rgba(55,65,81,.18) }
.btn.warn{ background:var(--accent) }
.btn.danger{ background:var(--danger) }
.btn.ghost{
  background:#fff; color:#334155; border:1px solid var(--line); box-shadow:none
}
.btn.block{ width:100% }
.btn.sm{ padding:8px 10px; border-radius:10px; font-size:13.5px }

/* ====== Typo kecil ====== */
.h1{font-size:26px; font-weight:800; letter-spacing:.2px}
.h2{font-size:20px; font-weight:700}
.h3{font-size:16px; font-weight:700}
.muted{color:var(--muted); font-size:13.5px}
.kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.kpi .card{padding:14px}
.kpi .title{font-size:13.5px; color:#64748B}
.kpi .value{font-size:28px; font-weight:800; margin-top:4px}
@media (max-width:900px){ .kpi{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .kpi{grid-template-columns:1fr} }

/* ====== Badge/Tag ====== */
.tag{
  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600
}
.tag.on{ background:#DCFCE7; color:#166534 }
.tag.off{ background:#FEE2E2; color:#991B1B }
.tag.neutral{ background:#F1F5F9; color:#334155 }

/* ====== Kartu layanan ====== */
.service{
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; background:#fff;
}
.service .name{ font-weight:700 }
.service .meta{ color:var(--muted); font-size:12.5px }

/* ====== Footer kecil ====== */
.footer{
  color:#64748B; font-size:13px; text-align:center; padding:16px; margin-top:20px;
}

/* ====== Print Nota (bersih) ====== */
@media print{
  .navbar, .nav-toggle, .btn, .no-print{ display:none !important }
  body{ background:#fff }
  .card, .table{ box-shadow:none; border:0 }
}

/* ====== Form ====== */
label{display:block; margin:8px 0 6px; color:#334155; font-weight:600; font-size:13.5px}
input[type="text"], input[type="number"], input[type="datetime-local"],
input[type="password"], select, textarea{
  width:100%; padding:10px 12px;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  outline:none; transition:all .15s ease;
}
textarea{min-height:84px; resize:vertical}
input[type="text"]:focus, input[type="number"]:focus, input[type="datetime-local"]:focus,
input[type="password"]:focus, select:focus, textarea:focus{
  border-color:#94A3B8; box-shadow:0 0 0 4px rgba(148,163,184,.2)
}

/* ====== Make-over tampilan dropdown .ss2 ====== */
.ss2{ width:100%; max-width:420px; }

.ss2-control{
  width:100%; height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; box-sizing:border-box;
  border:1px solid #e5e7eb; border-radius:12px;
  background:#fff; color:#111; cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:border-color .15s, box-shadow .15s, background .15s;
  font:inherit;
}
.ss2-control:hover{ border-color:#d1d5db; }
.ss2-control:focus{ outline:none; }
.ss2-control:focus-visible{
  border-color:#c7d2fe;
  box-shadow:0 0 0 4px rgba(51,70,255,.08);
}
.ss2-control.is-empty #ss2-label{ color:#9ca3af; } /* tampak seperti placeholder */
.ss2-caret{ opacity:.75; flex:0 0 auto }

/* Panel dropdown */
/* Panel dibuat di atas semua dan diposisikan lewat JS */
.ss2-panel{
  position: fixed;         /* dari absolute -> fixed */
  z-index: 9999;           /* pastikan di atas navbar/card */
  left: 0; top: 0;         /* akan di-set JS saat open */
  width: auto;             /* di-set JS = lebar tombol */
  background:#fff;
  border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 12px 28px rgba(15,23,42,.12);
  overflow:hidden;
}

.ss2-search{
  width:100%; height:44px; padding:10px 12px; box-sizing:border-box;
  border:0; border-bottom:1px solid #eef1f5; background:#fff;
}
.ss2-search::placeholder{ color:#9ca3af; }
.ss2-list{ list-style:none; margin:0; padding:6px 0; max-height:260px; overflow:auto }
.ss2-item{
  padding:10px 12px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:14px;
}
.ss2-item:hover{ background:#f6f8fc; }
.ss2-item[aria-selected="true"]{ background:#eef2ff; }

/* Responsif */
@media (max-width:520px){ .ss2{ max-width:100%; } }