/* Runtime reseller/client theme layer.
   Keep this file loaded after the design system and page CSS so account theme
   variables can override older hard-coded Avona colours without rebuilding CSS. */

:root {
  --tenant-primary: var(--av-primary, #932782);
  --tenant-primary-hover: var(--av-primary-hover, #7a2069);
  --tenant-primary-soft: var(--av-primary-soft, #f5effa);
  --tenant-secondary: var(--av-teal, #6f90a7);
  --tenant-background: var(--av-background, #faf8f5);
  --tenant-surface: var(--av-surface, #ffffff);
  --tenant-border: var(--av-border, #e8e4df);
  --tenant-text-primary: var(--av-text-primary, #1e1b17);
  --tenant-text-secondary: var(--av-text-secondary, #6b6560);
  --tenant-button-radius: 9999px;
  --tenant-focus-ring: rgba(147, 39, 130, 0.14);
  --tenant-shadow-primary: rgba(147, 39, 130, 0.25);
  --tenant-sidebar-background: var(--tenant-surface);
  --tenant-sidebar-link-color: var(--tenant-text-secondary);
  --tenant-sidebar-active-background: var(--tenant-primary-soft);
  --tenant-sidebar-active-color: var(--tenant-primary);
  --tenant-footer-link-color: var(--av-footer-link-color, #ffffff);
  --av-select-arrow-inset: 18px;
  --av-select-arrow-size: 16px;
  --av-select-arrow-space: 48px;
}

/* Keep the dropdown affordance consistently clear of the field edge. This is
   intentionally part of the final theme layer so it also normalises legacy,
   Bootstrap and design-system selects without changing their surface colours. */
select:not([multiple]):not([size]):not([data-select-arrow="external"]) {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-inline-end: var(--av-select-arrow-space) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236b6560' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: right var(--av-select-arrow-inset) center !important;
  background-repeat: no-repeat !important;
  background-size: var(--av-select-arrow-size) var(--av-select-arrow-size) !important;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--av-font-family, "LTSRaelaPro", sans-serif);
}

body {
  background: var(--av-background, #faf8f5);
  color: var(--av-text-primary, #1e1b17);
}

.client-layout-surface,
.user-clients-scope,
.reseller-theme-scope,
.admin-page {
  background: var(--av-background, #faf8f5);
  color: var(--av-text-primary, #1e1b17);
}

.main-nav {
  background: var(--av-surface, #ffffff);
  border-bottom-color: var(--av-border, #e8e4df);
}

.main-nav .nav-ledger-carousel-arrow,
.main-nav .nav-notification-actions button,
.main-nav .nav-notification-article-dot,
.main-nav .nav-profile-action:hover,
.main-nav .nav-profile-action:focus-visible {
  color: var(--av-primary, #932782) !important;
}

.main-nav .nav-nominal-select:focus,
.main-nav .nav-financial-year-select:focus,
.form-control:focus,
.form-select:focus,
.ds-input:focus {
  border-color: var(--av-primary, #932782) !important;
  box-shadow: 0 0 0 4px var(--tenant-focus-ring, rgba(147, 39, 130, 0.14)) !important;
}

.ds-card,
.card,
.modal-content {
  background: var(--av-surface, #ffffff);
  color: var(--av-text-primary, #1e1b17);
  border-color: var(--av-border, #e8e4df);
}

.ds-card-default,
.ds-card-shadow-sm,
.ds-card-shadow-md,
.ds-card-shadow-lg,
.reseller-client-table-card,
.reseller-clients-filters,
.reseller-theme-panel,
.reseller-theme-preview-card {
  border-color: var(--av-border, #e8e4df) !important;
}

.ds-btn,
.btn {
  border-radius: var(--tenant-button-radius, 9999px);
}

.ds-btn-primary,
.btn-primary,
.btn-style.btn-active,
.client-side-version-upgrade:not(:disabled) {
  background: var(--av-primary, #932782) !important;
  border-color: var(--av-primary, #932782) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--tenant-shadow-primary, rgba(147, 39, 130, 0.25));
}

.ds-btn-primary:hover,
.btn-primary:hover,
.ds-btn-primary:focus-visible,
.btn-primary:focus-visible {
  background: var(--av-primary-hover, #7a2069) !important;
  border-color: var(--av-primary-hover, #7a2069) !important;
}

.ds-btn-secondary,
.ds-btn-ghost,
.btn-outline-primary {
  border-color: var(--av-primary, #932782) !important;
  color: var(--av-primary, #932782) !important;
}

.ds-btn-secondary:hover,
.ds-btn-ghost:hover,
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background: var(--av-primary-soft, #f5effa) !important;
  border-color: var(--av-primary-hover, #7a2069) !important;
  color: var(--av-primary-hover, #7a2069) !important;
}

.c--red,
.text-primary,
a:not(.btn):not(.ds-btn):not(.client-side-link) {
  color: var(--av-primary, #932782) !important;
}

.main-footer,
.main-footer .main-footer-links a,
.main-footer .main-footer-links a:link,
.main-footer .main-footer-links a:visited,
.main-footer .main-footer-link-button,
.main-footer .main-footer-meta {
  color: var(--tenant-footer-link-color, #ffffff) !important;
}

.main-footer .main-footer-links a:hover,
.main-footer .main-footer-link-button:hover {
  color: var(--tenant-footer-link-color, #ffffff) !important;
}

.bg-primary {
  background-color: var(--av-primary, #932782) !important;
}

.border-primary {
  border-color: var(--av-primary, #932782) !important;
}

.form-control,
.form-select,
.ds-input,
.nm-control {
  background-color: var(--av-surface, #ffffff) !important;
  border-color: var(--av-border, #e8e4df) !important;
  color: var(--av-text-primary, #1e1b17) !important;
}

.form-control::placeholder,
.ds-input::placeholder,
.nm-control::placeholder {
  color: var(--av-text-secondary, #6b6560) !important;
  opacity: 0.72;
}

.table,
.reseller-client-table,
.accounts-report-table,
.report-table {
  color: var(--av-text-primary, #1e1b17);
}

.table thead,
.reseller-client-table thead,
.accounts-report-table thead,
.report-table thead {
  background: var(--av-surface-soft, #f5f2ef);
  color: var(--av-text-secondary, #6b6560);
}

.table td,
.table th,
.reseller-client-table td,
.reseller-client-table th,
.accounts-report-table td,
.accounts-report-table th,
.report-table td,
.report-table th {
  border-color: var(--av-border, #e8e4df) !important;
}

.av-themed-sidebar {
  background: var(--tenant-sidebar-background, var(--av-surface, #ffffff)) !important;
  color: var(--tenant-sidebar-link-color, var(--av-text-secondary, #6b6560));
  border-right-color: var(--av-border, #e8e4df) !important;
}

.av-themed-sidebar .client-side-nav-links a.client-side-link,
.av-themed-sidebar .client-side-bottom-links a.client-side-link,
.av-themed-sidebar .mobile-client-navigation-links a.av-themed-sidebar-link {
  color: var(--tenant-sidebar-link-color, var(--av-text-secondary, #6b6560)) !important;
}

/*
 * app.css contains legacy desktop sidebar rules with an extra layout selector
 * and !important declarations. Match that specificity here so the reseller's
 * configured menu text colour wins for desktop links just as it does in the
 * mobile drawer.
 */
.client-layout-shell .av-themed-sidebar .client-side-nav-links a.client-side-link,
.client-layout-shell .av-themed-sidebar .client-side-bottom-links a.client-side-link {
  color: var(--tenant-sidebar-link-color, var(--av-text-secondary, #6b6560)) !important;
}

.av-themed-sidebar .client-side-nav-links a.client-side-link > *,
.av-themed-sidebar .client-side-bottom-links a.client-side-link > *,
.av-themed-sidebar .mobile-client-navigation-links a.av-themed-sidebar-link > * {
  color: inherit !important;
}

.client-layout-shell .av-themed-sidebar .client-side-nav-links a.client-side-link > *,
.client-layout-shell .av-themed-sidebar .client-side-bottom-links a.client-side-link > * {
  color: inherit !important;
}

.av-themed-sidebar .client-side-nav-links a.client-side-link:hover,
.av-themed-sidebar .client-side-bottom-links a.client-side-link:hover,
.av-themed-sidebar .client-side-nav-links a.client-side-link.active,
.av-themed-sidebar .client-side-bottom-links a.client-side-link.active,
.av-themed-sidebar .mobile-client-navigation-links a.av-themed-sidebar-link:hover,
.av-themed-sidebar .mobile-client-navigation-links a.av-themed-sidebar-link:focus-visible,
.av-themed-sidebar .mobile-client-navigation-links a.av-themed-sidebar-link.is-active {
  background: var(--tenant-sidebar-active-background, var(--av-primary-soft, #f5effa)) !important;
  background-color: var(--tenant-sidebar-active-background, var(--av-primary-soft, #f5effa)) !important;
  color: var(--tenant-sidebar-active-color, var(--av-primary, #932782)) !important;
}

.av-themed-sidebar .client-side-nav-links a.client-side-link:hover > *,
.av-themed-sidebar .client-side-bottom-links a.client-side-link:hover > *,
.av-themed-sidebar .client-side-nav-links a.client-side-link.active > *,
.av-themed-sidebar .client-side-bottom-links a.client-side-link.active > *,
.av-themed-sidebar .mobile-client-navigation-links a.av-themed-sidebar-link:hover > *,
.av-themed-sidebar .mobile-client-navigation-links a.av-themed-sidebar-link:focus-visible > *,
.av-themed-sidebar .mobile-client-navigation-links a.av-themed-sidebar-link.is-active > * {
  color: inherit !important;
}

/* Masked span icons need a colour fill; inline SVGs need a transparent canvas. */
.av-themed-sidebar span.client-side-icon {
  background-color: currentColor !important;
}

.client-side-toggle,
.client-side-version-upgrade {
  color: var(--av-primary, #932782) !important;
}

.client-side-nav .client-mtd-progress h2 {
  color: var(--tenant-sidebar-link-color, var(--av-text-secondary, #6b6560)) !important;
}

.client-side-toggle:hover,
.client-side-toggle:focus-visible {
  background: var(--av-primary-soft, #f5effa) !important;
  color: var(--av-primary-hover, #7a2069) !important;
}

.client-mtd-progress,
.client-side-version,
.client-side-menu-break {
  border-color: var(--av-border, #e8e4df) !important;
}

.client-mtd-progress-track {
  background: var(--av-primary-soft, #f5effa) !important;
}

.client-mtd-progress-track span,
.av-toggle-switch input[type="checkbox"]:checked + span,
.av-toggle-switch span.is-checked {
  background: var(--av-primary, #932782) !important;
}

.badge,
.reseller-hmrc-status.connected,
.nav-notifications-pill-active {
  border-color: var(--av-teal, #6f90a7);
}

.nav-notifications-pill-active {
  background: var(--av-teal, #6f90a7) !important;
}

.nav-notifications-pill-outline,
.nav-notification-article-date {
  color: var(--av-teal, #6f90a7) !important;
}

/* Keep sidebar labels and masked icons in sync with their link in every theme. */
.client-layout-shell .client-side-nav-links a.client-side-link > span,
.client-layout-shell .client-side-bottom-links a.client-side-link > span {
  color: inherit !important;
}