/* ============================================================================
   VPN Panel — Authoritative Design System
   Loaded LAST (after custom_css.tpl) on every page. It gives the whole panel ONE
   consistent look (single accent, one button/card/input/badge style) instead of
   the patchwork of Bootstrap + 10 Stisla themes + modern-theme.css + inline styles.

   IMPORTANT: every selector is prefixed `html[data-theme]` so it matches or beats
   modern-theme.css (which uses that same prefix at high specificity). Because this
   file loads LAST, an equal-specificity !important rule here wins the cascade.
   Nothing is deleted — it standardises on top.
   ============================================================================ */

/* ---- ONE accent colour for the whole panel — change ONLY this to rebrand --- */
:root,
html[data-theme='dark'],
[data-theme='dark'] {
  --mt-accent: #1C4D8D;                 /* brand navy */
  --mt-accent-hover: #163D70;
  --mt-accent-soft: rgba(28,77,141,.13);
}

/* ---- Buttons: one shape everywhere --------------------------------------- */
html[data-theme] body .btn {
  border-radius: var(--mt-radius, 8px) !important;
  font-size: 13px; font-weight: 500; letter-spacing: .2px; line-height: 1.45;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, opacity .12s ease;
}
html[data-theme] body .btn.btn-sm { font-size: 12px; border-radius: var(--mt-radius-sm, 6px) !important; }
html[data-theme] body .btn.btn-lg { font-size: 14px; }

/* Standard buttons: solid fills + white text + one hover model (panel-wide) */
html[data-theme] body .btn-primary { background-color: var(--mt-accent,#1C4D8D) !important; border-color: var(--mt-accent,#1C4D8D) !important; color:#fff !important; }
html[data-theme] body .btn-primary:hover, html[data-theme] body .btn-primary:focus, html[data-theme] body .btn-primary:active { background-color: var(--mt-accent-hover,#163D70) !important; border-color: var(--mt-accent-hover,#163D70) !important; color:#fff !important; }
html[data-theme] body .btn-success { background-color:#10B981 !important; border-color:#10B981 !important; color:#fff !important; }
html[data-theme] body .btn-success:hover, html[data-theme] body .btn-success:focus { background-color:#0e9f6e !important; border-color:#0e9f6e !important; color:#fff !important; }
html[data-theme] body .btn-danger  { background-color:#EF4444 !important; border-color:#EF4444 !important; color:#fff !important; }
html[data-theme] body .btn-danger:hover, html[data-theme] body .btn-danger:focus { background-color:#dc2626 !important; border-color:#dc2626 !important; color:#fff !important; }
html[data-theme] body .btn-warning { background-color:#F59E0B !important; border-color:#F59E0B !important; color:#fff !important; }
html[data-theme] body .btn-warning:hover, html[data-theme] body .btn-warning:focus { background-color:#d97706 !important; border-color:#d97706 !important; color:#fff !important; }
html[data-theme] body .btn-info    { background-color:#2E6BB8 !important; border-color:#2E6BB8 !important; color:#fff !important; }
html[data-theme] body .btn-info:hover, html[data-theme] body .btn-info:focus { background-color:#255a9c !important; border-color:#255a9c !important; color:#fff !important; }
html[data-theme] body .btn-secondary { background-color:#64748B !important; border-color:#64748B !important; color:#fff !important; }
html[data-theme] body .btn-secondary:hover, html[data-theme] body .btn-secondary:focus { background-color:#4b5563 !important; border-color:#4b5563 !important; color:#fff !important; }
html[data-theme] body .btn-dark { background-color:#334155 !important; border-color:#334155 !important; color:#fff !important; }
html[data-theme] body .btn-dark:hover { background-color:#1e293b !important; border-color:#1e293b !important; color:#fff !important; }
html[data-theme] body .btn-light { background-color:#f1f5f9 !important; border-color:#e2e8f0 !important; color:#334155 !important; }
html[data-theme] body .btn-light:hover { background-color:#e2e8f0 !important; border-color:#cbd5e1 !important; color:#334155 !important; }
html[data-theme] body .btn-outline-primary { color: var(--mt-accent,#1C4D8D) !important; border-color: var(--mt-accent,#1C4D8D) !important; background:transparent !important; }
html[data-theme] body .btn-outline-primary:hover { color:#fff !important; background: var(--mt-accent,#1C4D8D) !important; }
html[data-theme] body .btn-outline-secondary { color:#64748B !important; border-color:#cbd5e1 !important; background:transparent !important; }
html[data-theme] body .btn-outline-secondary:hover { color:#fff !important; background:#64748B !important; border-color:#64748B !important; }
html[data-theme] body .btn-link { color: var(--mt-accent,#1C4D8D) !important; }

/* ---- Accent unification (retire legacy #6777ef) -------------------------- */
html[data-theme] body a { color: var(--mt-accent,#1C4D8D); }
html[data-theme] body a:hover, html[data-theme] body a:focus { color: var(--mt-accent-hover,#163D70); }
html[data-theme] body .bg-primary   { background-color: var(--mt-accent,#1C4D8D) !important; }
html[data-theme] body .text-primary { color: var(--mt-accent,#1C4D8D) !important; }
html[data-theme] body .text-success { color:#10B981 !important; } html[data-theme] body .bg-success { background-color:#10B981 !important; }
html[data-theme] body .text-danger  { color:#EF4444 !important; } html[data-theme] body .bg-danger  { background-color:#EF4444 !important; }
html[data-theme] body .text-warning { color:#F59E0B !important; } html[data-theme] body .bg-warning { background-color:#F59E0B !important; }
html[data-theme] body .text-info    { color:#2E6BB8 !important; } html[data-theme] body .bg-info    { background-color:#2E6BB8 !important; }

/* ---- Badges: one radius + consistent colours ----------------------------- */
html[data-theme] body .badge { border-radius: var(--mt-radius-sm,6px) !important; font-weight:600; letter-spacing:.2px; padding:.34em .62em; }
html[data-theme] body .badge-primary   { background-color: var(--mt-accent,#1C4D8D) !important; color:#fff !important; }
html[data-theme] body .badge-success   { background-color:#10B981 !important; color:#fff !important; }
html[data-theme] body .badge-danger    { background-color:#EF4444 !important; color:#fff !important; }
html[data-theme] body .badge-warning   { background-color:#F59E0B !important; color:#fff !important; }
html[data-theme] body .badge-info      { background-color:#2E6BB8 !important; color:#fff !important; }
html[data-theme] body .badge-secondary { background-color:#64748B !important; color:#fff !important; }

/* ---- Cards + inputs + tables + alerts + header --------------------------- */
html[data-theme] body .card {
  border-radius: var(--mt-radius,8px) !important;
  border: 1px solid var(--mt-border,#E2E8F0) !important;
  background-color: var(--mt-bg-card,#fff) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
}
html[data-theme] body .form-control, html[data-theme] body .custom-select {
  border-radius: var(--mt-radius-sm,6px) !important;
  border: 1px solid var(--mt-border,#E2E8F0) !important;
}
html[data-theme] body .form-control:focus, html[data-theme] body .custom-select:focus {
  border-color: var(--mt-accent,#1C4D8D) !important;
  box-shadow: 0 0 0 3px rgba(28,77,141,.18) !important;
}
html[data-theme] body .table thead th { border-top:none; font-size:11px; letter-spacing:.4px; text-transform:uppercase; color: var(--mt-text-muted,#64748B); }
html[data-theme] body .alert-primary { border-color: var(--mt-accent,#1C4D8D); }
html[data-theme] body .section-header h1 { font-weight:700; color: var(--mt-text-primary,#0F172A); }

/* ---- Table row action buttons: ALL identical, clean soft-tinted icons -----
   Highest specificity so these win over every button rule above and in
   modern-theme. Every per-row action button (Details/Reinstall/Restart/SSH/
   Delete, and the same on the user/reseller lists) is now the SAME size + soft
   look and fills with its colour on hover — no more fill-vs-border mash-up. */
html[data-theme] body td .btn-group .btn,
html[data-theme] body .table-listserver td .btn {
  min-width:36px; height:34px; padding:0 9px;
  border-radius: var(--mt-radius,8px) !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; transform:none !important;
}
html[data-theme] body td .btn-group .btn-success,  html[data-theme] body .table-listserver td .btn-success  { background: rgba(16,185,129,.12) !important; border-color:transparent !important; color:#059669 !important; }
html[data-theme] body td .btn-group .btn-success:hover,  html[data-theme] body .table-listserver td .btn-success:hover  { background:#10B981 !important; color:#fff !important; }
html[data-theme] body td .btn-group .btn-info,     html[data-theme] body .table-listserver td .btn-info     { background: rgba(46,107,184,.13) !important; border-color:transparent !important; color:#2E6BB8 !important; }
html[data-theme] body td .btn-group .btn-info:hover,     html[data-theme] body .table-listserver td .btn-info:hover     { background:#2E6BB8 !important; color:#fff !important; }
html[data-theme] body td .btn-group .btn-primary,  html[data-theme] body .table-listserver td .btn-primary  { background: var(--mt-accent-soft, rgba(28,77,141,.13)) !important; border-color:transparent !important; color: var(--mt-accent,#1C4D8D) !important; }
html[data-theme] body td .btn-group .btn-primary:hover,  html[data-theme] body .table-listserver td .btn-primary:hover  { background: var(--mt-accent,#1C4D8D) !important; color:#fff !important; }
html[data-theme] body td .btn-group .btn-warning,  html[data-theme] body .table-listserver td .btn-warning  { background: rgba(245,158,11,.15) !important; border-color:transparent !important; color:#D97706 !important; }
html[data-theme] body td .btn-group .btn-warning:hover,  html[data-theme] body .table-listserver td .btn-warning:hover  { background:#F59E0B !important; color:#fff !important; }
html[data-theme] body td .btn-group .btn-danger,   html[data-theme] body .table-listserver td .btn-danger   { background: rgba(239,68,68,.12) !important; border-color:transparent !important; color:#DC2626 !important; }
html[data-theme] body td .btn-group .btn-danger:hover,   html[data-theme] body .table-listserver td .btn-danger:hover   { background:#EF4444 !important; color:#fff !important; }

/* ---- Uniform button PADDING = uniform height (kills the 28-50px height mix) --
   Standard buttons all share one padding so they're the same height; -sm/-lg
   scale consistently. Table action + icon-helper buttons set their own size (higher
   specificity / defined after) so they still win. */
html[data-theme] body .btn { padding: .5rem 1.05rem !important; }
html[data-theme] body .btn.btn-sm { padding: .3rem .75rem !important; }
html[data-theme] body .btn.btn-lg { padding: .65rem 1.4rem !important; }
/* Buttons inside an input-group match their sibling input's height (not the global) */
html[data-theme] body .input-group .btn,
html[data-theme] body .input-group-append .btn,
html[data-theme] body .input-group-prepend .btn { padding-top:0 !important; padding-bottom:0 !important; align-self:stretch !important; }

/* Icon-only helper buttons — one class instead of inline styles */
html[data-theme] body .btn-icon-sm { width:28px !important; height:28px !important; padding:0 !important; border-radius:50% !important; display:inline-flex !important; align-items:center; justify-content:center; }
html[data-theme] body .btn-icon-lg { width:44px !important; height:44px !important; padding:0 !important; border-radius: var(--mt-radius,8px) !important; font-size:15px !important; display:inline-flex !important; align-items:center; justify-content:center; flex-shrink:0; }
html[data-theme] body .btn-period-label { border-radius:20px !important; padding:.2rem .7rem !important; font-size:12px !important; }

/* Soft status buttons for the install-progress OK/close (replaces inline hex) */
html[data-theme] body .btn-status-danger  { background:#EF4444 !important; color:#fff !important; border:none !important; border-radius: var(--mt-radius-sm,6px) !important; padding:5px 16px !important; font-size:11px !important; font-weight:700 !important; }
html[data-theme] body .btn-status-success { background:#10B981 !important; color:#fff !important; border:none !important; border-radius: var(--mt-radius-sm,6px) !important; padding:5px 16px !important; font-size:11px !important; font-weight:700 !important; }

/* ---- Remap bespoke (non-Bootstrap) button classes to the canonical look ----
   So even before the HTML is cleaned up, these render like a normal .btn. */
html[data-theme] body .btn-login, html[data-theme] body .btn-activate { background: var(--mt-accent,#1C4D8D) !important; background-image:none !important; border:none !important; border-radius: var(--mt-radius,8px) !important; color:#fff !important; font-weight:500 !important; }
html[data-theme] body .btn-login:hover, html[data-theme] body .btn-activate:hover { background: var(--mt-accent-hover,#163D70) !important; color:#fff !important; }
html[data-theme] body .btn-save { background:#10B981 !important; background-image:none !important; border:none !important; border-radius: var(--mt-radius,8px) !important; color:#fff !important; }
html[data-theme] body .btn-save:hover { background:#0e9f6e !important; color:#fff !important; }
html[data-theme] body .btn-preview-toggle { background:#2E6BB8 !important; background-image:none !important; border:none !important; border-radius: var(--mt-radius,8px) !important; color:#fff !important; }
html[data-theme] body .btn-preview-toggle:hover { background:#255a9c !important; color:#fff !important; }
html[data-theme] body .btn-adduser-single, html[data-theme] body .btn-adduser-bulk { background: var(--mt-accent-soft, rgba(28,77,141,.13)) !important; border:1px solid transparent !important; color: var(--mt-accent,#1C4D8D) !important; border-radius: var(--mt-radius,8px) !important; font-weight:500 !important; }
html[data-theme] body .btn-adduser-single:hover, html[data-theme] body .btn-adduser-bulk:hover { background: var(--mt-accent,#1C4D8D) !important; color:#fff !important; }
html[data-theme] body .btn-modern { border-radius: var(--mt-radius,8px) !important; box-shadow:none !important; transform:none !important; }
html[data-theme] body .add-server .btn-add-server, html[data-theme] body .add-server .btn-side-action { font-size:13px !important; font-weight:500 !important; padding:.5rem 1.05rem !important; }