/* =========================================================
	MouldThreat brand profile (Bootstrap 5.3 variable theme)
	Goal: olive palette across the UI, keep danger/warning semantic.
========================================================= */

/* ---------- LIGHT THEME ---------- */
:root{
	/* Core brand olives (from your MT palette) */
	--mt-ink:#2f3120;			/* deep olive (text/strong) */
	--mt-primary:#586029;		/* main olive */
	--mt-primary-hover:#2f3120;	/* hover/darker */
	--mt-subtle:#7d8a3a;		/* lighter olive (subtle accents) */
	--mt-border:#cfd6bf;		/* soft border */
	--mt-bg-subtle:#eef1ec;		/* pale sage bg */

	/* Bootstrap “brand family” */
	--bs-primary: var(--mt-primary);
	--bs-primary-rgb: 88,96,41;

	--bs-secondary: var(--mt-ink);
	--bs-secondary-rgb: 47,49,32;

	/* On-brand success/info (still semantic) */
	--bs-success: var(--mt-subtle);
	--bs-success-rgb: 125,138,58;

	--bs-info: #6f7f3a;
	--bs-info-rgb: 111,127,58;

	/* Neutral utilities */
	--bs-light: #e3e7dd;
	--bs-light-rgb: 227,231,221;

	--bs-dark: var(--mt-ink);
	--bs-dark-rgb: 47,49,32;

	/* Global text/background glue (prevents “mixed theme”) */
	--bs-body-bg: #ffffff;
	--bs-body-color: #192335; /* keep Template-ish readability; swap to var(--mt-ink) if you want more olive text */
	--bs-emphasis-color: var(--mt-ink);
	--bs-secondary-color: rgba(47,49,32,.70);
	--bs-tertiary-color: rgba(47,49,32,.55);

	--bs-border-color: var(--mt-border);
	--bs-border-color-translucent: rgba(47,49,32,.15);

	--bs-secondary-bg: #f4f6f0;
	--bs-tertiary-bg: var(--mt-bg-subtle);

	/* Links */
	--bs-link-color: var(--mt-primary);
	--bs-link-color-rgb: 88,96,41;
	--bs-link-hover-color: var(--mt-subtle);
	--bs-link-hover-color-rgb: 125,138,58;

	/* “Subtle / emphasis” tokens */
	--bs-primary-text-emphasis: var(--mt-subtle);
	--bs-primary-bg-subtle: var(--mt-bg-subtle);
	--bs-primary-border-subtle: var(--mt-border);

	--bs-secondary-text-emphasis: var(--mt-ink);
	--bs-secondary-bg-subtle: #f0f2ea;
	--bs-secondary-border-subtle: var(--mt-border);

	--bs-success-text-emphasis: #4f5d24;
	--bs-success-bg-subtle: #edf2e2;
	--bs-success-border-subtle: #cfe0a5;

	--bs-info-text-emphasis: #4b5528;
	--bs-info-bg-subtle: #eef3e1;
	--bs-info-border-subtle: #cfdab0;

	/* Keep these SEMANTIC (don’t olive them) */
	/* --bs-danger stays Bootstrap red */
	/* --bs-warning stays amber */
}

/* Ensure primary button hover doesn’t get hijacked by template */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle{
	background-color: var(--mt-primary-hover) !important;
	border-color: var(--mt-primary-hover) !important;
	color:#fff !important;
}

/* ---------- DARK THEME ---------- */
html[data-bs-theme="dark"],
body[data-bs-theme="dark"],
[data-bs-theme="dark"]{
	/* Lift olives for contrast in dark UI */
	--mt-ink:#d8dec3;			/* light text */
	--mt-primary:#7d8a3a;		/* brighter olive */
	--mt-primary-hover:#9aaa4a;	/* hover brighter */
	--mt-subtle:#a8b86a;		/* subtle accent */
	--mt-border:#2a2f1a;
	--mt-bg-subtle:#15180f;

	--bs-primary: var(--mt-primary);
	--bs-primary-rgb: 125,138,58;

	--bs-secondary: #aeb894;
	--bs-secondary-rgb: 174,184,148;

	--bs-success: #9aaa4a;
	--bs-success-rgb: 154,170,74;

	--bs-info: #8f9e55;
	--bs-info-rgb: 143,158,85;

	/* Global dark glue */
	--bs-body-bg: #0f110b;
	--bs-body-color: var(--mt-ink);
	--bs-emphasis-color: #eef3d9;
	--bs-secondary-color: rgba(216,222,195,.75);
	--bs-tertiary-color: rgba(216,222,195,.55);

	--bs-border-color: var(--mt-border);
	--bs-border-color-translucent: rgba(216,222,195,.12);

	--bs-secondary-bg: #14170e;
	--bs-tertiary-bg: var(--mt-bg-subtle);

	--bs-light: #2b2f22;
	--bs-light-rgb: 43,47,34;

    --bs-dark: #0f110b;
    --bs-dark-rgb: 15,17,11;

	--bs-link-color: var(--mt-primary);
	--bs-link-color-rgb: 125,138,58;
	--bs-link-hover-color: var(--mt-subtle);
	--bs-link-hover-color-rgb: 168,184,106;

	--bs-primary-text-emphasis: var(--mt-subtle);
	--bs-primary-bg-subtle: var(--mt-bg-subtle);
	--bs-primary-border-subtle: var(--mt-border);

	--bs-secondary-text-emphasis: #dfe6c9;
	--bs-secondary-bg-subtle: #15180f;
	--bs-secondary-border-subtle: #2a2f1a;

	--bs-success-text-emphasis: #cddc92;
	--bs-success-bg-subtle: #13160c;
	--bs-success-border-subtle: #2a3218;

	--bs-info-text-emphasis: #d3df9f;
	--bs-info-bg-subtle: #12150b;
	--bs-info-border-subtle: #2a3117;
}

/* =========================================================
	DARK MODE: Fix "var(--bs-dark)" being used as TEXT colour
	Keep --bs-dark dark for backgrounds, but force readable text
	on common text-bearing elements/contexts.
========================================================= */
[data-bs-theme="dark"]{
	--mt-readable-darktext: var(--mt-ink); /* your light text token (#d8dec3) */
}

/* 1) Anything explicitly using Bootstrap's .text-dark should be readable in dark mode */
[data-bs-theme="dark"] .text-dark{
	color: var(--mt-readable-darktext) !important;
}

/* 2) Common cases where templates use color: var(--bs-dark) for text */
[data-bs-theme="dark"] .chat-conversation .chat-message-text,
[data-bs-theme="dark"] .chat-conversation .chat-message-text *{
	color: var(--mt-readable-darktext) !important;
}

/* 3) Safety net: labels/badges/headers that often use --bs-dark for text */
[data-bs-theme="dark"] h1, 
[data-bs-theme="dark"] h2, 
[data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, 
[data-bs-theme="dark"] h5, 
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .page-title,
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .breadcrumb,
[data-bs-theme="dark"] .breadcrumb *,
[data-bs-theme="dark"] .dropdown-item,
[data-bs-theme="dark"] .dropdown-item *,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-text{
	color: var(--mt-readable-darktext) !important;
}

/* =========================================================
	DARK MODE: Prevent --bs-dark being used as TEXT colour
========================================================= */
[data-bs-theme="dark"]{
	--mt-text-on-dark: var(--mt-ink);
}

/* Common text containers that should never use --bs-dark */
[data-bs-theme="dark"] .chat-message-text,
[data-bs-theme="dark"] .chat-message-text *,
[data-bs-theme="dark"] .chat-divider,
[data-bs-theme="dark"] .chat-divider *,
[data-bs-theme="dark"] .chat-date{
	color: var(--mt-text-on-dark) !important;
}

/* =========================================================
	DARK MODE: Bootstrap tooltip fix (Template uses Bootstrap tooltips)
	Tooltip bg in Template = var(--bs-dark), so keep bs-dark for UI
	and override tooltip vars directly.
========================================================= */
[data-bs-theme="dark"] .tooltip{
	--bs-tooltip-bg: #2b2f22; /* slightly lighter than page bg */
	--bs-tooltip-color: #d8dec3;
	--bs-tooltip-opacity: 1;
}

[data-bs-theme="dark"] .tooltip-inner{
	border: 1px solid rgba(143,158,85,.35);
}