/* ============================================================
   Diskominfo Kutai Timur — Shortlink Admin UI
   Design system: blue & white, professional/civic, light mode.
   Consistent brand with the login page (Inter, blue accent).
   Hand-tuned — intentionally restrained, not template-like.
   ============================================================ */

:root{
  --c-brand:#1e3a8a;        /* deep navy-blue: brand bar, headings */
  --c-primary:#1d4ed8;      /* primary action blue */
  --c-primary-h:#1e40af;    /* primary hover */
  --c-primary-soft:#eff4ff; /* primary tint surface */
  --c-accent:#0ea5e9;       /* sky accent (ties to login cyan) */
  --c-bg:#eef2f7;           /* page background */
  --c-surface:#ffffff;      /* cards / surfaces */
  --c-text:#0f1e34;         /* primary text */
  --c-text-soft:#51607a;    /* secondary text */
  --c-muted:#8190a7;        /* tertiary / captions */
  --c-border:#e3e8f0;       /* hairline borders */
  --c-border-strong:#cbd5e3;
  --c-ok:#15803d; --c-ok-bg:#e8f5ee;
  --c-warn:#b45309; --c-warn-bg:#fdf3e3;
  --c-bad:#b91c1c; --c-bad-bg:#fdeced;
  --r:8px;                  /* base radius */
  --r-sm:6px;
  --sh-1:0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --sh-2:0 4px 14px rgba(15,23,42,.07);
  --ring:0 0 0 3px rgba(29,78,216,.20);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{color:var(--c-brand);font-weight:700;letter-spacing:-.01em;margin:0}
a{color:var(--c-primary);text-decoration:none}
a:hover{color:var(--c-primary-h)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.font-num{font-variant-numeric:tabular-nums}

/* ---------- Top bar ---------- */
.app-bar{
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  box-shadow:var(--sh-1);
  position:sticky;top:0;z-index:1030;
}
.app-bar .inner{
  max-width:min(95vw,1700px);margin:0 auto;padding:.7rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.app-brand{display:flex;align-items:center;gap:.65rem;min-width:0}
.app-brand img{width:34px;height:34px;object-fit:contain;border-radius:6px}
.app-brand .t{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.app-brand .t b{color:var(--c-brand);font-size:.95rem;font-weight:700;white-space:nowrap}
.app-brand .t span{color:var(--c-muted);font-size:.72rem;font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.app-actions{display:flex;align-items:center;gap:.5rem}
.app-user{
  display:flex;align-items:center;gap:.5rem;color:var(--c-text-soft);
  font-size:.85rem;font-weight:500;padding:.35rem .6rem;border-right:1px solid var(--c-border)
}
.app-user .av{
  width:30px;height:30px;border-radius:50%;background:var(--c-primary-soft);
  color:var(--c-primary);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.8rem
}

/* ---------- Layout shell ---------- */
.app-wrap{max-width:min(95vw,1700px);margin:0 auto;padding:1.5rem 1.5rem 3rem}
.page-head{margin-bottom:1.25rem}
.page-head h1{font-size:1.4rem;margin-bottom:.15rem}
.page-head p{color:var(--c-text-soft);font-size:.9rem;margin:0}

/* ---------- Cards ---------- */
.ui-card{
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r);
  box-shadow:var(--sh-1);
}
.ui-card + .ui-card{margin-top:1.25rem}
.ui-card-head{
  padding:.95rem 1.25rem;border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:space-between;gap:.75rem
}
.ui-card-head h2{font-size:1rem;display:flex;align-items:center;gap:.55rem}
.ui-card-head h2 i{color:var(--c-primary);font-size:.95rem}
.ui-card-body{padding:1.25rem}

/* ---------- Stat tiles ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.25rem}
.stat{
  background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r);
  padding:1rem 1.15rem;display:flex;align-items:center;gap:.9rem
}
.stat .ic{
  width:42px;height:42px;border-radius:var(--r-sm);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-primary-soft);color:var(--c-primary);font-size:1.05rem
}
.stat .v{font-size:1.5rem;font-weight:700;color:var(--c-brand);line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-size:.78rem;color:var(--c-muted);font-weight:500;text-transform:uppercase;letter-spacing:.03em;margin-top:.25rem}

/* ---------- Tabs (Bootstrap nav-pills override) ---------- */
.nav-pills{gap:.25rem;border-bottom:1px solid var(--c-border);padding-bottom:0;margin-bottom:1.25rem}
.nav-pills .nav-link{
  color:var(--c-text-soft);font-weight:600;font-size:.9rem;border-radius:0;
  padding:.6rem 1rem;border:0;border-bottom:2px solid transparent;background:transparent
}
.nav-pills .nav-link:hover{color:var(--c-primary)}
.nav-pills .nav-link.active{
  color:var(--c-primary);background:transparent;border-bottom-color:var(--c-primary)
}

/* ---------- Buttons (override Bootstrap) ---------- */
.btn{font-weight:600;font-size:.875rem;border-radius:var(--r-sm);padding:.5rem .9rem;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}
.btn:focus-visible{box-shadow:var(--ring)}
.btn-primary,.btn-success{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.btn-primary:hover,.btn-success:hover{background:var(--c-primary-h);border-color:var(--c-primary-h);color:#fff}
.btn-outline-primary{color:var(--c-primary);border-color:var(--c-border-strong)}
.btn-outline-primary:hover{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
.btn-outline-secondary{color:var(--c-text-soft);border-color:var(--c-border-strong)}
.btn-outline-secondary:hover{background:var(--c-text-soft);border-color:var(--c-text-soft);color:#fff}
.btn-outline-info{color:var(--c-accent);border-color:var(--c-border-strong)}
.btn-outline-info:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.btn-outline-success{color:var(--c-ok);border-color:var(--c-border-strong)}
.btn-outline-success:hover{background:var(--c-ok);border-color:var(--c-ok);color:#fff}
.btn-outline-danger{color:var(--c-bad);border-color:var(--c-border-strong)}
.btn-outline-danger:hover{background:var(--c-bad);border-color:var(--c-bad);color:#fff}
.btn-danger{background:var(--c-bad);border-color:var(--c-bad);color:#fff}
.btn-sm{padding:.34rem .6rem;font-size:.8rem}
.btn-ghost{background:transparent;border:1px solid var(--c-border);color:var(--c-text-soft)}
.btn-ghost:hover{background:var(--c-primary-soft);color:var(--c-primary);border-color:var(--c-primary)}

/* ---------- Forms ---------- */
.form-label{font-weight:600;font-size:.84rem;color:var(--c-text);margin-bottom:.35rem}
.form-control,.form-select,textarea.form-control{
  border:1px solid var(--c-border-strong);border-radius:var(--r-sm);
  font-size:.9rem;padding:.55rem .75rem;color:var(--c-text);background:#fff
}
.form-control::placeholder{color:var(--c-muted)}
.form-control:focus,.form-select:focus{border-color:var(--c-primary);box-shadow:var(--ring)}
.input-group-text{background:var(--c-primary-soft);border-color:var(--c-border-strong);color:var(--c-primary);font-size:.85rem}

/* ---------- Tables / DataTables ---------- */
table.dataTable,table.table{width:100%!important;color:var(--c-text);border-collapse:collapse;border:1px solid var(--c-border)}
table.dataTable thead th,table.table thead th{
  background:#f5f8fd;color:var(--c-text-soft);font-weight:600;font-size:.74rem;
  text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--c-border)!important;
  padding:.7rem .85rem;white-space:nowrap
}
table.dataTable tbody td,table.table tbody td{
  padding:.6rem .85rem;border:1px solid var(--c-border);font-size:.875rem;vertical-align:middle;
  background:transparent
}
/* neutralise DataTables stripe + sorted-column shading for a clean flat look */
table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd{background:transparent}
table.dataTable tbody tr>.sorting_1,table.dataTable tbody tr>.sorting_2,table.dataTable tbody tr>.sorting_3{background:transparent}
table.dataTable.display tbody tr.odd>.sorting_1,table.dataTable.display tbody tr.even>.sorting_1{background:transparent}
table.dataTable tbody tr:hover>td,table.dataTable tbody tr:hover{background:var(--c-primary-soft)}
/* keep rows tidy: single line + ellipsis for long text columns */
table.dataTable tbody td,table.dataTable thead th{white-space:nowrap}
table.dataTable td.dt-ell{max-width:30vw;overflow:hidden;text-overflow:ellipsis}
table.dataTable td.dt-ell-sm{max-width:140px;overflow:hidden;text-overflow:ellipsis}
table.dataTable td.dt-qr{white-space:normal}
table.dataTable td.dt-ell a,table.dataTable td.dt-ell-sm a{color:var(--c-primary)}
/* copy affordances */
.copy{cursor:pointer}
.cell-link{color:var(--c-text);transition:color .12s}
.cell-link:hover{color:var(--c-primary);text-decoration:underline}
.cell-link.copied{color:var(--c-ok)!important;text-decoration:none}
.url-chip{
  display:inline-flex;align-items:center;gap:.35rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78rem;
  background:var(--c-primary-soft);color:var(--c-primary);
  padding:.22rem .55rem;border-radius:999px;border:1px solid #dbe4fb;white-space:nowrap;transition:background-color .12s
}
.url-chip:hover{background:#e2ebff}
.url-chip.copied{background:var(--c-ok-bg);color:var(--c-ok);border-color:#bfe3cd}
.url-chip i{font-size:.72rem;opacity:.8}
td.dt-chip{white-space:nowrap}
/* kolom rata tengah: URL Short, Pengunjung, Tanggal (header + isi) */
table.dataTable th.dt-chip,table.dataTable td.dt-chip,
table.dataTable th.dt-center,table.dataTable td.dt-center{text-align:center}
/* horizontal scroll contained INSIDE the card (never the page) */
.dataTables_wrapper{overflow-x:auto}
.dataTables_wrapper::-webkit-scrollbar{height:8px}
.dataTables_wrapper::-webkit-scrollbar-thumb{background:var(--c-border-strong);border-radius:4px}
.dataTables_wrapper>.row{margin:0}
.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--c-border-strong);border-radius:var(--r-sm);
  padding:.45rem .7rem .45rem 2rem;font-size:.85rem;min-width:230px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238190a7' stroke-width='1.7'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M11 11l3 3'/%3E%3C/svg%3E") no-repeat .6rem center/14px
}
.dataTables_wrapper .dataTables_filter input:focus{border-color:var(--c-primary);box-shadow:var(--ring);outline:none}
.dataTables_wrapper .dataTables_length select{border:1px solid var(--c-border-strong);border-radius:var(--r-sm);padding:.3rem 1.5rem .3rem .5rem;font-size:.85rem}
.dataTables_wrapper .dataTables_info{color:var(--c-muted);font-size:.82rem;padding-top:1rem}
.dataTables_wrapper .dataTables_paginate{padding-top:.75rem}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:var(--r-sm)!important;border:1px solid var(--c-border)!important;
  color:var(--c-text-soft)!important;font-size:.83rem;margin:0 2px;padding:.32rem .65rem!important;background:#fff!important
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--c-primary)!important;border-color:var(--c-primary)!important;color:#fff!important
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--c-primary-soft)!important;border-color:var(--c-primary)!important;color:var(--c-primary)!important
}
.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length{margin-bottom:1rem}
table.dataTable thead th.sorting:after,table.dataTable thead th.sorting_asc:after,table.dataTable thead th.sorting_desc:after{opacity:.4}

/* QR cell helpers (paired barcodes aligned) */
.qr-pair{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:.5rem}
.qr-box{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  gap:.35rem;padding:.4rem;border:1px solid var(--c-border);border-radius:var(--r-sm);
  background:#fcfdff;width:104px
}
.qr-box img{width:74px;height:74px;object-fit:contain;border-radius:4px;background:#fff}
.qr-box .btn{padding:.2rem .35rem;font-size:.66rem;width:100%;line-height:1.2}

/* ---------- Badges / status ---------- */
.tag{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;
  padding:.18rem .5rem;border-radius:999px;background:var(--c-primary-soft);color:var(--c-primary)}
.tag.ok{background:var(--c-ok-bg);color:var(--c-ok)}
.tag.warn{background:var(--c-warn-bg);color:var(--c-warn)}
.tag.bad{background:var(--c-bad-bg);color:var(--c-bad)}

/* ---------- Alerts (Bootstrap override) ---------- */
.alert{border:1px solid transparent;border-radius:var(--r-sm);font-size:.88rem;padding:.7rem .9rem}
.alert-success{background:var(--c-ok-bg);border-color:#bfe3cd;color:var(--c-ok)}
.alert-danger{background:var(--c-bad-bg);border-color:#f3c9cd;color:var(--c-bad)}

/* ---------- Modal (Bootstrap override) ---------- */
.modal-content{border:1px solid var(--c-border);border-radius:var(--r);box-shadow:0 20px 60px rgba(15,23,42,.18)}
.modal-header{border-bottom:1px solid var(--c-border);padding:1rem 1.25rem}
.modal-title{font-size:1.05rem;color:var(--c-brand)}
.modal-body{padding:1.25rem}
.modal-footer{border-top:1px solid var(--c-border);padding:.85rem 1.25rem}

/* ---------- Footer ---------- */
.app-foot{
  border-top:1px solid var(--c-border);background:var(--c-surface);
  color:var(--c-muted);font-size:.8rem;text-align:center;padding:1.1rem 1rem;margin-top:2rem
}
.app-foot b{color:var(--c-text-soft);font-weight:600}

/* ---------- Auth (forgot/reset/link) — light blue, brand-consistent ---------- */
.auth-screen{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:2rem 1rem;background:
   radial-gradient(900px 500px at 100% 0,rgba(29,78,216,.06),transparent 60%),var(--c-bg)}
.auth-card{width:100%;max-width:420px;background:var(--c-surface);border:1px solid var(--c-border);
  border-radius:14px;box-shadow:var(--sh-2);padding:2rem 1.85rem;animation:auth-in .45s ease both}
.auth-card .brand{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin-bottom:1.4rem}
.auth-card .brand img{width:54px;height:54px;object-fit:contain}
.auth-card h1{font-size:1.25rem;text-align:center}
.auth-card .sub{color:var(--c-text-soft);font-size:.88rem;text-align:center;margin:.25rem 0 1.4rem}
.auth-card .btn{width:100%;padding:.62rem}
.auth-foot{text-align:center;margin-top:1.1rem;font-size:.83rem;color:var(--c-muted)}
@keyframes auth-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 404 ---------- */
.nf-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;background:var(--c-bg)}
.nf-code{font-size:clamp(4rem,12vw,7rem);font-weight:800;color:var(--c-primary);line-height:1;letter-spacing:-.04em}
.nf-wrap p{color:var(--c-text-soft);margin:.5rem 0 1.5rem;max-width:30rem}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .app-bar .inner,.app-wrap{padding-left:1rem;padding-right:1rem}
  .app-user span{display:none}
  .app-brand .t span{display:none}
  .ui-card-body{padding:1rem}
  body{font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}