/* root/css/super_admin/style.css
   Scoped only under .superadmin-root to avoid conflicts with global CSS */

.superadmin-root{all:initial;display:block;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,Helvetica,sans-serif;color:#111827;box-sizing:border-box}
.superadmin-root *{box-sizing:inherit}

/* Layout container (you can place this inside your page) */
.superadmin-root .sa-container{
  all:unset;
  display:block;
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:20px;
  background:transparent;
}

/* Header */
.superadmin-root .sa-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.superadmin-root .sa-header h1{all:unset;font-size:20px;font-weight:700}
.superadmin-root .sa-header .sa-meta{all:unset;color:#6b7280;font-size:13px}

/* Grid */
.superadmin-root .sa-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}

/* Card */
.superadmin-root .sa-card{
  all:unset;
  display:block;
  background:#ffffff;
  border:1px solid #e6e6ea;
  border-radius:8px;
  padding:12px;
  box-shadow:0 1px 0 rgba(16,24,40,0.02);
}

/* Table */
.superadmin-root .sa-table{all:unset;display:table;width:100%;border-collapse:collapse;font-size:13px}
.superadmin-root .sa-table thead{display:table-header-group}
.superadmin-root .sa-table tbody{display:table-row-group}
.superadmin-root .sa-table th,
.superadmin-root .sa-table td{
  padding:10px;border-bottom:1px solid #f3f4f6;text-align:left;
}
.superadmin-root .sa-table th{background:#fafafa;font-weight:600;color:#111827}

/* Small text */
.superadmin-root .sa-small{font-size:12px;color:#6b7280}

/* Audit list */
.superadmin-root .sa-audit-list{list-style:none;padding:0;margin:0}
.superadmin-root .sa-audit-list li{padding:10px;border-bottom:1px solid #f7f7fb}
.superadmin-root .sa-audit-list .sa-time{font-size:12px;color:#6b7280;margin-bottom:6px}
.superadmin-root .sa-audit-list pre{margin:0;font-family:inherit;font-size:13px;white-space:pre-wrap}

/* Buttons (scoped) */
.superadmin-root .sa-btn{all:unset;display:inline-block;padding:8px 10px;border-radius:6px;background:#2563eb;color:#fff;text-decoration:none;font-size:13px}
.superadmin-root .sa-btn.ghost{background:transparent;color:#2563eb;border:1px solid #2563eb}

/* Responsive */
@media (max-width:900px){
  .superadmin-root .sa-grid{grid-template-columns:1fr}
  .superadmin-root .sa-header{flex-direction:column;align-items:flex-start;gap:6px}
}

#bidangIrto .table-container {
  max-width: 900px; /* Membatasi lebar tabel agar tidak melar di layar lebar */
  margin: 0 auto;   /* Membuat posisi tabel rata tengah */
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
#bidangIrto table {
  border-collapse: collapse;
  background: #fff;
}
#bidangIrto table tbody tr {
  transition: background-color 0.2s ease;
}
/* Efek hover halus saat baris dilewati kursor */
#bidangIrto table tbody tr:hover {
  background-color: #f8fafc !important;
}
/* Memaksa tombol aksi berjejer ke samping secara horizontal */
#bidangIrto table td button {
  display: inline-block !important;
  width: auto !important;
  min-width: 75px;
  padding: 6px 14px !important;
  margin: 0 4px !important;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  border-radius: 6px;
  background: #fff;
}
/* Backdrop/Latar Belakang Modal */
.modal-overlay-irto {
position: fixed;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(15, 23, 42, 0.4);
backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
z-index: 9999;
opacity: 0; pointer-events: none;
transition: all 0.25s ease;
}
.modal-overlay-irto.active {
opacity: 1; pointer-events: auto;
}
/* Kotak Modal */
.modal-box-irto {
background: #fff;
width: 100%; max-width: 450px;
border-radius: 16px;
padding: 24px;
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
transform: scale(0.9);
transition: all 0.25s ease;
}
.modal-overlay-irto.active .modal-box-irto {
transform: scale(1);
}
.modal-field {
margin-bottom: 16px;
}
.modal-field label {
display: block; font-size: 13px; font-weight: 600; color: #4b5563; margin-bottom: 6px;
}
.modal-field input[type="text"] {
width: 100%; padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; outline: none; transition: border 0.2s;
}
.modal-field input[type="text"]:focus {
border-color: #2563eb;
}
.modal-field .old-value-box {
background: #f8fafc; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #64748b; font-weight: 500;
}
.modal-buttons {
display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px;
}
.btn-modal {
padding: 10px 18px; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.btn-modal-cancel { background: #f1f5f9; color: #475569; }
.btn-modal-cancel:hover { background: #e2e8f0; }
.btn-modal-primary { background: #2563eb; color: #fff; }
.btn-modal-primary:hover { background: #1d4ed8; }
.btn-modal-danger { background: #dc2626; color: #fff; }
.btn-modal-danger:hover { background: #b91c1c; }