/* ============================================================
   app.css — Struk App (Responsive + DataTables)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary:   #1976D2;
  --primary-lt:#E3F2FD;
  --success:   #388E3C;
  --warning:   #F57C00;
  --danger:    #D32F2F;
  --gray:      #607D8B;
  --bg:        #f0f2f5;
  --card:      #ffffff;
  --border:    #E0E0E0;
  --text:      #333333;
  --text-sm:   #666666;
  --nav-h:     52px;
}

html { font-size: 14px; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
  background: var(--primary);
  color: #fff;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.nav-brand {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.nav-brand:hover {
  color: #fff;
  text-decoration: none;
  opacity: .9;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: background .15s;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* Hamburger button (mobile only) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 201;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Container ──────────────────────────────────────────── */
.container {
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px;
}

.page-title {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 16px;
}

/* ── Card ───────────────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .15s, transform .1s, box-shadow .15s;
  line-height: 1;
}
.btn:hover   { opacity: .88; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.btn:active  { transform: translateY(0); box-shadow: none; }
.btn:disabled{ opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary  { background: var(--primary); color: #fff; }
.btn-success  { background: var(--success); color: #fff; }
.btn-warning  { background: var(--warning); color: #fff; }
.btn-danger   { background: var(--danger);  color: #fff; }
.btn-secondary{ background: var(--gray);    color: #fff; }
.btn-light    { background: #ECEFF1; color: #333; }
.btn-block    { display: flex; width: 100%; justify-content: center; padding: 13px; font-size: 15px; margin: 8px 0; }
.btn-sm       { padding: 5px 10px; font-size: 12px; }

/* ── Alert ──────────────────────────────────────────────── */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.alert-ok      { background: #E8F5E9; color: #1B5E20; border-left: 4px solid #4CAF50; }
.alert-error   { background: #FFEBEE; color: #B71C1C; border-left: 4px solid #f44336; }
.alert-info    { background: var(--primary-lt); color: #0D47A1; border-left: 4px solid var(--primary); }
.alert-warning { background: #FFF8E1; color: #E65100; border-left: 4px solid #FF9800; }

/* ── Form ───────────────────────────────────────────────── */
.form-group { margin-bottom: 14px; }
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 12px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  background: #fff;
  color: var(--text);
  transition: border .15s, box-shadow .15s;
  -webkit-appearance: none;
}
.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25,118,210,.12);
}
select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 140px; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ── Badge ──────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}
.badge-success  { background: #E8F5E9; color: #2E7D32; }
.badge-primary  { background: var(--primary-lt); color: #1565C0; }
.badge-warning  { background: #FFF8E1; color: #E65100; }

/* ============================================================
   DataTables Custom Styling
   ============================================================ */
.dataTables_wrapper {
  font-size: 13px;
}

/* Top bar: length + search */
.dt-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.dataTables_length select {
  padding: 6px 28px 6px 10px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23666' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  transition: border .15s;
}
.dataTables_length select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25,118,210,.12);
}

/* Search input */
.dataTables_filter input {
  padding: 7px 12px 7px 34px;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  font-size: 13px;
  width: 220px;
  max-width: 100%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;
  transition: border .15s, box-shadow .15s;
}
.dataTables_filter input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(25,118,210,.12);
  width: 260px;
}
.dataTables_filter label { display: flex; align-items: center; gap: 6px; font-weight: 600; color: #555; font-size: 12px; }
.dataTables_filter label::before { content: ''; }

/* Table */
table.dataTable {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 13px;
}
table.dataTable thead th {
  background: #F5F7FA;
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #444;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
table.dataTable thead th:hover { background: #edf0f5; }
table.dataTable thead th.sorting::after       { content: ' ⇅'; opacity: .3; font-size: 10px; }
table.dataTable thead th.sorting_asc::after   { content: ' ↑'; opacity: 1;  font-size: 10px; color: var(--primary); }
table.dataTable thead th.sorting_desc::after  { content: ' ↓'; opacity: 1;  font-size: 10px; color: var(--primary); }

table.dataTable tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #F2F4F7;
  vertical-align: middle;
  line-height: 1.5;
}
table.dataTable tbody tr:hover { background: #F8FAFF; }
table.dataTable tbody tr:last-child td { border-bottom: none; }

/* Bottom bar */
.dt-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #F0F0F0;
}
.dataTables_info {
  font-size: 12px;
  color: var(--text-sm);
}
.dataTables_paginate {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  color: var(--text);
  transition: all .15s;
  text-decoration: none;
}
.dataTables_paginate .paginate_button:hover { background: var(--primary-lt); border-color: var(--primary); color: var(--primary); }
.dataTables_paginate .paginate_button.current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.dataTables_paginate .paginate_button.disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* Mobile: card-stack rows */
@media (max-width: 600px) {
  table.dataTable thead { display: none; }
  table.dataTable tbody tr {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }
  table.dataTable tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px solid #F2F4F7;
    font-size: 13px;
  }
  table.dataTable tbody td:last-child { border-bottom: none; }
  table.dataTable tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-right: 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  table.dataTable tbody td.td-actions { justify-content: flex-end; }
  table.dataTable tbody td.td-actions::before { content: ''; }
}

/* ============================================================
   Transaction Form — 2 Kolom + Preview
   ============================================================ */
.trx-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.trx-form        { flex: 1 1 400px; min-width: 300px; }
.trx-preview-col { flex: 0 0 250px; position: sticky; top: calc(var(--nav-h) + 12px); }

.receipt-box {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.receipt-box-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: 12px; color: #666; font-weight: 600;
  padding-bottom: 8px; border-bottom: 1px solid #f0f0f0;
}
.receipt-paper {
  width: 210px;
  margin: 0 auto;
  font-family: 'Courier New', monospace;
  font-size: 10.5px;
  line-height: 1.55;
  background: #FFFEF8;
  border: 1px dashed #e0d9c0;
  border-radius: 4px;
  padding: 10px 8px 20px;
  min-height: 180px;
  overflow: hidden;
}
.receipt-paper .r-bold    { font-weight: bold; }
.receipt-paper .r-center  { text-align: center; display: block; }
.receipt-paper .r-right   { text-align: right;  display: block; }
.receipt-paper .r-left    { text-align: left;   display: block; }
.receipt-paper .r-line    { color: #bbb; display: block; letter-spacing: -1px; }
.receipt-paper .r-size2   { font-size: 12.5px; }
.receipt-paper .r-size3   { font-size: 14px; }
.receipt-loading { display:none; text-align:center; color:#aaa; font-size:12px; padding:16px; font-family:sans-serif; }

.date-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.date-row .form-group { flex: 1; min-width: 150px; margin-bottom: 0; }
.date-format-badge { display:inline-block; background:var(--primary-lt); color:#1565C0; font-size:11px; padding:3px 8px; border-radius:4px; font-family:monospace; margin-top:4px; }

/* ── Item rows ───────────────────────────────────────────── */
.item-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; flex-wrap:wrap; }
.item-row .form-control { font-size: 13px; }
.col-name  { flex: 3; min-width: 100px; }
.col-qty   { flex: 1; min-width: 55px; }
.col-price { flex: 2; min-width: 90px; }
.col-sub   { flex: 2; min-width: 80px; color:#555; font-size:12px; padding:8px 4px; font-weight:600; }
.col-del   { flex: 0 0 auto; }

/* ============================================================
   Template Builder
   ============================================================ */
.builder-wrap { display: flex; gap: 16px; flex-wrap: wrap; }
.builder-sidebar { width: 210px; flex-shrink: 0; }
.builder-sidebar .tool-btn {
  display: block; width: 100%; text-align: left;
  padding: 7px 10px; margin-bottom: 3px;
  background: #F5F5F5; border: 1px solid #DDD;
  border-radius: 6px; cursor: pointer; font-size: 12px;
  transition: background .12s, border-color .12s;
}
.builder-sidebar .tool-btn:hover { background: var(--primary-lt); border-color: #90CAF9; }

.props-panel { background:#F9F9F9; border:1px solid #E0E0E0; border-radius:8px; padding:12px; margin-top:10px; display:none; }
.props-panel.show { display:block; }
.props-panel .form-group { margin-bottom:9px; }
.props-panel label { font-size:11px; }

.builder-canvas-wrap { flex: 1; min-width: 240px; }

/* ── Print page ─────────────────────────────────────────── */
.print-container { max-width: 440px; margin: auto; }
.print-preview { background:#fff; border:2px dashed #bbb; border-radius:8px; padding:14px 16px; font-family:'Courier New',monospace; font-size:11.5px; white-space:pre; line-height:1.55; max-width:240px; margin:0 auto 14px; overflow-x:auto; }

.env-badges { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.env-badge  { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.env-https   { background:#FFEBEE; color:#C62828; }
.env-http    { background:#E8F5E9; color:#2E7D32; }
.env-android { background:var(--primary-lt); color:#1565C0; }
.env-ios     { background:#EDE7F6; color:#4527A0; }
.env-desktop { background:#F3E5F5; color:#6A1B9A; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet & bawah */
@media (max-width: 768px) {

  .container { margin: 14px auto; padding: 0 12px; }
  .page-title { font-size: 17px; margin-bottom: 12px; }

  /* Hamburger aktif */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--primary);
    flex-direction: column;
    padding: 10px 0 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    z-index: 199;
    gap: 2px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 11px 20px; border-radius: 0; font-size: 14px; }
  .nav-links a:hover { background: rgba(255,255,255,.15); }

  /* Card padding */
  .card { padding: 14px; }

  /* Form row stack */
  .form-row { flex-direction: column; gap: 0; }
  .form-row .form-group { min-width: 100%; }

  /* Btn block mobile */
  .form-actions { flex-direction: column; }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* Builder */
  .builder-sidebar { width: 100%; }
  .builder-wrap { flex-direction: column; }

  /* Transaction layout stack */
  .trx-preview-col {
    flex: 1 1 100%;
    position: relative;
    top: 0;
    order: -1; /* preview dulu di atas */
  }
  .trx-form { flex: 1 1 100%; }
  .receipt-paper { width: 100%; max-width: 230px; }

  /* Item rows */
  .item-row { flex-wrap: wrap; }
  .col-name  { flex: 1 1 100%; }
  .col-qty   { flex: 1; min-width: 60px; }
  .col-price { flex: 2; min-width: 90px; }
  .col-sub   { flex: 1 1 auto; }

  /* DataTables */
  .dt-top { flex-direction: column; align-items: stretch; gap: 8px; }
  .dataTables_filter input { width: 100%; }
  .dt-bottom { flex-direction: column; align-items: center; }
  .dataTables_paginate { justify-content: center; }
  .dataTables_paginate .paginate_button { min-width: 36px; height: 36px; }

  /* Print page */
  .print-container { max-width: 100%; }
}

/* Mobile kecil */
@media (max-width: 420px) {
  .navbar { padding: 0 12px; }
  .nav-brand { font-size: 15px; }
  .btn { padding: 7px 11px; font-size: 12px; }
  table.dataTable tbody td { font-size: 12px; }
}

/* ============================================================
   Navbar — User Menu & Admin badge
   ============================================================ */
.nav-divider {
  width: 1px; height: 20px;
  background: rgba(255,255,255,.25);
  margin: 0 6px;
}
.nav-admin {
  background: rgba(255,193,7,.18) !important;
  color: #FFD740 !important;
  border: 1px solid rgba(255,193,7,.3);
}
.nav-admin:hover,
.nav-admin.active {
  background: rgba(255,193,7,.3) !important;
  color: #FFD740 !important;
}

/* User dropdown wrapper */
.nav-user-wrap { position: relative; }
.nav-user-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  padding: 5px 10px; color: #fff; cursor: pointer;
  font-size: 13px; font-weight: 600;
  transition: background .15s;
}
.nav-user-btn:hover { background: rgba(255,255,255,.25); }
.nav-avatar { font-size: 16px; }
.nav-uname  { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dropdown menu */
.nav-user-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border-radius: 10px; min-width: 190px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  border: 1px solid #E8E8E8;
  z-index: 300; overflow: hidden;
}
.nav-user-menu.open { display: block; }

.num-info  { padding: 14px 16px; background: #F8F9FA; }
.num-role  { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; background: #E3F2FD; color: #1565C0; }
.num-divider { height: 1px; background: #EEE; }
.num-item  { display: flex; align-items: center; gap: 8px; padding: 11px 16px; font-size: 13px; color: #333; text-decoration: none; transition: background .12s; cursor: pointer; }
.num-item:hover  { background: #F5F5F5; }
.num-logout      { color: #D32F2F !important; }
.num-logout:hover{ background: #FFEBEE !important; }

.alert-close {
  float: right; background: none; border: none;
  cursor: pointer; font-size: 18px; line-height: 1;
  color: inherit; opacity: .6; padding: 0 0 0 8px;
}
.alert-close:hover { opacity: 1; }

/* ── Responsive navbar user menu ───────────────────────── */
@media (max-width: 768px) {
  .nav-divider { display: none; }
  .nav-user-wrap { width: 100%; }
  .nav-user-btn  { width: 100%; justify-content: flex-start; border-radius: 0; border: none; padding: 11px 20px; background: rgba(0,0,0,.15); }
  .nav-user-menu {
    position: static;
    box-shadow: none; border: none; border-radius: 0;
    background: rgba(0,0,0,.12);
  }
  .nav-user-menu.open { display: block; }
  .num-info  { background: transparent; padding: 10px 20px; }
  .num-info, .num-info * { color: #fff !important; }
  .num-role  { background: rgba(255,255,255,.2); color: #fff !important; }
  .num-item  { padding: 10px 20px; color: rgba(255,255,255,.9) !important; }
  .num-item:hover { background: rgba(255,255,255,.1) !important; }
  .num-logout { color: #FFCDD2 !important; }
  .num-logout:hover { background: rgba(255,0,0,.15) !important; }
  .num-divider { background: rgba(255,255,255,.15); }
}

/* ============================================================
   Auth & User Dropdown
   ============================================================ */

/* Divider di navbar */
.nav-divider { width:1px; height:20px; background:rgba(255,255,255,.25); margin:0 4px; }

/* User dropdown button */
.nav-user { position: relative; }
.nav-user-btn {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px; padding: 5px 10px;
  cursor: pointer; color: #fff;
  font-size: 13px; font-weight: 500;
  transition: background .15s;
}
.nav-user-btn:hover { background: rgba(255,255,255,.22); }

.nav-avatar {
  width: 26px; height: 26px;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.nav-uname { max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-caret  { font-size: 10px; opacity: .7; }

/* Dropdown menu */
.nav-user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
  min-width: 180px;
  z-index: 300;
  overflow: hidden;
  animation: dropIn .18s ease;
}
.nav-user-menu.open { display: block; }
@keyframes dropIn {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}
.nav-user-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  color: #333; text-decoration: none;
  font-size: 13px; font-weight: 500;
  transition: background .12s;
}
.nav-user-menu a:hover { background: #F5F7FA; }
.nav-user-menu a span  { font-size: 15px; }
.nav-user-sep { height: 1px; background: #F0F0F0; margin: 4px 0; }
.nav-logout   { color: #D32F2F !important; }
.nav-logout:hover { background: #FFEBEE !important; }

/* Admin nav link */
.nav-links a.nav-admin {
  background: rgba(255,200,0,.15);
  border: 1px solid rgba(255,200,0,.3);
  border-radius: 6px;
}
.nav-links a.nav-admin:hover,
.nav-links a.nav-admin.active {
  background: rgba(255,200,0,.3);
}

/* Alert close button */
.alert-dismissible { padding-right: 36px; position: relative; }
.alert-close {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1;
  color: inherit; opacity: .6;
  padding: 4px;
}
.alert-close:hover { opacity: 1; }

/* ── Mobile: user menu fullwidth ─────────────────────────── */
@media (max-width: 768px) {
  .nav-divider { display: none; }
  .nav-user { width: 100%; }
  .nav-user-btn {
    width: 100%; justify-content: flex-start;
    border-radius: 0; background: rgba(255,255,255,.1);
    border: none; padding: 11px 20px;
  }
  .nav-user-menu {
    position: static;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(0,0,0,.15);
    animation: none;
  }
  .nav-user-menu a { color: rgba(255,255,255,.9); padding: 10px 28px; }
  .nav-user-menu a:hover { background: rgba(255,255,255,.1); }
  .nav-logout { color: #FF8A80 !important; }
  .nav-logout:hover { background: rgba(255,0,0,.1) !important; }
  .nav-user-sep { background: rgba(255,255,255,.1); }
  .nav-uname { max-width: none; }
}

/* ── num-* classes (nav user dropdown content) ──────────── */
.num-header {
  padding: 14px 16px 10px;
  background: #F8F9FA;
  border-bottom: 1px solid #F0F0F0;
}
.num-name {
  font-weight: 700;
  font-size: 13px;
  color: #222;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.num-role {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  background: #E3F2FD;
  color: #1565C0;
}
.num-sep {
  height: 1px;
  background: #F0F0F0;
  margin: 4px 0;
}
.num-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: #333;
  text-decoration: none;
  transition: background .12s;
}
.num-item:hover { background: #F5F7FA; }
.num-logout     { color: #D32F2F !important; }
.num-logout:hover { background: #FFEBEE !important; }

@media (max-width: 768px) {
  .num-header { background: transparent; border-bottom: 1px solid rgba(255,255,255,.15); }
  .num-name   { color: #fff; }
  .num-role   { background: rgba(255,255,255,.2); color: #fff; }
  .num-item   { color: rgba(255,255,255,.9); padding: 10px 28px; }
  .num-item:hover { background: rgba(255,255,255,.1) !important; }
  .num-logout { color: #FFCDD2 !important; }
  .num-sep    { background: rgba(255,255,255,.15); }
}

/* ============================================================
   DataTables Responsive — Override Styling
   ============================================================ */

/* Tombol expand (+) di kiri baris pada mobile */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  padding-left: 30px !important;
  cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  background-color: var(--primary) !important;
  box-shadow: 0 0 0 2px var(--primary) !important;
  border-radius: 50%;
  line-height: 16px;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
  background-color: var(--danger) !important;
  box-shadow: 0 0 0 2px var(--danger) !important;
}

/* Baris detail yang muncul saat expand di mobile */
table.dataTable > tbody > tr.child {
  background: #F8FAFF !important;
}
table.dataTable > tbody > tr.child ul.dtr-details {
  width: 100%;
}
table.dataTable > tbody > tr.child ul.dtr-details li {
  border-bottom: 1px solid #F0F0F0;
  padding: 6px 0;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
table.dataTable > tbody > tr.child ul.dtr-details li:last-child {
  border-bottom: none;
}
table.dataTable > tbody > tr.child span.dtr-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #888;
  min-width: 90px;
  flex-shrink: 0;
}
table.dataTable > tbody > tr.child span.dtr-data {
  font-size: 13px;
  color: #333;
}
