:root {
    --sl-blue: #01024d;
    --sl-blue-dark: #264887;
    --sl-blue-light: #dfdfdf;
    --sl-bg: #f0f0f0;
    --sl-soft-blue: #dfdfdf;

    --np-main: #01024d;
    --np-button-bg: #01024d;
    --np-button-text: #ffffff;
    --np-text: #222222;
    --np-accent: #264887;
    --np-bg: #f0f0f0;
    --np-panel-text: #ffffff;
    --np-panel-muted: rgba(255,255,255,0.78);
    --np-panel-hover-bg: rgba(255,255,255,0.14);
    --np-panel-border: rgba(255,255,255,0.20);

    --admin-blue: #01024d;
    --admin-blue-dark: #264887;
    --admin-blue-light: #dfdfdf;
    --admin-border: #dfdfdf;

    --footer-bg: #01024d;
    --footer-text: #ffffff;
    --footer-muted: rgba(255,255,255,0.78);
    --footer-border: rgba(255,255,255,0.22);
    --footer-strip-bg: rgba(0,0,0,0.12);
}

/* Global base */
html,
body {
    background: var(--sl-bg) !important;
}

body {
    background: var(--sl-bg) !important;
}

body > header,
header {
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    color: #ffffff !important;
}

header a {
    color: #ffffff !important;
}

h1,
h2,
h3,
.portal-title,
.stat-card .number,
.stat-card .label,
.section-title,
.action-card h2,
.action-card h3,
.action-card strong,
.action-card-title,
.dashboard-card h2,
.dashboard-card h3,
.dashboard-card strong,
.client-card h2,
.client-card h3,
.client-card strong,
.welcome-box h2,
.welcome-box h3 {
    color: var(--sl-blue-dark) !important;
}

.action-card a,
.action-card a strong,
.dashboard-card a,
.dashboard-card a strong,
.client-card a,
.client-card a strong {
    color: var(--np-text) !important;
}

.action-card a:hover,
.action-card a:hover strong,
.dashboard-card a:hover,
.dashboard-card a:hover strong,
.client-card a:hover,
.client-card a:hover strong {
    color: var(--sl-blue) !important;
}

a,
.actions a,
.cancel-link,
.link-button {
    color: var(--np-text) !important;
}

a:hover,
.actions a:hover,
.cancel-link:hover,
.link-button:hover {
    color: var(--sl-blue) !important;
}

/* Buttons */
button,
.button,
input[type="submit"],
.quick-actions .button,
.quick-actions .button-light,
.action-card .button,
.action-card .button-light,
.dashboard-actions .button,
.dashboard-actions .button-light,
a.button,
button.button {
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    color: #ffffff !important;
    border-color: var(--sl-blue) !important;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.quick-actions .button:hover,
.quick-actions .button-light:hover,
.action-card .button:hover,
.action-card .button-light:hover,
.dashboard-actions .button:hover,
.dashboard-actions .button-light:hover,
a.button:hover,
button.button:hover {
    background: var(--sl-blue-dark) !important;
    background-color: var(--sl-blue-dark) !important;
    color: #ffffff !important;
    border-color: var(--sl-blue-dark) !important;
}

.button-light,
a.button-light,
button.button-light,
.clear-button,
a[href*="clear"],
button[name*="clear"] {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
    color: var(--sl-blue-dark) !important;
    border-color: var(--sl-blue-light) !important;
}

.button-light:hover,
a.button-light:hover,
button.button-light:hover,
.clear-button:hover,
a[href*="clear"]:hover,
button[name*="clear"]:hover {
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    color: #ffffff !important;
    border-color: var(--sl-blue) !important;
}

/* Cards, boxes and panels */
.box,
.welcome-box,
.action-card,
.integration-card,
.integration-box,
.integration-panel,
.api-card,
.status-card {
    border-top-color: var(--sl-blue) !important;
}

.stat-card {
    border-left-color: var(--sl-blue) !important;
}

.info-box,
.help-box,
.notice-box,
.category-help,
.category-intro,
.instructions,
.description-box,
.box .muted-box,
.admin-info-box,
.category-tree-intro,
.alert-info,
.info,
.notice,
.panel-info {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
    color: var(--sl-blue-dark) !important;
    border-color: var(--sl-blue-light) !important;
}

/* Logo preview must stay neutral so any logo remains visible */
.logo-preview {
    background: #f4f6f8 !important;
    background-color: #f4f6f8 !important;
    color: var(--np-text) !important;
    border-color: #d8e0e7 !important;
}

.logo-preview strong {
    color: var(--np-text) !important;
}

.logo-preview .muted {
    color: var(--np-accent) !important;
}

.logo-preview img {
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 8px !important;
    border: 1px solid #d8e0e7 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

.logo-preview-empty {
    min-height: 70px;
}

.logo-placeholder {
    min-width: 180px;
    min-height: 58px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff !important;
    border: 1px dashed #c4ccd4 !important;
    border-radius: 6px;
    color: #667085 !important;
    font-weight: bold;
}

.integration-card h2,
.integration-card h3,
.integration-box h2,
.integration-box h3,
.api-card h2,
.api-card h3 {
    color: var(--sl-blue-dark) !important;
}

/* Tables across admin and client pages */
table thead,
table thead tr,
table thead th,
table th,
thead,
thead tr,
thead th,
th {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
    color: var(--sl-blue-dark) !important;
    border-color: var(--sl-blue-light) !important;
}

/* Forms */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--sl-blue) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08) !important;
}

/* Logos */
header .brand-header img,
.brand-header img,
.auth-brand img,
.site-footer-brand img {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.brand-header strong {
    display: none !important;
}

/* Admin desktop side panel */
body .admin-desktop-nav,
body .admin-sidebar,
body .admin-sidebar-menu,
body .admin-desktop-nav .admin-sidebar-menu {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body .admin-desktop-nav .admin-sidebar-brand,
body .admin-sidebar-brand {
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    border-bottom-color: var(--sl-blue-dark) !important;
}

body .admin-desktop-nav .admin-sidebar-brand img,
body .admin-sidebar-brand img {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body .admin-desktop-nav .admin-sidebar-menu a,
body .admin-sidebar-menu a {
    color: var(--sl-blue-dark) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body .admin-desktop-nav .admin-sidebar-menu a:hover,
body .admin-sidebar-menu a:hover {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
    color: var(--sl-blue-dark) !important;
    box-shadow: none !important;
}

body .admin-desktop-nav .admin-sidebar-menu a.active,
body .admin-sidebar-menu a.active {
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

body .admin-desktop-nav .admin-sidebar-foot,
body .admin-sidebar-foot {
    border-top-color: #edf3f7 !important;
}

/* Remove leftover blue shadows */
.admin-desktop-nav .admin-sidebar-menu a,
.admin-sidebar-menu a,
.stat-card,
.action-card,
.quick-actions .button,
.quick-actions .button-light,
.button,
.button-light {
    box-shadow: none !important;
}

/* Admin mobile nav */
body .admin-mobile-nav summary {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
    color: var(--sl-blue-dark) !important;
}

body .admin-mobile-menu-panel a {
    color: var(--sl-blue-dark) !important;
}

body .admin-mobile-menu-panel a:hover {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
    color: var(--sl-blue-dark) !important;
}

body .admin-mobile-menu-panel a.active {
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    border-color: var(--sl-blue) !important;
    color: #ffffff !important;
}

/* Client nav */
.client-desktop-nav a,
.client-mobile-menu-panel a {
    color: var(--sl-blue-dark) !important;
}

/* Client desktop side panel */
body .client-sidebar {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-right-color: var(--sl-blue-light) !important;
    box-shadow: 8px 0 24px rgba(0,0,0,0.06) !important;
}

body .client-sidebar-brand {
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    border-bottom-color: var(--sl-blue-dark) !important;
}

body .client-sidebar-brand img {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body .client-sidebar-menu a {
    color: var(--sl-blue-dark) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body .client-sidebar-menu a:hover {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
    color: var(--sl-blue-dark) !important;
    box-shadow: none !important;
}

body .client-sidebar-menu a.active {
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    color: #ffffff !important;
    border-color: var(--sl-blue) !important;
    box-shadow: none !important;
}

body .client-sidebar-foot {
    border-top-color: var(--sl-blue-light) !important;
    color: #777777 !important;
}

body .client-sidebar-foot strong {
    color: var(--sl-blue-dark) !important;
}

.client-mobile-nav summary {
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    color: #ffffff !important;
}

.client-mobile-menu-panel a.active {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
}

/* Status colours */
.status-submitted,
.status-blue {
    background: var(--sl-blue-light) !important;
    color: var(--sl-blue-dark) !important;
}

.status-proforma,
.status-yellow {
    background: #fff4d6 !important;
    color: #7a5200 !important;
}

.status-awaiting,
.status-orange {
    background: #fff1cc !important;
    color: #8a5700 !important;
}

.status-paid,
.status-confirmed,
.status-completed,
.status-green,
.status-active {
    background: #e4ffe4 !important;
    color: #176000 !important;
}

.status-production,
.status-purple {
    background: #ede7ff !important;
    color: #4a2f8f !important;
}

.status-cancelled,
.status-red,
.status-inactive,
.status-rejected {
    background: #ffe2e2 !important;
    color: #8a0000 !important;
}

/* Admin account dropdown */
.admin-account-menu {
    position: relative;
    margin-left: auto;
}

.admin-account-menu details {
    position: relative;
}

.admin-account-menu summary {
    list-style: none;
    cursor: pointer;
    background: var(--sl-blue) !important;
    background-color: var(--sl-blue) !important;
    color: #ffffff !important;
    padding: 9px 13px;
    border-radius: 6px;
    font-weight: bold;
    user-select: none;
}

.admin-account-menu summary:hover,
.admin-account-menu details[open] summary {
    background: var(--sl-blue-dark) !important;
    background-color: var(--sl-blue-dark) !important;
    color: #ffffff !important;
}

.admin-account-menu summary::-webkit-details-marker {
    display: none;
}

.admin-account-menu summary::after {
    content: " ▾";
    font-size: 12px;
}

.admin-account-menu details[open] summary::after {
    content: " ▴";
}

.admin-account-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 190px;
    background: #ffffff !important;
    border: 1px solid var(--sl-blue-light) !important;
    border-radius: 8px;
    box-shadow: none !important;
    overflow: hidden;
    z-index: 9999;
}

.admin-account-dropdown a {
    display: block;
    padding: 11px 14px;
    background: #ffffff !important;
    color: var(--sl-blue) !important;
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid var(--sl-blue-light) !important;
}

.admin-account-dropdown a svg,
.admin-account-dropdown a path,
.admin-account-dropdown a i,
.admin-account-dropdown a span {
    color: var(--sl-blue) !important;
    fill: none !important;
    stroke: var(--sl-blue) !important;
}

.admin-account-dropdown a:last-child {
    border-bottom: none;
}

.admin-account-dropdown a:hover {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
    color: var(--sl-blue) !important;
}

.admin-account-dropdown a:hover svg,
.admin-account-dropdown a:hover path,
.admin-account-dropdown a:hover i,
.admin-account-dropdown a:hover span {
    color: var(--sl-blue) !important;
    stroke: var(--sl-blue) !important;
}

.admin-account-dropdown a[href*="logout"],
.admin-account-dropdown a[href*="logout"] svg,
.admin-account-dropdown a[href*="logout"] path,
.admin-account-dropdown a[href*="logout"] span {
    color: #9b0000 !important;
    stroke: #9b0000 !important;
}


/* Admin footer layout fix */
body:has(.admin-desktop-nav) {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

body:has(.admin-desktop-nav) > .container {
    flex: 1 0 auto !important;
}

body:has(.admin-desktop-nav) > .site-footer,
body .admin-desktop-nav ~ .site-footer {
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 50px !important;
    box-sizing: border-box !important;
}

body:has(.admin-desktop-nav) .site-footer-main,
body:has(.admin-desktop-nav) .site-footer-security-strip,
body:has(.admin-desktop-nav) .site-footer-bottom,
body .admin-desktop-nav ~ .site-footer .site-footer-main,
body .admin-desktop-nav ~ .site-footer .site-footer-security-strip,
body .admin-desktop-nav ~ .site-footer .site-footer-bottom {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

/* Integrations page branding fix */
.integration-option,
.integration-provider,
.integration-provider-card,
.integration-card,
.integration-box,
.integration-choice,
.provider-card,
.provider-option,
.integration-tile {
    border-color: var(--sl-blue-light) !important;
}

.integration-option:hover,
.integration-provider:hover,
.integration-provider-card:hover,
.integration-card:hover,
.integration-box:hover,
.integration-choice:hover,
.provider-card:hover,
.provider-option:hover,
.integration-tile:hover {
    border-color: var(--sl-blue) !important;
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
}

.integration-option.active,
.integration-option.selected,
.integration-provider.active,
.integration-provider.selected,
.integration-provider-card.active,
.integration-provider-card.selected,
.integration-card.active,
.integration-card.selected,
.integration-choice.active,
.integration-choice.selected,
.provider-card.active,
.provider-card.selected,
.provider-option.active,
.provider-option.selected,
.integration-tile.active,
.integration-tile.selected,
input[type="radio"]:checked + .integration-option,
input[type="radio"]:checked + .integration-provider,
input[type="radio"]:checked + .integration-provider-card,
input[type="radio"]:checked + .integration-card,
input[type="radio"]:checked + .integration-choice,
input[type="radio"]:checked + .provider-card,
input[type="radio"]:checked + .provider-option,
label:has(input[type="radio"]:checked) {
    border-color: var(--sl-blue) !important;
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
}

.integration-option h2,
.integration-option h3,
.integration-option strong,
.integration-provider h2,
.integration-provider h3,
.integration-provider strong,
.integration-provider-card h2,
.integration-provider-card h3,
.integration-provider-card strong,
.integration-card h2,
.integration-card h3,
.integration-card strong,
.integration-box h2,
.integration-box h3,
.integration-box strong,
.integration-choice h2,
.integration-choice h3,
.integration-choice strong,
.provider-card h2,
.provider-card h3,
.provider-card strong,
.provider-option h2,
.provider-option h3,
.provider-option strong,
.integration-tile h2,
.integration-tile h3,
.integration-tile strong {
    color: var(--sl-blue-dark) !important;
}

.integration-option.active h2,
.integration-option.active h3,
.integration-option.active strong,
.integration-option.selected h2,
.integration-option.selected h3,
.integration-option.selected strong,
.integration-provider-card.active h2,
.integration-provider-card.active h3,
.integration-provider-card.active strong,
.integration-provider-card.selected h2,
.integration-provider-card.selected h3,
.integration-provider-card.selected strong,
.integration-card.active h2,
.integration-card.active h3,
.integration-card.active strong,
.integration-card.selected h2,
.integration-card.selected h3,
.integration-card.selected strong,
.provider-card.active h2,
.provider-card.active h3,
.provider-card.active strong,
.provider-card.selected h2,
.provider-card.selected h3,
.provider-card.selected strong,
.provider-option.active h2,
.provider-option.active h3,
.provider-option.active strong,
.provider-option.selected h2,
.provider-option.selected h3,
.provider-option.selected strong {
    color: var(--sl-blue-dark) !important;
}

/* Keep disabled badges readable */
.integration-option .disabled,
.integration-provider .disabled,
.integration-provider-card .disabled,
.integration-card .disabled,
.integration-box .disabled,
.integration-choice .disabled,
.provider-card .disabled,
.provider-option .disabled,
.integration-tile .disabled,
.integration-option .status-disabled,
.integration-provider-card .status-disabled,
.integration-card .status-disabled,
.provider-card .status-disabled {
    background: #ffe2e2 !important;
    color: #8a0000 !important;
    border-color: transparent !important;
}

/* Mobile reset for admin footer */
@media (max-width: 900px) {
    body:has(.admin-desktop-nav) {
        display: block !important;
    }

    body:has(.admin-desktop-nav) > .site-footer,
    body .admin-desktop-nav ~ .site-footer {
        width: 100% !important;
        margin-left: 0 !important;
    }

    body:has(.admin-desktop-nav) .site-footer-main,
    body:has(.admin-desktop-nav) .site-footer-security-strip,
    body:has(.admin-desktop-nav) .site-footer-bottom,
    body .admin-desktop-nav ~ .site-footer .site-footer-main,
    body .admin-desktop-nav ~ .site-footer .site-footer-security-strip,
    body .admin-desktop-nav ~ .site-footer .site-footer-bottom {
        max-width: none !important;
    }
}


/* Footer full-width safety */
.site-footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

body:has(.admin-desktop-nav) > .site-footer,
body .admin-desktop-nav ~ .site-footer,
body:has(.client-sidebar) > .site-footer,
body .client-sidebar ~ .site-footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* Footer */
.site-footer {
    width: 100% !important;
    margin-top: 50px;
    background: var(--footer-bg) !important;
    background-color: var(--footer-bg) !important;
    border-top: 1px solid var(--footer-border) !important;
    color: var(--footer-text) !important;
    font-size: 14px;
}

.site-footer-main,
.site-footer-security-strip,
.site-footer-bottom {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

.site-footer-main {
    padding: 35px 30px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 35px;
}

.site-footer-company-name,
.site-footer-column h3,
.site-footer-credit a {
    color: var(--footer-text) !important;
}

.site-footer-column a {
    display: block !important;
    margin-bottom: 8px !important;
    color: var(--footer-muted) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

.site-footer-contact a {
    color: var(--footer-muted) !important;
    text-decoration: none !important;
}

.site-footer-column a:hover,
.site-footer-contact a:hover,
.site-footer-credit a:hover {
    color: var(--footer-text) !important;
    text-decoration: underline;
}

.site-footer-contact,
.site-footer-contact span,
.site-footer p,
.site-footer span {
    color: var(--footer-muted) !important;
}

.site-footer-security-strip {
    min-height: 58px;
    padding: 14px 30px;
    background: var(--footer-strip-bg) !important;
    background-color: var(--footer-strip-bg) !important;
    border-top: 1px solid var(--footer-border) !important;
    border-bottom: 1px solid var(--footer-border) !important;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.site-footer-security-strip img {
    max-height: 36px;
    max-width: 140px;
    display: block;
    object-fit: contain;
}

.site-footer-security-strip span {
    color: var(--footer-muted) !important;
    font-size: 13px;
}

.site-footer-bottom {
    padding: 16px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    font-size: 13px;
    border-top: 1px solid var(--footer-border) !important;
    color: var(--footer-muted) !important;
}

.site-footer-bottom a {
    color: var(--footer-text) !important;
}

.site-footer-bottom a:hover {
    color: var(--footer-text) !important;
    text-decoration: underline;
}

/* Footer inner alignment safety */
html body .site-footer .site-footer-main,
html body .site-footer .site-footer-security-strip,
html body .site-footer .site-footer-bottom,
html body:has(.admin-desktop-nav) .site-footer .site-footer-main,
html body:has(.admin-desktop-nav) .site-footer .site-footer-security-strip,
html body:has(.admin-desktop-nav) .site-footer .site-footer-bottom,
html body:has(.client-sidebar) .site-footer .site-footer-main,
html body:has(.client-sidebar) .site-footer .site-footer-security-strip,
html body:has(.client-sidebar) .site-footer .site-footer-bottom {
    width: 100% !important;
    max-width: 1280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

html body .site-footer .site-footer-main {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr 1fr !important;
    gap: 35px !important;
}

@media (min-width: 1600px) {
    .site-footer-main,
    .site-footer-security-strip,
    .site-footer-bottom {
        max-width: 1400px !important;
    }
}

@media (max-width: 900px) {
    .site-footer-main,
    .site-footer-security-strip,
    .site-footer-bottom {
        max-width: none !important;
    }

    .site-footer-main {
        padding: 30px 20px;
    }

    .site-footer-security-strip {
        padding: 14px 20px;
    }

    .site-footer-bottom {
        padding: 16px 20px;
    }
}

@media (max-width: 600px) {
    .site-footer-main {
        grid-template-columns: 1fr;
    }

    .site-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* NexusPoynt colour system v2
   Main Colour: headers + side panels
   Button Colour: all button backgrounds
   Button Text Colour: all button text
   Text Colour: primary non-button text
   Accent Colour: links, secondary text, highlights
*/
html,
body {
    background: var(--np-bg) !important;
    background-color: var(--np-bg) !important;
    color: var(--np-text) !important;
}

body,
.container,
.client-main,
.content-inner,
.box,
.welcome-box,
.action-card,
.dashboard-card,
.client-card,
.integration-card,
.integration-box,
.api-card,
.status-card,
p,
li,
td,
label,
input,
select,
textarea,
.description,
.meta-card,
.product-card,
.order-card {
    color: var(--np-text) !important;
}

h1,
h2,
h3,
.portal-title,
.section-title,
.stat-card .number,
.stat-card .label,
.action-card h2,
.action-card h3,
.action-card strong,
.dashboard-card h2,
.dashboard-card h3,
.dashboard-card strong,
.client-card h2,
.client-card h3,
.client-card strong,
.welcome-box h2,
.welcome-box h3,
.price,
.product-price,
.product-detail-price,
.order-total,
.basket-total,
.summary-total,
.invoice-total,
.proforma-total {
    color: var(--np-text) !important;
}

.muted,
small.muted,
.secondary-text,
.help-text,
.description-muted,
.site-note,
.form-note {
    color: var(--np-accent) !important;
}

a:not(.button),
.product-name-link,
.actions a:not(.button),
.cancel-link,
.link-button,
.admin-account-dropdown a:not(.button) {
    color: var(--np-text) !important;
}

a:not(.button):hover,
.product-name-link:hover,
.actions a:not(.button):hover,
.cancel-link:hover,
.link-button:hover {
    color: var(--np-main) !important;
}

body > header,
header,
.admin-mobile-nav summary,
.client-mobile-nav summary {
    background: var(--np-main) !important;
    background-color: var(--np-main) !important;
    color: var(--np-panel-text) !important;
    border-color: var(--np-panel-border) !important;
}

header a:not(.button),
body > header a:not(.button),
.admin-mobile-nav summary,
.client-mobile-nav summary {
    color: var(--np-panel-text) !important;
}

body .admin-desktop-nav,
body .admin-sidebar,
body .admin-sidebar-menu,
body .admin-desktop-nav .admin-sidebar-menu,
body .client-sidebar,
body .client-sidebar-menu {
    background: var(--np-main) !important;
    background-color: var(--np-main) !important;
    color: var(--np-panel-text) !important;
    border-color: var(--np-panel-border) !important;
}

body .admin-desktop-nav .admin-sidebar-brand,
body .admin-sidebar-brand,
body .client-sidebar-brand {
    background: var(--np-main) !important;
    background-color: var(--np-main) !important;
    border-bottom-color: var(--np-panel-border) !important;
}

body .admin-desktop-nav .admin-sidebar-menu a,
body .admin-sidebar-menu a,
body .client-sidebar-menu a,
body .admin-sidebar-foot,
body .admin-sidebar-foot strong,
body .client-sidebar-foot,
body .client-sidebar-foot strong {
    color: var(--np-panel-text) !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body .admin-desktop-nav .admin-sidebar-menu a:hover,
body .admin-sidebar-menu a:hover,
body .client-sidebar-menu a:hover,
body .admin-mobile-menu-panel a:hover,
body .client-mobile-menu-panel a:hover {
    background: var(--np-panel-hover-bg) !important;
    background-color: var(--np-panel-hover-bg) !important;
    color: var(--np-panel-text) !important;
    box-shadow: none !important;
}

body .admin-desktop-nav .admin-sidebar-menu a.active,
body .admin-sidebar-menu a.active,
body .client-sidebar-menu a.active,
body .admin-mobile-menu-panel a.active,
body .client-mobile-menu-panel a.active {
    background: var(--np-button-bg) !important;
    background-color: var(--np-button-bg) !important;
    color: var(--np-button-text) !important;
    border-color: var(--np-button-bg) !important;
    box-shadow: none !important;
}

button,
.button,
input[type="submit"],
.quick-actions .button,
.quick-actions .button-light,
.action-card .button,
.action-card .button-light,
.dashboard-actions .button,
.dashboard-actions .button-light,
a.button,
button.button,
.button-light,
a.button-light,
button.button-light,
.button-danger,
a.button-danger,
button.button-danger,
.clear-button,
a[href*="clear"],
button[name*="clear"],
.admin-account-menu summary {
    background: var(--np-button-bg) !important;
    background-color: var(--np-button-bg) !important;
    color: var(--np-button-text) !important;
    border-color: var(--np-button-bg) !important;
    box-shadow: none !important;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
.quick-actions .button:hover,
.quick-actions .button-light:hover,
.action-card .button:hover,
.action-card .button-light:hover,
.dashboard-actions .button:hover,
.dashboard-actions .button-light:hover,
a.button:hover,
button.button:hover,
.button-light:hover,
a.button-light:hover,
button.button-light:hover,
.button-danger:hover,
a.button-danger:hover,
button.button-danger:hover,
.clear-button:hover,
a[href*="clear"]:hover,
button[name*="clear"]:hover,
.admin-account-menu summary:hover,
.admin-account-menu details[open] summary {
    background: var(--np-accent) !important;
    background-color: var(--np-accent) !important;
    color: var(--np-button-text) !important;
    border-color: var(--np-accent) !important;
    box-shadow: none !important;
}

/* Do not turn image-gallery thumbnail buttons into full brand buttons */
.product-image-thumb,
.product-image-thumb:hover,
.product-image-thumb.active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: inherit !important;
    box-shadow: none !important;
}

.product-image-thumb {
    border: 1px solid var(--np-accent) !important;
}

.product-image-thumb:hover,
.product-image-thumb.active {
    border-color: var(--np-button-bg) !important;
}

table thead,
table thead tr,
table thead th,
table th,
thead,
thead tr,
thead th,
th {
    background: var(--sl-blue-light) !important;
    background-color: var(--sl-blue-light) !important;
    color: var(--np-text) !important;
    border-color: var(--sl-blue-light) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--np-accent) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08) !important;
}

/* Colour system correction: primary text vs accent */
body,
.container,
.client-main,
.content-inner,
.box,
.box p:not(.muted),
.box div:not(.muted),
label,
td,
input,
select,
textarea,
h1,
h2,
h3,
h4,
h5,
h6,
strong:not(a strong),
.description,
.meta-card,
.product-card,
.order-card,
.price,
.product-price,
.product-detail-price,
.order-total,
.basket-total,
.summary-total,
.invoice-total,
.proforma-total {
    color: var(--np-text) !important;
}

.muted,
small.muted,
.secondary-text,
.help-text,
.description-muted,
.site-note,
.form-note,
.logo-preview .muted,
.client-sidebar-foot,
.admin-sidebar-foot {
    color: var(--np-accent) !important;
}

a:not(.button),
a:not(.button) strong,
.product-name-link,
.actions a:not(.button),
.cancel-link,
.link-button {
    color: var(--np-text) !important;
}

a:not(.button):hover,
a:not(.button):hover strong,
.product-name-link:hover,
.actions a:not(.button):hover,
.cancel-link:hover,
.link-button:hover {
    color: var(--np-main) !important;
}

button,
.button,
input[type="submit"],
a.button,
button.button {
    background: var(--np-button-bg) !important;
    background-color: var(--np-button-bg) !important;
    color: var(--np-button-text) !important;
    border-color: var(--np-button-bg) !important;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
a.button:hover,
button.button:hover {
    background: var(--np-accent) !important;
    background-color: var(--np-accent) !important;
    color: var(--np-button-text) !important;
    border-color: var(--np-accent) !important;
}

/* Footer link safety: keep footer readable and independent from the accent colour */
.site-footer,
.site-footer p,
.site-footer span,
.site-footer-contact,
.site-footer-contact span {
    color: var(--footer-muted) !important;
}

.site-footer-company-name,
.site-footer-column h3,
.site-footer-credit a {
    color: var(--footer-text) !important;
}

.site-footer a:not(.button),
.site-footer a:not(.button) strong,
.site-footer-column a,
.site-footer-contact a,
.site-footer-bottom a {
    color: var(--footer-muted) !important;
}

.site-footer a:not(.button):hover,
.site-footer a:not(.button):hover strong,
.site-footer-column a:hover,
.site-footer-contact a:hover,
.site-footer-bottom a:hover,
.site-footer-credit a:hover {
    color: var(--footer-text) !important;
}