/*
 * Module 3: Account-level theme overrides via CSS variables.
 * All rules are scoped to .theme-user so admin UI is never affected.
 * Variables are injected into :root by header.php for authenticated non-admin users.
 *
 * Tokens:
 *   --brand-primary   (default: #ff6699)
 *   --brand-secondary (default: #4890e6)
 *   --bg              (default: #ffffff)
 *   --text            (default: #1f2937)
 *   --radius          (default: 10px)
 */

/* ---- Body ---- */
.theme-user {
    background-color: var(--bg, #ffffff);
    color: var(--text, #1f2937);
}

/* ---- Sidebar Nav (replaces old header nav) ---- */
.theme-user .plico-sidebar {
    --sidebar-accent: var(--brand-primary, #ff6699);
}

.theme-user .plico-nav-item.active::before {
    background: var(--brand-primary, #ff6699);
}

/* ---- Buttons: global border-radius ---- */
.theme-user .btn,
.theme-user .ww-btn,
.theme-user .btn-modern,
.theme-user .new-page-button,
.theme-user button[type="submit"],
.theme-user input[type="submit"] {
    border-radius: var(--radius, 10px);
}

/* ---- Buttons: primary colours ---- */
.theme-user .btn-modern-primary,
.theme-user .new-page-button,
.theme-user .btn-primary {
    background: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
    border-radius: var(--radius, 10px);
}

.theme-user .btn-modern-primary:hover,
.theme-user .new-page-button:hover,
.theme-user .btn-primary:hover {
    background: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
    filter: brightness(0.9);
}

/* ---- Buttons: outline-primary ---- */
.theme-user .btn-outline-primary {
    color: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
    border-radius: var(--radius, 10px);
}

.theme-user .btn-outline-primary:hover {
    background: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
    color: #ffffff;
}

/* ---- Buttons: secondary colours ---- */
.theme-user .btn-modern-secondary {
    background: var(--brand-secondary, #4890e6);
    border-radius: var(--radius, 10px);
}

.theme-user .btn-modern-secondary:hover {
    background: var(--brand-secondary, #4890e6);
    filter: brightness(0.9);
}

/* ---- Buttons: outline-secondary ---- */
.theme-user .btn-outline-secondary {
    border-radius: var(--radius, 10px);
}

/* ---- Buttons: danger ---- */
.theme-user .btn-outline-danger {
    border-radius: var(--radius, 10px);
}

/* ---- Buttons: form-control inputs ---- */
.theme-user .form-control:focus {
    border-color: var(--brand-primary, #ff6699);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #ff6699) 15%, transparent);
}

/* ---- Checkboxes ---- */
.theme-user input[type="checkbox"] {
    accent-color: var(--brand-primary, #ff6699);
}

/* ---- Pagination active ---- */
.theme-user .ww-pagination ul li.active span.current {
    background-color: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
}

/* ---- Links ---- */
.theme-user a {
    color: var(--brand-primary, #ff6699);
}
/* Preserve explicit button text colors — don't brand-theme <a> elements used as buttons */
.theme-user a.btn,
.theme-user a.btn-modern,
.theme-user a.btn-modern-primary,
.theme-user a.btn-collab-primary,
.theme-user a.btn-dom-primary,
.theme-user a.btn-dom-sm,
.theme-user a.strategy-link-strategy,
.theme-user a.strategy-link-plans,
.theme-user a.tg-btn-use,
.theme-user a.ww-btn,
.theme-user a[class*="btn-outline-"],
.theme-user a.sms-btn {
    color: revert;
}
.theme-user a.btn-modern-primary,
.theme-user a.btn-modern-primary:hover,
.theme-user a.btn-collab-primary,
.theme-user a.btn-collab-primary:hover,
.theme-user a.btn-dom-primary,
.theme-user a.btn-dom-primary:hover,
.theme-user a.btn-dom-sm,
.theme-user a.btn-dom-sm:hover,
.theme-user a.strategy-link-strategy,
.theme-user a.strategy-link-strategy:hover,
.theme-user a.strategy-link-plans:hover,
.theme-user a.tg-btn-use,
.theme-user a.tg-btn-use:hover,
.theme-user a.btn-modern-secondary,
.theme-user a.btn-modern-secondary:hover,
.theme-user a.sms-btn-connect,
.theme-user a.sms-btn-connect:hover,
.theme-user a.sms-btn-save,
.theme-user a.sms-btn-save:hover {
    color: #ffffff !important;
    filter: none;
}
.theme-user a.btn-modern-secondary:hover {
    filter: brightness(0.9) !important;
}
.theme-user a[class*="btn-outline-"]:hover {
    color: #ffffff !important;
    filter: none;
}

.theme-user a:hover {
    color: var(--brand-primary, #ff6699);
    filter: brightness(0.85);
}
/* Don't apply brand hover to button links */
.theme-user a.btn:hover,
.theme-user a.btn-modern:hover,
.theme-user a.btn-collab-primary:hover,
.theme-user a.btn-dom-primary:hover,
.theme-user a.btn-dom-sm:hover,
.theme-user a.strategy-link-strategy:hover,
.theme-user a.strategy-link-plans:hover,
.theme-user a.tg-btn-use:hover,
.theme-user a.ww-btn:hover,
.theme-user a.sms-btn:hover {
    filter: none;
}

/* Preserve sidebar nav link colors (not themed by brand) */
.theme-user .plico-sidebar a {
    color: var(--sidebar-text, rgba(255,255,255,0.7)) !important;
}
.theme-user .plico-sidebar a:hover,
.theme-user .plico-sidebar a.active {
    color: var(--sidebar-text-active, #ffffff) !important;
    filter: none;
}

/* ---- Table cards ---- */
.theme-user .table-card th {
    border-bottom-color: var(--brand-primary, #ff6699);
}

.theme-user .table-card tbody tr:hover {
    background: color-mix(in srgb, var(--brand-primary, #ff6699) 5%, white);
}

/* ---- Filter cards ---- */
.theme-user .filter-card {
    border-radius: var(--radius, 10px);
}

.theme-user .filter-card .form-control {
    border-radius: var(--radius, 10px);
}

.theme-user .filter-card .form-control:focus {
    border-color: var(--brand-primary, #ff6699);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary, #ff6699) 15%, transparent);
}

/* ---- List page cards ---- */
.theme-user .table-card {
    border-radius: var(--radius, 10px);
}

/* ---- Content plan pages: btn-primary-mod, btn-success-mod, btn-save ---- */
.theme-user .btn-primary-mod,
.theme-user .btn-save {
    background: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
    border: none;
    color: #fff;
    border-radius: var(--radius, 10px);
}

.theme-user .btn-primary-mod:hover,
.theme-user .btn-save:hover {
    background: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
    color: #fff;
    filter: brightness(0.9);
}

.theme-user .btn-success-mod {
    background: var(--brand-secondary, #4890e6);
    border-color: var(--brand-secondary, #4890e6);
    border: none;
    color: #fff;
    border-radius: var(--radius, 10px);
}

.theme-user .btn-success-mod:hover {
    background: var(--brand-secondary, #4890e6);
    border-color: var(--brand-secondary, #4890e6);
    color: #fff;
    filter: brightness(0.9);
}

/* Warning (Queue) – keeps orange; radius from theme */
.theme-user .btn-warning-mod {
    border-radius: var(--radius, 10px);
}

/* ---- Content plan detail: ensure btn-sm variants get theme ----
   (Add page, Add modal, Generate, Publish, Queue, template select) */
.theme-user .content-page-container .btn-primary-mod,
.theme-user .content-page-container .btn-success-mod,
.theme-user .content-page-container .btn.btn-sm.btn-primary-mod,
.theme-user .content-page-container .btn.btn-sm.btn-success-mod {
    background: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
    border: none;
    color: #fff;
    border-radius: var(--radius, 10px);
}

.theme-user .content-page-container .btn-success-mod,
.theme-user .content-page-container .btn.btn-sm.btn-success-mod {
    background: var(--brand-secondary, #4890e6);
    border-color: var(--brand-secondary, #4890e6);
}

.theme-user .content-page-container .btn-primary-mod:hover,
.theme-user .content-page-container .btn-success-mod:hover,
.theme-user .content-page-container .btn.btn-sm.btn-primary-mod:hover,
.theme-user .content-page-container .btn.btn-sm.btn-success-mod:hover {
    color: #fff;
    filter: brightness(0.9);
}

.theme-user .content-page-container .btn-outline-secondary {
    border-radius: var(--radius, 10px);
}

/* Add page modal is in body; ensure it gets theme */
.theme-user .modal .btn-primary-mod {
    background: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
    border: none;
    color: #fff;
    border-radius: var(--radius, 10px);
}

.theme-user .modal .btn-primary-mod:hover {
    background: var(--brand-primary, #ff6699);
    border-color: var(--brand-primary, #ff6699);
    color: #fff;
    filter: brightness(0.9);
}

/* ---- Action buttons in site lists ---- */
.theme-user #site-lists .actions-group .btn-primary,
.theme-user #template-lists .actions-group .btn-primary {
    background: var(--brand-primary, #ff6699);
}

.theme-user #site-lists .actions-group .btn-primary:hover,
.theme-user #template-lists .actions-group .btn-primary:hover {
    background: var(--brand-primary, #ff6699);
    filter: brightness(0.9);
}

.theme-user #site-lists .actions-group .btn-success,
.theme-user #template-lists .actions-group .btn-success {
    background: var(--brand-secondary, #4890e6);
}

.theme-user #site-lists .actions-group .btn-success:hover,
.theme-user #template-lists .actions-group .btn-success:hover {
    background: var(--brand-secondary, #4890e6);
    filter: brightness(0.9);
}

/* ---- Footer ---- */
.theme-user .plico-main footer {
    background-color: var(--sidebar-bg, #1e1e2d) !important;
}

/* ---- Headings ---- */
.theme-user .website-list-header h1 {
    color: var(--text, #1f2937);
}

.theme-user .website-list-header p {
    color: var(--text, #1f2937);
    opacity: 0.7;
}

/* ---- Login/Auth page overrides (not scoped — public pages don't get .theme-user) ---- */

/* ---- Misc radius ---- */
.theme-user .new-page-input {
    border-radius: var(--radius, 10px);
}

.theme-user .new-page-button {
    border-radius: var(--radius, 10px);
}