/* module_base.css – utilities, card, buttons, forms, table, DataTables, alerts, modal, scrollbar */

/* Inline form layout */
.form-inline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}
.form-inline .search-pair{
  margin-left:auto;
  display:flex;
  align-items:center;
}
.form-inline select,
.form-inline .btn{
  height:32px;
  line-height:32px;
}
.form-inline .sf-check{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Global base */
*{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  min-height:100%;
}

body{
  min-height:100vh;
  margin:0;
  color:var(--txt);
  font:500 14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  background:transparent;
  position:relative;
}

/* fixed gradient overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:var(--bg-gradient);
  will-change:transform;
}

/* link */
a{
  color:var(--acc);
  text-decoration:none;
}
a:hover{
  text-decoration:underline;
}

/* Utilities */
.container{ max-width:1200px; margin:0 auto; padding:16px; }
.pad{ padding:16px; }
.wrap{ max-width:960px; margin:0 auto; padding:16px; }
.muted{ opacity:.9; color:var(--muted); }

/* Cards */
.card{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-soft);
  padding:16px;
}

/* Buttons – aware dark / light */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:36px;
  padding:0 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:13px;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease,
    filter .18s ease;
}

.btn:hover{
  background:var(--hover);        /* sudah dibedakan di theme.css */
  border-color:var(--border-soft);
  color:var(--text);
}

/* Primary */
.btn.primary,
.btn.btn-primary{
  background:var(--acc);
  border-color:var(--acc);
  color:#ffffff;
}

.btn.primary:hover,
.btn.btn-primary:hover{
  filter:brightness(1.05);        /* aman untuk dark & light */
}

/* Secondary (outline / ghost) */
.btn.secondary,
.btn.btn-secondary{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}

.btn.secondary:hover,
.btn.btn-secondary:hover{
  background:var(--hover);
  border-color:var(--border-soft);
}

/* Inputs / Select / Textarea */
.input,
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="password"],
select,
textarea{
  width:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  font-size:14px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

input::placeholder,
textarea::placeholder{
  color:var(--placeholder);
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--border-focus);
  box-shadow:0 0 0 3px rgba(10,132,255,.35);
}

:disabled,
[aria-disabled="true"]{
  color:var(--muted);
  background:var(--bg-muted);
  border-color:var(--border-soft);
}

/* Responsive helpers */
.hide-on-mobile{ display:block; }
.show-on-mobile{ display:none; }

@media (max-width:820px){
  .container{ padding:12px; }
  .hide-on-mobile{ display:none; }
  .show-on-mobile{ display:block; }
  .pad{ padding:12px; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ===== Alerts ===== */
.alert{
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  margin:8px 0;
}
.alert-danger{
  background:rgba(255,69,58,.08);
  border:1px solid var(--danger);
  color:var(--danger);
}
.alert-success{
  background:var(--success-soft);
  border:1px solid var(--success);
  color:var(--success);
}
.alert-warning{
  background:var(--warning-soft);
  border:1px solid var(--warning);
  color:var(--warning);
}
.alert-info{
  background:var(--info-soft);
  border:1px solid var(--info);
  color:var(--info);
}

/* ===== Badges / Status ===== */
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid var(--badge-border);
  color:var(--badge-text);
  background:var(--badge-bg);
}

.badge-success{
  background:var(--success-soft);
  border-color:var(--success);
  color:var(--success);
}
.badge-danger{
  background:rgba(255,69,58,.14);
  border-color:var(--danger);
  color:var(--danger);
}
.badge-warning{
  background:var(--warning-soft);
  border-color:var(--warning);
  color:var(--warning);
}
.badge-info{
  background:var(--info-soft);
  border-color:var(--info);
  color:var(--info);
}

/* ===== Modal (Bootstrap override warna) ===== */
.modal-content{
  background-color:var(--surface-2) !important;
  color:var(--text) !important;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-strong);
}
.modal-header{
  border-bottom:1px solid var(--border);
}
.modal-footer{
  border-top:1px solid var(--border);
}
.modal-backdrop.show{
  opacity:.7;
}

/* ===== Table Base ===== */
table{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  color:var(--text);
  background:var(--surface-2);
}

.table,
.table-sim,
.dataTable{
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  background:var(--surface-2);
  border-radius:10px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}

.table th,
.table td,
.table-sim th,
.table-sim td,
.dataTable th,
.dataTable td{
  padding:8px 10px;
  font-size:13px;
  border-bottom:1px solid var(--border);
}

.table thead th,
.table-sim thead th,
.dataTable thead th{
  background:var(--bg-3);
  color:var(--text);
  text-align:left;
  font-weight:600;
  border-bottom:1px solid var(--border);
}

.table tbody tr:nth-child(even),
.table-sim tbody tr:nth-child(even),
.dataTable tbody tr:nth-child(even){
  background:rgba(255,255,255,.02);
}

.table tbody tr:hover,
.table-sim tbody tr:hover,
.dataTable tbody tr:hover{
  background:rgba(10,132,255,.08);
}

/* ===== DataTables Wrapper ===== */
.dataTables_wrapper{
  color:var(--text);
  font-size:13px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter{
  margin:8px 0;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label{
  color:var(--muted);
  font-size:13px;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input{
  margin-left:4px;
  padding:6px 8px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  outline:none;
}

.dataTables_wrapper .dataTables_filter input::placeholder{
  color:var(--placeholder);
}

.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus{
  border-color:var(--border-focus);
  box-shadow:0 0 0 3px rgba(10,132,255,.3);
}

.dataTables_wrapper .dataTables_info{
  color:var(--muted);
  padding-top:10px;
}

.dataTables_wrapper .dataTables_paginate{
  padding-top:6px;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  margin:0 2px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text) !important;
  font-size:12px;
  cursor:pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  border-color:var(--border-focus);
  background:rgba(10,132,255,.12);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff !important;
  box-shadow:0 4px 10px rgba(10,132,255,.5);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  opacity:.4;
  cursor:default;
  background:transparent;
  border-color:transparent;
}

/* Processing indicator */
.dataTables_wrapper .dataTables_processing{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  padding:10px 16px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--muted);
  box-shadow:var(--shadow-soft);
}

/* Sorting icons */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc{
  position:relative;
  padding-right:18px;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after{
  content:"";
  position:absolute;
  right:6px;
  top:50%;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  opacity:.4;
}
table.dataTable thead .sorting::after{
  border-top:5px solid var(--muted);
  margin-top:-2px;
}
table.dataTable thead .sorting_asc::after{
  border-bottom:5px solid var(--accent);
  margin-top:-2px;
  opacity:1;
}
table.dataTable thead .sorting_desc::after{
  border-top:5px solid var(--accent);
  margin-top:-3px;
  opacity:1;
}

/* ===== Scrollbar ===== */
::-webkit-scrollbar{
  width:8px;
  height:8px;
}
::-webkit-scrollbar-track{
  background:rgba(0,0,0,.05);
}
::-webkit-scrollbar-thumb{
  background:var(--bg-3);
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{
  background:var(--border);
}