:root{
  --bg:#0f0f1b;
  --card: rgba(20, 25, 35, 0.92);
  --panel: rgba(18, 22, 32, 0.72);
  --text:#f3f6ff;
  --muted:#b7c1d6;
  --line: rgba(255, 179, 71, 0.20);

  --gold1:#ffaa33;
  --gold2:#ffd966;
  --gold3:#ffb347;

  --danger:#ff4d6d;
  --ok:#2ee88b;

  --r8:8px;
  --r12:12px;
  --r16:16px;
  --r20:20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',sans-serif;
  background: var(--bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow-x:hidden;
  overflow-y:auto;
  position:relative;
  color:var(--text);
}

#particles-js{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  z-index:-2;
}

@keyframes fadeInUp{
  from{transform:translateY(40px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.container{
  width:min(1240px, 100%);
  padding:18px 14px;
}

.login-box{
  width:480px;
  max-width:95%;
  background: var(--card);
  border-radius: var(--r20);
  padding: 40px 34px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 24px #ffb34755, 0 0 40px #ffaa3344;
  border:1px solid #ffb34733;
  animation: fadeInUp 1.1s ease both;
  position:relative;
  margin:0 auto;
}

.logo-top{
  text-align:center;
  margin-bottom:25px;
  animation: fadeInUp 0.9s ease 0.15s both;
}
.logo-top img{
  height:60px;
  max-width: 240px;
  object-fit:contain;
  filter: drop-shadow(0 0 14px #ffaa33aa);
}
.logo-fallback{
  display:none;
  height:60px;
  width: 160px;
  margin:0 auto;
  border-radius: 14px;
  background: rgba(255,170,51,.10);
  border: 1px solid rgba(255,170,51,.22);
  box-shadow: 0 0 18px rgba(255,170,51,.18);
  font-family:'Orbitron',sans-serif;
  letter-spacing:2px;
  align-items:center;
  justify-content:center;
  color: var(--gold2);
}

.sambutan{
  text-align:center;
  font-size:28px;
  font-family:'Orbitron',sans-serif;
  color: var(--gold2);
  margin-bottom:10px;
  letter-spacing:2px;
  text-shadow: 0 0 16px #ffaa33aa;
  animation: fadeInUp 0.9s ease 0.28s both;
}

h2{
  text-align:center;
  margin: 0 0 24px;
  font-size: 18px;
  color: #ffdd99;
  font-weight:600;
}

.form label{
  display:block;
  font-size:12px;
  color: var(--muted);
  margin: 10px 0 6px;
}

.form input[type="text"],
.form input[type="password"],
.form input[type="email"],
.form input[type="url"],
.form input[type="number"],
.form select{
  width:100%;
  padding:14px;
  background:#334155;
  border:none;
  color:white;
  margin-bottom:18px;
  border-radius: var(--r8);
  font-size:15px;
  transition: all .25s ease-in-out;
}

.form input:focus, .form select:focus{
  outline:none;
  box-shadow: 0 0 10px #ffb55b99;
  background-color:#3b475d;
}
.form input:hover, .form select:hover{
  box-shadow: 0 0 12px #ffdd88aa;
  background:#3b475d;
}

.password-wrapper{position:relative}
.toggle-eye{
  position:absolute;
  right:14px;
  top:50%;
  transform: translateY(-50%);
  font-size:17px;
  color: var(--gold1);
  cursor:pointer;
  user-select:none;
}

.btn{
  width:100%;
  padding:14px;
  background: linear-gradient(90deg, var(--gold1), var(--gold2));
  color: #241a0a;
  font-weight:bold;
  font-size:15px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  box-shadow: 0 0 18px #ffaa3399;
  transition: transform .2s, box-shadow .3s ease, filter .25s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.btn:hover{
  transform: scale(1.03);
  background: linear-gradient(90deg, #ff8000, var(--gold2));
  color:white;
  box-shadow: 0 0 26px #ffb55b, 0 0 20px #ff7700;
}
.btn:disabled{
  opacity:.82;
  cursor:not-allowed;
  transform:none;
  filter:saturate(.9);
}

.alert{
  text-align:center;
  margin-bottom: 14px;
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
}
.alert.bad{color:#ffd1d1; background: rgba(255,77,77,.10); border-color: rgba(255,77,77,.25)}
.alert.ok{color:#c9ffe1; background: rgba(43,213,118,.10); border-color: rgba(43,213,118,.25)}

.forgot{
  text-align:center;
  margin-top: 14px;
}
.forgot a{
  color:#ffcc99;
  font-size:13px;
  text-decoration:none;
}
.forgot a:hover{
  color:#fff;
  text-shadow: 0 0 8px #ffaa33;
}

.small-note{
  text-align:center;
  margin-top:12px;
  font-size:12px;
  color: rgba(255,255,255,.65);
}

.app-card{
  background: var(--card);
  border-radius: var(--r20);
  padding: 18px;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 24px #ffb34733, 0 0 40px #ffaa3322;
  border:1px solid #ffb34722;
  animation: fadeInUp 1.0s ease both;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand .brandmark{
  width:46px;height:46px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid #ffb34733;
  box-shadow: 0 0 18px #ffaa3322;
  background: rgba(255,170,51,.10);
}
.brand .brandmark img{width:100%;height:100%;object-fit:cover}
.brand .meta .name{
  font-family:'Orbitron',sans-serif;
  letter-spacing:1.6px;
  color: var(--gold2);
  text-shadow: 0 0 10px #ffaa3355;
  font-size: 14px;
}
.brand .meta .sub{
  font-size:12px;
  color: var(--muted);
  margin-top:2px;
}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.action-btn{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #ffb34722;
  background: rgba(255,170,51,.08);
  color: #ffe6c1;
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease;
}
.action-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,170,51,.14);
}

.grid{display:grid;grid-template-columns: 1.1fr .9fr;gap:14px;align-items:start}
@media(max-width:980px){.grid{grid-template-columns:1fr}}

.panel{
  background: rgba(12, 16, 26, 0.55);
  border:1px solid rgba(255,170,51,.18);
  border-radius: 16px;
  padding: 14px;
}

.panel h3{
  margin: 0 0 8px;
  font-size: 14px;
  font-family:'Orbitron',sans-serif;
  color: #ffdd99;
  letter-spacing: 1px;
}

.panel p{margin:6px 0 12px;color:var(--muted);font-size:13px}

.table-wrap{
  overflow-y:auto;
  overflow-x:hidden;
  border-radius: 14px;
  border:1px solid rgba(255,170,51,.18);
}
table{width:100%;border-collapse:collapse}
th,td{
  padding:10px;
  border-bottom:1px solid rgba(255,170,51,.12);
  font-size:13px;
  text-align:left;
  vertical-align:top;
}
th{
  background: rgba(255,170,51,.06);
  color:#ffddaa;
  font-weight:700;
}
tr:last-child td{border-bottom:none}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.link{color:#ffe0b3;text-decoration:none}
.link:hover{text-decoration:underline}

.result{
  margin-top:12px;
  padding:12px;
  border-radius: 14px;
  border:1px solid rgba(255,170,51,.18);
  background: rgba(0,0,0,.18);
}
.result .head{
  font-family:'Orbitron',sans-serif;
  letter-spacing:1px;
  color:#ffdd99;
  margin-bottom:8px;
}
.qr{margin-top:12px;display:grid;place-items:center;gap:8px}
.qr img{
  width:220px;height:220px;
  border-radius:16px;
  border:1px solid rgba(255,170,51,.18);
  background:#fff;
}

/* popup lupa password */
.popup-overlay{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:14px;
}
.popup-box{
  background:#1a1a2f;
  border:2px solid #ffaa33aa;
  color:#ffcc88;
  padding: 26px 22px;
  border-radius:14px;
  text-align:center;
  max-width: 380px;
  box-shadow: 0 0 20px #ffb34799;
}
.popup-box h3{
  margin:0 0 10px;
  font-family:'Orbitron',sans-serif;
  letter-spacing:1px;
  font-size:14px;
}
.popup-box p{margin:0;color:#ffd9a6;font-size:13px;line-height:1.45}
.popup-box button{
  margin-top:18px;
  background:#ffaa33;
  color:#241a0a;
  padding:10px 18px;
  border:none;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
  transition: background .25s, transform .18s;
}
.popup-box button:hover{
  background:#ff8000;
  color:white;
  transform: translateY(-1px);
}

/* utility */
.hidden{display:none !important}


/* ===== v6 dashboard improvements ===== */
.container{ width:min(1280px, 100%); } /* lebih lega di desktop */

.form textarea{
  width:100%;
  padding:14px;
  background:#334155;
  border:none;
  color:white;
  margin-bottom:18px;
  border-radius: var(--r8);
  font-size:15px;
  transition: all .25s ease-in-out;
  min-height: 92px;
  resize: vertical;
}
.form textarea:focus{
  outline:none;
  box-shadow: 0 0 10px #ffb55b99;
  background-color:#3b475d;
}
.form textarea:hover{
  box-shadow: 0 0 12px #ffdd88aa;
  background:#3b475d;
}

.table-wrap table{table-layout:fixed}
.table-wrap th:nth-child(1), .table-wrap td:nth-child(1){width: 38%;}
.table-wrap th:nth-child(2), .table-wrap td:nth-child(2){width: 38%;}
.table-wrap th:nth-child(3), .table-wrap td:nth-child(3){width: 8%;}
.table-wrap th:nth-child(4), .table-wrap td:nth-child(4){width: 16%;}
@media(max-width:980px){
  .table-wrap table{table-layout:auto}
  .table-wrap th:nth-child(1), .table-wrap td:nth-child(1),
  .table-wrap th:nth-child(2), .table-wrap td:nth-child(2){width:auto}
}

.td-wrap{
  word-break: normal;
  overflow-wrap:anywhere;
  white-space: normal;
  line-height: 1.35;
}

.mini-btn{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,170,51,.18);
  background: rgba(255,170,51,.08);
  color: #ffe6c1;
  font-weight:800;
  cursor:pointer;
  transition: transform .18s ease, background .18s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.mini-btn:hover{transform: translateY(-1px); background: rgba(255,170,51,.14);}

.popup-box .popup-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:16px;
}
.popup-box .popup-actions a,
.popup-box .popup-actions button{
  background:#ffaa33;
  color:#241a0a;
  padding:10px 14px;
  border:none;
  border-radius:10px;
  font-weight:900;
  cursor:pointer;
  transition: background .25s, transform .18s;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.popup-box .popup-actions a:hover,
.popup-box .popup-actions button:hover{
  background:#ff8000;
  color:white;
  transform: translateY(-1px);
}
.popup-box .popup-actions .ghost{
  background: rgba(255,170,51,.10);
  color:#ffe6c1;
  border: 1px solid rgba(255,170,51,.22);
}
.popup-box .popup-actions .ghost:hover{
  background: rgba(255,170,51,.18);
  color:#fff;
}

.detail-grid{
  display:grid;
  gap:10px;
  text-align:left;
  margin-top:10px;
}
.detail-row{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,170,51,.18);
  background: rgba(0,0,0,.16);
}
.detail-row .k{font-size:12px;color:rgba(255,255,255,.70);margin-bottom:6px}
.detail-row .v{font-size:13px}
.detail-row .v.mono{word-break: normal; overflow-wrap:anywhere;}
.detail-qr{
  display:grid;
  place-items:center;
  margin-top:12px;
}
.detail-qr img{
  width: 220px;
  height: 220px;
  border-radius:16px;
  border:1px solid rgba(255,170,51,.18);
  background:#fff;
}

/* v6 table 5 cols override */
.table-wrap th:nth-child(1), .table-wrap td:nth-child(1){width: 34%;}
.table-wrap th:nth-child(2), .table-wrap td:nth-child(2){width: 38%;}
.table-wrap th:nth-child(3), .table-wrap td:nth-child(3){width: 8%;}
.table-wrap th:nth-child(4), .table-wrap td:nth-child(4){width: 14%;}
.table-wrap th:nth-child(5), .table-wrap td:nth-child(5){width: 6%;}

@media(max-width:820px){.table-wrap{overflow-x:auto;}}

/* Multi-link generator */
.multi-links{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.link-row{position:relative}
.link-row textarea{margin-bottom:0}
.row-remove{
  position:absolute;
  right:10px;
  top:10px;
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid rgba(255,170,51,.22);
  background: rgba(255,170,51,.08);
  color:#ffe6c1;
  cursor:pointer;
  display:grid;place-items:center;
  transition: transform .18s ease, background .18s ease;
}
.row-remove:hover{transform: translateY(-1px); background: rgba(255,170,51,.14)}
.row-remove.hidden{display:none !important}

.row-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.action-btn.small{padding:9px 12px;font-size:13px}
.hint{font-size:12px;color:rgba(255,255,255,.62)}

/* Inline short actions (copy/open) */
.inline-menu{
  position:fixed;
  z-index:9999;
  background: rgba(16, 20, 30, 0.95);
  border:1px solid rgba(255,170,51,.25);
  border-radius:12px;
  box-shadow: 0 0 18px rgba(255,170,51,.28);
  backdrop-filter: blur(8px);
  padding:6px;
  display:none;
  gap:6px;
  align-items:center;
}
.inline-menu.show{display:flex}
.inline-item{
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,170,51,.18);
  background: rgba(255,170,51,.08);
  color:#ffe6c1;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition: transform .18s ease, background .18s ease;
}
.inline-item:hover{transform:translateY(-1px); background: rgba(255,170,51,.14); color:#fff}
.inline-item.danger{border-color: rgba(255,77,109,.35); background: rgba(255,77,109,.12); color:#ffd1dc}

/* History table columns */
th:nth-child(1), td:nth-child(1){width:34%}
th:nth-child(2), td:nth-child(2){width:40%}
th:nth-child(3), td:nth-child(3){width:8%}
th:nth-child(4), td:nth-child(4){width:12%}
th:nth-child(5), td:nth-child(5){width:16%}

.td-wrap{word-break:break-word;overflow-wrap:anywhere}
.mini-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mini-btn.danger{
  border-color: rgba(255,77,109,.35);
  background: rgba(255,77,109,.10);
  color:#ffd1dc;
}
.mini-btn.danger:hover{background: rgba(255,77,109,.18)}
/* Created results */
.created-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:12px;
}
@media(max-width:720px){.created-grid{grid-template-columns:1fr}}
.created-item{
  border:1px solid rgba(255,170,51,.18);
  background: rgba(0,0,0,.14);
  border-radius:14px;
  padding:12px;
}
.created-item .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.created-item .top .short{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; word-break:break-all}
.created-item .meta{margin-top:8px;color:rgba(255,255,255,.65);font-size:12px;word-break:break-all}
.created-item .btns{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.created-item .qr-mini{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.created-item .qr-mini img{width:120px;height:120px;border-radius:14px;background:#fff;border:1px solid rgba(255,170,51,.18)}


/* ===== v8 overrides: rapikan riwayat link + lebar ===== */
.container{ width:min(1320px, 100%); }
.app-card{ padding: 20px; }

.grid{
  grid-template-columns: 1.05fr 1.15fr;
  align-items:start;
}
@media(max-width:980px){ .grid{grid-template-columns:1fr} }

/* Table: lebih rapi, tidak terpotong */
.table-wrap{ overflow:auto; }
table{
  table-layout: fixed;
  min-width: 880px;
}
th:nth-child(1), td:nth-child(1){width: 28%;}
th:nth-child(2), td:nth-child(2){width: 44%;}
th:nth-child(3), td:nth-child(3){width: 8%; text-align:center;}
th:nth-child(4), td:nth-child(4){width: 14%;}
th:nth-child(5), td:nth-child(5){width: 6%; text-align:center;}

td, th{ white-space: normal; }
td.url, th.url{ word-break: normal; }
td.actions{ white-space: nowrap; }

/* Inline menu kecil dekat link */
.inline-menu{
  position:absolute;
  background: rgba(15, 18, 28, 0.96);
  border: 1px solid rgba(255,170,51,.22);
  border-radius: 12px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  padding: 8px;
  display:none;
  gap:8px;
  z-index:999;
}
.inline-menu button,
.inline-menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 9px 12px;
  border-radius:10px;
  border:1px solid rgba(255,170,51,.20);
  background: rgba(255,170,51,.10);
  color:#ffe6c1;
  text-decoration:none;
  font-weight:900;
  cursor:pointer;
  font-size:12px;
}
.inline-menu button:hover,
.inline-menu a:hover{
  background: rgba(255,170,51,.16);
}

/* Owner: popover ganti password per user */
.pw-pop{
  position:absolute;
  right: 10px;
  top: 42px;
  width: min(360px, 92vw);
  background: rgba(15, 18, 28, 0.96);
  border: 1px solid rgba(255,170,51,.22);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  padding: 12px;
  display:none;
  z-index:999;
}
.pw-pop .row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.pw-pop input{
  width:100%;
  margin-bottom:10px;
}
.pw-pop .mini{
  width:auto;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(255,170,51,.20);
  background: rgba(255,170,51,.10);
  color:#ffe6c1;
  font-weight:900;
  cursor:pointer;
}
.pw-pop .mini.primary{
  background: linear-gradient(90deg, var(--gold1), var(--gold2));
  color:#241a0a;
  border:none;
}
.pw-pop .mini:hover{background: rgba(255,170,51,.16)}
.pw-pop .mini.primary:hover{background: linear-gradient(90deg, #ff8000, var(--gold2)); color:#fff}


/* ===== v9 overrides: grid konsisten + halaman riwayat ===== */
.container{ width:min(1240px, 100%); }
.page-history .container{ width:min(1320px, 100%); }

.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.panel-head h3{ margin:0; }

.panel-head .mini-btn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,170,51,.22);
  background: rgba(255,170,51,.10);
  color:#ffe6c1;
  font-weight:900;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.panel-head .mini-btn:hover{ background: rgba(255,170,51,.16); }

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media(max-width:720px){
  .form-grid{ grid-template-columns:1fr; }
}

/* History page grid: table + detail panel */
.history-grid{
  display:grid;
  grid-template-columns: 1.4fr .6fr;
  gap:16px;
  align-items:start;
}
@media(max-width:980px){
  .history-grid{ grid-template-columns:1fr; }
}
.page-history table{ min-width: 980px; }
.page-history .table-wrap{ max-height: 68vh; overflow:auto; }

/* Pagination */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}
.pager .pages{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.pager a, .pager span{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,170,51,.18);
  background: rgba(255,170,51,.08);
  color:#ffe6c1;
  text-decoration:none;
  font-weight:900;
}
.pager a:hover{ background: rgba(255,170,51,.14); }
.pager .active{
  background: linear-gradient(90deg, var(--gold1), var(--gold2));
  color:#241a0a;
  border:none;
}


/* ===== v10 FIX: rapikan total (grid + table + responsive) ===== */

/* Container/Canvas */
.container{ width:min(1400px, 92vw); }
.app-card{ width:100%; }
.topbar{ margin-bottom: 16px; }

/* Grid konsisten untuk semua halaman yang pakai .grid */
.grid{
  display:grid;
  grid-template-columns: 1fr 1.45fr;
  gap:16px;
  align-items:start;
}
@media(max-width:980px){
  .grid{ grid-template-columns: 1fr; }
}

/* Panel head: judul + action kecil */
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.panel-head h3{ margin:0; }
.panel-head .mini-btn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,170,51,.22);
  background: rgba(255,170,51,.10);
  color:#ffe6c1;
  font-weight:900;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.panel-head .mini-btn:hover{ background: rgba(255,170,51,.16); }

/* Dashboard: table jangan bikin area scroll besar & jangan kepotong */
.page-dashboard .table-wrap{
  overflow-x:auto;
  overflow-y:visible;
  max-height: none;
  border-radius: 16px;
}
.page-dashboard table{
  width:100%;
  min-width: 0;
  table-layout: fixed;
}
.page-dashboard th:nth-child(1), .page-dashboard td:nth-child(1){width: 30%;}
.page-dashboard th:nth-child(2), .page-dashboard td:nth-child(2){width: 42%;}
.page-dashboard th:nth-child(3), .page-dashboard td:nth-child(3){width: 8%; text-align:center;}
.page-dashboard th:nth-child(4), .page-dashboard td:nth-child(4){width: 12%;}
.page-dashboard th:nth-child(5), .page-dashboard td:nth-child(5){width: 8%; text-align:center;}

.page-dashboard td, .page-dashboard th{ white-space: normal; }
.page-dashboard td.url, .page-dashboard th.url{ word-break: break-word; }

/* History page: boleh scroll table (banyak data) */
.page-history .container{ width:min(1400px, 92vw); }
.page-history .history-grid{
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:16px;
  align-items:start;
}
@media(max-width:980px){
  .page-history .history-grid{ grid-template-columns: 1fr; }
}
.page-history .table-wrap{ max-height: 70vh; overflow:auto; }
.page-history table{ min-width: 980px; table-layout: fixed; }
.page-history th:nth-child(1), .page-history td:nth-child(1){width: 28%;}
.page-history th:nth-child(2), .page-history td:nth-child(2){width: 44%;}
.page-history th:nth-child(3), .page-history td:nth-child(3){width: 8%; text-align:center;}
.page-history th:nth-child(4), .page-history td:nth-child(4){width: 14%;}
.page-history th:nth-child(5), .page-history td:nth-child(5){width: 6%; text-align:center;}
.page-history td.url, .page-history th.url{ word-break: normal; }

/* Owner users: grid lebih logis */
.page-owner-users .grid{
  grid-template-columns: 1.05fr .95fr;
}
@media(max-width:980px){
  .page-owner-users .grid{ grid-template-columns:1fr; }
}

/* Owner user: grid detail */
.page-owner-user .grid{
  grid-template-columns: 1fr 1fr;
}
@media(max-width:980px){
  .page-owner-user .grid{ grid-template-columns:1fr; }
}


/* ===== v11: Dashboard grid benar-benar rapi & responsif ===== */

/* Desktop/tablet besar: panel kiri sticky, panel kanan fixed-height + table scroll internal */
@media(min-width: 981px){
  .page-dashboard .grid{
    align-items: start;
    grid-template-columns: 420px 1fr; /* kiri form, kanan riwayat */
    gap: 18px;
  }

  .page-dashboard .generate-panel{
    position: sticky;
    top: 22px;
    align-self: start;
  }

  /* Kalau user tambah banyak link, jangan meledak: list textarea scroll */
  .page-dashboard .generate-panel .multi-links{
    max-height: 34vh;
    overflow: auto;
    padding-right: 6px;
  }

  /* Riwayat dibuat panel tinggi tetap supaya tidak bikin halaman panjang */
  .page-dashboard .history-panel{
    height: min(76vh, 860px);
    display: flex;
    flex-direction: column;
  }
  .page-dashboard .history-panel .table-wrap{
    flex: 1;
    overflow: auto;         /* scroll di tabel, bukan halaman */
    max-height: none;
  }
  .page-dashboard .history-panel table{
    table-layout: fixed;
  }
}

/* Mobile: stack, tanpa sticky, table tetap bisa scroll horizontal kalau perlu */
@media(max-width: 980px){
  .page-dashboard .grid{ grid-template-columns: 1fr; }
  .page-dashboard .generate-panel{ position: static; }
  .page-dashboard .history-panel{ height: auto; }
  .page-dashboard .history-panel .table-wrap{ max-height: 60vh; overflow:auto; }
}

/* Pastikan tidak ada horizontal scroll di level halaman */
body{ overflow-x:hidden; }



/* ===== v12 overrides: history/dashboard/owner tables should NOT scroll inside ===== */
.page-dashboard .table-wrap,
.page-history .table-wrap,
.page-owner-users .table-wrap{
  overflow: visible !important;
  max-height: none !important;
}

.page-dashboard table,
.page-history table,
.page-owner-users table{
  width: 100% !important;
  table-layout: fixed;
}

.page-dashboard th, .page-dashboard td,
.page-history th, .page-history td,
.page-owner-users th, .page-owner-users td{
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* remove min-width that creates horizontal scroll */
.page-history table{ min-width: 0 !important; }

/* make action column stable */
.page-owner-users th.actions,
.page-owner-users td.actions{ width: 140px; }

/* dashboard history panel height should follow content (no forced internal scroll) */
@media(min-width:981px){
  .page-dashboard .panel.history-panel{ height:auto !important; }
}


/* ========== v13 FIX: dashboard riwayat max 3 + no internal scroll + responsive table ========== */
.page-dashboard .history-panel{height:auto !important; display:block !important;}
.page-dashboard .history-panel .table-wrap{max-height:none !important; overflow:visible !important;}
.page-dashboard .generate-panel{position:static !important;}
.page-dashboard .grid{align-items:start;}
/* table fit */
.page-dashboard table{width:100%; table-layout:fixed;}
.page-dashboard th, .page-dashboard td{overflow-wrap:anywhere; word-break:normal;}
.page-dashboard .th-no{width:56px; text-align:center;}
.page-dashboard .th-clicks{width:84px; text-align:center;}
.page-dashboard .th-date{width:140px;}
.page-dashboard .th-actions{width:160px;}
.page-dashboard td.center{text-align:center;}
.page-dashboard td.actions{white-space:normal;}
/* pager */
.pager{display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px;}
.pager .pg, .pager .pgnum{display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; border:1px solid rgba(255,255,255,.12); border-radius:10px; color:#fff; text-decoration:none; background:rgba(0,0,0,.25);}
.pager .pg.disabled{opacity:.4; pointer-events:none;}
.pager .pgnums{display:flex; gap:6px; flex-wrap:wrap;}
.pager .pgdots{opacity:.55; padding:0 2px;}
.pager .pgnum{min-width:38px;}
.pager .pgnum.active{background:rgba(255,215,128,.18); border-color:rgba(255,215,128,.35);}

/* Responsive: table -> cards on small screens (no horizontal scroll) */
@media (max-width: 720px){
  .table-wrap{overflow:visible !important;}
  table.resp thead{display:none;}
  table.resp, table.resp tbody, table.resp tr{display:block; width:100%;}
  table.resp tr{margin:0 0 10px 0; border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:10px; background:rgba(0,0,0,.18);}
  table.resp td{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border:none;}
  table.resp td::before{content:attr(data-label); color:rgba(255,255,255,.65); font-weight:600;}
  table.resp td.actions{justify-content:flex-end;}
}

/* Owner list: avoid internal horizontal scroll and keep clean */
.page-owner-users .list-panel .table-wrap{max-height:none !important; overflow:visible !important;}
.page-owner-users table{width:100%; table-layout:fixed;}
.page-owner-users th, .page-owner-users td{overflow-wrap:anywhere; word-break:normal;}

/* ===== FIX 2025-12-21: Dashboard riwayat 6 kolom (No/Short/Target/Clicks/Dibuat/Aksi) ===== */
.page-dashboard .history-panel .table-wrap{
  overflow-x: auto !important;
  overflow-y: visible !important;
}
.page-dashboard .history-panel table.resp{
  width: 100% !important;
  table-layout: fixed !important;
}
.page-dashboard .history-panel thead th{ white-space: nowrap; }
.page-dashboard .history-panel table.resp th:nth-child(1),
.page-dashboard .history-panel table.resp td:nth-child(1){ width:56px !important; text-align:center; }
.page-dashboard .history-panel table.resp th:nth-child(2),
.page-dashboard .history-panel table.resp td:nth-child(2){ width:240px !important; }
.page-dashboard .history-panel table.resp th:nth-child(4),
.page-dashboard .history-panel table.resp td:nth-child(4){ width:84px !important; text-align:center; }
.page-dashboard .history-panel table.resp th:nth-child(5),
.page-dashboard .history-panel table.resp td:nth-child(5){ width:150px !important; }
.page-dashboard .history-panel table.resp th:nth-child(6),
.page-dashboard .history-panel table.resp td:nth-child(6){ width:180px !important; }
.page-dashboard .history-panel table.resp th,
.page-dashboard .history-panel table.resp td{
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}
.page-dashboard .history-panel table.resp td.actions{ white-space: normal; }