/* =============================================================================
   x99 Tier C1 vanilla overrides — Edgar 2026-04-29
   ----------------------------------------------------------------------------
   Aplica identidade x99 às páginas WHMCS vanilla (forms Bootstrap stock)
   sem reescrever os TPLs. Cobre:
     - clientareadetails (Account details)
     - user-password (Change password)
     - clientareasecurity (Security settings / 2FA)
     - masspay (Mass payment)
     - printinvoice (Print/PDF invoice)
     - creditcard (saved cards management)

   Filosofia: detecta via body.page-* e estiliza .section/.panel-form/.form-control
   pra usar tokens canonical. Não muda HTML, não quebra fluxo WHMCS.
   ============================================================================= */

/* Surfaces alvo */
body.page-clientareadetails .section,
body.page-changepw .section,
body.page-clientareasecurity .section,
body.page-masspay .section,
body.page-printinvoice .section,
body.page-creditcard .section {
    margin-bottom: 24px;
}

body.page-clientareadetails .section-header,
body.page-changepw .section-header,
body.page-clientareasecurity .section-header,
body.page-masspay .section-header,
body.page-printinvoice .section-header,
body.page-creditcard .section-header {
    padding: 0 0 12px;
    border-bottom: 1px solid var(--c-border);
    margin-bottom: 16px;
}

body.page-clientareadetails .section-title,
body.page-changepw .section-title,
body.page-clientareasecurity .section-title,
body.page-masspay .section-title,
body.page-printinvoice .section-title,
body.page-creditcard .section-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text-primary);
    letter-spacing: -0.005em;
}

/* Painel ⇒ card x99 */
body.page-clientareadetails .panel,
body.page-changepw .panel,
body.page-clientareasecurity .panel,
body.page-masspay .panel,
body.page-printinvoice .panel,
body.page-creditcard .panel {
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 14px !important;
    box-shadow: var(--sh-card) !important;
    margin-bottom: 0;
}

body.page-clientareadetails .panel-heading,
body.page-changepw .panel-heading,
body.page-clientareasecurity .panel-heading,
body.page-masspay .panel-heading,
body.page-printinvoice .panel-heading,
body.page-creditcard .panel-heading {
    background: var(--c-bg-sunken) !important;
    border-bottom: 1px solid var(--c-border) !important;
    color: var(--c-text-primary) !important;
    padding: 14px 18px !important;
}

body.page-clientareadetails .panel-title,
body.page-changepw .panel-title,
body.page-clientareasecurity .panel-title,
body.page-masspay .panel-title,
body.page-printinvoice .panel-title,
body.page-creditcard .panel-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-text-primary) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.page-clientareadetails .panel-body,
body.page-changepw .panel-body,
body.page-clientareasecurity .panel-body,
body.page-masspay .panel-body,
body.page-printinvoice .panel-body,
body.page-creditcard .panel-body {
    padding: 20px 24px !important;
    color: var(--c-text-primary);
}

/* Form labels + inputs */
body.page-clientareadetails .control-label,
body.page-changepw .control-label,
body.page-clientareasecurity .control-label,
body.page-masspay .control-label,
body.page-creditcard .control-label,
body.page-clientareadetails label,
body.page-changepw label,
body.page-clientareasecurity label,
body.page-masspay label,
body.page-creditcard label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--c-text-secondary) !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.02em;
}

body.page-clientareadetails .form-control,
body.page-changepw .form-control,
body.page-clientareasecurity .form-control,
body.page-masspay .form-control,
body.page-creditcard .form-control,
body.page-clientareadetails input[type="text"],
body.page-clientareadetails input[type="email"],
body.page-clientareadetails input[type="tel"],
body.page-clientareadetails input[type="password"],
body.page-clientareadetails select,
body.page-clientareadetails textarea,
body.page-changepw input[type="password"],
body.page-clientareasecurity input,
body.page-clientareasecurity select,
body.page-creditcard input,
body.page-creditcard select {
    background: var(--c-bg-base) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: 8px !important;
    color: var(--c-text-primary) !important;
    padding: 10px 14px !important;
    font-size: 13.5px !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

body.page-clientareadetails .form-control:focus,
body.page-changepw .form-control:focus,
body.page-clientareasecurity .form-control:focus,
body.page-masspay .form-control:focus,
body.page-creditcard .form-control:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px var(--c-accent-soft) !important;
    outline: none !important;
}

body.page-clientareadetails .form-control[readonly],
body.page-changepw .form-control[readonly],
body.page-clientareasecurity .form-control[readonly] {
    background: var(--c-surface) !important;
    color: var(--c-text-muted) !important;
    cursor: not-allowed;
}

body.page-clientareadetails .form-group,
body.page-changepw .form-group,
body.page-clientareasecurity .form-group,
body.page-masspay .form-group,
body.page-creditcard .form-group {
    margin-bottom: 18px;
}

/* Buttons primários — pattern x99 invertido (danger default → accent hover) */
body.page-clientareadetails .btn-primary,
body.page-changepw .btn-primary,
body.page-clientareasecurity .btn-primary,
body.page-masspay .btn-primary,
body.page-creditcard .btn-primary {
    background: var(--c-danger) !important;
    border: 1px solid var(--c-danger) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    transition: background 150ms ease !important;
}

body.page-clientareadetails .btn-primary:hover,
body.page-clientareadetails .btn-primary:focus,
body.page-changepw .btn-primary:hover,
body.page-clientareasecurity .btn-primary:hover,
body.page-masspay .btn-primary:hover,
body.page-creditcard .btn-primary:hover,
body.page-clientareadetails .btn-primary:focus,
body.page-changepw .btn-primary:focus,
body.page-clientareasecurity .btn-primary:focus,
body.page-masspay .btn-primary:focus,
body.page-creditcard .btn-primary:focus {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #fff !important;
    outline: none !important;
}

/* Botões secundários e cancelar */
body.page-clientareadetails .btn-default,
body.page-changepw .btn-default,
body.page-clientareasecurity .btn-default,
body.page-masspay .btn-default,
body.page-creditcard .btn-default,
body.page-clientareadetails .btn-secondary,
body.page-changepw .btn-secondary,
body.page-clientareasecurity .btn-secondary,
body.page-masspay .btn-secondary,
body.page-creditcard .btn-secondary {
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--c-border-strong) !important;
    color: var(--c-text-primary) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: background 150ms ease, border-color 150ms ease !important;
}

body.page-clientareadetails .btn-default:hover,
body.page-changepw .btn-default:hover,
body.page-clientareasecurity .btn-default:hover,
body.page-masspay .btn-default:hover,
body.page-creditcard .btn-default:hover {
    background: var(--c-surface-hover) !important;
}

/* Alerts / messages */
body.page-clientareadetails .alert,
body.page-changepw .alert,
body.page-clientareasecurity .alert,
body.page-masspay .alert,
body.page-creditcard .alert,
body.page-clientareadetails .message,
body.page-changepw .message,
body.page-clientareasecurity .message,
body.page-masspay .message,
body.page-creditcard .message {
    border-radius: 10px !important;
    padding: 12px 18px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
    border-width: 1px !important;
}

body.page-clientareadetails .alert-success,
body.page-changepw .alert-success,
body.page-clientareasecurity .alert-success,
body.page-masspay .alert-success,
body.page-creditcard .alert-success {
    background: var(--c-success-soft) !important;
    border: 1px solid var(--c-success) !important;
    color: var(--c-success) !important;
}

body.page-clientareadetails .alert-danger,
body.page-changepw .alert-danger,
body.page-clientareasecurity .alert-danger,
body.page-masspay .alert-danger,
body.page-creditcard .alert-danger,
body.page-clientareadetails .alert-error,
body.page-changepw .alert-error,
body.page-clientareasecurity .alert-error,
body.page-masspay .alert-error,
body.page-creditcard .alert-error {
    background: var(--c-danger-soft) !important;
    border: 1px solid var(--c-danger) !important;
    color: var(--c-danger) !important;
}

body.page-clientareadetails .alert-info,
body.page-changepw .alert-info,
body.page-clientareasecurity .alert-info,
body.page-masspay .alert-info,
body.page-creditcard .alert-info {
    background: var(--c-info-soft) !important;
    border: 1px solid var(--c-info) !important;
    color: var(--c-info) !important;
}

body.page-clientareadetails .alert-warning,
body.page-changepw .alert-warning,
body.page-clientareasecurity .alert-warning,
body.page-masspay .alert-warning,
body.page-creditcard .alert-warning {
    background: var(--c-warning-soft) !important;
    border: 1px solid var(--c-warning) !important;
    color: var(--c-warning) !important;
}

/* Tables (creditcard, masspay, security backups) */
body.page-clientareadetails .table,
body.page-clientareasecurity .table,
body.page-masspay .table,
body.page-creditcard .table {
    background: transparent !important;
    color: var(--c-text-primary) !important;
}

body.page-clientareadetails .table > thead > tr > th,
body.page-clientareasecurity .table > thead > tr > th,
body.page-masspay .table > thead > tr > th,
body.page-creditcard .table > thead > tr > th {
    background: var(--c-bg-sunken) !important;
    color: var(--c-text-secondary) !important;
    border-bottom: 1px solid var(--c-border) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 14px !important;
}

body.page-clientareadetails .table > tbody > tr > td,
body.page-clientareasecurity .table > tbody > tr > td,
body.page-masspay .table > tbody > tr > td,
body.page-creditcard .table > tbody > tr > td {
    border-bottom: 1px solid var(--c-border) !important;
    color: var(--c-text-primary) !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
}

body.page-clientareadetails .table > tbody > tr:hover > td,
body.page-clientareasecurity .table > tbody > tr:hover > td,
body.page-masspay .table > tbody > tr:hover > td,
body.page-creditcard .table > tbody > tr:hover > td {
    background: var(--c-surface-hover) !important;
}

/* Modal/dialog (creditcard remove confirmations, etc) */
body.page-clientareadetails .modal-content,
body.page-clientareasecurity .modal-content,
body.page-creditcard .modal-content {
    background: var(--c-bg-elevated) !important;
    border: 1px solid var(--c-border-strong) !important;
    border-radius: 14px !important;
}

body.page-clientareadetails .modal-header,
body.page-clientareasecurity .modal-header,
body.page-creditcard .modal-header {
    background: var(--c-bg-sunken) !important;
    border-bottom: 1px solid var(--c-border) !important;
    border-radius: 14px 14px 0 0 !important;
}

/* Help text / form-text */
body.page-clientareadetails .help-block,
body.page-changepw .help-block,
body.page-clientareasecurity .help-block,
body.page-masspay .help-block,
body.page-creditcard .help-block,
body.page-clientareadetails .form-text,
body.page-changepw .form-text,
body.page-clientareasecurity .form-text,
body.page-masspay .form-text,
body.page-creditcard .form-text {
    color: var(--c-text-muted) !important;
    font-size: 12px !important;
    margin-top: 4px;
}

/* Checkboxes / radios — accent x99 */
body.page-clientareadetails input[type="checkbox"],
body.page-changepw input[type="checkbox"],
body.page-clientareasecurity input[type="checkbox"],
body.page-masspay input[type="checkbox"],
body.page-creditcard input[type="checkbox"],
body.page-clientareadetails input[type="radio"],
body.page-clientareasecurity input[type="radio"] {
    accent-color: var(--c-accent);
}

/* Page title hide (manda canonical x99 sem main-header) — opt-in via class
   `body.x99-canonical-vanilla` se quisermos esconder o title default; por
   default deixamos o title visível pra usuário ter contexto. */

/* Margem confortável no main-body pra não colar o conteúdo nas margens */
body.page-clientareadetails .main-body,
body.page-changepw .main-body,
body.page-clientareasecurity .main-body,
body.page-masspay .main-body,
body.page-printinvoice .main-body,
body.page-creditcard .main-body {
    padding: 24px 16px !important;
}