/* ==========================================================================
   Theme tokens for the public GUI.
   Driven by the `dc-gui.theme` property -> body class `theme-<name>` plus a
   `theme-rich` marker on every non-default theme (see GlobalControllerAdvice
   + fragments/layout.html).

   DEFAULT  : original light slate look       (classic grave-details panel).
   MEMORIAL : warm dark gold/sepia memorial    (rich panel).
   GARDEN   : light, airy sage-green nature     (rich panel).
   HERITAGE : light cream/gold elegant          (rich panel).
   PORTAL   : dark teal-green, gold + green     (rich panel, egroblje.hr look).

   The redesigned "rich" panel + navbar/modal refinements are scoped under
   `body.theme-rich` and read ONLY these tokens — so a new theme is just a
   new token block. Do not hard-code colors in component stylesheets.
   ========================================================================== */

/* ---- DEFAULT (light slate) --------------------------------------------- */

:root,
body.theme-default {
	/* navbar */
	--nav-bg: rgba(45, 52, 54, 0.95);
	--nav-text: #ffffff;
	--nav-text-hover: #6C757D;
	--nav-active: #aab5bf;
	--nav-brand: #ffffff;
	--nav-border: transparent;
	--nav-dropdown-bg: #ffffff;
	--nav-dropdown-text: #2D3436;
	--nav-dropdown-hover-bg: #f1f3f4;
	--nav-dropdown-border: rgba(0, 0, 0, 0.12);

	/* generic modals (contact + Kontakt i pomoć) */
	--modal-bg: #f7f7f7;
	--modal-surface: #ffffff;
	--modal-text: #2D3436;
	--modal-muted: #6c757d;
	--modal-border: #dee2e6;
	--modal-link: #0a58ca;

	/* shared "outline-dc" button */
	--btn-dc-bg: #6C7A89;
	--btn-dc-text: #ffffff;
	--btn-dc-border: transparent;
	--btn-dc-hover-bg: #BDC3C7;
	--btn-dc-hover-text: #2D3436;

	/* grave details panel */
	--gd-bg: rgba(247, 247, 247, 0.97);
	--gd-bg-2: #ffffff;
	--gd-surface: #ffffff;
	--gd-surface-hover: #eef1f3;
	--gd-border: #e2e6ea;
	--gd-border-strong: #c3cbd1;
	--gd-gold: #5f6f7a;
	--gd-gold-soft: #46555f;
	--gd-gold-muted: #8a949c;
	--gd-text: #2D3436;
	--gd-text-muted: #6c757d;
	--gd-serif: 'Open Sans', sans-serif;
	--gd-title-color: #2D3436;
	--gd-name-color: #2D3436;
	--gd-image-bg: #eef1f3;
	--gd-footer-bg: #f0f2f4;
	--gd-scroll-thumb: rgba(108, 122, 137, 0.4);
	--gd-panel-shadow: -18px 0 48px rgba(0, 0, 0, 0.18);
	--gd-btn-primary-bg: #6C7A89;
	--gd-btn-primary-text: #ffffff;
	--gd-btn-primary-border: #6C7A89;
	--gd-btn-primary-hover-bg: #5a6671;
	--gd-btn-primary-hover-text: #ffffff;
}

/* ---- MEMORIAL (dark gold) ---------------------------------------------- */

body.theme-memorial {
	/* navbar */
	--nav-bg: rgba(21, 19, 15, 0.96);
	--nav-text: #e8e4dc;
	--nav-text-hover: #c9a86a;
	--nav-active: #c9a86a;
	--nav-brand: #c9a86a;
	--nav-border: rgba(201, 168, 106, 0.22);
	--nav-dropdown-bg: #1c1915;
	--nav-dropdown-text: #e8e4dc;
	--nav-dropdown-hover-bg: rgba(201, 168, 106, 0.12);
	--nav-dropdown-border: rgba(201, 168, 106, 0.2);

	/* generic modals */
	--modal-bg: #1a1712;
	--modal-surface: rgba(255, 255, 255, 0.035);
	--modal-text: #e8e4dc;
	--modal-muted: #8d877b;
	--modal-border: rgba(201, 168, 106, 0.18);
	--modal-link: #d9bd86;

	/* shared "outline-dc" button */
	--btn-dc-bg: rgba(201, 168, 106, 0.07);
	--btn-dc-text: #d9bd86;
	--btn-dc-border: rgba(201, 168, 106, 0.42);
	--btn-dc-hover-bg: rgba(201, 168, 106, 0.16);
	--btn-dc-hover-text: #ffffff;

	/* grave details panel */
	--gd-bg: #15130f;
	--gd-bg-2: #1c1915;
	--gd-surface: rgba(255, 255, 255, 0.035);
	--gd-surface-hover: rgba(201, 168, 106, 0.08);
	--gd-border: rgba(201, 168, 106, 0.18);
	--gd-border-strong: rgba(201, 168, 106, 0.42);
	--gd-gold: #c9a86a;
	--gd-gold-soft: #d9bd86;
	--gd-gold-muted: #9c875b;
	--gd-text: #e8e4dc;
	--gd-text-muted: #8d877b;
	--gd-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--gd-title-color: #ffffff;
	--gd-name-color: #ffffff;
	--gd-image-bg: rgba(255, 255, 255, 0.035);
	--gd-footer-bg: rgba(0, 0, 0, 0.25);
	--gd-scroll-thumb: rgba(201, 168, 106, 0.28);
	--gd-panel-shadow: -18px 0 48px rgba(0, 0, 0, 0.55);
	--gd-btn-primary-bg: rgba(201, 168, 106, 0.07);
	--gd-btn-primary-text: #d9bd86;
	--gd-btn-primary-border: rgba(201, 168, 106, 0.42);
	--gd-btn-primary-hover-bg: rgba(201, 168, 106, 0.16);
	--gd-btn-primary-hover-text: #ffffff;

	/* shared "rich" extras */
	--app-bg: #15130f;
	--brand-font: 'Playfair Display', Georgia, serif;
	--input-bg: rgba(255, 255, 255, 0.04);
	--input-focus-bg: rgba(255, 255, 255, 0.06);
	--input-focus-border: var(--gd-border-strong);
	--input-focus-shadow: 0 0 0 0.2rem rgba(201, 168, 106, 0.18);
	--navbar-btn-hover-text: #ffffff;
	--navbar-btn-hover-bg: rgba(201, 168, 106, 0.16);
}

/* ---- GARDEN (light sage / nature) -------------------------------------- */

body.theme-garden {
	/* navbar */
	--nav-bg: rgba(247, 250, 244, 0.97);
	--nav-text: #41513f;
	--nav-text-hover: #3f7d52;
	--nav-active: #4f6f52;
	--nav-brand: #3a5a3c;
	--nav-border: rgba(79, 111, 82, 0.2);
	--nav-dropdown-bg: #ffffff;
	--nav-dropdown-text: #2b3a2f;
	--nav-dropdown-hover-bg: #eef4e8;
	--nav-dropdown-border: rgba(79, 111, 82, 0.18);

	/* generic modals */
	--modal-bg: #f4f8f0;
	--modal-surface: #ffffff;
	--modal-text: #2b3a2f;
	--modal-muted: #6e7d6c;
	--modal-border: #dde7d6;
	--modal-link: #3f7d52;

	/* shared "outline-dc" button */
	--btn-dc-bg: #4f6f52;
	--btn-dc-text: #ffffff;
	--btn-dc-border: transparent;
	--btn-dc-hover-bg: #3f5a40;
	--btn-dc-hover-text: #ffffff;

	/* grave details panel */
	--gd-bg: #eef4e9;
	--gd-bg-2: #f7faf3;
	--gd-surface: #ffffff;
	--gd-surface-hover: #eef4e8;
	--gd-border: #e1ebda;
	--gd-border-strong: #c2d4bb;
	--gd-gold: #5d8060;
	--gd-gold-soft: #4f6f52;
	--gd-gold-muted: #7f9a7b;
	--gd-text: #334332;
	--gd-text-muted: #6f7d6c;
	--gd-serif: 'Open Sans', sans-serif;
	--gd-title-color: #2b3a2c;
	--gd-name-color: #2b3a2c;
	--gd-image-bg: #e8efe2;
	--gd-footer-bg: #eaf1e4;
	--gd-scroll-thumb: rgba(93, 128, 96, 0.35);
	--gd-panel-shadow: -18px 0 48px rgba(40, 60, 40, 0.16);
	--gd-btn-primary-bg: #41603f;
	--gd-btn-primary-text: #ffffff;
	--gd-btn-primary-border: #41603f;
	--gd-btn-primary-hover-bg: #35502f;
	--gd-btn-primary-hover-text: #ffffff;

	/* shared "rich" extras */
	--app-bg: #eef3e9;
	--brand-font: 'Open Sans', sans-serif;
	--input-bg: #ffffff;
	--input-focus-bg: #ffffff;
	--input-focus-border: var(--gd-border-strong);
	--input-focus-shadow: 0 0 0 0.2rem rgba(93, 128, 96, 0.18);
	--navbar-btn-hover-text: #ffffff;
	--navbar-btn-hover-bg: var(--gd-gold);
}

/* ---- HERITAGE (light cream / gold, elegant) ---------------------------- */

body.theme-heritage {
	/* navbar */
	--nav-bg: rgba(245, 240, 228, 0.97);
	--nav-text: #5a513c;
	--nav-text-hover: #97702f;
	--nav-active: #a8894e;
	--nav-brand: #a8894e;
	--nav-border: rgba(168, 137, 78, 0.24);
	--nav-dropdown-bg: #f7f2e6;
	--nav-dropdown-text: #4a4534;
	--nav-dropdown-hover-bg: rgba(168, 137, 78, 0.12);
	--nav-dropdown-border: rgba(168, 137, 78, 0.2);

	/* generic modals */
	--modal-bg: #f5f0e4;
	--modal-surface: #fbf7ed;
	--modal-text: #3c3829;
	--modal-muted: #8a8268;
	--modal-border: rgba(168, 137, 78, 0.24);
	--modal-link: #97702f;

	/* shared "outline-dc" button */
	--btn-dc-bg: #ece2c9;
	--btn-dc-text: #4a4232;
	--btn-dc-border: #cdb888;
	--btn-dc-hover-bg: #e0d2af;
	--btn-dc-hover-text: #36301f;

	/* grave details panel */
	--gd-bg: #f1eadb;
	--gd-bg-2: #f8f3e8;
	--gd-surface: #fbf7ed;
	--gd-surface-hover: #f3ecdb;
	--gd-border: rgba(168, 137, 78, 0.22);
	--gd-border-strong: rgba(168, 137, 78, 0.45);
	--gd-gold: #a8894e;
	--gd-gold-soft: #9a7a36;
	--gd-gold-muted: #97895f;
	--gd-text: #3c3829;
	--gd-text-muted: #877f64;
	--gd-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--gd-title-color: #312d20;
	--gd-name-color: #312d20;
	--gd-image-bg: #efe8d6;
	--gd-footer-bg: #ece4d2;
	--gd-scroll-thumb: rgba(168, 137, 78, 0.35);
	--gd-panel-shadow: -18px 0 48px rgba(60, 50, 25, 0.16);
	--gd-btn-primary-bg: #ece2c9;
	--gd-btn-primary-text: #4a4232;
	--gd-btn-primary-border: #cdb888;
	--gd-btn-primary-hover-bg: #e0d2af;
	--gd-btn-primary-hover-text: #36301f;

	/* shared "rich" extras */
	--app-bg: #f1ebdd;
	--brand-font: 'Playfair Display', Georgia, serif;
	--input-bg: #fbf7ed;
	--input-focus-bg: #ffffff;
	--input-focus-border: var(--gd-border-strong);
	--input-focus-shadow: 0 0 0 0.2rem rgba(168, 137, 78, 0.18);
	--navbar-btn-hover-text: #36301f;
	--navbar-btn-hover-bg: rgba(168, 137, 78, 0.16);
}

/* ---- PORTAL (dark teal-green, gold + green — egroblje.hr portal look) --- */
/* Mirrors dc-portal/static/css/portal.css: deep teal background, gold
   headings/accents, signal-green digitalization accent (links + primary CTA). */

body.theme-portal {
	/* navbar */
	--nav-bg: rgba(4, 18, 15, 0.96);
	--nav-text: #cfe0da;
	--nav-text-hover: #ffffff;
	--nav-active: #57e08a;
	--nav-brand: #cfe0da;
	--nav-border: rgba(120, 200, 170, 0.14);
	--nav-dropdown-bg: #07271f;
	--nav-dropdown-text: #eaf4f0;
	--nav-dropdown-hover-bg: rgba(120, 200, 170, 0.1);
	--nav-dropdown-border: rgba(120, 200, 170, 0.18);

	/* generic modals (contact + Kontakt i pomoć) */
	--modal-bg: #051a16;
	--modal-surface: rgba(120, 200, 170, 0.05);
	--modal-text: #eaf4f0;
	--modal-muted: #8fb3aa;
	--modal-border: rgba(120, 200, 170, 0.16);
	--modal-link: #57e08a;

	/* shared "outline-dc" button */
	--btn-dc-bg: rgba(120, 200, 170, 0.07);
	--btn-dc-text: #8fe0b0;
	--btn-dc-border: rgba(120, 200, 170, 0.32);
	--btn-dc-hover-bg: rgba(87, 224, 138, 0.16);
	--btn-dc-hover-text: #ffffff;

	/* grave details panel */
	--gd-bg: #051a16;
	--gd-bg-2: #0c322b;
	--gd-surface: rgba(120, 200, 170, 0.05);
	--gd-surface-hover: rgba(120, 200, 170, 0.1);
	--gd-border: rgba(120, 200, 170, 0.15);
	--gd-border-strong: rgba(120, 200, 170, 0.4);
	--gd-gold: #e9cd86;
	--gd-gold-soft: #f0d693;
	--gd-gold-muted: #8fb3aa;
	--gd-text: #eaf4f0;
	--gd-text-muted: #8fb3aa;
	--gd-serif: Roboto, 'Times New Roman', serif;
	--gd-title-color: #ffffff;
	--gd-name-color: #ffffff;
	--gd-image-bg: rgba(120, 200, 170, 0.05);
	--gd-footer-bg: rgba(2, 11, 9, 0.55);
	--gd-scroll-thumb: rgba(120, 200, 170, 0.28);
	--gd-panel-shadow: -18px 0 48px rgba(0, 0, 0, 0.55);
	--gd-btn-primary-bg: rgba(87, 224, 138, 0.12);
	--gd-btn-primary-text: #7ef0a8;
	--gd-btn-primary-border: rgba(87, 224, 138, 0.4);
	--gd-btn-primary-hover-bg: rgba(87, 224, 138, 0.2);
	--gd-btn-primary-hover-text: #ffffff;

	/* shared "rich" extras */
	--app-bg: radial-gradient(1100px 760px at 50% -8%, #07271f 0%, #051a16 50%, #020c0a 100%) fixed;
	--brand-font: 'Playfair Display', Georgia, serif;
	--input-bg: rgba(8, 30, 27, 0.6);
	--input-focus-bg: rgba(8, 30, 27, 0.85);
	--input-focus-border: #57e08a;
	--input-focus-shadow: 0 0 0 0.2rem rgba(87, 224, 138, 0.15);
	--navbar-btn-hover-text: #ffffff;
	--navbar-btn-hover-bg: rgba(87, 224, 138, 0.16);
}

/* ==========================================================================
   RICH component refinements (MEMORIAL / GARDEN / HERITAGE / PORTAL)
   Tweaks that can't be expressed purely through the shared tokens above.
   Token-driven, so a new rich theme stays "just a token block".
   ========================================================================== */

body.theme-rich {
	background: var(--app-bg);
}

body.theme-rich .navbar {
	border-bottom: 1px solid var(--nav-border);
}

body.theme-rich .navbar-brand {
	font-family: var(--brand-font);
	letter-spacing: 0.02em;
}

body.theme-rich .navbar-brand .text-muted {
	color: var(--gd-gold-muted) !important;
}

/* Search + logout buttons -> themed outline */
body.theme-rich .navbar .btn-outline-info,
body.theme-rich .navbar .btn-outline-light {
	color: var(--gd-gold-soft);
	border-color: var(--gd-border-strong);
	background: transparent;
}

body.theme-rich .navbar .btn-outline-info:hover,
body.theme-rich .navbar .btn-outline-light:hover {
	color: var(--navbar-btn-hover-text);
	border-color: var(--gd-gold);
	background: var(--navbar-btn-hover-bg);
}

body.theme-rich .navbar .form-control {
	color: var(--gd-text);
	background: var(--input-bg);
	border-color: var(--gd-border);
}

body.theme-rich .navbar .form-control::placeholder {
	color: var(--gd-text-muted);
}

/* Modal close icon + dividers */
body.theme-rich .modal-content .close {
	color: var(--gd-gold) !important;
	text-shadow: none;
	opacity: 0.9;
}

body.theme-rich .modal-content hr {
	border-color: var(--modal-border);
	background-color: var(--modal-border) !important;
}

/* Contact form fields inside themed modals */
body.theme-rich .modal-content .form-control {
	color: var(--gd-text);
	background: var(--input-bg);
	border-color: var(--modal-border);
}

body.theme-rich .modal-content .form-control:focus {
	color: var(--gd-text);
	background: var(--input-focus-bg);
	border-color: var(--input-focus-border);
	box-shadow: var(--input-focus-shadow);
}

body.theme-rich .modal-content .form-control::placeholder {
	color: var(--gd-text-muted);
}

body.theme-rich .modal-content .col-form-label,
body.theme-rich .modal-content label {
	color: var(--gd-text);
}

body.theme-rich .modal-content a {
	color: var(--modal-link);
}

/* ---- Light-navbar themes: dark hamburger toggler ----------------------- */
/* MEMORIAL keeps the default light (navbar-dark) icon; GARDEN/HERITAGE use a
   light navbar, so swap in a dark-stroke icon and a themed border.          */

body.theme-garden .navbar-toggler,
body.theme-heritage .navbar-toggler {
	border-color: var(--nav-border);
}

body.theme-garden .navbar-toggler-icon,
body.theme-heritage .navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(43, 58, 47, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}