/* ============================================================
   CINDER TV - Reusable Component Library
   Source of truth for buttons, cards, badges, alerts, and form elements.
   Load via head.tpl after cinder-refined.css.
   ============================================================ */

/* ---- Buttons ---- */

.cinder-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    min-height: 42px;
    border-radius: var(--cinder-site-radius);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.cinder-btn:hover {
    transform: translateY(-1px);
    text-decoration: none !important;
}

.cinder-btn:focus-visible {
    outline: 2px solid rgba(var(--cinder-site-accent-rgb), 0.7);
    outline-offset: 2px;
}

.cinder-btn:disabled,
.cinder-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.cinder-btn-primary {
    background: linear-gradient(135deg, var(--cinder-site-accent), var(--cinder-site-accent-dark));
    border-color: rgba(79, 140, 255, 0.45);
    color: var(--cinder-site-accent-ink) !important;
    box-shadow: 0 8px 24px rgba(79, 140, 255, 0.18), 0 0 16px rgba(79, 140, 255, 0.25);
}

.cinder-btn-primary:hover {
    box-shadow: 0 12px 32px rgba(79, 140, 255, 0.28), 0 0 24px rgba(79, 140, 255, 0.35);
    color: var(--cinder-site-accent-ink) !important;
}

.cinder-btn-secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--cinder-site-border);
    color: var(--cinder-site-copy) !important;
}

.cinder-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--cinder-site-border-strong);
    color: var(--cinder-site-copy) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.cinder-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--cinder-site-copy-soft) !important;
}

.cinder-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--cinder-site-copy) !important;
}

.cinder-btn-sm {
    padding: 7px 14px;
    min-height: 34px;
    font-size: 13px;
}

.cinder-btn-lg {
    padding: 13px 24px;
    min-height: 52px;
    font-size: 15px;
}

.cinder-btn-block {
    width: 100%;
}

/* ---- Cards ---- */

.cinder-card {
    background: var(--cinder-site-surface);
    border: 1px solid var(--cinder-site-border);
    border-radius: var(--cinder-site-radius-lg);
    box-shadow: var(--cinder-site-shadow);
    color: var(--cinder-site-copy);
    overflow: hidden;
}

.cinder-card--featured {
    border-color: var(--cinder-site-border-strong);
    background: linear-gradient(180deg, rgba(79, 140, 255, 0.07), rgba(255, 255, 255, 0.01)), var(--cinder-site-surface);
    box-shadow: 0 20px 48px rgba(79, 140, 255, 0.1), 0 14px 36px rgba(0, 0, 0, 0.22);
}

.cinder-card__body {
    padding: 22px;
}

.cinder-card__header {
    padding: 16px 22px;
    border-bottom: 1px solid var(--cinder-site-border);
    background: rgba(255, 255, 255, 0.02);
}

.cinder-card__footer {
    padding: 14px 22px;
    border-top: 1px solid var(--cinder-site-border);
    background: rgba(255, 255, 255, 0.015);
}

/* ---- Badges ---- */

.cinder-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(79, 140, 255, 0.14);
    border: 1px solid rgba(79, 140, 255, 0.22);
    color: var(--cinder-site-accent-strong);
}

.cinder-badge--success {
    background: rgba(51, 194, 127, 0.12);
    border-color: rgba(51, 194, 127, 0.22);
    color: #7de8b5;
}

.cinder-badge--danger {
    background: rgba(255, 107, 107, 0.12);
    border-color: rgba(255, 107, 107, 0.22);
    color: #ff9d9d;
}

.cinder-badge--neutral {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--cinder-site-copy-soft);
}

/* ---- Alerts ---- */

.cinder-alert {
    padding: 14px 18px;
    border-radius: var(--cinder-site-radius);
    border: 1px solid var(--cinder-site-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--cinder-site-copy-soft);
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 16px;
}

.cinder-alert--info {
    background: rgba(79, 140, 255, 0.07);
    border-color: rgba(79, 140, 255, 0.18);
    color: #a8c7ff;
}

.cinder-alert--success {
    background: rgba(51, 194, 127, 0.08);
    border-color: rgba(51, 194, 127, 0.18);
    color: #97e7bd;
}

.cinder-alert--danger {
    background: rgba(255, 107, 107, 0.08);
    border-color: rgba(255, 107, 107, 0.18);
    color: #ff9d9d;
}

.cinder-alert--warning {
    background: rgba(240, 178, 77, 0.08);
    border-color: rgba(240, 178, 77, 0.18);
    color: #f6c77a;
}

/* ---- Kicker / Section Labels ---- */

.cinder-kicker {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cinder-site-copy-muted);
}

.cinder-kicker--accent {
    color: var(--cinder-site-accent);
}

/* ---- Divider ---- */

.cinder-divider {
    border: none;
    border-top: 1px solid var(--cinder-site-border);
    margin: 20px 0;
}

/* ---- Form Controls ---- */

.cinder-form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    min-height: 44px;
    background: rgba(8, 11, 16, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: var(--cinder-site-radius);
    color: var(--cinder-site-copy);
    font-size: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    -webkit-appearance: none;
    appearance: none;
}

.cinder-form-control:focus {
    outline: none;
    border-color: rgba(79, 140, 255, 0.42);
    box-shadow: 0 0 0 4px rgba(79, 140, 255, 0.12);
}

.cinder-form-control::placeholder {
    color: var(--cinder-site-copy-muted);
}

/* ---- Section Wrapper ---- */

.cinder-section {
    padding: 56px 0;
}

.cinder-section--sm {
    padding: 32px 0;
}

/* ============================================================
   BOOTSTRAP BRIDGE
   Maps raw Bootstrap controls in the logged-in client area onto
   the Cinder dark theme so un-themed templates inherit the look
   without per-file edits. Scoped to body.primary-bg-color so it
   never leaks into the WHMCS admin. header.tpl already themes
   .btn-primary/.btn-success/.btn-info — this fills the gaps.
   ============================================================ */

/* ---- Secondary / neutral buttons ---- */
body.primary-bg-color .btn-default,
body.primary-bg-color .btn-secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--cinder-site-border) !important;
    color: var(--cinder-site-copy) !important;
}

body.primary-bg-color .btn-default:hover,
body.primary-bg-color .btn-secondary:hover,
body.primary-bg-color .btn-default:focus,
body.primary-bg-color .btn-secondary:focus {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: var(--cinder-site-border-strong) !important;
    color: var(--cinder-site-copy) !important;
}

body.primary-bg-color .btn-warning {
    background: linear-gradient(135deg, var(--cinder-site-accent-soft), var(--cinder-site-accent)) !important;
    border: 1px solid rgba(var(--cinder-site-accent-rgb), 0.45) !important;
    color: var(--cinder-site-accent-ink) !important;
}

body.primary-bg-color .btn-danger {
    background: linear-gradient(135deg, #ff8585, #e65454) !important;
    border: 1px solid rgba(230, 84, 84, 0.5) !important;
    color: #2a0d0d !important;
}

body.primary-bg-color .btn-link {
    color: var(--cinder-site-accent-soft) !important;
}

body.primary-bg-color .btn-outline-primary,
body.primary-bg-color .btn-outline-secondary,
body.primary-bg-color .btn-outline-default {
    background: transparent !important;
    border: 1px solid var(--cinder-site-border-strong) !important;
    color: var(--cinder-site-accent-soft) !important;
}

/* Premium interaction polish for every Bootstrap button in the client
   area (keeps the .btn class so WHMCS JS hooks keep working). */
body.primary-bg-color .btn {
    border-radius: var(--cinder-site-radius);
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

body.primary-bg-color .btn:hover {
    transform: translateY(-1px);
}

body.primary-bg-color .btn:active {
    transform: translateY(0);
}

/* Button focus ring (diagnosis flagged missing focus states) */
body.primary-bg-color .btn:focus-visible {
    outline: 2px solid rgba(var(--cinder-site-accent-rgb), 0.7) !important;
    outline-offset: 2px;
}

/* ---- Panels / wells / cards (Bootstrap 3 + 4) ---- */
body.primary-bg-color .panel,
body.primary-bg-color .well,
body.primary-bg-color .card {
    background: var(--cinder-site-surface) !important;
    border: 1px solid var(--cinder-site-border) !important;
    border-radius: var(--cinder-site-radius-lg) !important;
    box-shadow: var(--cinder-site-shadow);
    color: var(--cinder-site-copy);
}

body.primary-bg-color .panel-heading,
body.primary-bg-color .card-header {
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom: 1px solid var(--cinder-site-border) !important;
    color: var(--cinder-site-copy) !important;
}

body.primary-bg-color .panel-footer,
body.primary-bg-color .card-footer {
    background: rgba(255, 255, 255, 0.015) !important;
    border-top: 1px solid var(--cinder-site-border) !important;
    color: var(--cinder-site-copy-soft) !important;
}

body.primary-bg-color .panel-title {
    color: var(--cinder-site-copy) !important;
}

/* ---- List groups ---- */
body.primary-bg-color .list-group-item {
    background: transparent !important;
    border-color: var(--cinder-site-border) !important;
    color: var(--cinder-site-copy-soft) !important;
}

body.primary-bg-color .list-group-item.active,
body.primary-bg-color .list-group-item-action:hover {
    background: rgba(var(--cinder-site-accent-rgb), 0.12) !important;
    border-color: var(--cinder-site-border-strong) !important;
    color: var(--cinder-site-copy) !important;
}

/* ---- Tables ---- */
body.primary-bg-color .table {
    color: var(--cinder-site-copy-soft);
}

body.primary-bg-color .table > thead > tr > th,
body.primary-bg-color .table thead th {
    border-bottom: 1px solid var(--cinder-site-border) !important;
    color: var(--cinder-site-copy) !important;
    font-weight: 700;
}

body.primary-bg-color .table > tbody > tr > td,
body.primary-bg-color .table > tbody > tr > th,
body.primary-bg-color .table td,
body.primary-bg-color .table th {
    border-color: var(--cinder-site-border) !important;
}

body.primary-bg-color .table-hover > tbody > tr:hover,
body.primary-bg-color .table-hover > tbody > tr:hover > td {
    background: rgba(255, 255, 255, 0.03) !important;
}

body.primary-bg-color .table-striped > tbody > tr:nth-of-type(odd),
body.primary-bg-color .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: rgba(255, 255, 255, 0.022) !important;
}

/* ---- Form controls ---- */
body.primary-bg-color .form-control,
body.primary-bg-color select.form-control,
body.primary-bg-color textarea.form-control {
    background: rgba(8, 11, 16, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    color: var(--cinder-site-copy) !important;
}

body.primary-bg-color .form-control:focus {
    border-color: rgba(var(--cinder-site-accent-rgb), 0.42) !important;
    box-shadow: 0 0 0 4px rgba(var(--cinder-site-accent-rgb), 0.12) !important;
}

body.primary-bg-color .form-control::placeholder {
    color: var(--cinder-site-copy-muted) !important;
}

body.primary-bg-color .input-group-addon,
body.primary-bg-color .input-group-text {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    color: var(--cinder-site-copy-soft) !important;
}

/* ---- Alerts ---- */
body.primary-bg-color .alert {
    border-radius: var(--cinder-site-radius) !important;
}

body.primary-bg-color .alert-info {
    background: rgba(var(--cinder-site-accent-rgb), 0.08) !important;
    border: 1px solid rgba(var(--cinder-site-accent-rgb), 0.2) !important;
    color: var(--cinder-site-copy) !important;
}

body.primary-bg-color .alert-success {
    background: rgba(51, 194, 127, 0.1) !important;
    border: 1px solid rgba(51, 194, 127, 0.22) !important;
    color: #97e7bd !important;
}

body.primary-bg-color .alert-warning {
    background: rgba(240, 178, 77, 0.1) !important;
    border: 1px solid rgba(240, 178, 77, 0.22) !important;
    color: #f6c77a !important;
}

body.primary-bg-color .alert-danger {
    background: rgba(255, 107, 107, 0.1) !important;
    border: 1px solid rgba(255, 107, 107, 0.22) !important;
    color: #ff9d9d !important;
}

/* ---- Modals ---- */
body.primary-bg-color .modal-content {
    background: var(--cinder-site-surface-strong) !important;
    border: 1px solid var(--cinder-site-border) !important;
    border-radius: var(--cinder-site-radius-lg) !important;
    color: var(--cinder-site-copy);
}

body.primary-bg-color .modal-header,
body.primary-bg-color .modal-footer {
    border-color: var(--cinder-site-border) !important;
}

body.primary-bg-color .modal-header .close,
body.primary-bg-color .close {
    color: var(--cinder-site-copy) !important;
    opacity: 0.7;
    text-shadow: none;
}

/* ---- Nav tabs / pills ---- */
body.primary-bg-color .nav-tabs {
    border-bottom: 1px solid var(--cinder-site-border) !important;
}

body.primary-bg-color .nav-tabs > li > a,
body.primary-bg-color .nav-tabs .nav-link {
    color: var(--cinder-site-copy-soft) !important;
    border: none !important;
}

body.primary-bg-color .nav-tabs > li.active > a,
body.primary-bg-color .nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--cinder-site-accent-soft) !important;
    border-bottom: 2px solid var(--cinder-site-accent) !important;
}

/* ---- Pagination ---- */
body.primary-bg-color .pagination > li > a,
body.primary-bg-color .page-link {
    background: var(--cinder-site-surface) !important;
    border-color: var(--cinder-site-border) !important;
    color: var(--cinder-site-copy-soft) !important;
}

body.primary-bg-color .pagination > .active > a,
body.primary-bg-color .page-item.active .page-link {
    background: rgba(var(--cinder-site-accent-rgb), 0.16) !important;
    border-color: var(--cinder-site-border-strong) !important;
    color: var(--cinder-site-copy) !important;
}