/*
 * Premium Theme — Phase 2 UI Modernization
 * ------------------------------------------------------------------
 * A single, shared visual layer loaded on top of the existing
 * Bootstrap 4/5 markup (three different legacy themes: the public
 * "basic" site, the Velzon dashboard shared by users/ and uadmin/,
 * and the "login100" admin-login template). This file never changes
 * HTML structure, form field names, routes, or PHP logic — it only
 * restyles the classes/elements those templates already emit.
 *
 * Design language: elegant dark navy with a restrained, non-metallic
 * gold accent used sparingly (primary actions, focus states, key
 * numbers) — never as a background wash, never animated. No
 * gradients beyond a single subtle one on the page background, no
 * decorative motion, no "line go up" imagery.
 */

:root {
  /* Surfaces */
  --pt-bg: #0a0f1e;
  --pt-bg-elevated: #121a30;
  --pt-bg-elevated-2: #182445;
  --pt-bg-input: #0f1830;
  --pt-border: rgba(255, 255, 255, 0.08);
  --pt-border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --pt-text: #eef1f8;
  --pt-text-secondary: #aab4cf;
  --pt-text-muted: #76819e;

  /* Accent */
  --pt-gold: #cda05e;
  --pt-gold-strong: #e3bd7d;
  --pt-gold-soft: rgba(205, 160, 94, 0.14);
  --pt-gold-border: rgba(205, 160, 94, 0.35);

  /* Semantic */
  --pt-success: #3fc98a;
  --pt-success-soft: rgba(63, 201, 138, 0.14);
  --pt-danger: #e2685f;
  --pt-danger-soft: rgba(226, 104, 95, 0.14);
  --pt-warning: #e0a94e;
  --pt-warning-soft: rgba(224, 169, 78, 0.14);
  --pt-info: #5f9fe0;
  --pt-info-soft: rgba(95, 159, 224, 0.14);

  /* Shape */
  --pt-radius-sm: 8px;
  --pt-radius-md: 14px;
  --pt-radius-lg: 20px;

  /* Elevation (soft, navy-tinted, no harsh drop shadows) */
  --pt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --pt-shadow-md: 0 8px 24px rgba(3, 6, 16, 0.45);
  --pt-shadow-lg: 0 16px 40px rgba(3, 6, 16, 0.55);

  /* Focus ring — must stay visible on dark backgrounds */
  --pt-focus-ring: 0 0 0 3px rgba(205, 160, 94, 0.45);

  --pt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */
body {
  background: radial-gradient(1200px 800px at 10% -10%, #101c3a 0%, var(--pt-bg) 55%) !important;
  color: var(--pt-text) !important;
  font-family: var(--pt-font) !important;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pt-gold-strong); }
a:hover { color: var(--pt-gold); }

h1, h2, h3, h4, h5, h6 { color: var(--pt-text); font-weight: 600; letter-spacing: -0.01em; }

/* Tabular, evenly-spaced digits for every monetary figure. */
.pt-figure, .card h2, .card h4, .card h3 {
  font-variant-numeric: tabular-nums;
}

/* Visible, consistent keyboard focus everywhere — buttons, links, inputs. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--pt-focus-ring);
  border-color: var(--pt-gold-border) !important;
}

/* ------------------------------------------------------------------
 * Layout chrome (header / sidebar / topbar) — Velzon dashboard
 * (shared by users/header.php and uadmin/header.php)
 * ------------------------------------------------------------------ */
#page-topbar,
.navbar-header {
  background: var(--pt-bg-elevated) !important;
  border-bottom: 1px solid var(--pt-border);
}

.app-menu,
.navbar-menu {
  background: var(--pt-bg-elevated) !important;
  border-right: 1px solid var(--pt-border);
}

.navbar-menu .nav-link,
.navbar-menu .menu-title {
  color: var(--pt-text-secondary) !important;
}
.navbar-menu .nav-link:hover,
.navbar-menu .nav-link.active {
  color: var(--pt-gold-strong) !important;
}
.navbar-menu .nav-link.active {
  background: var(--pt-gold-soft) !important;
  border-radius: var(--pt-radius-sm);
}

/* Sidebar redesign: a left accent bar on the active item via an
 * absolutely-positioned pseudo-element (not border-left + padding
 * compensation) so it never shifts the existing icon/label layout
 * Velzon's own menu CSS already sets. */
.navbar-menu .nav-link {
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
.navbar-menu .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--pt-gold);
  border-radius: 0 3px 3px 0;
}
.navbar-menu .menu-title {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

/* Sidebar profile summary card (users/sidebar.php, uadmin/sidebar.php) */
.pt-sidebar-profile {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  margin: 0 0.1rem 1rem;
  background: var(--pt-bg-elevated-2);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
}
.pt-sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pt-gold), var(--pt-gold-strong));
  color: #1a1304;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.pt-sidebar-info { min-width: 0; }
.pt-sidebar-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pt-text) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.pt-sidebar-role {
  font-size: 0.72rem;
  color: var(--pt-text-muted) !important;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.pt-sidebar-role .pt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.pt-sidebar-role .pt-dot--online { background: var(--pt-success); }
.pt-sidebar-role .pt-dot--neutral { background: var(--pt-text-muted); }

.main-content { background: transparent; }

.navbar-brand-box { background: transparent !important; }

.topbar-user .btn,
.topbar-user .btn:hover {
  background: var(--pt-bg-elevated-2) !important;
  color: var(--pt-text) !important;
  border: 1px solid var(--pt-border);
}
.topbar-user .dropdown-menu {
  background: var(--pt-bg-elevated-2) !important;
  border: 1px solid var(--pt-border) !important;
}
.topbar-user .dropdown-item { color: var(--pt-text-secondary) !important; }
.topbar-user .dropdown-item:hover { background: var(--pt-gold-soft) !important; color: var(--pt-gold-strong) !important; }
.topbar-user .dropdown-header { color: var(--pt-text-muted) !important; }

footer.footer {
  background: var(--pt-bg-elevated) !important;
  border-top: 1px solid var(--pt-border);
  color: var(--pt-text-muted) !important;
}

.btn-icon#back-to-top,
.customizer-setting .btn-info {
  background: var(--pt-gold) !important;
  border-color: var(--pt-gold) !important;
  color: #1a1304 !important;
}

/* ------------------------------------------------------------------
 * Cards
 * ------------------------------------------------------------------ */
.card {
  background: var(--pt-bg-elevated) !important;
  border: 1px solid var(--pt-border) !important;
  border-radius: var(--pt-radius-md) !important;
  box-shadow: var(--pt-shadow-md) !important;
  color: var(--pt-text);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--pt-border) !important;
  color: var(--pt-text);
}
.card-title { color: var(--pt-text) !important; }
.text-muted { color: var(--pt-text-muted) !important; }

/* ------------------------------------------------------------------
 * Buttons — restyle Bootstrap's existing classes, no markup changes.
 * ------------------------------------------------------------------ */
.btn {
  border-radius: var(--pt-radius-sm) !important;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary,
.btn-default.website-color {
  background: linear-gradient(180deg, var(--pt-gold-strong), var(--pt-gold)) !important;
  border-color: var(--pt-gold) !important;
  color: #1a1304 !important;
}
.btn-primary:hover,
.btn-default.website-color:hover {
  box-shadow: 0 6px 18px rgba(205, 160, 94, 0.35);
}

.btn-success { background: var(--pt-success) !important; border-color: var(--pt-success) !important; color: #06281b !important; }
.btn-danger  { background: var(--pt-danger) !important;  border-color: var(--pt-danger) !important;  color: #2a0a08 !important; }
.btn-info    { background: var(--pt-info) !important;    border-color: var(--pt-info) !important;    color: #05172e !important; }
.btn-warning { background: var(--pt-warning) !important; border-color: var(--pt-warning) !important; color: #2a1a04 !important; }

.btn-soft-success { background: var(--pt-success-soft) !important; color: var(--pt-success) !important; border-color: transparent !important; }
.btn-soft-danger  { background: var(--pt-danger-soft) !important;  color: var(--pt-danger) !important;  border-color: transparent !important; }

.btn-outline-secondary,
.btn-soft-secondary {
  background: transparent !important;
  border: 1px solid var(--pt-border-strong) !important;
  color: var(--pt-text-secondary) !important;
}

/* ------------------------------------------------------------------
 * Forms
 * ------------------------------------------------------------------ */
.form-control,
.form-select,
textarea.form-control,
input.input100 {
  background: var(--pt-bg-input) !important;
  border: 1px solid var(--pt-border-strong) !important;
  color: var(--pt-text) !important;
  border-radius: var(--pt-radius-sm) !important;
}
.form-control::placeholder { color: var(--pt-text-muted); }
.form-control:focus,
.form-select:focus {
  background: var(--pt-bg-input) !important;
  border-color: var(--pt-gold-border) !important;
  box-shadow: var(--pt-focus-ring) !important;
  color: var(--pt-text) !important;
}
.form-label { color: var(--pt-text-secondary) !important; font-weight: 500; }
.help-block { color: var(--pt-danger) !important; font-size: 0.85rem; }

/* ------------------------------------------------------------------
 * Tables
 * ------------------------------------------------------------------ */
.table {
  color: var(--pt-text) !important;
  --bs-table-bg: transparent;
}
.table thead.table-light th,
.table > :not(caption) > * > * {
  background: transparent !important;
  color: var(--pt-text-secondary) !important;
  border-color: var(--pt-border) !important;
}
.table thead th {
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--pt-text-muted) !important;
}
.table-responsive { border-radius: var(--pt-radius-sm); }

/* DataTables (jQuery plugin used on most admin list pages) generates its
 * own wrapper/controls outside Bootstrap's component classes, with a
 * light default theme — without this, every admin table page shows a
 * white strip around an otherwise dark table. */
.dataTables_wrapper,
.dataTables_wrapper label,
.dataTables_length,
.dataTables_filter,
.dataTables_info {
  color: var(--pt-text-secondary) !important;
}
.dataTables_filter input,
.dataTables_length select {
  background: var(--pt-bg-input) !important;
  border: 1px solid var(--pt-border-strong) !important;
  color: var(--pt-text) !important;
  border-radius: var(--pt-radius-sm) !important;
}
table.dataTable {
  background: transparent !important;
  color: var(--pt-text) !important;
}
table.dataTable thead th,
table.dataTable tbody td {
  border-color: var(--pt-border) !important;
  color: var(--pt-text) !important;
}
table.dataTable tbody tr,
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even,
table.dataTable tbody tr.primary {
  background: transparent !important;
}
table.dataTable tbody tr.odd {
  background: rgba(255, 255, 255, 0.02) !important;
}
table.dataTable tbody tr:hover {
  background: var(--pt-gold-soft) !important;
}
.dataTables_paginate .paginate_button {
  color: var(--pt-text-secondary) !important;
  border-radius: var(--pt-radius-sm) !important;
}
.dataTables_paginate .paginate_button.current {
  background: var(--pt-gold) !important;
  border-color: var(--pt-gold) !important;
  color: #1a1304 !important;
}
.dataTables_paginate .paginate_button:hover {
  background: var(--pt-bg-elevated-2) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border-strong) !important;
}
.dataTables_paginate .paginate_button.disabled {
  color: var(--pt-text-muted) !important;
}

/* A handful of admin list pages load the older DataTables 1.10.19 +
 * jQuery UI "base" theme directly (in addition to the Bootstrap 5
 * integration above) for their sortable-column toolbar. jQuery UI's
 * own theme CSS paints that toolbar and the sortable <th> cells with
 * a light gray background that otherwise shows through as a bright
 * strip across an otherwise dark table. */
.ui-widget-header,
.ui-state-default,
.ui-widget-content {
  background: var(--pt-bg-elevated-2) !important;
  border-color: var(--pt-border) !important;
  color: var(--pt-text-secondary) !important;
}
.ui-state-default.sorting_asc,
.ui-state-default.sorting_desc {
  background: var(--pt-gold-soft) !important;
  color: var(--pt-gold-strong) !important;
}
.ui-icon { filter: invert(1) brightness(1.6); }
.ui-button, .ui-buttonset .ui-button {
  background: var(--pt-bg-elevated-2) !important;
  color: var(--pt-text) !important;
  border-color: var(--pt-border-strong) !important;
}

/* ------------------------------------------------------------------
 * Status badges — new, consistent classes.
 * Pages that previously used ad-hoc inline-styled icon+text pairs for
 * "Approved / Pending / Rejected / Active / Completed" were updated
 * (where touched in this phase) to use these instead.
 * ------------------------------------------------------------------ */
.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pt-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.pt-badge--success { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-badge--pending  { background: var(--pt-warning-soft); color: var(--pt-warning); }
.pt-badge--danger   { background: var(--pt-danger-soft); color: var(--pt-danger); }
.pt-badge--info     { background: var(--pt-info-soft); color: var(--pt-info); }
.pt-badge--neutral  { background: rgba(255,255,255,0.06); color: var(--pt-text-secondary); }

/* ------------------------------------------------------------------
 * Alerts / notices — replaces the inline style="padding:20px;
 * background-color:#dce8f7;color:black" pattern repeated across ~20
 * pages. Rendered server-side by premium_alert() in config/security.php.
 * ------------------------------------------------------------------ */
.pt-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--pt-radius-sm);
  border: 1px solid transparent;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.pt-alert svg { flex: 0 0 auto; margin-top: 2px; width: 18px; height: 18px; }
.pt-alert--success { background: var(--pt-success-soft); border-color: rgba(63,201,138,0.3); color: var(--pt-success); }
.pt-alert--error    { background: var(--pt-danger-soft); border-color: rgba(226,104,95,0.3); color: var(--pt-danger); }
.pt-alert--notice    { background: var(--pt-gold-soft); border-color: var(--pt-gold-border); color: var(--pt-gold-strong); }

/* ------------------------------------------------------------------
 * Empty / loading states — new utility classes, used where pages
 * were touched to show "no rows" instead of a bare empty table.
 * ------------------------------------------------------------------ */
.pt-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--pt-text-muted);
}
.pt-empty-icon { font-size: 2rem; color: var(--pt-border-strong); margin-bottom: 10px; }

.pt-skeleton {
  background: linear-gradient(90deg, var(--pt-bg-elevated-2) 25%, var(--pt-border) 37%, var(--pt-bg-elevated-2) 63%);
  background-size: 400% 100%;
  animation: pt-skeleton-shimmer 1.6s ease infinite;
  border-radius: var(--pt-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .pt-skeleton { animation: none; }
}
@keyframes pt-skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ------------------------------------------------------------------
 * Balance / summary stat tiles (dashboard cards)
 * ------------------------------------------------------------------ */
.pt-stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--pt-text);
  font-variant-numeric: tabular-nums;
}
.pt-stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pt-text-muted);
}
.pt-stat-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--pt-radius-sm);
  background: var(--pt-gold-soft);
  color: var(--pt-gold-strong);
  font-size: 1.2rem;
}

/* ------------------------------------------------------------------
 * Auth screens (sign in / sign up / reset / 2FA) — Bootstrap 4
 * "basic" public-site theme.
 * ------------------------------------------------------------------ */
.contact-form,
.login100-form {
  background: var(--pt-bg-elevated);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-lg);
  box-shadow: var(--pt-shadow-lg);
  padding: 2.5rem 2rem;
  max-width: 480px;
  margin: 0 auto;
}
.wrap-login100 { background: transparent !important; }
.container-login100 { background: var(--pt-bg) !important; }
.login100-form-title { color: var(--pt-text) !important; }

/* Bare, unclassed form elements inside the auth card (e.g. the
 * third-party GTranslate <select>) — a conservative fallback so
 * nothing looks visually "unstyled" next to the premium inputs,
 * without touching any markup or its onchange behavior. */
.contact-form select:not(.form-select),
.login100-form select:not(.form-select) {
  background: var(--pt-bg-input);
  border: 1px solid var(--pt-border-strong);
  color: var(--pt-text);
  border-radius: var(--pt-radius-sm);
  padding: 6px 10px;
}
.contact-form label,
.login100-form label {
  color: var(--pt-text-secondary);
}

/* admin login's own button layering (uadmin/login/css/main.css) used a
 * stray cyan/purple gradient unrelated to the rest of the theme. */
.login100-form-bgbtn {
  background: var(--pt-gold) !important;
  background: linear-gradient(90deg, var(--pt-gold) 0%, var(--pt-gold-strong) 50%, var(--pt-gold) 100%) !important;
}
.login100-form-btn { color: #1a1304 !important; font-weight: 700; }

/* ------------------------------------------------------------------
 * Account & finance pages (users/update.php, security.php, verify.php,
 * withdraw.php, pay.php, deposit.php) — shared building blocks so
 * every form-centric page in the user area reads as one system.
 * ------------------------------------------------------------------ */
.pt-page-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.25rem;
}
.pt-page-head-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--pt-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--pt-gold-soft);
  color: var(--pt-gold-strong);
  flex-shrink: 0;
}
.pt-page-head h4 { margin: 0 0 0.15rem; font-weight: 700; color: var(--pt-text); }
.pt-page-head p { margin: 0; color: var(--pt-text-muted); font-size: 0.86rem; }

.pt-form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pt-text-secondary);
  margin-bottom: 0.35rem;
  display: block;
}
.pt-input-icon-wrap { position: relative; }
.pt-input-icon-wrap > i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pt-text-muted);
  pointer-events: none;
}
.pt-input-icon-wrap > .form-control,
.pt-input-icon-wrap > .form-select { padding-left: 40px; }

/* Balance / amount banner (withdraw, deposit) */
.pt-balance-banner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: linear-gradient(135deg, var(--pt-bg-elevated-2), var(--pt-bg-elevated));
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.25rem;
}
.pt-balance-banner .pt-balance-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pt-gold-soft);
  color: var(--pt-gold-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.pt-balance-banner .pt-balance-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pt-text-muted);
  margin: 0 0 0.15rem;
}
.pt-balance-banner .pt-balance-value { font-size: 1.5rem; font-weight: 700; color: var(--pt-gold); margin: 0; }

/* File upload dropzone (verify.php identity docs, deposit.php proof) */
.pt-upload-box {
  border: 1.5px dashed var(--pt-border-strong);
  border-radius: var(--pt-radius-md);
  padding: 1.5rem 1rem;
  text-align: center;
  background: var(--pt-bg-elevated-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pt-upload-box:hover { border-color: var(--pt-gold); }
.pt-upload-box i { font-size: 1.8rem; color: var(--pt-text-muted); margin-bottom: 0.4rem; display: block; }
.pt-upload-box .pt-upload-label { font-weight: 600; font-size: 0.86rem; color: var(--pt-text); }
.pt-upload-box .pt-upload-sub { font-size: 0.76rem; color: var(--pt-text-muted); margin: 0.2rem 0 0; }
.pt-upload-box.has-file { border-color: var(--pt-success); background: var(--pt-success-soft); }
.pt-upload-box.has-file i { color: var(--pt-success); }
.pt-upload-box input[type="file"] { display: none; }

/* Wallet / referral address box with inline copy button */
.pt-copy-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pt-bg-elevated-2);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 0.55rem 0.7rem;
  margin-bottom: 1rem;
}
.pt-copy-box input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--pt-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}
.pt-copy-box input:focus { outline: none; }

/* Security page: 2FA status + change-password rows */
.pt-security-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-md);
  margin-bottom: 1rem;
}
.pt-security-row-info { display: flex; align-items: center; gap: 0.9rem; }
.pt-security-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}
.pt-security-icon--on { background: var(--pt-success-soft); color: var(--pt-success); }
.pt-security-icon--off { background: var(--pt-bg-input); color: var(--pt-text-muted); }
.pt-security-row h6 { margin: 0 0 0.15rem; font-weight: 600; color: var(--pt-text); }
.pt-security-row p { margin: 0; font-size: 0.8rem; color: var(--pt-text-muted); }

@media (max-width: 575.98px) {
  .pt-security-row { flex-direction: column; align-items: stretch; }
}

/* ------------------------------------------------------------------
 * Admin list pages (uadmin/users.php, verify.php, investments.php,
 * deposit.php, withdraw.php, viewmail.php) — these pages each load
 * DataTables' own light Bootstrap/jQuery-UI CSS theme per-page, after
 * this stylesheet in document order, so the overrides below need
 * !important to reliably win regardless of that per-page load order.
 * ------------------------------------------------------------------ */
.dataTables_wrapper { color: var(--pt-text) !important; }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate { color: var(--pt-text-secondary) !important; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--pt-bg-input) !important;
  border: 1px solid var(--pt-border-strong) !important;
  color: var(--pt-text) !important;
  border-radius: var(--pt-radius-sm) !important;
  padding: 4px 10px !important;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  outline: none !important;
  box-shadow: var(--pt-focus-ring) !important;
  border-color: var(--pt-gold-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--pt-text-secondary) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  border-radius: var(--pt-radius-sm) !important;
  margin-left: 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--pt-gold-soft) !important;
  border-color: var(--pt-gold-border) !important;
  color: var(--pt-gold-strong) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--pt-bg-elevated-2) !important;
  border-color: var(--pt-border) !important;
  color: var(--pt-text) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: var(--pt-text-muted) !important;
  opacity: 0.5;
}
table.dataTable thead th {
  color: var(--pt-text-secondary) !important;
  border-bottom: 1px solid var(--pt-border-strong) !important;
  background: transparent !important;
  white-space: nowrap;
}
table.dataTable tbody td {
  border-color: var(--pt-border) !important;
  color: var(--pt-text) !important;
  vertical-align: middle;
}
table.dataTable tbody tr:hover {
  background: var(--pt-bg-elevated-2) !important;
}
.pt-row-actions { display: flex; gap: 0.4rem; flex-wrap: nowrap; }
.pt-row-actions .btn { white-space: nowrap; }
.pt-doc-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--pt-radius-sm);
  border: 1px solid var(--pt-border);
}
.pt-card-grid-item h5 { color: var(--pt-text); font-weight: 600; }
.pt-card-grid-item .card { height: 100%; }

/* ------------------------------------------------------------------
 * Responsive: keep the mobile-first dashboard usable, then scale up.
 * ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
  .contact-form, .login100-form { padding: 1.5rem 1.25rem; border-radius: var(--pt-radius-md); }
  .pt-stat-value { font-size: 1.3rem; }
}