/**
 * Vix Theme - Vercel Premium Dark Style
 * WHMCS Template CSS
 * v1.0.0
 */

/* ============================================
 Global Border-Radius 7px - Client Area
 ============================================ */
*,
*:before,
*:after {
 border-radius: 7px !important;
}

/* ============================================
 CSS Variables - Vercel Style
 ============================================ */
:root {
 --bg: #000000;
 --bg-subtle: #0a0a0a;
 --bg-hover: #111111;
 --text: #ffffff;
 --text-secondary: #a1a1a1;
 --text-muted: #717171;
 --border: #262626;
 --vercel-blue: #0070f3;
 --vercel-blue-hover: #0051cc;
 --radius: 7px;
 --transition: 0.15s ease;
 --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

[data-theme="light"] {
 --bg: #ffffff;
 --bg-subtle: #fafafa;
 --bg-hover: #f5f5f5;
 --text: #000000;
 --text-secondary: #525252;
 --text-muted: #737373;
 --border: #e5e5e5;
}

/* ============================================
   Reset & Base
   ============================================ */
* { box-sizing: border-box; }
html { 
 background: var(--bg) !important; 
 color: var(--text) !important; 
 scroll-behavior: smooth;
 font-family: var(--font-family);
}
body { 
 background-color: var(--bg) !important; 
 color: var(--text) !important; 
 font-family: var(--font-family);
 font-size: 16px;
 line-height: 1.5;
 margin: 0;
 padding: 0;
}

a { 
 color: var(--text); 
 text-decoration: none; 
 transition: var(--transition);
}
a:hover { 
 color: var(--text-muted);
}

/* ============================================
   Layout
   ============================================ */
.vix-container {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 24px;
}

.vix-layout {
 display: flex;
 gap: 32px;
}

.vix-sidebar {
 width: 280px;
 flex-shrink: 0;
}

.vix-content {
 flex: 1;
 min-width: 0;
}

.vix-content-full {
 width: 100%;
}

/* ============================================
   Header
   ============================================ */
.vix-header {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 height: 64px;
 background: var(--bg);
 border-bottom: 1px solid var(--border);
 z-index: 1000;
 display: flex;
 align-items: center;
}

.vix-header .vix-container {
 display: flex;
 align-items: center;
 justify-content: space-between;
 height: 100%;
}

.vix-logo {
 display: flex;
 align-items: center;
 gap: 12px;
 font-weight: 700;
 font-size: 18px;
 color: var(--text);
}

.vix-logo svg {
 width: 24px;
 height: 24px;
}

.vix-logo img {
 height: 32px;
 width: auto;
}

/* Navigation */
.vix-nav {
 display: flex;
 align-items: center;
}

.vix-nav ul {
 display: flex;
 align-items: center;
 gap: 4px;
 list-style: none;
 margin: 0;
 padding: 0;
}

.vix-nav li {
 margin: 0;
}

.vix-nav a {
 display: flex;
 align-items: center;
 padding: 8px 16px;
 color: var(--text-secondary);
 font-size: 14px;
 font-weight: 500;
 border-radius: var(--radius);
 transition: var(--transition);
}

.vix-nav a:hover {
 background: var(--bg-hover);
 color: var(--text);
}

/* Actions */
.vix-actions {
 display: flex;
 align-items: center;
 gap: 8px;
}

.vix-theme-toggle {
 width: 40px;
 height: 40px;
 border: none;
 background: transparent;
 color: var(--text-secondary);
 border-radius: var(--radius);
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 18px;
 transition: var(--transition);
}

.vix-theme-toggle:hover {
 background: var(--bg-hover);
 color: var(--text);
}

.vix-cart {
 position: relative;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--text-secondary);
 border-radius: var(--radius);
 transition: var(--transition);
}

.vix-cart:hover {
 background: var(--bg-hover);
 color: var(--text);
}

.vix-cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Buttons */
.vix-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 padding: 0 16px;
 height: 40px;
 font-size: 14px;
 font-weight: 500;
 border-radius: var(--radius);
 cursor: pointer;
 transition: var(--transition);
 text-decoration: none;
 border: none;
}

.vix-btn-ghost {
 background: transparent;
 color: var(--text-secondary);
}

.vix-btn-ghost:hover {
 background: var(--bg-hover);
 color: var(--text);
}

.vix-btn-primary {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.vix-btn-primary:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--text-muted);
}

/* ============================================
   Hero Section
   ============================================ */
.vix-hero {
 padding: 120px 0 80px;
 text-align: center;
 background: var(--bg);
 border-bottom: 1px solid var(--border);
}

.vix-hero-title {
 font-size: 56px;
 font-weight: 700;
 color: var(--text);
 margin: 0 0 16px;
 letter-spacing: -0.02em;
}

.vix-hero-subtitle {
 font-size: 18px;
 color: var(--text-muted);
 margin: 0 0 48px;
}

/* Domain Search */
.vix-domain-search {
 display: flex;
 gap: 12px;
 max-width: 600px;
 margin: 0 auto;
}

.vix-domain-search input {
 flex: 1;
 height: 56px;
 padding: 0 24px;
 background: var(--bg-subtle);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 font-size: 18px;
 color: var(--text);
 outline: none;
 transition: var(--transition);
}

.vix-domain-search input:focus {
 border-color: var(--vercel-blue);
}

.vix-domain-search .vix-btn {
 height: 56px;
 padding: 0 32px;
 font-size: 16px;
 font-weight: 600;
}

.vix-domain-tlds {
 display: flex;
 justify-content: center;
 gap: 24px;
 margin-top: 24px;
 font-size: 14px;
 color: var(--text-muted);
 font-weight: 600;
 font-family: 'JetBrains Mono', monospace;
}

/* ============================================
   Quick Links
   ============================================ */
.vix-quick-links {
 padding: 64px 0;
 background: var(--bg-subtle);
}

.vix-quick-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 24px;
}

.vix-quick-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 16px;
 padding: 32px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: var(--radius);
 color: var(--text);
 transition: var(--transition);
}

.vix-quick-item:hover {
 border-color: var(--vercel-blue);
 transform: translateY(-2px);
}

.vix-quick-item i {
 font-size: 32px;
 color: var(--vercel-blue);
}

.vix-quick-item span {
 font-size: 16px;
 font-weight: 600;
}

/* ============================================
   Main Content
   ============================================ */
.vix-main {
 padding: 48px 0;
 min-height: calc(100vh - 400px);
 margin-top: 64px;
}

/* ============================================
   Footer
   ============================================ */
.vix-footer {
    background: var(--bg-subtle);
    border-top: 1px solid var(--border);
    padding: 32px 0 16px;
}

.vix-footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 24px;
}

.vix-footer-col h4 {
 font-size: 14px;
 font-weight: 600;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: var(--text);
 margin: 0 0 20px;
}

.vix-footer-col ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

.vix-footer-col li {
 margin-bottom: 12px;
}

.vix-footer-col a {
 display: flex;
 align-items: center;
 gap: 8px;
 font-size: 14px;
 color: var(--text-muted);
 transition: var(--transition);
}

.vix-footer-col a:hover {
 color: var(--text);
}

.vix-footer-col i {
 width: 16px;
 font-size: 12px;
}

.vix-footer-bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top: 32px;
 border-top: 1px solid var(--border);
}

.vix-footer-bottom p {
 font-size: 14px;
 color: var(--text-muted);
 margin: 0;
}

.vix-footer-links {
 display: flex;
 gap: 24px;
}

.vix-footer-links a {
 font-size: 14px;
 color: var(--text-muted);
}

.vix-footer-links a:hover {
 color: var(--text);
}

/* ============================================
 WHMCS Compatibility - Border-radius 7px
 ============================================ */
*,
*:before,
*:after {
 border-radius: 7px !important;
 -webkit-border-radius: 7px !important;
 -moz-border-radius: 7px !important;
}

.panel, .card {
 background: var(--bg-subtle) !important;
 border: 1px solid var(--border) !important;
 border-radius: 7px !important;
}

/* Quick Shortcuts Cards - Consistentes com clientareahome tiles */
.module-client-area .btn,
.module-client-area button,
.module-client-area a.btn,
.module-client-area .card,
.module-client-area .panel,
.module-client-area .well {
 border-radius: 7px !important;
}

.module-client-area .row > div > a,
.module-client-area .col-sm-3 > a,
.module-client-area .col-md-3 > a,
.module-client-area .col-xs-6 > a {
 display: flex !important;
 align-items: center !important;
 background: var(--bg-subtle) !important;
 border: 1px solid var(--border) !important;
 border-radius: 7px !important;
 padding: 20px 24px !important;
 transition: all 0.2s ease !important;
 text-decoration: none !important;
 color: var(--text-secondary) !important;
 box-shadow: none !important;
 margin: 0 6px !important;
}

.module-client-area .row > div > a:hover,
.module-client-area .col-sm-3 > a:hover,
.module-client-area .col-md-3 > a:hover,
.module-client-area .col-xs-6 > a:hover {
 background: var(--bg-hover) !important;
 border-color: var(--vercel-blue) !important;
 color: var(--text) !important;
 transform: translateY(-2px) !important;
}

.module-client-area .row > div > a i,
.module-client-area .col-sm-3 > a i,
.module-client-area .col-md-3 > a i,
.module-client-area .col-xs-6 > a i {
 font-size: 24px !important;
 color: var(--text-secondary) !important;
 margin-right: 16px !important;
 width: 40px !important;
 text-align: center !important;
}

/* ============================================
 Client Area Home - Panels Styling
 Títulos e botões menores, uma única linha
 ============================================ */
.client-home-panels .panel > div:first-child {
 padding: 12px 16px !important;
 gap: 12px !important;
}

.client-home-panels .panel > div:first-child h3 {
 font-size: 13px !important;
 white-space: nowrap !important;
 overflow: hidden !important;
 text-overflow: ellipsis !important;
 max-width: 60% !important;
}

.client-home-panels .panel > div:first-child a {
 font-size: 11px !important;
 padding: 5px 10px !important;
 white-space: nowrap !important;
 flex-shrink: 0 !important;
}

.client-home-panels .panel > div:first-child a i {
 font-size: 10px !important;
}

/* ============================================
 Quick Shortcuts - Product Details Page
 cPanel Quick Shortcuts Panel - Consistente com clientareahome
 ============================================ */
#cPanelQuickShortcutsPanel {
 background: var(--bg-subtle) !important;
 border: 1px solid var(--border) !important;
 border-radius: 7px !important;
 margin-bottom: 16px !important;
}

#cPanelQuickShortcutsPanel .panel-heading,
#cPanelQuickShortcutsPanel .card-header {
 background: var(--bg) !important;
 border-bottom: 1px solid var(--border) !important;
 padding: 16px 20px !important;
}

#cPanelQuickShortcutsPanel .panel-title,
#cPanelQuickShortcutsPanel .card-title {
 color: var(--text) !important;
 font-size: 16px !important;
 font-weight: 600 !important;
 margin: 0 !important;
}

#cPanelQuickShortcutsPanel .panel-body,
#cPanelQuickShortcutsPanel .card-body {
 background: transparent !important;
 padding: 16px !important;
}

#cPanelQuickShortcutsPanel .cpanel-feature-row {
 display: flex !important;
 flex-wrap: wrap !important;
 margin: 0 !important;
 gap: 0 !important;
}

#cPanelQuickShortcutsPanel .col-md-3,
#cPanelQuickShortcutsPanel .col-sm-4,
#cPanelQuickShortcutsPanel .col-xs-6,
#cPanelQuickShortcutsPanel .col-6 {
 flex: 1 1 25% !important;
 max-width: 25% !important;
 min-width: 150px !important;
 padding: 6px !important;
 background: transparent !important;
}

#cPanelQuickShortcutsPanel .col-md-3 a,
#cPanelQuickShortcutsPanel .col-sm-4 a,
#cPanelQuickShortcutsPanel .col-xs-6 a,
#cPanelQuickShortcutsPanel .col-6 a {
 display: flex !important;
 flex-direction: column !important;
 align-items: center !important;
 justify-content: center !important;
 background: var(--bg-subtle) !important;
 border: 1px solid var(--border) !important;
 border-radius: 7px !important;
 padding: 20px 12px !important;
 margin: 0 !important;
 transition: all 0.2s ease !important;
 text-decoration: none !important;
 color: var(--text-secondary) !important;
 min-height: 120px !important;
 text-align: center !important;
 box-shadow: none !important;
}

#cPanelQuickShortcutsPanel .col-md-3 a:hover,
#cPanelQuickShortcutsPanel .col-sm-4 a:hover,
#cPanelQuickShortcutsPanel .col-xs-6 a:hover,
#cPanelQuickShortcutsPanel .col-6 a:hover {
 background: var(--bg-hover) !important;
 border-color: var(--vercel-blue) !important;
 color: var(--text) !important;
 transform: translateY(-2px) !important;
}

#cPanelQuickShortcutsPanel .col-md-3 a img,
#cPanelQuickShortcutsPanel .col-sm-4 a img,
#cPanelQuickShortcutsPanel .col-xs-6 a img,
#cPanelQuickShortcutsPanel .col-6 a img {
 width: 48px !important;
 height: 48px !important;
 margin-bottom: 12px !important;
 opacity: 0.7 !important;
 filter: grayscale(100%) !important;
 transition: all 0.2s ease !important;
}

#cPanelQuickShortcutsPanel .col-md-3 a:hover img,
#cPanelQuickShortcutsPanel .col-sm-4 a:hover img,
#cPanelQuickShortcutsPanel .col-xs-6 a:hover img,
#cPanelQuickShortcutsPanel .col-6 a:hover img {
 opacity: 1 !important;
 filter: grayscale(0%) !important;
}

/* Responsive cPanel Quick Shortcuts */
@media (max-width: 991px) {
 #cPanelQuickShortcutsPanel .col-md-3,
 #cPanelQuickShortcutsPanel .col-sm-4 {
  flex: 1 1 50% !important;
  max-width: 50% !important;
 }
}

@media (max-width: 576px) {
 #cPanelQuickShortcutsPanel .col-md-3,
 #cPanelQuickShortcutsPanel .col-sm-4,
 #cPanelQuickShortcutsPanel .col-xs-6,
 #cPanelQuickShortcutsPanel .col-6 {
  flex: 1 1 50% !important;
  max-width: 50% !important;
 }
}

.panel-heading, .card-header {
 background: var(--bg) !important;
 border-bottom: 1px solid var(--border) !important;
 color: var(--text) !important;
}

.form-control, select, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], input[type="url"], input[type="search"], input[type="date"], input[type="time"], input[type="datetime"], input[type="datetime-local"], textarea {
 background: var(--bg) !important;
 border: 1px solid var(--border) !important;
 color: var(--text) !important;
 border-radius: 7px !important;
 -webkit-border-radius: 7px !important;
 -moz-border-radius: 7px !important;
}

.btn, button, input[type="submit"], input[type="button"] {
 border-radius: 7px !important;
 -webkit-border-radius: 7px !important;
 -moz-border-radius: 7px !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
background: transparent !important;
border: 1px solid var(--border) !important;
color: var(--text-secondary) !important;
border-radius: 7px !important;
}

.btn-primary:hover,
.btn-primary:focus:hover,
.btn-primary:active:hover {
background: var(--bg-hover) !important;
border-color: var(--border) !important;
color: var(--text) !important;
}

.btn-default, .btn-secondary {
 background: transparent !important;
 border-color: var(--border) !important;
 color: var(--text) !important;
}

.alert {
 border-radius: 7px !important;
}

.alert-success {
 background: rgba(0, 255, 120, 0.1) !important;
 border-color: rgba(0, 255, 120, 0.2) !important;
 color: #00ff78 !important;
}

.alert-danger, .alert-error {
 background: rgba(255, 0, 0, 0.1) !important;
 border-color: rgba(255, 0, 0, 0.2) !important;
 color: #ff4444 !important;
}

.alert-info {
 background: rgba(0, 112, 243, 0.1) !important;
 border-color: rgba(0, 112, 243, 0.2) !important;
 color: var(--vercel-blue) !important;
}

.alert-warning {
 background: rgba(255, 165, 0, 0.1) !important;
 border-color: rgba(255, 165, 0, 0.2) !important;
 color: #ffa500 !important;
}

/* Tables */
.table {
 background: var(--bg-subtle);
 border-radius: var(--radius);
 overflow: hidden;
}

.table th {
 background: var(--bg);
 color: var(--text) !important;
 border-bottom: 1px solid var(--border);
}

.table td {
 color: var(--text-secondary) !important;
 border-bottom: 1px solid var(--border);
}

/* List Groups */
.list-group-item {
 background: transparent !important;
 border-color: var(--border) !important;
 color: var(--text-secondary) !important;
}

.list-group-item:hover {
 background: var(--bg-hover) !important;
 color: var(--text) !important;
}

/* Modal */
.modal-content {
 background: var(--bg-subtle) !important;
 border: 1px solid var(--border) !important;
 border-radius: 7px !important;
}

.modal-header {
 border-bottom: 1px solid var(--border) !important;
}

.modal-footer {
 border-top: 1px solid var(--border) !important;
}

.close {
 color: var(--text) !important;
 opacity: 1 !important;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 991px) {
 .vix-nav { display: none; }
 
 .vix-quick-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 
 .vix-footer-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 
 .vix-hero-title {
 font-size: 36px;
 }
 
 .vix-domain-search {
 flex-direction: column;
 }
 
 .vix-domain-search .vix-btn {
 width: 100%;
 }
}

@media (max-width: 767px) {
 .vix-quick-grid {
 grid-template-columns: 1fr;
 }
 
 .vix-footer-grid {
 grid-template-columns: 1fr;
 gap: 32px;
 }
 
 .vix-footer-bottom {
 flex-direction: column;
 gap: 16px;
 text-align: center;
 }
 
 .vix-sidebar {
 display: none;
 }
}

/* ============================================
 Product Details - Resource Usage Stats
 Remove borders from usage statistics numbers
 ============================================ */
#resourceusage input.dial-usage,
#resourceusage input.dial-usage:focus,
#resourceusage input.dial-usage:active {
 border: none !important;
 background: transparent !important;
 box-shadow: none !important;
 outline: none !important;
}

#resourceusage p {
 border: none !important;
 background: transparent !important;
 box-shadow: none !important;
 padding: 8px 0 !important;
 margin: 0 !important;
}

#resourceusage .col-sm-6,
#resourceusage .col-sm-6 *,
#resourceusage .col-sm-6 input,
#resourceusage .col-sm-6 p {
 border: none !important;
 background: transparent !important;
 box-shadow: none !important;
}

#resourceusage h4 {
 border: none !important;
 background: transparent !important;
 box-shadow: none !important;
}

/* Metrics Table - Remove borders from current usage values */
#metrics table.table-striped td:nth-child(2),
#metrics table.table-striped td:nth-child(2) *,
#metrics table.table-striped tr {
 border: none !important;
 background: transparent !important;
 box-shadow: none !important;
}


/* ============================================
   Markdown Editor - Dark Theme
   ============================================ */
/* Editor Toolbar */
.editor-toolbar,
.editor-toolbar.fullscreen {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
    opacity: 1 !important;
}

.editor-toolbar a,
.editor-toolbar button {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: none !important;
}

.editor-toolbar a:hover,
.editor-toolbar button:hover,
.editor-toolbar a.active,
.editor-toolbar button.active {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
    border: none !important;
}

.editor-toolbar i.separator {
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
}

/* CodeMirror */
.CodeMirror,
.CodeMirror-scroll,
.CodeMirror-gutters {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text) !important;
}

.CodeMirror {
    border: none !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-radius: 0 !important;
    font-family: 'Inter', monospace !important;
    font-size: 14px !important;
    height: auto !important;
    color: var(--text) !important;
}

.CodeMirror-lines {
    background: transparent !important;
    color: var(--text) !important;
}

.CodeMirror-line {
    color: var(--text) !important;
}

.CodeMirror-cursor {
    border-left: 1px solid var(--text) !important;
}

.CodeMirror-selected {
    background: rgba(0, 112, 243, 0.2) !important;
}

.CodeMirror-gutters {
    background: var(--bg) !important;
    border-right: 1px solid var(--border) !important;
}

.CodeMirror-linenumber {
    color: var(--text-muted) !important;
}

/* Editor Statusbar */
.editor-statusbar,
.editor-statusbar.fullscreen {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
    color: var(--text-muted) !important;
    border-radius: 0 0 4px 4px !important;
    padding: 8px 10px !important;
}

.editor-statusbar span {
    color: var(--text-muted) !important;
}

/* EasyMDE Container */
.EasyMDEContainer {
    background: transparent !important;
}

.EasyMDEContainer .CodeMirror {
    background: transparent !important;
    border-left: 1px solid var(--border) !important;
    border-right: 1px solid var(--border) !important;
    border-top: none !important;
    border-bottom: none !important;
}

.EasyMDEContainer .editor-toolbar {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-bottom: none !important;
}

.EasyMDEContainer .editor-statusbar {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    border-top: none !important;
}

/* Editor Preview */
.editor-preview,
.editor-preview-side,
.editor-preview-active,
.editor-preview-active-side {
    background: transparent !important;
    color: var(--text) !important;
}

.editor-preview pre,
.editor-preview-side pre {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.editor-preview code,
.editor-preview-side code {
    background: var(--bg) !important;
    color: var(--vercel-blue) !important;
}

/* Fullscreen Mode */
.CodeMirror-fullscreen,
.editor-toolbar.fullscreen,
.editor-statusbar.fullscreen {
    background: var(--bg) !important;
}

.CodeMirror-fullscreen .CodeMirror-scroll {
    background: transparent !important;
}