/* =======================================================
   MODERN THEME - Global Styles
   Dark Purple/Indigo Design
   ======================================================= */

/* =============================================
   CSS Custom Properties
   ============================================= */
:root {
    --primary: #8b5cf6;
    --primary-dark: #7c3aed;
    --primary-darker: #a78bfa;
    --accent: #6366f1;
    --accent-dark: #4f46e5;
    --surface: #0e0c15;
    --surface-card: #16132a;
    --surface-elevated: #1c1833;
    --surface-hover: #231e3a;
    --border: rgba(139,92,246,0.12);
    --border-hover: rgba(139,92,246,0.25);
    --text: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-muted: #718096;
    --text-faint: #4a5568;
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
    --shadow-purple: 0 4px 14px rgba(139,92,246,0.35);
    --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    --gradient-bg: linear-gradient(135deg, #0a0a12 0%, #0e0c18 50%, #110e1e 100%);
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================
   Animations
   ============================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.4); }
    50%       { box-shadow: 0 0 0 8px rgba(139,92,246,0); }
}
@keyframes notif-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50%       { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =============================================
   Base
   ============================================= */
html {
    font-size: 17px;
    scroll-behavior: smooth;
    background: #0a0914;
}
html, body { height: 100%; }
body {
    overflow-x: hidden;
    background: #0a0914 !important;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
    font-size: 1rem;
    color: #e2e8f0 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-width: 0 !important;
}
* { scroll-margin-top: 80px; }
::selection { background: rgba(139,92,246,0.3); color: #e2e8f0; }
h2, h3 { color: #e2e8f0 !important; }
p { color: #cbd5e1; }

.main-content {
    flex: 1 0 auto;
    animation: fadeIn 0.3s ease;
    background: #0a0914 !important;
    min-height: calc(100vh - 80px) !important;
    width: 100% !important;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
}
.main-content.full-width { max-width: none !important; padding: 0 !important; }

.clientarea-full {
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 2rem 3rem !important;
    box-sizing: border-box !important;
}
@media (max-width: 1600px) { .clientarea-full { max-width: 95% !important; padding: 2rem 1.5rem !important; } }
@media (max-width: 768px)  { .clientarea-full { max-width: 100% !important; padding: 1.5rem 1rem !important; } }

/* Universal page container - all non-homepage pages */
.page-container {
    max-width: 1400px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 1.5rem 2.5rem !important;
    box-sizing: border-box !important;
}
@media (max-width: 1600px) { .page-container { max-width: 95% !important; padding: 1.5rem 2rem !important; } }
@media (max-width: 768px)  { .page-container { padding: 1rem !important; max-width: 100% !important; } }

/* ca-wrap used only inside clientareahome for the dashboard grid */
.ca-wrap { max-width: 100%; padding: 0; }

/* Homepage only: remove padding from clientarea-full wrapper */
.clientarea-full:has(.hp-wrap) {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.clientarea, #main-body, .contentarea, .content-area, #content, .main-body {
    background: #0a0914 !important;
    color: #e2e8f0 !important;
}

/* Bootstrap container override */
.container { max-width: 100% !important; width: 100% !important; padding-left: 2.5rem !important; padding-right: 2.5rem !important; }
.container-fluid { max-width: 100% !important; width: 100% !important; }
@media (max-width: 768px) { .container { padding-left: 1rem !important; padding-right: 1rem !important; } }
.row { margin-left: -0.75rem; margin-right: -0.75rem; }
.row > [class*="col-"] { padding-left: 0.75rem; padding-right: 0.75rem; }
.collapse.in { display: block; }
@media (min-width: 1024px) { nav.lg\:flex { display: flex !important; } }

/* Universal input fix - prevents white inputs on all pages */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"] {
    background: #1c1833 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    font-size: 0.9375rem !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
input:disabled, input[disabled] {
    background: #161228 !important;
    color: #718096 !important;
    -webkit-text-fill-color: #718096 !important;
    border-color: rgba(139,92,246,0.08) !important;
    cursor: not-allowed !important;
}
input:focus {
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.08) !important;
    outline: none !important;
}

/* =============================================
   Form Controls (Global)
   ============================================= */
.form-control {
    background: #1c1833 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 0.9375rem !important;
    transition: border-color 0.2s ease !important;
}
.form-control:focus {
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.08) !important;
    outline: none !important;
}

/* Select elements */
select,
select.form-control {
    background: #16132a !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    border: 1px solid rgba(139,92,246,0.2) !important;
    border-radius: 10px !important;
    padding: 0 32px 0 12px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    font-size: 0.9375rem !important;
    font-weight: 500 !important;
    width: 100% !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b5cf6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
}
select:hover, select.form-control:hover { border-color: #8b5cf6 !important; }
select:focus, select.form-control:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 4px rgba(139,92,246,0.15) !important;
    outline: none !important;
}
select option { color: #e2e8f0 !important; background: #16132a !important; font-weight: 500 !important; }

textarea,
textarea.form-control {
    background: #1c1833 !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(139,92,246,0.15) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 0.9375rem !important;
    resize: vertical !important;
}
textarea:focus, textarea.form-control:focus {
    border-color: rgba(139,92,246,0.4) !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.08) !important;
    outline: none !important;
}

input[type="checkbox"] { width: 18px !important; height: 18px !important; accent-color: #7c3aed !important; cursor: pointer !important; }
input[type="file"] { background: #16132a !important; color: #cbd5e1 !important; border: 1px solid rgba(139,92,246,0.15) !important; border-radius: 10px !important; padding: 8px 12px !important; font-size: 0.875rem !important; }
input[type="file"]::file-selector-button { background: linear-gradient(135deg, #8b5cf6, #6366f1) !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 6px 14px !important; font-size: 0.8125rem !important; font-weight: 600 !important; cursor: pointer !important; margin-right: 10px !important; }

.input-group { display: flex; align-items: stretch; }
.input-group .form-control { flex: 1; min-width: 0; }
.input-group-addon {
    display: flex; align-items: center; justify-content: center;
    padding: 0 12px; background: #1c1833;
    border: 1px solid rgba(139,92,246,0.15); border-right: none;
    border-radius: 8px 0 0 8px; color: #718096; font-size: 0.875rem;
}
.input-group .form-control:first-child { border-radius: 8px 0 0 8px; }
.input-group .form-control:last-child,
.input-group-addon + .form-control { border-radius: 0 8px 8px 0; }
.input-group-btn { display: flex; }
.input-group-btn .btn { border-radius: 0 8px 8px 0; }

.control-label,
label.control-label { color: #cbd5e1 !important; font-weight: 600 !important; font-size: 0.875rem !important; margin-bottom: 6px !important; }

/* Custom fields */
.form-group div input,
.form-group div select,
.form-group div textarea {
    width: 100% !important; padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important; color: #e2e8f0 !important;
    background: #1c1833 !important; border: 1px solid rgba(139,92,246,0.15) !important;
    border-radius: 10px !important;
}
.form-group div input:focus,
.form-group div select:focus,
.form-group div textarea:focus {
    outline: none !important; border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.1) !important; background: #16132a !important;
}

/* =============================================
   Buttons
   ============================================= */
.btn { font-size: 0.875rem !important; border-radius: 10px !important; transition: all 0.2s ease !important; }
.btn-sm, .btn-group-sm > .btn { padding: 6px 14px !important; font-size: 0.8125rem !important; border-radius: 8px !important; }
.btn-xs, .btn-group-xs > .btn { padding: 4px 10px !important; font-size: 0.75rem !important; border-radius: 6px !important; }
.btn-lg, .btn-group-lg > .btn { padding: 10px 24px !important; font-size: 1rem !important; border-radius: 12px !important; }

.btn-primary {
    background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
    border: 1px solid rgba(139,92,246,0.2) !important; color: #fff !important;
    font-weight: 600 !important; padding: 8px 18px !important;
    box-shadow: 0 2px 8px rgba(139,92,246,0.2) !important; letter-spacing: 0.01em !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(135deg, #6d28d9, #4f46e5) !important;
    box-shadow: 0 4px 14px rgba(139,92,246,0.3) !important; transform: translateY(-1px) !important; color: #fff !important;
}
.btn-success {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    border: 1px solid rgba(16,185,129,0.2) !important; color: #fff !important;
    font-weight: 600 !important; padding: 8px 18px !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.2) !important;
}
.btn-success:hover { background: linear-gradient(135deg, #047857, #059669) !important; box-shadow: 0 4px 14px rgba(16,185,129,0.3) !important; transform: translateY(-1px) !important; }
.btn-default {
    background: #1c1833 !important; border: 1px solid rgba(139,92,246,0.12) !important;
    color: #a0aec0 !important; font-weight: 500 !important; padding: 8px 18px !important;
}
.btn-default:hover { background: #22192e !important; border-color: rgba(139,92,246,0.25) !important; color: #cbd5e1 !important; }
.btn-danger {
    background: rgba(239,68,68,0.15) !important; color: #fca5a5 !important;
    border: 1px solid rgba(239,68,68,0.2) !important; font-weight: 600 !important;
}
.btn-danger:hover { background: rgba(239,68,68,0.25) !important; border-color: rgba(239,68,68,0.4) !important; }
.btn-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important; border: none !important; font-weight: 600 !important; padding: 8px 24px !important;
}
.btn-info:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8) !important; box-shadow: 0 4px 14px rgba(59,130,246,0.3) !important; }
.btn-warning {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    border: 1px solid rgba(245,158,11,0.2) !important; color: #fff !important;
    font-weight: 600 !important; padding: 8px 18px !important;
    box-shadow: 0 2px 8px rgba(245,158,11,0.2) !important;
}
.btn-warning:hover { background: linear-gradient(135deg, #b45309, #d97706) !important; box-shadow: 0 4px 14px rgba(245,158,11,0.3) !important; transform: translateY(-1px) !important; }
.form-group.text-center .btn-primary  { padding: 10px 28px !important; font-size: 0.9375rem !important; }
.form-group.text-center .btn-default  { padding: 10px 24px !important; font-size: 0.9375rem !important; background: #16132a !important; color: #cbd5e1 !important; border: 1px solid rgba(139,92,246,0.15) !important; }
.form-group.text-center .btn-danger   { padding: 10px 24px !important; font-size: 0.9375rem !important; }

/* =============================================
   Alerts
   ============================================= */
.alert { border-radius: 12px !important; border: none !important; padding: 1rem 1.25rem !important; font-size: 0.9375rem !important; }
.alert-success  { background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(22,163,74,0.08)) !important;  color: #4ade80 !important;  border: 1px solid rgba(34,197,94,0.2) !important; }
.alert-danger,
.alert-error    { background: linear-gradient(135deg, rgba(239,68,68,0.12), rgba(220,38,38,0.08)) !important;  color: #fca5a5 !important;  border: 1px solid rgba(239,68,68,0.2) !important; }
.alert-warning  { background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(217,119,6,0.08)) !important; color: #fcd34d !important;  border: 1px solid rgba(245,158,11,0.2) !important; }
.alert-info     { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(37,99,235,0.08)) !important; color: #93c5fd !important;  border: 1px solid rgba(59,130,246,0.2) !important; }
.alert-block.alert-info { background: #16132a !important; border: 1px solid rgba(139,92,246,0.15) !important; border-radius: 14px !important; padding: 1.25rem !important; color: #e2e8f0 !important; }
.alert-block .control-label { color: #cbd5e1 !important; font-weight: 500 !important; }

/* =============================================
   Panels & Wells
   ============================================= */
.panel { background: #16132a !important; border: 1px solid rgba(139,92,246,0.1) !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important; color: #e2e8f0 !important; }
.panel-heading { background: #1c1833 !important; border-bottom: 1px solid rgba(139,92,246,0.1) !important; color: #e2e8f0 !important; border-radius: 14px 14px 0 0 !important; }
.panel-default > .panel-heading { background: #1c1833 !important; color: #e2e8f0 !important; }
.panel-body { padding: 1.25rem !important; background: #16132a !important; color: #e2e8f0 !important; }
.panel-footer { background: #1c1833 !important; border-top: 1px solid rgba(139,92,246,0.1) !important; padding: 1rem 1.25rem !important; color: #e2e8f0 !important; border-radius: 0 0 14px 14px !important; }
.panel-warning { border: 1px solid rgba(245,158,11,0.15) !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 1.5rem !important; }
.panel-warning > .panel-heading { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.08)) !important; color: #fcd34d !important; border: none !important; border-radius: 12px 12px 0 0 !important; padding: 14px 20px !important; font-weight: 600 !important; }
.panel-info { border: 1px solid rgba(14,165,233,0.15) !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 1.5rem !important; }
.panel-info > .panel-heading { background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(14,165,233,0.08)) !important; color: #7dd3fc !important; border: none !important; border-radius: 12px 12px 0 0 !important; padding: 14px 20px !important; font-weight: 600 !important; }
.well { background: #16132a !important; border: 1px solid rgba(139,92,246,0.1) !important; border-radius: 14px !important; color: #e2e8f0 !important; box-shadow: none !important; }

/* =============================================
   Tables
   ============================================= */
.table-container,
.dataTables_wrapper {
    background: #16132a !important; border-radius: 16px !important; overflow: visible !important;
}
table.dataTable,
.table,
.table-list {
    width: 100% !important; border-collapse: collapse !important;
    border-spacing: 0 !important; margin: 0 !important; background: #16132a !important;
    border: none !important;
}
table.dataTable thead th,
table.dataTable thead td,
.table thead th,
.table-list thead th {
    background: #1c1833 !important; color: #a78bfa !important;
    font-size: 0.7rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.08em !important;
    padding: 14px 1.25rem !important;
    border: none !important; border-bottom: 2px solid rgba(139,92,246,0.15) !important;
    white-space: nowrap !important;
}
table.dataTable tbody td,
.table tbody td,
.table-list tbody td {
    padding: 1rem 1.25rem !important; font-size: 0.9375rem !important;
    color: #cbd5e1 !important; border: none !important;
    border-bottom: 1px solid rgba(139,92,246,0.08) !important;
    background: #16132a !important; vertical-align: middle !important;
    text-align: left !important;
}
/* Mobile table scroll */
@media (max-width: 768px) {
    .table-container, .dataTables_wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    table.dataTable, .table, .table-list { min-width: 560px !important; }
    table.dataTable tbody td, .table tbody td { padding: 0.75rem 1rem !important; font-size: 0.8125rem !important; }
    table.dataTable thead th, .table thead th { padding: 10px 1rem !important; font-size: 0.65rem !important; }
}
/* Force column alignment in DataTables */
#tableInvoicesList thead th:nth-child(2),
#tableInvoicesList thead th:nth-child(3),
#tableInvoicesList thead th:nth-child(4),
#tableInvoicesList thead th:nth-child(5) { text-align: center !important; }
#tableInvoicesList tbody td:nth-child(2),
#tableInvoicesList tbody td:nth-child(3),
#tableInvoicesList tbody td:nth-child(4),
#tableInvoicesList tbody td:nth-child(5) { text-align: center !important; }
#tableTicketsList thead th { text-align: center !important; }
#tableTicketsList thead th:nth-child(1),
#tableTicketsList thead th:nth-child(2) { text-align: left !important; }
#tableTicketsList tbody td { text-align: center !important; vertical-align: middle !important; }
#tableTicketsList tbody td:nth-child(1),
#tableTicketsList tbody td:nth-child(2) { text-align: left !important; }
table.dataTable tbody tr:hover td,
.table tbody tr:hover td,
.table-list tbody tr:hover td { background: rgba(139,92,246,0.12) !important; }
table.dataTable tbody tr:last-child td { border-bottom: none !important; }

.table > thead > tr > th,
.table > tbody > tr > td,
.table > thead > tr > td { border-top: none !important; border-bottom: 1px solid rgba(139,92,246,0.06) !important; }
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td { border: none !important; }

.table-striped > thead > tr > th { background: #1c1833 !important; color: #a78bfa !important; font-size: 0.7rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; border-bottom: 2px solid rgba(139,92,246,0.15) !important; border-top: none !important; }
.table-striped > tbody > tr > td { background: #16132a !important; color: #cbd5e1 !important; border-bottom: 1px solid rgba(139,92,246,0.06) !important; border-top: none !important; vertical-align: middle !important; }
.table-striped > tbody > tr > td small { color: #718096 !important; }
.table-striped > tbody > tr > td .label-info { background: linear-gradient(135deg, #8b5cf6, #6366f1) !important; color: #fff !important; border-radius: 6px !important; padding: 3px 8px !important; font-size: 0.7rem !important; }
.table-striped > tbody > tr:nth-of-type(odd)  { background: rgba(139,92,246,0.03) !important; }
.table-striped > tbody > tr:nth-of-type(even) { background: transparent !important; }
.table-hover > tbody > tr:hover { background: rgba(139,92,246,0.08) !important; }

/* DataTables sorting */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { opacity: 0.6 !important; color: #a78bfa !important; }
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { color: #8b5cf6 !important; opacity: 1 !important; }

/* Table responsive */
.table-responsive { border: none !important; border-radius: 16px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* DataTables Controls */
.dataTables_length,
.dataTables_info,
.dataTables_paginate { padding: 1rem 1.25rem !important; background: #16132a !important; }
.dataTables_filter { display: none !important; }
.dataTables_length { border-top: 1px solid rgba(139,92,246,0.08) !important; color: #cbd5e1 !important; }
.dataTables_length label { color: #cbd5e1 !important; font-size: 0.875rem !important; font-weight: 500 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; white-space: nowrap !important; }
.dataTables_length select {
    width: auto !important;
    min-width: 75px !important;
    max-width: none !important;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 24px 0 8px !important;
    border: 1px solid rgba(139,92,246,0.2) !important;
    border-radius: 6px !important;
    background: #16132a !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b5cf6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 10px !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    font-size: 0.875rem !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.dataTables_length select option { color: #e2e8f0 !important; background: #16132a !important; }
.dataTables_info { color: #cbd5e1 !important; font-size: 0.8125rem !important; border-top: 1px solid rgba(139,92,246,0.08) !important; border-bottom: none !important; }

.dataTables_paginate { padding: 1rem 1.25rem !important; background: #16132a !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 4px !important; flex-wrap: wrap !important; border-top: 1px solid rgba(139,92,246,0.08) !important; }
.dataTables_paginate .paginate_button { padding: 8px 14px !important; border: 1px solid rgba(139,92,246,0.15) !important; border-radius: 8px !important; background: #16132a !important; color: #cbd5e1 !important; font-size: 0.875rem !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.15s ease !important; text-decoration: none !important; }
.dataTables_paginate .paginate_button:hover { background: rgba(139,92,246,0.15) !important; border-color: #8b5cf6 !important; color: #8b5cf6 !important; }
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover { background: linear-gradient(135deg, #8b5cf6, #6366f1) !important; border-color: #8b5cf6 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(139,92,246,0.3) !important; }
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover { opacity: 0.4 !important; cursor: not-allowed !important; background: #1c1833 !important; color: #64748b !important; }
.dataTables_paginate .ellipsis,
.dataTables_paginate > .paginate_button.previous,
.dataTables_paginate > .paginate_button.next { display: none !important; }
.dataTables_paginate:not(:has(ul)) > .paginate_button.previous,
.dataTables_paginate:not(:has(ul)) > .paginate_button.next { display: inline-flex !important; }
.dataTables_paginate ul,
.dataTables_paginate > span,
.dataTables_paginate .pagination { display: flex !important; align-items: center !important; gap: 4px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; }
.dataTables_paginate .pagination > li { list-style: none !important; }
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span { background: #16132a !important; border: 1px solid rgba(139,92,246,0.15) !important; color: #cbd5e1 !important; border-radius: 8px !important; padding: 8px 14px !important; font-size: 0.875rem !important; transition: all 0.15s ease !important; }
.dataTables_paginate .pagination > li > a:hover { background: rgba(139,92,246,0.15) !important; border-color: #8b5cf6 !important; color: #8b5cf6 !important; }
.dataTables_paginate .pagination > .active > a,
.dataTables_paginate .pagination > .active > span { background: linear-gradient(135deg, #8b5cf6, #6366f1) !important; border-color: #8b5cf6 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(139,92,246,0.3) !important; }
.dataTables_paginate .pagination > .disabled > a,
.dataTables_paginate .pagination > .disabled > span { opacity: 0.4 !important; cursor: not-allowed !important; background: #1c1833 !important; color: #64748b !important; }

/* Pagination (Bootstrap, non-DataTables) */
.pagination > li > a,
.pagination > li > span { background: #16132a !important; border: 1px solid rgba(139,92,246,0.15) !important; color: #cbd5e1 !important; border-radius: 8px !important; margin: 0 2px !important; padding: 8px 14px !important; transition: all 0.15s ease !important; }
.pagination > li > a:hover { background: rgba(139,92,246,0.15) !important; border-color: #8b5cf6 !important; color: #8b5cf6 !important; }
.pagination > .active > a,
.pagination > .active > span { background: linear-gradient(135deg, #8b5cf6, #6366f1) !important; border-color: #8b5cf6 !important; color: #fff !important; box-shadow: 0 2px 8px rgba(139,92,246,0.3) !important; }
.pagination > .disabled > a,
.pagination > .disabled > span { opacity: 0.4 !important; cursor: not-allowed !important; background: #1c1833 !important; color: #64748b !important; }
.pager li > a { background: #16132a !important; border: 1px solid rgba(139,92,246,0.15) !important; color: #cbd5e1 !important; border-radius: 10px !important; }
.pager li > a:hover { background: rgba(139,92,246,0.15) !important; color: #8b5cf6 !important; }

/* =============================================
   Status Labels / Badges
   ============================================= */
.label.status, span.status, .status-label {
    display: inline-flex !important; align-items: center !important;
    padding: 6px 14px !important; border-radius: 20px !important;
    font-size: 0.6875rem !important; font-weight: 700 !important;
    text-transform: uppercase !important; letter-spacing: 0.05em !important;
    border: 1px solid transparent !important;
}
.status-active, .status-paid, .status-open           { background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(22,163,74,0.1)) !important;   color: #6ee7b7 !important; border-color: rgba(34,197,94,0.2) !important; }
.status-pending, .status-unpaid                      { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(217,119,6,0.1)) !important;  color: #fbbf24 !important; border-color: rgba(245,158,11,0.2) !important; }
.status-suspended, .status-overdue,
.status-cancelled, .status-closed                    { background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(220,38,38,0.1)) !important;   color: #dc2626 !important; border-color: rgba(239,68,68,0.2) !important; }
.status-answered                                     { background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(37,99,235,0.1)) !important;  color: #2563eb !important; border-color: rgba(59,130,246,0.2) !important; }
.status-customer-reply, .status-customerreply        { background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.1)) !important; color: #7c3aed !important; border-color: rgba(139,92,246,0.2) !important; }
.label-success  { background: rgba(34,197,94,0.15) !important;  color: #6ee7b7 !important; border-radius: 6px !important; padding: 3px 8px !important; font-size: 0.7rem !important; }
.label-default  { background: rgba(113,128,150,0.15) !important; color: #a0aec0 !important; border-radius: 6px !important; padding: 3px 8px !important; font-size: 0.7rem !important; }
.detail-value.price { font-size: 1.125rem !important; font-weight: 800 !important; color: #8b5cf6 !important; }
.detail-sub { color: #64748b !important; font-size: 0.6875rem !important; font-weight: 500 !important; text-transform: capitalize !important; }
.status-dot { border-color: #16132a !important; }

/* =============================================
   Phone Input (intl-tel-input)
   ============================================= */
.iti { width: 100% !important; display: block !important; }
.phone-input-wrapper { width: 100% !important; }
.phone-input-container { width: 100% !important; display: block !important; }
.form-group { width: 100% !important; }
.form-group input, .form-group select, .form-group textarea { width: 100% !important; box-sizing: border-box !important; }
.iti__flag-container { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; padding: 0 !important; }
.iti__selected-flag { display: flex !important; align-items: center !important; gap: 5px !important; padding: 0 8px 0 10px !important; background: #231e3a !important; border-radius: 10px 0 0 10px !important; border-right: 1px solid rgba(139,92,246,0.2) !important; height: 100% !important; cursor: pointer !important; }
.iti__arrow { width: 0 !important; height: 0 !important; border-left: 4px solid transparent !important; border-right: 4px solid transparent !important; border-top: 5px solid #8b5cf6 !important; margin-left: 0 !important; flex-shrink: 0 !important; }
.intl-tel-input .selected-flag .iti-arrow { right: 0px !important; }
.iti__selected-dial-code { font-size: 0.8rem !important; color: #a78bfa !important; font-weight: 600 !important; }
.iti input[type="tel"], input[type="tel"].phone-input, #inputPhone { padding: 0 14px 0 90px !important; height: 44px !important; line-height: 44px !important; width: 100% !important; box-sizing: border-box !important; }
/* intl-tel-input dropdown - global dark theme */
.iti__country-list {
    background: #16132a !important;
    border: 1px solid rgba(139,92,246,0.25) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.8), 0 0 0 1px rgba(139,92,246,0.08) !important;
    max-height: 320px !important;
    min-width: 320px !important;
    color: #e2e8f0 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(139,92,246,0.4) transparent !important;
    padding: 8px !important;
    animation: itiSlideDown 0.15s ease !important;
}
@keyframes itiSlideDown {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.iti__country-list::-webkit-scrollbar { width: 4px !important; }
.iti__country-list::-webkit-scrollbar-track { background: transparent !important; }
.iti__country-list::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.35) !important; border-radius: 4px !important; }
.iti__country-list::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.6) !important; }
.iti__country {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
    font-size: 0.875rem !important;
    transition: background 0.12s !important;
    cursor: pointer !important;
}
.iti__country:hover { background: rgba(139,92,246,0.1) !important; }
.iti__country.iti__highlight { background: rgba(139,92,246,0.18) !important; }
.iti__country-name { color: #cbd5e1 !important; flex: 1 !important; }
.iti__dial-code { color: #8b5cf6 !important; font-weight: 700 !important; font-size: 0.8rem !important; min-width: 36px !important; text-align: right !important; }
.iti__divider { border: none !important; border-top: 1px solid rgba(139,92,246,0.08) !important; margin: 6px 4px !important; }
.iti__search-input {
    background: #1c1833 !important;
    border: 1px solid rgba(139,92,246,0.2) !important;
    border-radius: 8px !important;
    color: #e2e8f0 !important;
    padding: 8px 12px !important;
    width: calc(100% - 16px) !important;
    margin: 0 8px 6px !important;
    font-size: 0.875rem !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    box-sizing: border-box !important;
    outline: none !important;
}
.iti__search-input:focus { border-color: rgba(139,92,246,0.5) !important; box-shadow: 0 0 0 3px rgba(139,92,246,0.1) !important; }
/* Mobile - iti appends to body as .iti-container */
body.iti-mobile .intl-tel-input.iti-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: flex-end !important;
}
body.iti-mobile .intl-tel-input.iti-container .country-list {
    width: 100% !important;
    max-height: 65vh !important;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.6) !important;
    padding: 12px 8px !important;
    background: #16132a !important;
    border: 1px solid rgba(139,92,246,0.2) !important;
    border-bottom: none !important;
    position: static !important;
    overflow-y: auto !important;
}
body.iti-mobile .country-list .country { padding: 12px 14px !important; font-size: 1rem !important; border-radius: 8px !important; }
body.iti-mobile .country-list .country-name { color: #cbd5e1 !important; }
body.iti-mobile .country-list .dial-code { color: #8b5cf6 !important; font-weight: 700 !important; }
body.iti-mobile .country-list .country.highlight,
body.iti-mobile .country-list .country:hover { background: rgba(139,92,246,0.15) !important; }


/* =============================================
   Header / Navigation
   ============================================= */
.main-header {
    background: rgba(14,12,21,0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(139,92,246,0.1);
    position: sticky; top: 0; z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.main-header.scrolled { background: rgba(14,12,21,0.97); box-shadow: 0 4px 30px rgba(0,0,0,0.4); border-bottom-color: transparent; }
.header-container { max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.header-logo img { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.header-logo-text { font-size: 1.125rem; font-weight: 700; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; }

/* Main nav */
.main-nav { display: flex; align-items: center; gap: 4px; }
.nav-item { position: relative; }
.nav-link { display: flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 0.875rem; font-weight: 500; color: #94a3b8; border-radius: 8px; text-decoration: none; transition: all 0.15s ease; }
.nav-link:hover { color: #8b5cf6; background: rgba(139,92,246,0.15); text-decoration: none; }
.nav-link i.nav-icon { color: #8b5cf6; width: 18px; font-size: 0.8rem; text-align: center; flex-shrink: 0; }
.nav-link .fa-chevron-down { font-size: 0.6rem; opacity: 0.5; margin-left: 2px; }

.nav-dropdown {
    position: absolute; top: 100%; left: 0; min-width: 240px; max-width: 320px;
    background: #16132a; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: all 0.2s ease; margin-top: 4px; z-index: 1001;
}
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    font-size: 0.875rem; color: #a0aec0; border-radius: 6px; text-decoration: none;
    transition: all 0.15s ease; white-space: normal; word-wrap: break-word; line-height: 1.4;
}
.nav-dropdown a:hover { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.nav-dropdown a i { width: 16px; color: #a78bfa; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #718096; border-radius: 8px; transition: all 0.15s ease; cursor: pointer; background: transparent; border: none; position: relative; }
.header-icon-btn:hover { color: #8b5cf6; background: rgba(139,92,246,0.15); }
.notification-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; border: 2px solid #0e0c15; animation: notif-pulse 2s ease-in-out infinite; }
.user-menu-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: var(--gradient-primary); color: #fff !important; font-size: 0.8125rem; font-weight: 500; border-radius: 8px; text-decoration: none; box-shadow: 0 2px 8px rgba(139,92,246,0.35); transition: all 0.15s ease; cursor: pointer; border: none; }
.user-menu-btn:hover { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff !important; text-decoration: none; box-shadow: 0 4px 12px rgba(139,92,246,0.45); }
.user-avatar { width: 26px; height: 26px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.user-avatar i { font-size: 0.7rem; }
.auth-link { padding: 8px 14px; font-size: 0.875rem; font-weight: 500; color: #94a3b8; text-decoration: none; border-radius: 8px; transition: all 0.15s ease; }
.auth-link:hover { color: #8b5cf6; background: rgba(139,92,246,0.15); text-decoration: none; }
.register-btn { padding: 8px 16px; background: var(--gradient-primary); color: #fff !important; font-size: 0.875rem; font-weight: 500; border-radius: 8px; text-decoration: none; box-shadow: 0 2px 8px rgba(139,92,246,0.3); transition: all 0.15s ease; }
.register-btn:hover { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff !important; text-decoration: none; }

/* Mobile nav */
.mobile-toggle { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; color: #94a3b8; border-radius: 8px; background: transparent; border: none; cursor: pointer; }
.mobile-toggle:hover { color: #8b5cf6; background: rgba(139,92,246,0.15); }
.mobile-nav { display: none; padding: 0 16px; border-top: 1px solid var(--border); background: rgba(14,12,21,0.97); margin: 0 -24px; overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease, padding 0.3s ease; }
.mobile-nav.active { display: block !important; max-height: 85vh !important; overflow-y: auto !important; opacity: 1 !important; padding: 16px !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important; }
/* Mobile nav accordion */
.mn-link { display: flex; align-items: center; gap: 10px; padding: 12px 16px; color: #cbd5e1; text-decoration: none; border-radius: 10px; font-size: 0.9375rem; font-weight: 500; margin-bottom: 4px; background: #1c1833; border: 1px solid rgba(139,92,246,0.1); }
.mn-link:hover { background: linear-gradient(135deg,#7c3aed,#6366f1); color: #fff; border-color: #8b5cf6; }
.mn-link i { color: #8b5cf6; width: 20px; text-align: center; }
.mn-link:hover i { color: #fff !important; }
.mn-acc { margin-bottom: 4px; border-radius: 10px; overflow: hidden; border: 1px solid rgba(139,92,246,0.1); }
.mn-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #1c1833; border: none; color: #cbd5e1; font-size: 0.9375rem; font-weight: 500; cursor: pointer; text-align: left; }
.mn-acc-btn:hover { background: #231e3a; color: #e2e8f0; }
.mn-acc-left { display: flex; align-items: center; gap: 10px; }
.mn-acc-left i { color: #8b5cf6; width: 20px; text-align: center; }
.mn-acc-arrow { color: #8b5cf6; font-size: 0.65rem; transition: transform 0.2s; flex-shrink: 0; }
.mn-acc.open .mn-acc-arrow { transform: rotate(180deg); }
.mn-acc-body { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; background: #16132a; }
.mn-acc.open .mn-acc-body { max-height: 400px; }
.mn-child { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 28px; color: #94a3b8; text-decoration: none; font-size: 0.875rem; border-top: 1px solid rgba(139,92,246,0.06); }
.mn-acc-body .mn-child[href='#'], .mn-acc-body a[href='#'] { display: none !important; }
.mn-child:hover { background: rgba(139,92,246,0.08); color: #e2e8f0; }
.mn-child i { color: #6d5acd; width: 18px; text-align: center; font-size: 0.8rem; }
.mn-child:hover i { color: #a78bfa; }
@media (max-width: 1023px) { .main-nav { display: none; } .mobile-toggle { display: flex; } }

/* =============================================
   Mobile / Responsive Fixes
   ============================================= */
@media (max-width: 768px) {
    .header-inner    { height: 56px; }
    .header-logo img { height: 28px; max-width: 130px; }
    .header-container { padding: 0 1rem; }
    .header-icon-btn { width: 32px; height: 32px; }
    .user-menu-btn   { padding: 5px 10px 5px 6px; font-size: 0.75rem; }
    .nav-dropdown { max-width: min(320px, calc(100vw - 2rem)); right: 0; left: auto; }
    .row { margin-left: 0; margin-right: 0; }
    .row > [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; }
    .dataTables_paginate { gap: 2px !important; padding: 0.75rem 1rem !important; }
    .dataTables_paginate .paginate_button { padding: 6px 10px !important; font-size: 0.8rem !important; }
    .clientarea-full { padding: 1rem !important; }
}

/* Breadcrumbs (hidden) */
.breadcrumb, ol.breadcrumb, nav.breadcrumb, .breadcrumbs, [class*="breadcrumb"] { display: none !important; }
.page-header p, .page-header .desc, .page-header .description, .header-description, .page-subtitle, h1 + p.text-muted { display: none !important; }

/* =============================================
   Dropdown Menus (Bootstrap)
   ============================================= */
.dropdown-menu { background: #16132a !important; border: 1px solid rgba(139,92,246,0.15) !important; border-radius: 12px !important; box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important; padding: 0.5rem 0 !important; min-width: 200px !important; margin-top: 0.5rem !important; overflow: hidden !important; }
.dropdown-menu > li > a { padding: 0.75rem 1.25rem !important; font-size: 0.875rem !important; color: #94a3b8 !important; display: flex !important; align-items: center !important; gap: 0.5rem !important; transition: all 0.2s ease !important; border-left: 3px solid transparent !important; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background: #1c1833 !important; color: #7c3aed !important; border-left-color: #7c3aed !important; text-decoration: none !important; }
.dropdown-menu > li > a i { width: 1.25rem; color: #64748b; font-size: 0.9rem; }
.dropdown-menu > li > a:hover i { color: #7c3aed; }
.menu-separator, .dropdown-menu .divider, .dropdown-menu li.separator { height: 1px !important; margin: 0.5rem 1rem !important; padding: 0 !important; background: linear-gradient(90deg, transparent, rgba(139,92,246,0.15), transparent) !important; font-size: 0 !important; overflow: hidden !important; pointer-events: none !important; border: none !important; }

/* =============================================
   Popovers
   ============================================= */
.popover { background: #16132a !important; border: 1px solid rgba(139,92,246,0.2) !important; border-radius: 14px !important; box-shadow: 0 16px 48px rgba(0,0,0,0.6) !important; max-width: 520px !important; min-width: 220px !important; padding: 0 !important; z-index: 9999 !important; }
.popover.bottom > .arrow, .popover.bottom > .arrow::after { border-bottom-color: rgba(139,92,246,0.2) !important; }
.popover.bottom > .arrow::after { border-bottom-color: #1c1833 !important; }
.popover .arrow { display: none !important; }
.popover-title { background: #1c1833 !important; color: #e2e8f0 !important; border-bottom: 1px solid rgba(139,92,246,0.12) !important; border-radius: 14px 14px 0 0 !important; padding: 12px 16px !important; font-size: 0.8125rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; }
.popover-content { padding: 6px !important; background: #16132a !important; border-radius: 14px !important; max-height: 400px !important; overflow-y: auto !important; }
.popover-content .list-unstyled,
.popover .list-unstyled { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.popover-content .list-unstyled li a,
.popover .list-unstyled li a { display: block !important; padding: 9px 14px !important; color: #cbd5e1 !important; font-size: 0.8125rem !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.15s ease !important; border-radius: 8px !important; margin: 1px 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
/* Language chooser grid */
#languageChooserContent ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 6px !important; }
#languageChooserContent li a { font-size: 0.8rem !important; padding: 6px 10px !important; }
.popover-content .list-unstyled li a:hover,
.popover .list-unstyled li a:hover { background: rgba(139,92,246,0.12) !important; color: #a78bfa !important; }
.popover-content .client-alerts,
.popover .client-alerts { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.popover-content .client-alerts li a { display: flex !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 14px !important; color: #cbd5e1 !important; text-decoration: none !important; font-size: 0.8125rem !important; border-radius: 10px !important; transition: all 0.15s ease !important; line-height: 1.5 !important; }
.popover-content .client-alerts li a:hover { background: rgba(139,92,246,0.1) !important; }
.popover-content .client-alerts li:not(:last-child) { border-bottom: 1px solid rgba(139,92,246,0.06); }
.popover-content::-webkit-scrollbar { width: 6px !important; }
.popover-content::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.2) !important; border-radius: 3px !important; }
.popover-content::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.35) !important; }

/* =============================================
   Cart / Store / Order Form
   ============================================= */
.products .product, .products-list .product, .product-group .product,
.panel-product, .pricing-table .pricing-plan, .panel.product-panel {
    background: #16132a !important; border: 1px solid rgba(139,92,246,0.15) !important;
    border-radius: 16px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    transition: all 0.3s ease !important; overflow: hidden !important;
}
.products .product:hover, .products-list .product:hover, .product-group .product:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(139,92,246,0.15) !important; border-color: rgba(139,92,246,0.3) !important; }
.product .product-name, .product h4, .product h3, .pricing-plan h3 { font-size: 1.25rem !important; font-weight: 700 !important; color: #e2e8f0 !important; margin-bottom: 0.75rem !important; text-align: center !important; }
.product > .price:not(select), .product-price:not(select), .pricing-plan .price:not(select), span.price, div.price, p.price { font-size: 1.75rem !important; font-weight: 800 !important; background: var(--gradient-primary) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; text-align: center !important; }
.product ul li, .pricing-plan ul li { padding: 0.5rem 0 !important; color: #94a3b8 !important; font-size: 0.9375rem !important; text-align: center !important; border-bottom: 1px solid rgba(139,92,246,0.08) !important; }
.product ul li:last-child, .pricing-plan ul li:last-child { border-bottom: none !important; }
.product .btn-order-now, .product .btn-primary, .pricing-plan .btn, .order-button { display: block !important; width: calc(100% - 2rem) !important; margin: 1rem !important; padding: 12px 24px !important; background: var(--gradient-primary) !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-weight: 600 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(139,92,246,0.3) !important; transition: all 0.3s ease !important; }
.order-summary, .cart-sidebar, #orderSummary, .ordersummary { background: #16132a !important; border: 1px solid rgba(139,92,246,0.15) !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 8px 30px rgba(0,0,0,0.5) !important; position: sticky !important; top: 1rem !important; }
.order-summary .header, #orderSummary .header, .cart-sidebar .panel-heading,
#orderSummary .panel-heading { background: var(--gradient-primary) !important; color: #fff !important; padding: 1.25rem 1.5rem !important; font-weight: 700 !important; border: none !important; }
.order-summary .panel-body, #orderSummary .order-summary .panel-body, #orderSummary .panel-body { padding: 1.5rem !important; }
.order-summary .total, .cart-total, #orderSummary .total-due { background: #1c1833 !important; border-top: 2px solid rgba(139,92,246,0.15) !important; padding: 1.25rem 1.5rem !important; display: flex !important; justify-content: space-between !important; align-items: center !important; }
.order-summary .total .amount, .cart-total .amount, #orderSummary .grand-total { font-size: 1.5rem !important; font-weight: 800 !important; color: #8b5cf6 !important; }
.btn-checkout, .checkout-button { display: block !important; width: 100% !important; padding: 14px 24px !important; background: linear-gradient(135deg, #22c55e, #6ee7b7) !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-size: 1rem !important; font-weight: 700 !important; text-align: center !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(34,197,94,0.3) !important; transition: all 0.3s ease !important; margin-top: 1rem !important; }
.cart-body table th, .cart-items table th { background: var(--gradient-primary) !important; color: #fff !important; font-weight: 600 !important; padding: 1rem 1.25rem !important; font-size: 0.8125rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; }
.cart-body table td, .cart-items table td { padding: 1rem 1.25rem !important; background: #16132a !important; border-bottom: 1px solid rgba(139,92,246,0.08) !important; color: #cbd5e1 !important; }
.cart-body table tbody tr:hover td { background: rgba(139,92,246,0.15) !important; }
.promo-code, .promocode-container { background: #1c1833 !important; border: 1px dashed rgba(139,92,246,0.2) !important; border-radius: 12px !important; padding: 1.25rem !important; margin: 1rem 0 !important; }
.promo-code .btn, .promocode-container .btn { padding: 10px 20px !important; background: var(--gradient-primary) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; margin-left: 0.5rem !important; }
.cart-body .remove-item, .btn-remove-item { color: #ef4444 !important; background: rgba(239,68,68,0.1) !important; border-radius: 6px !important; padding: 6px 10px !important; font-size: 0.8125rem !important; transition: all 0.2s ease !important; }
.cart-body .remove-item:hover, .btn-remove-item:hover { background: #ef4444 !important; color: #fff !important; }
.store-domain-tabs, .nav-tabs.store-tabs { border-bottom: 2px solid rgba(139,92,246,0.1) !important; margin-bottom: 1.5rem !important; }
.store-domain-tabs > li > a, .nav-tabs.store-tabs > li > a { padding: 0.75rem 1.5rem !important; border: none !important; border-radius: 8px 8px 0 0 !important; color: #718096 !important; font-weight: 500 !important; transition: all 0.2s ease !important; }
.store-domain-tabs > li.active > a, .store-domain-tabs > li > a:hover { background: var(--gradient-primary) !important; color: #fff !important; border: none !important; }
.order-form, #frmConfigureProduct { background: #16132a !important; border-radius: 20px !important; padding: 2rem !important; box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important; border: 1px solid rgba(139,92,246,0.15) !important; }
.order-form label, .order-form .control-label, #frmConfigureProduct label, .form-group > label { display: block !important; font-size: 0.9375rem !important; font-weight: 700 !important; color: #cbd5e1 !important; margin-bottom: 0.75rem !important; }
.order-form h3, .order-form h4, #frmConfigureProduct h3, #frmConfigureProduct h4, fieldset legend { font-size: 1.125rem !important; font-weight: 700 !important; color: #e2e8f0 !important; margin: 1.5rem 0 1rem !important; padding-bottom: 0.75rem !important; border-bottom: 2px solid rgba(139,92,246,0.1) !important; }
.order-form .checkbox, #frmConfigureProduct .checkbox { display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 1rem 1.25rem !important; background: linear-gradient(135deg, #1c1833, #16132a) !important; border: 1px solid rgba(139,92,246,0.15) !important; border-radius: 12px !important; margin: 0.75rem 0 !important; cursor: pointer !important; transition: all 0.2s ease !important; }
.order-form .checkbox:hover, #frmConfigureProduct .checkbox:hover { border-color: #8b5cf6 !important; }
.order-form .checkbox input[type="checkbox"], #frmConfigureProduct .checkbox input[type="checkbox"] { width: 22px !important; height: 22px !important; accent-color: #8b5cf6 !important; flex-shrink: 0 !important; margin: 0 !important; cursor: pointer !important; }
.order-form .checkbox label, #frmConfigureProduct .checkbox label { margin: 0 !important; font-weight: 500 !important; color: #94a3b8 !important; cursor: pointer !important; line-height: 1.5 !important; }
.order-form .btn-primary, .order-form .btn-success,
#frmConfigureProduct .btn-primary, #frmConfigureProduct .btn-success,
button[value="addtocart"], input[type="submit"].btn-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; min-width: 200px !important; padding: 14px 32px !important; background: var(--gradient-primary) !important; color: #fff !important; border: none !important; border-radius: 14px !important; font-size: 1rem !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: 0 6px 20px rgba(139,92,246,0.35) !important; transition: all 0.3s ease !important; }
.order-form .btn-primary:hover, #frmConfigureProduct .btn-primary:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 30px rgba(139,92,246,0.45) !important; }
.order-form .btn-default, #frmConfigureProduct .btn-default { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 12px 24px !important; background: #231e3a !important; color: #94a3b8 !important; border: 2px solid rgba(139,92,246,0.2) !important; border-radius: 12px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s ease !important; }
.order-form .btn-default:hover { color: #e2e8f0 !important; }
#order-standard_cart h1, #order-standard_cart h2,
#order-boxes h1, #order-boxes h2,
.order-form > h1, .order-form > h2,
.cart-body > h1, .cart-body > h2 { display: none !important; }
#order-standard_cart p:first-of-type, #order-boxes p:first-of-type,
.order-form > p:first-of-type, .lead { display: none !important; }

/* =============================================
   Modal
   ============================================= */
.modal-content { background: #16132a !important; border: 1px solid rgba(139,92,246,0.15) !important; border-radius: 16px !important; overflow: hidden !important; color: #e2e8f0; }
.modal-header { background: #1c1833 !important; border-bottom: 1px solid rgba(139,92,246,0.1) !important; padding: 1.25rem 1.5rem !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.modal-title { color: #e2e8f0 !important; font-weight: 700 !important; font-size: 1rem !important; margin: 0 !important; }
.modal-header .close { color: #718096 !important; opacity: 1 !important; text-shadow: none !important; font-size: 1.25rem !important; background: transparent !important; border: none !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 6px !important; }
.modal-header .close:hover { color: #f87171 !important; }
.modal-body { background: #16132a !important; color: #cbd5e1 !important; padding: 1.5rem !important; }
.modal-footer { background: #1c1833 !important; border-top: 1px solid rgba(139,92,246,0.1) !important; padding: 1rem 1.5rem !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 0.5rem !important; }
.modal-footer .btn-default { background: transparent !important; border: none !important; color: #cbd5e1 !important; }
.modal-footer .btn-primary { background: #8b5cf6 !important; border: none !important; color: #fff !important; border-radius: 6px !important; }
.modal-content.panel-primary .modal-header { background: var(--gradient-primary) !important; border-bottom: none !important; }
.modal-content.panel-primary .modal-header .modal-title { color: #fff !important; }
.modal-content.panel-primary .modal-header .close { color: #fff !important; }

/* =============================================
   Nav Tabs
   ============================================= */
.nav-tabs { border-bottom-color: rgba(139,92,246,0.15) !important; }
.nav-tabs > li > a { border-color: transparent !important; color: #718096 !important; }
.nav-tabs > li > a:hover { border-color: transparent !important; border-bottom-color: rgba(139,92,246,0.2) !important; background: transparent !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { background: #16132a !important; color: #8b5cf6 !important; border: none !important; border-bottom: 2px solid #8b5cf6 !important; }
.tab-content { background: #16132a !important; border: 1px solid rgba(139,92,246,0.1) !important; border-top: none !important; border-radius: 0 0 12px 12px !important; color: #e2e8f0 !important; }

/* =============================================
   Account / Contacts
   ============================================= */
.controls.checkbox { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 12px !important; }
.controls.checkbox label { display: flex !important; align-items: center !important; gap: 10px !important; padding: 12px 16px !important; background: #1c1833 !important; border: 1px solid rgba(139,92,246,0.1) !important; border-radius: 10px !important; color: #a0aec0 !important; font-size: 0.875rem !important; margin: 0 !important; cursor: pointer !important; transition: all 0.15s ease !important; }
.controls.checkbox label:hover { border-color: rgba(139,92,246,0.25) !important; background: #22192e !important; }
.controls.checkbox br { display: none !important; }
.controls.checkbox input[type="checkbox"] { accent-color: #8b5cf6 !important; width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
@media (max-width: 640px) { .controls.checkbox { grid-template-columns: 1fr !important; } }
.form-group > h3 { font-size: 1rem !important; font-weight: 600 !important; color: #e2e8f0 !important; margin-bottom: 1rem !important; padding-bottom: 0.75rem !important; border-bottom: 1px solid rgba(139,92,246,0.1) !important; }
.radio-inline, .checkbox-inline { color: #cbd5e1 !important; }
.radio-inline input[type="radio"], .checkbox-inline input[type="checkbox"] { accent-color: #8b5cf6 !important; }
form .form-group > input[type="submit"].btn-primary,
form .form-group > input[type="submit"].btn { padding: 8px 24px !important; font-size: 0.8125rem !important; border-radius: 8px !important; min-width: auto !important; }
form .form-group > input[type="reset"].btn-default,
form .form-group > input[type="reset"].btn { padding: 8px 24px !important; font-size: 0.8125rem !important; border-radius: 8px !important; background: #1c1833 !important; border: 1px solid rgba(139,92,246,0.15) !important; color: #a0aec0 !important; }
form .form-group > input[type="reset"].btn:hover { background: rgba(139,92,246,0.08) !important; border-color: rgba(139,92,246,0.25) !important; color: #e2e8f0 !important; }
#registration { max-width: 1200px !important; width: 100% !important; margin: 0 auto !important; padding: 0 1.5rem !important; }
@media (min-width: 992px) {
    #registration .row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
    #registration .col-sm-12 { grid-column: span 2; }
}

/* =============================================
   Lists & Misc
   ============================================= */
.list-group { margin-bottom: 0 !important; border-radius: 0 0 12px 12px !important; overflow: hidden !important; }
.list-group-item { background: #16132a !important; border: none !important; border-bottom: 1px solid rgba(139,92,246,0.06) !important; color: #a0aec0 !important; padding: 12px 20px !important; font-size: 0.875rem !important; }
.list-group-item:last-child { border-bottom: none !important; }
.list-group-item strong { color: #e2e8f0 !important; }
.list-group-item-danger  { background: rgba(239,68,68,0.08) !important;   color: #fca5a5 !important; }
.list-group-item-warning { background: rgba(245,158,11,0.08) !important;   color: #fcd34d !important; }
.list-group-item-success { background: rgba(16,185,129,0.08) !important;  color: #6ee7b7 !important; }
.list-group-item-info    { background: rgba(14,165,233,0.08) !important;  color: #7dd3fc !important; }
.md-editor { background: #1c1833 !important; color: #e2e8f0 !important; border: 1px solid rgba(139,92,246,0.15) !important; border-radius: 10px !important; }
.md-editor textarea { background: #1c1833 !important; color: #e2e8f0 !important; border: none !important; }
.md-editor .md-header { background: #16132a !important; border-bottom: 1px solid rgba(139,92,246,0.1) !important; }
.md-editor .md-footer { background: #16132a !important; border-top: 1px solid rgba(139,92,246,0.1) !important; color: #718096 !important; }
.tox .tox-toolbar, .tox .tox-toolbar__primary { background: #16132a !important; border-color: rgba(139,92,246,0.1) !important; }
.tox .tox-tbtn { color: #cbd5e1 !important; }
.tox .tox-statusbar { background: #16132a !important; border-color: rgba(139,92,246,0.1) !important; color: #64748b !important; }

/* =======================================================
   FOOTER
   ======================================================= */
.site-footer { background: linear-gradient(180deg, #0a0914 0%, #07060d 100%); color: #e2e8f0; margin-top: 0 !important; padding-top: 0; position: relative; overflow: hidden; flex-shrink: 0; }
.site-footer * { -webkit-font-smoothing: antialiased; }
.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(139,92,246,0.35), rgba(99,102,241,0.35), transparent); }
.ft-main { max-width: 1300px; margin: 0 auto; padding: 3.5rem 1.5rem 2.5rem; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 3rem; }
@media (max-width: 900px) { .ft-main { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 600px) { .ft-main { grid-template-columns: 1fr; gap: 1.5rem; } }
.ft-brand h3 { font-size: 1.25rem; font-weight: 800; background: linear-gradient(135deg, #a78bfa, #818cf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 0 0 0.875rem; }
.ft-brand p { color: #718096; font-size: 0.875rem; line-height: 1.7; margin: 0 0 1.25rem; max-width: 280px; }
.ft-social { display: flex; gap: 10px; }
.ft-social a { width: 38px; height: 38px; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #a78bfa; font-size: 1rem; text-decoration: none; transition: all 0.2s ease; }
.ft-social a:hover { background: rgba(139,92,246,0.25); border-color: rgba(139,92,246,0.5); transform: translateY(-3px); color: #c4b5fd; box-shadow: 0 4px 12px rgba(139,92,246,0.2); }
.ft-col h4 { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #e2e8f0; margin: 0 0 1rem; position: relative; padding-bottom: 0.75rem; }
.ft-col h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: var(--gradient-primary); border-radius: 2px; }
.ft-col ul { list-style: none; padding: 0; margin: 0; }
.ft-col li { margin-bottom: 0.625rem; }
.ft-col a { color: #718096; text-decoration: none; font-size: 0.8125rem; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s ease; }
.ft-col a:hover { color: #a78bfa; padding-left: 4px; }
.ft-col a i { font-size: 0.625rem; opacity: 0; margin-left: -10px; transition: all 0.2s ease; }
.ft-col a:hover i { opacity: 1; margin-left: 0; }
.ft-support { background: rgba(14,12,24,0.6); border: 1px solid rgba(139,92,246,0.1); border-radius: 14px; padding: 1.25rem; margin-top: 0.5rem; }
.ft-support-item { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.ft-support-item:last-child { margin-bottom: 0; }
.ft-support-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }
.ft-support-ico.purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }
.ft-support-ico.green  { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.ft-support-text h5 { font-size: 0.8125rem; font-weight: 600; color: #e2e8f0; margin: 0 0 2px; }
.ft-support-text p { font-size: 0.6875rem; color: #64748b; margin: 0; }
.ft-ticket-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; background: transparent; color: #a78bfa; font-size: 0.75rem; font-weight: 600; border-radius: 6px; border: 1px solid rgba(139,92,246,0.4); text-decoration: none; margin-top: 0.875rem; transition: all 0.2s ease; }
.ft-ticket-btn:hover { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.6); color: #c4b5fd; text-decoration: none; }
.ft-trust { border-top: 1px solid rgba(139,92,246,0.08); padding: 1.5rem; display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.ft-badge { display: flex; align-items: center; gap: 8px; color: #64748b; font-size: 0.75rem; transition: color 0.2s ease; }
.ft-badge i { color: #8b5cf6; font-size: 1rem; }
.ft-badge:hover { color: #94a3b8; }
.ft-bottom { background: rgba(0,0,0,0.25); border-top: 1px solid rgba(139,92,246,0.06); padding: 1.25rem 1.5rem; }
.ft-bottom-in { max-width: 1300px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.ft-legal { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.ft-legal a { color: #64748b; font-size: 0.75rem; text-decoration: none; transition: color 0.2s ease; }
.ft-legal a:hover { color: #a78bfa; }
.ft-copy { color: #4a5568; font-size: 0.75rem; margin: 0; }
.ft-copy span { color: #a78bfa; }

/* =======================================================
   Client Area Home (Dashboard)
   ======================================================= */
/* Hide WHMCS floating action buttons */
#ClientAreaActionButtons {
    display: none !important;
}
/* Hide WHMCS admin section edit overlays */
.admin-inline-edit,
.admin-inline-edit-btn,
[class*="inline-edit"],
[class*="inlineedit"] {
    display: none !important;
}

/* WHMCS #scrollTop - custom style globally (display managed by WHMCS JS) */
#scrollTop {
    position: fixed !important;
    bottom: 2rem !important;
    right: 2rem !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50% !important;
    background: rgba(139,92,246,0.15) !important;
    border: 1px solid rgba(139,92,246,0.35) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    align-items: center !important;
    justify-content: center !important;
    color: #a78bfa !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    z-index: 999 !important;
    box-shadow: 0 4px 20px rgba(139,92,246,0.25) !important;
}
#scrollTop:hover {
    background: rgba(139,92,246,0.3) !important;
    border-color: rgba(139,92,246,0.6) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 28px rgba(139,92,246,0.4) !important;
    color: #fff !important;
}
.ca-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.ca-quick-actions { display: flex; gap: 8px; }
.ca-quick-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff !important; font-size: 0.85rem; font-weight: 500; border-radius: 8px; text-decoration: none; box-shadow: 0 2px 8px rgba(139,92,246,0.3); transition: all 0.2s ease; border: none; cursor: pointer; }
.ca-quick-btn:hover { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff !important; text-decoration: none; transform: translateY(-1px); }
.ca-quick-btn.secondary { background: #1c1833; color: #a0aec0 !important; border: 1px solid rgba(139,92,246,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.ca-quick-btn.secondary:hover { background: rgba(139,92,246,0.15); color: #fff !important; border-color: rgba(139,92,246,0.4); }
.ca-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
@media (max-width: 1024px) { .ca-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ca-stats { grid-template-columns: 1fr; } }
.ca-stat { background: #16132a; border-radius: 12px; padding: 1.25rem; border: 1px solid rgba(139,92,246,0.12); display: flex; align-items: center; gap: 1rem; transition: all 0.2s ease; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.ca-stat:hover { border-color: rgba(139,92,246,0.3); box-shadow: 0 4px 12px rgba(139,92,246,0.1); text-decoration: none; transform: translateY(-2px); }
.ca-stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: #fff; flex-shrink: 0; box-shadow: inset 0 0 10px rgba(255,255,255,0.1); }
.ca-stat-icon.purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.ca-stat-icon.green  { background: linear-gradient(135deg, #10b981, #059669); }
.ca-stat-icon.red    { background: linear-gradient(135deg, #f43f5e, #e11d48); }
.ca-stat-icon.amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.ca-stat-content h3 { font-size: 1.5rem; font-weight: 700; color: #e2e8f0; margin: 0 0 0.15rem; line-height: 1; }
.ca-stat-content span { font-size: 0.75rem; font-weight: 500; color: #a0aec0; text-transform: uppercase; letter-spacing: 0.03em; }
.ca-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; }
@media (max-width: 1024px) { .ca-grid { grid-template-columns: 1fr; } }
.ca-panel { background: #16132a; border-radius: 12px; border: 1px solid rgba(139,92,246,0.12); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.15); margin-bottom: 1.5rem; }
.ca-panel-header { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(139,92,246,0.08); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #1c1833, #16132a); }
.ca-panel-title { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: #e2e8f0; margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.ca-panel-title i { color: #8b5cf6; font-size: 1rem; }
.ca-panel-badge { padding: 2px 8px; font-size: 0.6875rem; font-weight: 600; background: rgba(139,92,246,0.12); color: #a78bfa; border-radius: 100px; }
.ca-panel-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; font-size: 0.75rem; font-weight: 500; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff !important; border-radius: 6px; text-decoration: none; transition: all 0.2s ease; }
.ca-panel-btn:hover { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff !important; text-decoration: none; transform: translateY(-1px); }
.ca-panel-body { padding: 1rem 1.25rem; font-size: 0.875rem; color: #cbd5e1; line-height: 1.5; }
.ca-panel-empty { padding: 3rem 2rem; text-align: center; color: #718096; font-size: 0.9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; }
.ca-panel-empty i { font-size: 2.5rem; color: rgba(139,92,246,0.2); display: block; }
/* Tickets */
.ca-ticket-list { overflow-y: auto; }
.ca-ticket-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid rgba(139,92,246,0.07); text-decoration: none; color: #e2e8f0; transition: all 0.15s; }
.ca-ticket-row:last-child { border-bottom: none; }
.ca-ticket-row:hover { background: rgba(139,92,246,0.05); padding-left: 24px; text-decoration: none; }
.ca-ticket-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ca-ticket-dot--open { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.7); }
.ca-ticket-dot--answered { background: #6366f1; box-shadow: 0 0 8px rgba(99,102,241,0.6); }
.ca-ticket-dot--customer-reply { background: #f59e0b; box-shadow: 0 0 8px rgba(245,158,11,0.7); }
.ca-ticket-dot--in-progress { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.6); }
.ca-ticket-dot--closed { background: #475569; }
.ca-ticket-dot--default { background: #8b5cf6; box-shadow: 0 0 8px rgba(139,92,246,0.6); }
.ca-ticket-info { flex: 1; min-width: 0; line-height: 1.5; font-size: 0.75rem; color: #64748b; font-family: 'Inter', system-ui, sans-serif !important; }
.ca-ticket-info strong, .ca-ticket-info b { display: block; font-size: 0.9rem; font-weight: 600 !important; color: #f1f5f9 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Inter', system-ui, sans-serif !important; letter-spacing: -0.01em !important; }
.ca-ticket-pill { display: none; }
.ca-ticket-arrow { color: rgba(139,92,246,0.25); font-size: 0.6rem; flex-shrink: 0; transition: color 0.15s; }
.ca-ticket-row:hover .ca-ticket-arrow { color: rgba(139,92,246,0.7); }
.ca-empty { padding: 2.5rem 2rem; text-align: center; color: #64748b; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.ca-empty i { font-size: 2.5rem; color: rgba(139,92,246,0.2); }
.ca-empty p { margin: 0; font-size: 0.875rem; }
.ca-ticket-item { height: 56px; display: flex; align-items: center; gap: 16px; padding: 12px 1.25rem; border-bottom: 1px solid rgba(139,92,246,0.06); transition: background 0.15s ease; text-decoration: none; color: inherit; }
.ca-ticket-item:hover { background: rgba(139,92,246,0.05); text-decoration: none; }
.ca-ticket-item:last-child { border-bottom: none; }
.ca-ticket-label { flex: 1; font-size: 0.875rem; color: #cbd5e1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-ticket-arrow { color: rgba(139,92,246,0.3); font-size: 0.625rem; flex-shrink: 0; }
.ca-ticket-status { padding: 3px 8px; font-size: 0.6875rem; font-weight: 600; border-radius: 100px; text-transform: uppercase; }
.ca-ticket-status.open            { background: rgba(16,185,129,0.15); color: #34d399; }
.ca-ticket-status.answered        { background: rgba(59,130,246,0.15);  color: #60a5fa; }
.ca-ticket-status.closed          { background: rgba(148,163,184,0.1);  color: #94a3b8; }
.ca-ticket-status.customer-reply  { background: rgba(245,158,11,0.15);  color: #fbbf24; }
.ca-ticket-date { font-size: 0.75rem; color: #718096; min-width: 100px; text-align: right; }
.ca-service-list { overflow-y: auto; }
.ca-service-item { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid rgba(139,92,246,0.07); text-decoration: none; color: #e2e8f0; transition: all 0.15s; }
.ca-service-item:last-child { border-bottom: none; }
.ca-service-item:hover { background: rgba(139,92,246,0.05); padding-left: 24px; text-decoration: none; }
.ca-service-icon { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(99,102,241,0.1)); border: 1px solid rgba(139,92,246,0.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #a78bfa; font-size: 0.9rem; transition: all 0.15s; }
.ca-service-item:hover .ca-service-icon { background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.2)); border-color: rgba(139,92,246,0.4); }
.ca-service-info { flex: 1; min-width: 0; }
.ca-service-name { font-size: 0.875rem; font-weight: 600; color: #e2e8f0; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ca-service-name .label { display: none !important; }
.ca-service-name a { display: none !important; }
.ca-ticket-info .label { display: none !important; }
.ca-service-sub { font-size: 0.72rem; color: #64748b; margin-top: 2px; }
.ca-service-badge { font-size: 0.6rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; }
.ca-service-badge.active { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.25); }
.ca-service-badge.pending { background: rgba(245,158,11,0.12); color: #f59e0b; border: 1px solid rgba(245,158,11,0.25); }
.ca-service-badge.suspended { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
.ca-service-badge.cancelled { background: rgba(71,85,105,0.1); color: #94a3b8; border: 1px solid rgba(71,85,105,0.25); }
.ca-service-item:hover { background: rgba(139,92,246,0.08); text-decoration: none; }
.ca-service-item span { font-size: 0.875rem; color: #cbd5e1; }
.ca-sidebar { display: flex; flex-direction: column; gap: 1rem; }
.ca-widget { background: #16132a; border-radius: 12px; border: 1px solid rgba(139,92,246,0.12); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.ca-widget-header { padding: 0.875rem 1rem; border-bottom: 1px solid rgba(139,92,246,0.08); background: linear-gradient(135deg, #1c1833, #16132a); }
.ca-widget-title { font-size: 0.8125rem; font-weight: 600; color: #e2e8f0; display: flex; align-items: center; gap: 6px; margin: 0; }
.ca-widget-title i { color: #8b5cf6; font-size: 0.75rem; }
.ca-widget-body { padding: 1rem; }
.ca-credit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.ca-credit-label { font-size: 0.75rem; color: #718096; }
.ca-credit-value { font-size: 1.125rem; font-weight: 700; color: #e2e8f0; }
.ca-widget-btn { display: block; width: 100%; padding: 10px; text-align: center; font-size: 0.8125rem; font-weight: 500; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff !important; border-radius: 8px; text-decoration: none; transition: all 0.15s ease; }
.ca-widget-btn:hover { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff !important; text-decoration: none; transform: translateY(-1px); }
.ca-widget-link { display: flex; align-items: center; gap: 8px; padding: 8px 1rem; font-size: 0.8125rem; color: #cbd5e1; text-decoration: none; border-bottom: 1px solid rgba(139,92,246,0.06); transition: all 0.15s ease; }
.ca-widget-link:hover { background: rgba(139,92,246,0.08); color: #8b5cf6; text-decoration: none; padding-left: 1.25rem; }
.ca-widget-link:last-child { border-bottom: none; }
.ca-widget-link i { width: 16px; text-align: center; color: #a78bfa; }
.ca-search { position: relative; margin-bottom: 1.5rem; }
.ca-search input { width: 100% !important; padding: 0 16px 0 44px !important; height: 44px !important; line-height: 44px !important; border: 1px solid rgba(139,92,246,0.12) !important; border-radius: 10px !important; font-size: 0.875rem !important; background: #16132a !important; color: #e2e8f0 !important; transition: all 0.15s ease !important; box-sizing: border-box !important; }
.ca-search input:focus { outline: none; border-color: rgba(139,92,246,0.4); box-shadow: 0 0 0 3px rgba(139,92,246,0.1); }
.ca-search i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #718096; }
.ca-panel-footer { padding: 0.75rem 1.25rem; background: #1c1833; border-top: 1px solid rgba(139,92,246,0.1); text-align: center; border-radius: 0 0 12px 12px; }
.ca-panel-footer a { font-size: 0.8125rem; color: #8b5cf6; text-decoration: none; font-weight: 500; }
.ca-panel-footer a:hover { color: #7c3aed; text-decoration: underline; }
.ca-ticket-list::-webkit-scrollbar, .ca-service-list::-webkit-scrollbar { width: 4px; }
.ca-ticket-list::-webkit-scrollbar-track, .ca-service-list::-webkit-scrollbar-track { background: #0e0c15; }
.ca-ticket-list::-webkit-scrollbar-thumb, .ca-service-list::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.25); border-radius: 2px; }

/* =======================================================
   View Ticket (Chat UI)
   ======================================================= */
@keyframes tkMsgIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.tk-chat { display: flex; flex-direction: column; gap: 20px; }
.tk-msg { display: flex; gap: 12px; max-width: 82%; animation: tkMsgIn 0.35s ease both; }
.tk-msg.tk-staff  { align-self: flex-end; flex-direction: row-reverse; }
.tk-msg.tk-client { align-self: flex-start; }
.tk-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.875rem; }
.tk-staff .tk-avatar  { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; }
.tk-client .tk-avatar { background: #1c1833; border: 1px solid rgba(139,92,246,0.15); color: #718096; }
.tk-bubble { border-radius: 20px; overflow: hidden; position: relative; min-width: 0; flex: 1; }
.tk-staff .tk-bubble  { background: #16132a; border: 1px solid rgba(139,92,246,0.15); border-top-right-radius: 6px; }
.tk-client .tk-bubble { background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.1); border-top-left-radius: 6px; }
.tk-bubble-head { padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; border-bottom: 1px solid rgba(139,92,246,0.08); }
.tk-sender { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tk-sender-name { font-size: 0.875rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.tk-sender-badge { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 100px; white-space: nowrap; }
.tk-staff .tk-sender-badge  { background: rgba(139,92,246,0.15); color: #a78bfa; }
.tk-client .tk-sender-badge { background: rgba(99,102,241,0.1);  color: #818cf8; }
.tk-time { font-size: 0.7rem; color: #64748b; display: flex; align-items: center; gap: 4px; white-space: nowrap; flex-shrink: 0; }
.tk-bubble-body { padding: 16px 18px; color: #cbd5e1; font-size: 0.9375rem; line-height: 1.7; word-wrap: break-word; }
.tk-rating { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(139,92,246,0.08); display: flex; align-items: center; gap: 4px; position: relative; z-index: 10; }
.tk-rating .star { font-size: 1.5rem; color: #4a5568; cursor: pointer; transition: color 0.15s; }
.tk-rating .star:hover, .tk-rating .star.active { color: #fbbf24; }
.tk-rating-done .star { cursor: default; }
.tk-attachments { padding: 12px 18px; background: rgba(0,0,0,0.15); border-top: 1px solid rgba(139,92,246,0.08); }
.tk-attach-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tk-attach-item { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; }
.tk-attach-item a { color: #a78bfa; text-decoration: none; }

/* =======================================================
   Account Details
   ======================================================= */
.details-card { background: #16132a; border-radius: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.35); border: 1px solid rgba(139,92,246,0.08); overflow: hidden; }
.details-header { padding: 1.5rem; border-bottom: 1px solid rgba(139,92,246,0.08); display: flex; align-items: center; gap: 0.75rem; }
.details-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #7c3aed, #6366f1); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.details-icon i { color: #fff; }
.details-title { font-size: 1.125rem; font-weight: 600; color: #e2e8f0; margin: 0; }
.details-subtitle { font-size: 0.875rem; color: #718096; margin: 0; }
.details-body { padding: 1.5rem; }
.details-card { max-width: 100%; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
@media (max-width: 768px) { .details-grid { grid-template-columns: 1fr; } }
.details-section { margin-bottom: 1.5rem; }
.details-section:last-child { margin-bottom: 0; }
.section-title { font-size: 0.75rem; font-weight: 600; color: #cbd5e1; text-transform: uppercase; letter-spacing: 0.05em; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(139,92,246,0.08); margin-bottom: 1rem; }
.details-footer { padding: 1.5rem; border-top: 1px solid rgba(139,92,246,0.08); background: #1c1833; display: flex; justify-content: flex-end; }
.btn-save { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 600; font-size: 0.9375rem; border: none; cursor: pointer; transition: all 0.2s ease; }
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,0.3); }

/* =======================================================
   Registration Form
   ======================================================= */
.reg-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 20px 28px !important; }
.reg-grid > .reg-field { min-width: 0 !important; }
.reg-grid > .reg-full  { grid-column: 1 / -1 !important; }
@media (max-width: 767px) {
    .reg-grid { grid-template-columns: 1fr !important; }
    .reg-grid > .reg-full { grid-column: 1 !important; }
}
.reg-field label { display: block; font-size: 1rem; font-weight: 500; color: #cbd5e1; margin-bottom: 10px; }
.reg-field label i { color: #8b5cf6; margin-right: 8px; }
.reg-field input, .reg-field select { width: 100%; padding: 14px 18px; border: 1px solid rgba(139,92,246,0.15); border-radius: 12px; font-size: 1.05rem; transition: all 0.2s ease; background: #16132a; }
.reg-field input:focus, .reg-field select:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.1); }
#containerPassword { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px 24px !important; }
#containerPassword > div { min-width: 0 !important; }
@media (max-width: 767px) { #containerPassword { grid-template-columns: 1fr !important; } }
#captchaWrapper { background: linear-gradient(135deg, #0e0c15 0%, #16132a 100%); border-radius: 16px; padding: 24px; border: 1px solid rgba(139,92,246,0.15); }
#captchaWrapper .row, #captchaWrapper .text-center { display: block !important; text-align: center !important; width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; }
#captchaWrapper .col-md-8, #captchaWrapper .col-md-offset-2, #captchaWrapper .col-xs-10, #captchaWrapper .col-xs-offset-1, #captchaWrapper .col-xs-6 { width: auto !important; float: none !important; display: inline-block !important; vertical-align: middle !important; margin: 0 8px !important; padding: 0 !important; }
#captchaWrapper #default-captcha-domainchecker p { margin-bottom: 16px !important; color: #a0aec0; font-size: 0.9375rem; }
#captchaWrapper .captchaimage { display: inline-block !important; vertical-align: middle !important; }
#captchaWrapper .captchaimage img { border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
#captchaWrapper #inputCaptcha { width: 150px !important; padding: 12px 16px !important; border: 1px solid rgba(139,92,246,0.15) !important; border-radius: 12px !important; font-size: 1rem !important; text-align: center !important; letter-spacing: 2px !important; }
#captchaWrapper #inputCaptcha:focus { outline: none !important; border-color: #8b5cf6 !important; box-shadow: 0 0 0 3px rgba(139,92,246,0.15) !important; }

/* =======================================================
   Products / Services Page
   ======================================================= */
#tableServicesList_wrapper, #tableServicesList, #tableLoading { display: none !important; }
.services-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 1024px) { .services-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .services-stats { grid-template-columns: 1fr; } }
.stat-card { background: #16132a; border-radius: 12px; padding: 1.25rem; border: 1px solid rgba(139,92,246,0.12); display: flex; align-items: center; gap: 1rem; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.stat-card:hover { border-color: rgba(139,92,246,0.3); box-shadow: 0 4px 12px rgba(139,92,246,0.1); transform: translateY(-2px); }
.stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; color: #fff; flex-shrink: 0; box-shadow: inset 0 0 10px rgba(255,255,255,0.1); }
.stat-icon.purple { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.stat-icon.green  { background: linear-gradient(135deg, #10b981, #059669); }
.stat-icon.amber  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-icon.blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.stat-content h4 { font-size: 1.5rem; font-weight: 700; color: #e2e8f0; margin: 0 0 0.15rem; line-height: 1; }
.stat-content p  { font-size: 0.75rem; font-weight: 500; color: #a0aec0; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
.view-toggle-wrapper { display: flex; justify-content: flex-end; margin-bottom: 1.25rem; }
.view-toggle { display: flex; background: rgba(139,92,246,0.08); border-radius: 10px; padding: 4px; gap: 4px; }
.view-btn { padding: 6px 14px; background: transparent; border: none; border-radius: 8px; color: #718096; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; }
.view-btn.active { background: #16132a; color: #8b5cf6; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.view-btn:hover:not(.active) { color: #cbd5e1; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.25rem; }
.service-card { background: #16132a; border-radius: 12px; border: 1px solid rgba(139,92,246,0.12); overflow: hidden; transition: all 0.2s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(139,92,246,0.15); border-color: rgba(139,92,246,0.3); }
.card-header-zone { padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; border-bottom: 1px solid rgba(139,92,246,0.06); background: linear-gradient(135deg, rgba(28,24,51,0.8), rgba(22,19,42,0.8)); }
.service-icon-wrap { position: relative; }
.service-icon-box { width: 48px; height: 48px; background: linear-gradient(135deg, #8b5cf6, #6366f1); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.15rem; box-shadow: 0 4px 10px rgba(139,92,246,0.3); }
.service-card .status-dot { position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #16132a; }
.service-card .status-dot.active    { background: #34d399; }
.service-card .status-dot.pending   { background: #fbbf24; }
.service-card .status-dot.suspended { background: #ef4444; }
.service-card .status-dot.cancelled { background: #94a3b8; }
.service-card .status-dot.terminated{ background: #475569; }
.service-info { flex: 1; min-width: 0; }
.service-name { font-size: 1.05rem; font-weight: 600; color: #f8fafc; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.service-domain { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #8b5cf6; text-decoration: none; transition: color 0.2s ease; }
.service-domain:hover { color: #a78bfa; text-decoration: underline; }
.card-body-zone { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.service-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; background: #1c1833; border: 1px solid rgba(139,92,246,0.08); padding: 1rem; border-radius: 10px; }
.detail-item { display: flex; flex-direction: column; gap: 4px; }
.detail-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: #718096; font-weight: 600; }
.detail-value { font-size: 0.95rem; font-weight: 600; color: #e2e8f0; }
.status-badge { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 16px; border-radius: 100px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; width: auto; border: 1px solid transparent; }
.status-badge.active    { background: rgba(16,185,129,0.1);  color: #34d399; border-color: rgba(16,185,129,0.2); }
.status-badge.pending   { background: rgba(245,158,11,0.1);  color: #fbbf24; border-color: rgba(245,158,11,0.2); }
.status-badge.suspended { background: rgba(239,68,68,0.1);   color: #ef4444; border-color: rgba(239,68,68,0.2); }
.status-badge.cancelled { background: rgba(148,163,184,0.1); color: #94a3b8; border-color: rgba(148,163,184,0.2); }
.status-badge.terminated{ background: rgba(71,85,105,0.1);   color: #cbd5e1; border-color: rgba(71,85,105,0.2); }
.status-badge.open            { background: rgba(16,185,129,0.1);  color: #34d399; border-color: rgba(16,185,129,0.25); }
.status-badge.answered        { background: rgba(99,102,241,0.1);  color: #818cf8; border-color: rgba(99,102,241,0.25); }
.status-badge.customer-reply  { background: rgba(245,158,11,0.1);  color: #fbbf24; border-color: rgba(245,158,11,0.25); }
.status-badge.in-progress     { background: rgba(59,130,246,0.1);  color: #60a5fa; border-color: rgba(59,130,246,0.25); }
.status-badge.closed          { background: rgba(71,85,105,0.1);   color: #94a3b8; border-color: rgba(71,85,105,0.2); }
.card-footer-zone { padding: 1rem 1.25rem; background: #1c1833; border-top: 1px solid rgba(139,92,246,0.08); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.manage-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0.6rem 1.25rem; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff !important; font-size: 0.875rem; font-weight: 600; border-radius: 8px; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(139,92,246,0.25); flex: 1; }
.manage-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139,92,246,0.35); text-decoration: none; }
.quick-actions { display: flex; gap: 8px; }
.quick-action { width: 36px; height: 36px; border-radius: 8px; background: #16132a; border: 1px solid rgba(139,92,246,0.2); display: flex; align-items: center; justify-content: center; color: #a78bfa; font-size: 0.9rem; text-decoration: none; transition: all 0.2s ease; }
.quick-action:hover { background: #8b5cf6; border-color: #8b5cf6; color: #fff; transform: translateY(-1px); }
.services-grid.list-view { display: flex; flex-direction: column; gap: 0.75rem; }
.services-grid.list-view .service-card { flex-direction: row; align-items: center; padding: 0.75rem 1rem; }
.services-grid.list-view .card-header-zone { padding: 0; border: none; background: transparent; flex: 1; align-items: center; }
.services-grid.list-view .service-icon-box { width: 40px; height: 40px; font-size: 1rem; }
.services-grid.list-view .card-body-zone { display: none; }
.services-grid.list-view .card-footer-zone { padding: 0; background: transparent; border: none; gap: 0.75rem; width: auto; }
.services-grid.list-view .manage-btn { padding: 0.5rem 1rem; flex: none; }
.empty-state { border: 1px dashed rgba(139,92,246,0.3); background: #16132a; border-radius: 16px; padding: 4rem 2rem; text-align: center; }
.empty-icon { width: 64px; height: 64px; background: rgba(139,92,246,0.1); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: #8b5cf6; font-size: 1.75rem; }
.empty-state h3 { font-size: 1.25rem; font-weight: 600; color: #e2e8f0; margin: 0 0 0.5rem; }
.empty-state p  { font-size: 0.9rem; color: #94a3b8; margin: 0 0 1.5rem; }
.empty-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff !important; font-size: 0.9rem; font-weight: 600; border-radius: 10px; text-decoration: none; transition: all 0.2s ease; }
.empty-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(139,92,246,0.3); text-decoration: none; }
@media (max-width: 768px) {
    .services-grid.list-view .service-card { flex-direction: column; align-items: stretch; gap: 1rem; }
    .services-grid.list-view .card-footer-zone { flex-direction: column; width: 100%; }
}

/* =======================================================
   Support Ticket Submit (Step 2 form + Step 1 cards)
   ======================================================= */
.ticket-form-card { background: #16132a; border-radius: 16px; border: 1px solid rgba(139,92,246,0.08); box-shadow: 0 1px 3px rgba(0,0,0,0.3); overflow: hidden; width: 100%; }
.ticket-form-header { padding: 1.5rem; border-bottom: 1px solid rgba(139,92,246,0.08); }
.ticket-form-header h2 { font-size: 1.25rem; font-weight: 700; color: #e2e8f0; margin: 0 0 0.375rem; }
.ticket-form-header p { font-size: 0.9375rem; color: #718096; margin: 0; }
.ticket-form-body { padding: 1.5rem; }
.tf-row { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.tf-row-2 { grid-template-columns: 1fr 1fr; }
.tf-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) { .tf-row-2, .tf-row-3 { grid-template-columns: 1fr; } }
.tf-group { display: flex; flex-direction: column; }
.tf-group label { font-size: 0.875rem; font-weight: 500; color: #cbd5e1; margin-bottom: 0.5rem; }
.tf-group input, .tf-group select, .tf-group textarea { width: 100%; padding: 0.75rem 1rem; font-size: 0.9375rem; color: #e2e8f0; background: #16132a; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px; transition: all 0.15s ease; }
.tf-group input:focus, .tf-group select:focus, .tf-group textarea:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,0.1); }
.tf-group input:disabled, .tf-group select:disabled { background: #1c1833; color: #718096; }
.tf-group textarea { min-height: 200px; resize: vertical; }
.tf-attachments { background: #1c1833; border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; }
.tf-attachments-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.tf-attachments-header label { font-size: 0.875rem; font-weight: 500; color: #cbd5e1; margin: 0; }
.tf-add-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: #16132a; border: 1px solid rgba(139,92,246,0.15); border-radius: 8px; font-size: 0.8125rem; font-weight: 500; color: #cbd5e1; cursor: pointer; transition: all 0.15s ease; }
.tf-add-btn:hover { border-color: #8b5cf6; color: #7c3aed; }
.tf-add-btn i { color: #8b5cf6; }
.tf-attachments-hint { font-size: 0.8125rem; color: #718096; margin-top: 0.75rem; }
.tf-attachments-hint i { color: #8b5cf6; margin-right: 0.25rem; }
.ticket-form-footer { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; border-top: 1px solid rgba(139,92,246,0.08); background: #1c1833; }
.tf-submit-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 2rem; background: linear-gradient(135deg, #7c3aed, #6366f1); color: #fff; border: none; border-radius: 10px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; }
.tf-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,0.35); }
.tf-cancel-btn { display: inline-flex; align-items: center; padding: 0.75rem 1.5rem; background: #16132a; color: #718096; border: 1px solid rgba(139,92,246,0.15); border-radius: 10px; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: all 0.15s ease; }
.tf-cancel-btn:hover { border-color: rgba(139,92,246,0.2); background: #1c1833; color: #cbd5e1; text-decoration: none; }
.st-hero { background: linear-gradient(135deg, #7c3aed 0%, #6366f1 100%); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; }
.st-hero h2 { color: #fff; font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; }
.st-hero p  { color: rgba(255,255,255,0.85); margin: 0; font-size: 0.9375rem; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; max-width: 900px; margin: 0 auto; }
.st-card { background: #16132a; border-radius: 14px; border: 1px solid rgba(139,92,246,0.08); padding: 1.5rem; transition: all 0.2s ease; text-decoration: none; display: block; }
.st-card:hover { border-color: rgba(139,92,246,0.4); box-shadow: 0 8px 24px rgba(139,92,246,0.12); transform: translateY(-2px); }
.st-card-inner  { display: flex; align-items: flex-start; gap: 1rem; }
.st-card-icon   { width: 48px; height: 48px; background: linear-gradient(135deg, #7c3aed, #6366f1); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.st-card-icon i { color: #fff; font-size: 1.25rem; }
.st-card-content { flex: 1; }
.st-card-title  { font-size: 1.125rem; font-weight: 600; color: #e2e8f0; margin: 0 0 0.375rem; }
.st-card:hover .st-card-title { color: #7c3aed; }
.st-card-desc   { font-size: 0.875rem; color: #718096; margin: 0; line-height: 1.5; }
.st-card-arrow  { width: 32px; height: 32px; background: rgba(139,92,246,0.12); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s ease; }
.st-card:hover .st-card-arrow { background: #7c3aed; }
.st-card-arrow i { color: #7c3aed; font-size: 0.75rem; transition: color 0.2s ease; }
.st-card:hover .st-card-arrow i { color: #fff; }

/* =======================================================
   View Invoice
   ======================================================= */
/* Container Principal */
.invoice-container { max-width: 1100px; width: 95%; margin: 0 auto; padding: 2.5rem 0; }

/* Carduri Moderne */
.invoice-card { background: #16132a; border: 1px solid rgba(139,92,246,0.15); border-radius: 1.25rem; padding: 3rem; margin-bottom: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.invoice-card-sm { background: #1c1833; border: 1px solid rgba(139,92,246,0.1); border-radius: 1rem; padding: 1.5rem; }

/* Bara de Sus */
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; }
.btn-modern { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: 1.05rem; font-weight: 600; border-radius: 0.75rem; text-decoration: none !important; transition: all 0.2s; cursor: pointer; border: none; }
.btn-secondary { background: #1c1833; color: #e2e8f0; border: 1px solid rgba(139,92,246,0.2); }
.btn-secondary:hover { background: rgba(139,92,246,0.1); border-color: rgba(139,92,246,0.4); color: #fff; transform: translateY(-1px); }

/* Grid-uri */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.grid-4 { display: grid; grid-template-columns: 1fr 1fr minmax(200px, 1.5fr) auto; gap: 1.5rem; background: #1c1833; padding: 1.5rem; border-radius: 1rem; margin-bottom: 2.5rem; border: 1px solid rgba(139,92,246,0.1); align-items: center; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid-4 { grid-template-columns: 1fr; } }

/* Etichete si Texte */
.info-label { font-size: 0.95rem; color: #8b5cf6; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 0.5rem; display: block; }
.info-value { font-size: 1.15rem; color: #f8fafc; font-weight: 500; display: block; }

/* Adresele */
address { font-style: normal; line-height: 1.8; color: #a0aec0; font-size: 1.05rem; margin: 0; }
address strong { color: #f8fafc; font-size: 1.25rem; display: block; margin-bottom: 0.5rem; }

/* Badge-uri Status Factură */
.invoice-container .status-badge { display: inline-flex; align-items: center; padding: 0.5rem 1.25rem; font-size: 0.875rem; font-weight: 700; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.06em; width: auto; }
.status-unpaid   { background: rgba(245,158,11,0.15);   color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.status-paid     { background: rgba(16,185,129,0.15);   color: #34d399; border: 1px solid rgba(16,185,129,0.3); }
.status-draft    { background: rgba(148,163,184,0.15);  color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }
.status-refunded { background: rgba(56,189,248,0.15);   color: #38bdf8; border: 1px solid rgba(56,189,248,0.3); }
.status-cancelled { background: rgba(239,68,68,0.15);   color: #f87171; border: 1px solid rgba(239,68,68,0.3); }

/* Buton de Plata */
.payment-btn-wrapper { min-width: 200px; }
.payment-btn-wrapper input[type="submit"],
.payment-btn-wrapper button[type="submit"],
.payment-btn-wrapper button:not([type="button"]) {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.875rem 2rem !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(139,92,246,0.35) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    white-space: nowrap !important;
}
.payment-btn-wrapper input[type="submit"]:hover,
.payment-btn-wrapper button:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(139,92,246,0.5) !important; }
.payment-btn-wrapper img { max-width: 100%; border-radius: 0.5rem; cursor: pointer; display: block; }

/* Country select and other generated selects */
select[name="country"],
select[id*="country"],
select[name="paymentmethod"],
select[name="accountLanguage"],
select[name="billingcid"],
select[name="securityqid"] {
    width: 100% !important;
    max-width: 100% !important;
    color: #e2e8f0 !important;
    background-color: #16132a !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}
select option {
    background: #16132a !important;
    color: #e2e8f0 !important;
}

/* Gateway dropdown styling */
[data-role="paymethod-info"] select,
[data-role="paymethod-info"] .gatewaydropdown select {
    background: #1c1833 !important;
    border: 1px solid rgba(139,92,246,0.25) !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
    padding: 0 32px 0 12px !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 44px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    outline: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
[data-role="paymethod-info"] select:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.15) !important;
}

/* Tabel Produse Factură */
.table-custom { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 2rem; }
.table-custom th { background: #1c1833; color: #94a3b8; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 1.25rem 1.5rem; text-align: left; font-weight: 600; border-bottom: 2px solid rgba(139,92,246,0.1); }
.table-custom th:first-child { border-radius: 1rem 0 0 0; }
.table-custom th:last-child { border-radius: 0 1rem 0 0; text-align: right; }
.table-custom td { padding: 1.5rem; border-bottom: 1px solid rgba(139,92,246,0.08); color: #e2e8f0; font-size: 1.1rem; }
.table-custom td:last-child { text-align: right; font-weight: 500; color: #f8fafc; }
.table-custom tbody tr:hover td { background: rgba(139,92,246,0.05); }

/* Totaluri */
.totals-container { width: 100%; max-width: 450px; margin-left: auto; }
.total-row { display: flex; justify-content: space-between; padding: 0.75rem 1.5rem; color: #a0aec0; font-size: 1.1rem; }
.total-row span:last-child { color: #e2e8f0; font-weight: 500; }
.total-row.final { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; border-radius: 1rem; padding: 1.5rem 1.75rem; margin-top: 1rem; font-size: 1.6rem; font-weight: 800; box-shadow: 0 4px 15px rgba(124,58,237,0.3); }
.total-row.final span { color: #fff !important; }

/* Alerte Invoice */
.invoice-alert-success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: #34d399; padding: 1.25rem 1.5rem; border-radius: 1rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; font-size: 1.05rem; font-weight: 500; }
.invoice-alert-danger  { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #f87171; padding: 1.25rem 1.5rem; border-radius: 1rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; font-size: 1.05rem; font-weight: 500; }
.invoice-alert-info    { background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.3); color: #38bdf8; padding: 1.25rem 1.5rem; border-radius: 1rem; margin-bottom: 2rem; display: flex; align-items: center; gap: 1rem; font-size: 1.05rem; font-weight: 500; }

@media (max-width: 768px) {
    .grid-2, .grid-4 { grid-template-columns: 1fr; gap: 1.5rem; }
    .top-bar { flex-direction: column; align-items: stretch; text-align: center; }
    .invoice-card { padding: 1.5rem; }
    .table-custom th, .table-custom td { padding: 1rem; font-size: 1rem; }
}
@media print {
    .invoice-card, .invoice-card-sm, .grid-4 { background: #fff !important; border: 1px solid #ddd !important; box-shadow: none !important; color: #000 !important; }
    .hidden-print { display: none !important; }
    .table-custom th { background: #f8f9fa !important; border-bottom: 2px solid #ddd !important; color: #000 !important; }
    .table-custom td { border-bottom: 1px solid #ddd !important; color: #000 !important; }
    .total-row.final { background: #f8f9fa !important; border: 2px solid #000 !important; color: #000 !important; box-shadow: none !important; }
    .total-row.final span, address strong, h1, h2 { color: #000 !important; }
    .invoice-container .status-badge { border: 2px solid #000 !important; background: transparent !important; color: #000 !important; }
    .info-label { color: #555 !important; }
}

/* =======================================================
   Tickets List
   ======================================================= */
.tickets-dashboard { margin-bottom: 1.5rem; }
.tickets-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
@media (max-width: 1024px) { .tickets-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .tickets-stats { grid-template-columns: repeat(2, 1fr); } }
.tickets-table-wrapper { background: #16132a; border-radius: 10px; border: 1px solid rgba(139,92,246,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.15); overflow: hidden; }
.tickets-table-header { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(139,92,246,0.08); background: linear-gradient(135deg, #1c1833, #16132a); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.tickets-table-title { display: flex; align-items: center; gap: 8px; }
.tickets-table-title i { color: #8b5cf6; font-size: 1rem; }
.tickets-table-title h3 { font-size: 0.95rem; font-weight: 600; color: #e2e8f0; margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }
.btn-new-ticket { display: inline-flex; align-items: center; gap: 6px; padding: 0.5rem 1rem; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff !important; font-size: 0.8rem; font-weight: 600; border-radius: 6px; text-decoration: none !important; transition: all 0.2s ease; }
.btn-new-ticket:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(139,92,246,0.35); }
.ticket-icon-box { width: 32px; height: 32px; background: linear-gradient(135deg, #10b981, #059669); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 0.8rem; }

/* =======================================================
   Invoices List
   ======================================================= */
.invoices-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 1024px) { .invoices-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .invoices-stats { grid-template-columns: repeat(2, 1fr); } }

.invoices-table-wrapper { background: #16132a; border-radius: 12px; border: 1px solid rgba(139,92,246,0.12); box-shadow: 0 1px 3px rgba(0,0,0,0.15); overflow: hidden; }
.invoices-table-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(139,92,246,0.08); background: linear-gradient(135deg, #1c1833, #16132a); display: flex; align-items: center; gap: 10px; }
.invoices-table-header i { color: #8b5cf6; font-size: 1.1rem; }
.invoices-table-header h3 { font-size: 1.05rem; font-weight: 600; color: #e2e8f0; margin: 0; text-transform: uppercase; letter-spacing: 0.03em; }

/* =======================================================
   Product Details
   ======================================================= */
.pd-container { padding: 0; }
.nav-tabs .tabdrop, .nav-tabs .dropdown-toggle, .tabdrop { display: none !important; }
.nav-tabs-overflow { flex-wrap: wrap !important; }
.pd-main-card { background: #16132a; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); border: 1px solid rgba(139,92,246,0.15); overflow: hidden; margin-bottom: 1.5rem; }
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 768px) { .pd-grid { grid-template-columns: 1fr; } }
.pd-status-card { background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #4f46e5 100%); padding: 2.5rem 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; position: relative; overflow: hidden; }
.pd-status-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%); pointer-events: none; }
.pd-status-icon { width: 80px; height: 80px; background: rgba(255,255,255,0.15); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; backdrop-filter: blur(10px); }
.pd-status-icon i { font-size: 2rem; color: #fff; }
.pd-product-name  { color: #fff; font-size: 1.375rem; font-weight: 700; margin: 0 0 0.375rem; text-align: center; }
.pd-product-group { color: rgba(255,255,255,0.75); font-size: 0.875rem; margin: 0 0 1.25rem; text-align: center; }
.pd-status-badge  { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 30px; color: #fff; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.pd-status-badge i { font-size: 0.5rem; }
.pd-details-panel { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.pd-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid rgba(139,92,246,0.08); }
.pd-detail-row:last-child { border-bottom: none; }
.pd-detail-label { font-size: 0.8125rem; color: #718096; font-weight: 500; }
.pd-detail-value { font-size: 0.9375rem; color: #e2e8f0; font-weight: 600; text-align: right; }
.pd-detail-value.price { color: #8b5cf6; }
.pd-actions { display: flex; gap: 0.75rem; padding: 1.5rem 2rem; background: #1c1833; border-top: 1px solid rgba(139,92,246,0.08); flex-wrap: wrap; }
.pd-btn-upgrade { flex: 1; min-width: 140px; padding: 12px 20px; background: linear-gradient(135deg, #22c55e, #6ee7b7); color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 10px; border: none; text-decoration: none; text-align: center; box-shadow: 0 4px 14px rgba(34,197,94,0.25); transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pd-btn-upgrade:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(34,197,94,0.35); color: #fff; text-decoration: none; }
.pd-btn-renew { flex: 1; min-width: 140px; padding: 12px 20px; background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 10px; border: none; text-decoration: none; text-align: center; box-shadow: 0 4px 14px rgba(139,92,246,0.25); transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pd-btn-renew:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139,92,246,0.35); color: #fff; text-decoration: none; }
.pd-btn-cancel { flex: 1; min-width: 140px; padding: 12px 20px; background: #16132a; color: #ef4444; font-size: 0.875rem; font-weight: 600; border-radius: 10px; border: 1px solid #fecaca; text-decoration: none; text-align: center; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.pd-btn-cancel:hover { background: rgba(239,68,68,0.1); border-color: #ef4444; color: #dc2626; text-decoration: none; }
.pd-btn-cancel.disabled { opacity: 0.5; pointer-events: none; }
.pd-tabs { background: #16132a; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.04); border: 1px solid rgba(139,92,246,0.15); overflow: hidden; margin-top: 1.5rem; }
.pd-tabs-nav { display: flex; border-bottom: 1px solid rgba(139,92,246,0.15); padding: 0 1rem; gap: 0.5rem; overflow-x: auto; background: #1c1833; }
.pd-tab-btn { padding: 1rem 1.25rem; background: transparent; border: none; border-bottom: 2px solid transparent; color: #718096; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; }
.pd-tab-btn:hover { color: #8b5cf6; text-decoration: none; }
.pd-tab-btn.active { color: #8b5cf6; border-bottom-color: #8b5cf6; background: #16132a; }
.pd-tab-btn i { font-size: 0.875rem; color: #8b5cf6; }
.pd-tabs-content { padding: 1.5rem 2rem; }
.pd-info-row { display: flex; padding: 0.875rem 0; border-bottom: 1px solid rgba(139,92,246,0.08); }
.pd-info-row:last-child { border-bottom: none; }
.pd-info-label { flex: 0 0 40%; font-size: 0.875rem; font-weight: 600; color: #cbd5e1; text-align: right; padding-right: 1.5rem; }
.pd-info-value { flex: 1; font-size: 0.875rem; color: #718096; font-family: 'Monaco', 'Menlo', monospace; }
.pd-info-value a { color: #8b5cf6; text-decoration: none; }
.pd-info-value a:hover { text-decoration: underline; }
.pd-alert { padding: 1rem 1.25rem; border-radius: 12px; margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; }
.pd-alert-warning { background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(217,119,6,0.05));   border: 1px solid rgba(245,158,11,0.2); color: #fcd34d; }
.pd-alert-danger  { background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(220,38,38,0.05));    border: 1px solid rgba(239,68,68,0.2);  color: #fca5a5; }
.pd-alert-success { background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(22,163,74,0.05));   border: 1px solid rgba(34,197,94,0.2);  color: #6ee7b7; }
.pd-alert-info    { background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(37,99,235,0.05));   border: 1px solid rgba(59,130,246,0.2); color: #93c5fd; }
.product-details-tab-container { background: #16132a; border: 1px solid rgba(139,92,246,0.15); border-top: none; border-radius: 0 0 16px 16px; padding: 2rem; }
.module-client-area { background: #1c1833; border-radius: 12px; padding: 1.5rem; }
.pd-tab-actions { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.pd-tab-btn-outline { padding: 10px 20px; background: #16132a; color: #718096; font-size: 0.875rem; font-weight: 500; border-radius: 10px; border: 1px solid rgba(139,92,246,0.15); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: all 0.2s ease; }
.pd-tab-btn-outline:hover { border-color: #8b5cf6; color: #8b5cf6; background: rgba(139,92,246,0.04); text-decoration: none; }
.pd-tab-btn-outline i { color: #8b5cf6; }

/* =======================================================
   Knowledgebase
   ======================================================= */
.kb-search-box { background: linear-gradient(135deg, #7c3aed, #6366f1); border-radius: 16px; padding: 2rem; margin-bottom: 2rem; overflow: visible; }
.kb-search-form { display: flex; max-width: 800px; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.25); }
.kb-search-input { flex: 1; padding: 0.875rem 1.25rem; font-size: 0.9375rem; border: none; background: rgba(255,255,255,0.15) !important; outline: none; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: none !important; }
.kb-search-input::placeholder { color: rgba(255,255,255,0.65) !important; }
.kb-search-btn { background: rgba(255,255,255,0.2); color: #fff; font-weight: 600; padding: 0 1.5rem; border: none; border-left: 1px solid rgba(255,255,255,0.2); cursor: pointer; transition: background 0.2s; font-size: 0.9375rem; white-space: nowrap; }
.kb-search-btn:hover { background: rgba(255,255,255,0.35); }
.kb-section-title { font-size: 1.5rem; font-weight: 700; color: #e2e8f0; margin-bottom: 1.5rem; }
.kb-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.kb-category-card { background: #16132a; border-radius: 16px; border: 1px solid rgba(139,92,246,0.08); padding: 1.5rem; transition: all 0.2s ease; }
.kb-category-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.kb-category-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: #e2e8f0; font-weight: 600; margin-bottom: 0.5rem; }
.kb-category-link:hover { color: #7c3aed; }
.kb-category-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #7c3aed, #6366f1); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kb-category-icon i { color: #fff; }
.kb-category-count { margin-left: auto; background: rgba(139,92,246,0.12); color: #7c3aed; font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.625rem; border-radius: 50px; }
.kb-category-desc { font-size: 0.875rem; color: #718096; margin: 0; padding-left: 52px; }
.kb-edit-link { font-size: 0.8125rem; color: #718096; text-decoration: none; padding-left: 52px; display: block; margin-top: 0.25rem; }
.kb-edit-link:hover { color: #7c3aed; }
.kb-articles { background: #16132a; border-radius: 16px; border: 1px solid rgba(139,92,246,0.08); overflow: hidden; }
.kb-article-item { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(139,92,246,0.08); transition: background 0.15s ease; }
.kb-article-item:last-child { border-bottom: none; }
.kb-article-item:hover { background: rgba(139,92,246,0.12); }
.kb-article-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: #e2e8f0; font-weight: 500; }
.kb-article-link:hover { color: #7c3aed; }
.kb-article-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #7c3aed, #6366f1); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kb-article-icon i, .kb-article-icon .glyphicon { color: #fff; font-size: 0.875rem; }
.kb-article-excerpt { font-size: 0.875rem; color: #718096; margin: 0.5rem 0 0 44px; }