/* style.css — Mobile-first, very responsive, touch-friendly */

/* Theme variables */
:root{
  --bg: #767e8a;
  --card: #eaf5e7;
  --muted: #6b7280;
  --accent: #1366d6;
  --accent-2: #0b57c6;
  --danger: #e02424;
  --success: #16a34a;
  --border: #e6e9ef;
  --radius: 12px;
  --text: #0f172a;
  --ui-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --tap: 14px; /* minimum tap size padding */
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--ui-font); background:var(--bg);
  color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-size:15px; line-height:1.45;
}

/* Viewport hint (if not present) — ensure meta viewport is added in head:
   <meta name="viewport" content="width=device-width,initial-scale=1"> */

/* Page container */
.container{
  width:100%;
  max-width:1100px;
  margin:auto auto;
  padding:8px;
  background-color: #d8dfde;
}

.tbody{
  background:color#8a9c70;}

/* Header */
header{display:flex;flex-direction:row;align-items:center;gap:12px;margin-bottom:10px}
.header-logo{height:36px}
.brand{
  display:flex;flex-direction:column;
}
.brand .title{font-size:20px;font-weight:700;line-height:1}
.brand .subtitle{font-size:12px;color:var(--muted);margin-top:2px}

/* Nav */
nav{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 14px}
nav a{color:var(--accent-2);text-decoration:none;padding:6px 8px;border-radius:8px;font-weight:600}
nav a:hover{background:rgba(11,87,198,0.06)}

/* Card */
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px; box-shadow:0 8px 30px rgba(2,6,23,0.06);
}

/* Headings */
h1,h2,h3{margin:0 0 8px 0}
h1{font-size:20px}
h2{font-size:18px}

/* Buttons - touch friendly */
.button,button{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--accent); color:#fff; border:0; padding:10px 14px; border-radius:10px;
  font-weight:700; cursor:pointer; min-height:44px; min-width:44px;
  box-shadow:0 8px 20px rgba(19,102,214,0.12); transition:transform .12s, box-shadow .12s;
}
.button.secondary{background:transparent;color:var(--accent-2);border:1px solid var(--border);box-shadow:none}
.button:active{transform:translateY(1px)}
a.button{text-decoration:none}

/* Form rows (stacked on mobile) */
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.form-row-inline{display:flex;gap:8px;align-items:center}
.form-row label{font-size:13px;color:var(--muted);font-weight:700}
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="password"],.form-row textarea,select{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#fff;
  outline:none; font-size:15px;
}
.form-row textarea{min-height:120px;resize:vertical}
.form-row input:focus, .form-row textarea:focus, select:focus{
  border-color: rgba(11,87,198,0.9); box-shadow:0 8px 30px rgba(11,87,198,0.06);
}

/* Tables responsive: stack rows into cards on mobile */
.table-wrap{width:100%;overflow:auto}
table.striped-admin{width:100%;border-collapse:collapse;margin-top:8px;font-size:14px}
table.striped-admin thead{display:none} /* hidden on mobile default */
table.striped-admin tbody td{; display:block;padding:10px;border-bottom:1px solid rgba(14,20,30,0.04)}
table.striped-admin tbody tr{display:block;margin-bottom:12px;background:transparent;border-radius:8px;overflow:hidden}
.table-row-key{font-weight:700;color:var(--muted);display:inline-block;width:50%;}

/* On wider screens show normal table layout */

/* Small helper for actions */
.table-actions a{color:var(--accent-2);text-decoration:none;margin-right:8px;font-weight:600}

/* Footer totals row */
tfoot td{font-weight:700;padding-top:12px}

/* Modal overlay - mobile friendly */
.modal-overlay{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:linear-gradient(transparent, rgba(2,6,23,0.45));z-index:9999;padding:8px}
.modal-container{width:100%;max-width:980px;background:var(--card);border-radius:14px 14px 0 0;padding:14px;box-shadow:0 20px 60px rgba(2,6,23,0.12);max-height:92vh;overflow:auto}
.modal-close{position:absolute;right:16px;top:10px;border:0;background:transparent;font-size:20px}

/* On desktop center modal
@media(min-width:760px){
  .modal-overlay{align-items:center;justify-content:center;padding:20px}
  .modal-container{border-radius:12px 12px 12px 12px}  */
}

/* Permissions matrix tweaks */
#rolesBody input[type="text"]{padding:8px;border-radius:8px;border:1px solid var(--border)}
#rolesBody input[type="checkbox"]{width:18px;height:18px}
#rolesBody .btnDel{background:#fff;border:1px solid #f1f3f5;color:var(--danger);padding:6px 10px;border-radius:8px;cursor:pointer}

/* Utility small */
.small{font-size:13px;color:var(--muted)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef4ff;color:var(--accent-2);font-weight:700}

/* Responsive grid for admin area (two-column on tablet/desktop) 
.admin-grid{display:block;gap:16px}
@media(min-width:980px){
  .admin-grid{display:grid;grid-template-columns:1fr 420px;align-items:start}
  .admin-left{order:0}
  .admin-right{order:1}
}
*/
/* Accessibility: focus visible */
:focus{outline:none}
:focus-visible{outline:3px solid rgb(19, 103, 214);border-radius:8px}

/* Misc */
.btn-inline{display:inline-flex;align-items:center;gap:8px}

/* Table stripe + pill status + compact action buttons */
/* warna dasar: pastel hijau seperti screenshot */
.table-striped-beauty {
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  color:#073642;
}

/* zebra: alternating soft mint / white */
.table-striped-beauty tbody tr:nth-child(odd) {
  background: rgba(223, 238, 245, 0.918); /* very light mint */
}
.table-striped-beauty tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.9);
}

/* row spacing visual (use box-shadow on desktop) 
@media(min-width:760px){
  .table-striped-beauty tbody tr {
    border-radius:10px;
    overflow:hidden;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.6);
  }
}
*/
/* dotted vertical separator using repeating-linear-gradient */
.table-striped-beauty tbody td {
  position: relative;
}

/* add vertical dotted line at right edge of cell (except last) */
.table-striped-beauty tbody td:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: 0;
  width: 8px; /* space reserved for dots */
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(16, 16, 19, 0.226) 40%, transparent 41%);
  background-size: 1Px 1px; /* dot size x dot spacing */
  background-repeat: repeat-y;
  transform: translateX(50%); /* place dots slightly outside cell */
}

/* horizontal dotted line using linear-gradient */
.table-striped-beauty tbody tr {
  background-image: linear-gradient(transparent, transparent), repeating-linear-gradient(transparent, transparent 8px, rgba(15,23,42,0.06) 9px);
  background-position: 0 100%;
  background-size: 100% 1px;
  background-repeat: no-repeat;
}

/* cells */
.table-striped-beauty thead { position:sticky; top:0; z-index:10; background:#3E4673; color:#ffffff}
.table-striped-beauty th,
.table-striped-beauty td {
  padding:8px 4px;
  vertical-align:middle;
  border-bottom: 0;
}

/* make first column bold small-caps */
.table-striped-beauty td:first-child { font-weight:700; }

/* pills / status badges */

/* status colors */
.pill.success { background:#e6ffef; color:#047857; border-color: #bbf0d3; }   /* Lunas / Selesai */
.pill.info    { background:#fff6e6; color:#92400e; border-color:#ffe7b8; }   /* Proses / info */
.pill.warn    { background:#fff0f6; color:#9f1239; border-color:#ffd5e0; }   /* Dikembalikan / error */
.pill.neutral { background:#f1f8f9; color:#0f766e; border-color:#d6f0ee; }   /* default */

/* tiny action buttons (Print / Hapus / WA) */
.action-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:8px;
  font-size:13px;
  text-decoration:none;
  border:1px solid rgba(2,6,23,0.06);
  background:rgba(255,255,255,0.7);
  color:#0b57c6;
  cursor:pointer;
  min-height:36px;
}
.action-btn.print { background:#e7f3ff; color:#0b57c6; border-color:#cfe6ff; }
.action-btn.delete{ background:#fff5f6; color:#b91c1c; border-color:#ffdede; }
.action-btn.wa    { background:#e9fff3; color:#0b9f57; border-color:#cff6dd; }

/* hover */
.table-striped-beauty tbody tr:hover { transform: translateY(-1px); box-shadow:0 10px 30px rgba(2,6,23,0.06); }

/* compact layout for many columns on mobile: stack labels 
@media (max-width:760px){
  .table-striped-beauty thead { display:none; }
  .table-striped-beauty tbody td {
    display:block;
    padding:10px;
  }
  .table-striped-beauty td[data-label]:before {
    content: attr(data-label) ": ";
    font-weight:700;
    display:inline-block;
    width:10;
    color:#234;
  }
  .action-btn{ min-width:64px; padding:8px 10px; font-size:12px }
} */

/* small helper for right-aligned currency columns */
.text-right{ text-align:right; white-space:nowrap; }

/* subtle divider under the table */
.table-footer {
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed rgba(0,0,0,0.05);
  color:var(--muted, #6b7280);
  font-size:13px;
}
@media (max-width:760px){
    .table-striped-beauty {
    width:100%;
    border-collapse:collapse;
    font-size:10px;
    color:#000000 !important;
    padding: 10px;
  }
}



/* ---------- Modal overlay ---------- */
.modal-overlay{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:linear-gradient(transparent, rgba(2,6,23,0.45));z-index:9999;padding:8px}
.modal-container{width:100%;max-width:980px;background:var(--card);border-radius:14px 14px 0 0;padding:14px;box-shadow:0 20px 60px rgba(2,6,23,0.12);max-height:92vh;overflow:auto}
.modal-close{position:absolute;right:16px;top:10px;border:0;background:transparent;font-size:20px}
@media(min-width:760px){ .modal-overlay{align-items:center;justify-content:center;padding:20px} .modal-container{border-radius:12px} }

/* ---------- Admin permissions matrix tweaks ---------- */
#rolesBody input[type="text"]{padding:8px;border-radius:8px;border:1px solid var(--border)}
#rolesBody input[type="checkbox"]{width:18px;height:18px}
#rolesBody .btnDel{background:#fff;border:1px solid #f1f3f5;color:var(--danger);padding:6px 10px;border-radius:8px;cursor:pointer}
#addRoleBtn{background:transparent;border:1px dashed var(--border);color:var(--accent-2);padding:8px 10px;border-radius:10px}

/* ---------- Admin grid (two-column on wide screens) ---------- */
.admin-grid{display:block;gap:16px}
@media(min-width:980px){
  .admin-grid{display:grid;grid-template-columns:1fr 420px;align-items:start}
  .admin-left{order:0}
  .admin-right{order:1}
}

/* ---------- Helpers & utilities ---------- */
.small{font-size:14px;color:var(--muted)}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#eef4ff;color:var(--accent-2);font-weight:700}
.form-inline{display:flex;gap:8px;align-items:center}
.table-footer{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(0,0,0,0.05);color:var(--muted);font-size:14px}

/* focus visible */
:focus{outline:none}
:focus-visible{outline:3px solid rgba(19,102,214,0.18);border-radius:8px}

/* ---------- End of CSS ---------- */