/*
  SAQER UI theme (global).
  Scoped to body.vx-app so it can be applied across pages safely.
*/

:root{
  --vx-bg:#0a0a0a;
  --vx-panel:#101010;
  --vx-panel-2:#141414;
  --vx-text:#ffffff;
  --vx-sub:#c9c9c9;
  --vx-border:#262626;
  --vx-brand:#7c3aed;
  --vx-brand-2:#22d3ee;
  --vx-ok:#22c55e;
  --vx-warn:#f59e0b;
  --vx-danger:#ef4444;
}

html{
  background:var(--vx-bg);
}

body.vx-app{
  background:
    radial-gradient(1200px 600px at 18% -10%, rgba(124,58,237,.22), transparent 60%),
    radial-gradient(900px 520px at 92% 6%, rgba(34,211,238,.14), transparent 55%),
    var(--vx-bg);
  color:var(--vx-text);
}

body.vx-app a{ color:var(--vx-brand); text-decoration:none; }
body.vx-app a:hover{ opacity:.9; }

body.vx-app h1,
body.vx-app h2,
body.vx-app h3,
body.vx-app h4,
body.vx-app h5,
body.vx-app h6{
  color:#fff;
}

body.vx-app .text-muted{
  color:var(--vx-sub) !important;
}

/* Vertical rhythm between top-level sections (title/info row -> table row, etc.) */
body.vx-app .page-content > .container-fluid > .row:not(:first-child){
  margin-top: 14px;
}

/* Page title box (match the new dark panels) */
body.vx-app .page-title-box{
  background: var(--vx-panel);
  border: 1px solid var(--vx-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px; /* keep consistent gap to the next section even if modals/alerts exist */
  box-shadow: 0 1px 0 rgba(0,0,0,.2);
}
body.vx-app .page-title-box h4{
  color: #fff !important;
  font-weight: 800;
  letter-spacing: .2px;
}
body.vx-app .breadcrumb,
body.vx-app .breadcrumb .breadcrumb-item,
body.vx-app .breadcrumb .breadcrumb-item a,
body.vx-app .breadcrumb .breadcrumb-item.active{
  color: var(--vx-sub) !important;
}
body.vx-app .breadcrumb .breadcrumb-item.active{
  color: #fff !important;
}

/* Toolbars */
body.vx-app .vx-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom:14px;
}
body.vx-app .vx-toolbar .btn{ white-space:nowrap; }
@media (max-width: 576px){
  body.vx-app .vx-toolbar .btn{ flex:1 1 auto; }
}

/* Cards / panels */
body.vx-app .card,
body.vx-app .box,
body.vx-app .panel{
  background:var(--vx-panel);
  border:1px solid var(--vx-border);
  border-radius:12px;
  box-shadow:0 1px 0 rgba(0,0,0,.2);
}

/* Make room for the fixed bottom navbar (global) */
body.vx-app .page-content{
  padding-bottom: 140px !important;
  padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 992px){
  body.vx-app .page-content{
    padding-bottom: 180px !important;
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Buttons */
body.vx-app .btn{
  border-radius:10px;
  font-weight:600;
}
body.vx-app .btn.btn-primary{
  background:linear-gradient(180deg, var(--vx-brand), #5b21b6) !important;
  border-color:#4c1d95 !important;
  color:#fff !important;
}
body.vx-app .btn.btn-success{
  background:linear-gradient(180deg, var(--vx-ok), #15803d) !important;
  border-color:#166534 !important;
  color:#fff !important;
}
body.vx-app .btn.btn-warning{
  background:linear-gradient(180deg, var(--vx-warn), #b45309) !important;
  border-color:#92400e !important;
  color:#fff !important;
}
body.vx-app .btn.btn-danger{
  background:linear-gradient(180deg, var(--vx-danger), #b91c1c) !important;
  border-color:#991b1b !important;
  color:#fff !important;
}
body.vx-app .btn.btn-light,
body.vx-app .btn.btn-soft-light{
  background:#1b1b1b !important;
  border-color:#2a2a2a !important;
  color:#e8e8e8 !important;
}
body.vx-app .btn.btn-light:hover,
body.vx-app .btn.btn-soft-light:hover{ background:#222 !important; }

body.vx-app .btn.btn-outline-light{
  border-color:#2a2a2a !important;
  color:#e8e8e8 !important;
}
body.vx-app .btn.btn-outline-light:hover{
  background:#1b1b1b !important;
  color:#fff !important;
}

/* Inputs */
body.vx-app input,
body.vx-app select,
body.vx-app textarea{
  background:#0f0f0f !important;
  color:#e7e7e7 !important;
  border:1px solid var(--vx-border) !important;
  border-radius:10px !important;
}
body.vx-app input:focus,
body.vx-app select:focus,
body.vx-app textarea:focus{
  border-color:var(--vx-brand-2) !important;
  box-shadow:0 0 0 3px rgba(34,211,238,.12) !important;
  outline:none !important;
}

/* Common "value pill" (copiable) */
body.vx-app .vx-key{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
body.vx-app .vx-key-text{
  display:block;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--vx-border);
  background:#0f0f0f;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:13px;
  max-width:520px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
}
body.vx-app .vx-copy-btn{
  flex:0 0 auto;
  padding:6px 10px;
}
@media (max-width: 768px){
  body.vx-app .vx-key-text{ max-width:260px; }
}
@media (max-width: 420px){
  body.vx-app .vx-key-text{ max-width:170px; }
}

/* Stat pills (used in page headers like list-key) */
body.vx-app .vx-stat{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:#0e0f13;
  color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
body.vx-app .vx-stat i{ font-size:18px; }
body.vx-app .vx-stat strong{ font-weight:700; }
body.vx-app .vx-stat.balance-pill{
  background:linear-gradient(135deg, #8b5cf6, #06b6d4);
  box-shadow:0 14px 34px rgba(107,33,168,.35), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Action buttons in tables (icon row) */
body.vx-app .vx-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
}
body.vx-app .vx-action-btn{
  padding:6px 10px;
  border-radius:10px;
  line-height:1;
}
body.vx-app .vx-action-btn i{ font-size:18px; }

/* Packages table: keep SHA1/token pill readable on small iPhone widths. */
body.vx-app #packagesTable td.vx-token-col .vx-key-text{ min-width:140px; }
@media (max-width: 420px){
  body.vx-app #packagesTable td.vx-token-col .vx-key-text{ min-width:120px; }
}

/* Key/Value panel (Information/Detail) */
body.vx-app .vx-kv{
  border:1px solid var(--vx-border);
  border-radius:12px;
  overflow:hidden;
  background:var(--vx-panel);
}
body.vx-app .vx-kv-head,
body.vx-app .vx-kv-row{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  align-items:center;
  padding: 10px 14px;
}
body.vx-app .vx-kv-head{
  background:#141414;
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
}
body.vx-app .vx-kv-row{
  border-top:1px solid var(--vx-border);
}
body.vx-app .vx-kv-row:nth-child(even){
  background:var(--vx-panel-2);
}
body.vx-app .vx-kv-k{
  color:var(--vx-sub);
  font-weight:700;
}
body.vx-app .vx-kv-v{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;
}
@media (max-width: 576px){
  body.vx-app .vx-kv-head,
  body.vx-app .vx-kv-row{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  body.vx-app .vx-kv-head > :nth-child(2){
    display:none;
  }
}

/* Table wrapper: consistent rounded shell */
body.vx-app .table-responsive,
body.vx-app .table-responsivel{
  border: 1px solid var(--vx-border);
  border-radius: 12px;
  overflow-x: auto; /* keep horizontal scroll on mobile */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--vx-panel);
}
body.vx-app .table-responsive > table,
body.vx-app .table-responsivel > table{
  margin-bottom: 0 !important;
  border: 0 !important;
  border-collapse: separate !important; /* override inline styles on some pages */
  border-spacing: 0 !important;        /* remove the row-gap hack */
  background: transparent !important;
}

/* Tables */
body.vx-app table{ color:#fff; }
body.vx-app .table{ color:#fff; }
body.vx-app .table>:not(caption)>*>*{
  color:#fff;
  border-color:var(--vx-border);
}

/* Table shell (match list-key look) */
body.vx-app table.datatable,
body.vx-app table.dataTable,
body.vx-app table.table{
  width: 100% !important;
  background: var(--vx-panel) !important;
  border: 1px solid var(--vx-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

body.vx-app table.datatable tbody td,
body.vx-app table.dataTable tbody td,
body.vx-app table.table tbody td{
  vertical-align: middle;
}

body.vx-app table.datatable td .btn,
body.vx-app table.dataTable td .btn,
body.vx-app table.table td .btn{
  border-radius: 10px;
}
body.vx-app table.datatable td .btn.btn-sm,
body.vx-app table.dataTable td .btn.btn-sm,
body.vx-app table.table td .btn.btn-sm{
  padding: 6px 10px;
  line-height: 1;
}

body.vx-app .table thead th,
body.vx-app table thead th{
  background:#141414 !important;
  color:#fff !important;
  border-bottom:1px solid #2a2a2a !important;
}

body.vx-app .table tbody tr:nth-child(even){
  background:var(--vx-panel-2);
}
body.vx-app .table tbody tr:hover{
  background:#1b1b1b;
}

body.vx-app table.datatable tbody tr:nth-child(even),
body.vx-app table.dataTable tbody tr:nth-child(even),
body.vx-app table.table tbody tr:nth-child(even){
  background: var(--vx-panel-2) !important;
}
body.vx-app table.datatable tbody tr:hover,
body.vx-app table.dataTable tbody tr:hover,
body.vx-app table.table tbody tr:hover{
  background: #1b1b1b !important;
}

/* Index "vertical-table" (key/value) should match the app tables */
body.vx-app table.vertical-table{
  background: var(--vx-panel) !important;
  border: 1px solid var(--vx-border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
body.vx-app table.vertical-table th,
body.vx-app table.vertical-table td{
  border-color: var(--vx-border) !important;
  color: #fff !important;
}
body.vx-app table.vertical-table th{
  background: #141414 !important;
  color: #fff !important;
  text-transform: none !important;
}

/* DataTables controls (dark) */
body.vx-app .dataTables_wrapper .dataTables_filter label,
body.vx-app .dataTables_wrapper .dataTables_length label{
  color:var(--vx-sub);
}

body.vx-app .dataTables_wrapper .dataTables_filter input,
body.vx-app .dataTables_wrapper .dataTables_length select{
  background:#0f0f0f;
  color:#e7e7e7;
  border:1px solid var(--vx-border);
  border-radius:10px;
  padding:6px 10px;
  outline:none;
}

body.vx-app .dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:10px !important;
}

body.vx-app .dataTables_wrapper .dataTables_info{
  color: var(--vx-sub) !important;
}

/* DataTables + Bootstrap pagination */
body.vx-app .dataTables_wrapper .pagination{
  gap: 6px;
}
body.vx-app .dataTables_wrapper .pagination .page-link{
  background: #0f0f0f !important;
  border: 1px solid var(--vx-border) !important;
  color: #e7e7e7 !important;
  border-radius: 10px !important;
  min-width: 40px;
  text-align: center;
}
body.vx-app .dataTables_wrapper .pagination .page-link:hover{
  background: #1b1b1b !important;
  color: #ffffff !important;
}
body.vx-app .dataTables_wrapper .pagination .page-item.active .page-link{
  background: linear-gradient(180deg, var(--vx-brand), #5b21b6) !important;
  border-color: #4c1d95 !important;
  color: #ffffff !important;
}
body.vx-app .dataTables_wrapper .pagination .page-item.disabled .page-link{
  opacity: .55;
}

/* Extra room so pagination/controls never sit under the fixed bottom navbar */
body.vx-app .dataTables_wrapper{
  padding-bottom: 100px;
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 992px){
  body.vx-app .dataTables_wrapper{
    padding-bottom: 140px;
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }
}

/* Dropdowns / menus (Bootstrap) */
body.vx-app .dropdown-menu{
  background:#101010;
  color:#fff;
  border:1px solid var(--vx-border);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
body.vx-app .dropdown-item{ color:#eaeaea; }
body.vx-app .dropdown-item:hover{ background:#1b1b1b; color:#fff; }

/* Modals */
body.vx-app .modal .modal-content{
  background:#0f0f0f;
  color:#fff;
  border:1px solid var(--vx-border);
  border-radius:14px;
}
body.vx-app .modal .modal-header{
  border-bottom:1px solid var(--vx-border);
  background:#111;
  color:#fff;
}
body.vx-app .modal .modal-footer{
  border-top:1px solid var(--vx-border);
  background:#0e0e0e;
}

/* SweetAlert2 */
body.vx-app .swal2-popup{
  background:#0f0f0f !important;
  color:#fff !important;
  border:1px solid var(--vx-border) !important;
  border-radius:14px !important;
}
body.vx-app .swal2-title{ color:#fff !important; }
body.vx-app .swal2-html-container{ color:#e6e6e6 !important; }