:root {
	 --header-footer-bg:#C5D644; --highlight-text:#1C6933; --panel-width:340px; --rail-width:60px; --bg:#f8f9fa; --node-selected:#1C6933; --node:#4b5563; 
	 --icon-nav-size:25px; 
	 --icon-card-size:65px; /* Added --icon-card-size Gaetan 2025-08-26 */ 
	}
html, body {margin:0; font-family:system-ui, Arial, sans-serif; height:100%;}
main, header {
	width: 100%;
	max-width: 1260px;
}
.main-body {
	height: 100vh;
	flex: 1;
	overflow-y: auto;
	display:flex;
	flex-direction:column;
	align-items: center;
}
body, .app-shell {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--bg);
} 
.top-bar, .footer {background:var(--header-footer-bg); padding:8px 16px; font-weight:600; color:#1e1e1e;}
.top-bar { display:flex; align-items:center; gap:20px; }
.top-bar .logo-btn { all:unset; cursor:pointer; display:inline-flex; align-items:center; }
.top-bar .logo-btn:focus-visible { outline:2px solid #1C6933; outline-offset:2px; }
.top-bar .app-title { font-size:20px; font-weight:700; letter-spacing:.5px; }
.body {flex:1; display:grid; grid-template-columns: var(--rail-width) 1fr var(--panel-width); grid-template-rows:1fr; overflow:hidden;}
.left-rail {background:#eef1b5; padding:8px 0;}
.left-rail ul {list-style:none; padding:0; margin:0;}
.left-rail a {display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; color:#222; text-decoration:none; font-size:14px;}
.left-rail .nav-icon { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color:#1C6933; }
.left-rail a:hover, .left-rail a:focus {background:#d4dc74; color:var(--highlight-text);}
.content {padding:16px; overflow:hidden; position:relative; display:flex; flex-direction:column;}
/* Ensure main content grows to push footer to bottom (Gaetan 2025-08-26) */
.app-shell > .content { flex:1 1 auto; min-height:0; }
.graph-wrapper { flex:1 1 auto; position:relative; min-height:0; }
.graph-wrapper .graph-host { position:absolute; inset:0; }
/* Panel now overlays with translate for slide animation */
.detail-panel-wrapper {position:fixed; top:0; right:0; height:100%; width:var(--panel-width); pointer-events:none; z-index:50;}
.detail-panel {position:absolute; top:0; right:0; height:100%; width:100%; background:#fff; border-left:1px solid #d0d0d0; padding:16px; box-shadow:-4px 0 12px rgba(0,0,0,0.12); overflow:auto; transform:translateX(100%); transition: transform .35s ease; pointer-events:auto;}
.detail-panel.open {transform:translateX(0);}
/* Cards inside panel */
.cards-stack { display:flex; flex-direction:column; gap:10px; }
.detail-card { border:1px solid #e2e8f0; border-radius:6px; overflow:hidden; background:#fff; }
.detail-card-header { display:flex; align-items:center; padding:0 8px 0 12px; justify-content:space-between; gap:12px; }
.detail-card-header .title { flex:1 1 auto; font-weight:600; font-size:14px; letter-spacing:.25px; display:inline-flex; align-items:center; }
.detail-card-header .actions { display:inline-flex; align-items:center; gap:4px; }
.detail-card-header .collapse-btn { all:unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; font-weight:600; font-size:14px; }
.detail-card-header .collapse-btn:hover { filter:brightness(1.08); }
.refresh-btn { all:unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; font-size:14px; font-weight:600; height:100%; background:transparent; color:inherit; }
.refresh-btn:hover { background:transparent; filter:brightness(1.12); }
.refresh-btn:active { background:transparent; filter:brightness(0.9); }
.icon-btn { all:unset; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:4px 8px; border:1px solid #cbd5e1; background:#fff; border-radius:4px; color:#0f172a; }
.icon-btn:hover { background:#f1f5f9; }
.icon-btn:active { background:#e2e8f0; }
.change-building-btn { margin-left:6px; }
.detail-card-header.kind-building .refresh-btn,
.detail-card-header.kind-floor .refresh-btn,
.detail-card-header.kind-dwelling .refresh-btn,
.detail-card-header.kind-room .refresh-btn,
.detail-card-header.kind-machine .refresh-btn { color:#fff; }
.detail-card-body { padding:10px 14px 14px; border-top:1px solid #e2e8f0; animation:fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.detail-card .chevron { font-size:12px; }
.detail-card .kv { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; font-size:13px; }
.detail-card .kv li strong { font-weight:600; }
.detail-card .desc { margin-top:0; font-size:13px; line-height:1.35; }
.mini-table { width:100%; border-collapse:collapse; font-size:12px; }
.mini-table th { text-align:left; background:#f1f5f9; padding:4px 6px; font-weight:600; }
.mini-table td { padding:4px 6px; border-top:1px solid #f1f5f9; }
.plain { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; font-size:12px; }
.panel-title { margin:0 0 12px; font-size:18px; }
.panel-close { position:absolute; top:6px; right:6px; background:none; border:none; font-size:20px; cursor:pointer; line-height:1; }
/* Kind color theming for headers */
.detail-card-header.kind-building { background:#1C6933; color:#fff; }
.detail-card-header.kind-floor { background:#6366f1; color:#fff; }
.detail-card-header.kind-dwelling { background:#ec4899; color:#fff; }
.detail-card-header.kind-room { background:#0ea5e9; color:#fff; }
.detail-card-header.kind-machine { background:#eab308; color:#1e1e1e; }

@keyframes slideIn {from {transform:translateX(30px); opacity:0;} to {transform:translateX(0); opacity:1;}}
.res-table {border-collapse:collapse; width:100%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08);} 
.res-table th {text-align:left; background:#f1f5f9; font-size:12px; letter-spacing:.5px; text-transform:uppercase; padding:6px 10px; border-bottom:1px solid #e2e8f0;}
.res-table td {padding:8px 10px; border-bottom:1px solid #f1f5f9; font-size:14px;}
.res-table tr.selected {background:#e6f4ea; color:var(--highlight-text); font-weight:600;}
.view-toggle {margin-bottom:12px;}
.view-toggle button {margin-right:6px; padding:6px 12px; font-size:13px; border:1px solid #cbd5e1; background:#fff; cursor:pointer; border-radius:4px;}
.view-toggle button[disabled]{background:#dbeafe; color:#0f172a; border-color:#93c5fd; cursor:default;}
.graph-canvas {background:rgba(255,255,255,0.15); backdrop-filter:saturate(160%) blur(1px); border:1px solid #e2e8f0; width:100%; height:600px; box-shadow:0 1px 3px rgba(0,0,0,.04);} 
.graph-canvas line {stroke:#64748b; stroke-width:2; stroke-dasharray:4 4; stroke-linecap:round; opacity:0.85;}
.graph-canvas circle {transition:filter .2s ease, fill .2s ease, stroke .2s ease;}
.graph-canvas circle:hover {filter:brightness(1.1);} 
.node-label {font-size:16px; fill:#000; font-weight:600; pointer-events:none;}
.node .icon {fill:#111; stroke:#111;}
.kind-badge { display:none; }
.node-text-bg {font-size:10px; fill:#111; pointer-events:none;}
.truncate {max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block;}
/* Wider truncation specifically for building descriptions */
.truncate-desc {max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:inline-block;}
.status-indicator {stroke:#fff; stroke-width:2;}
.node .outer-ring {fill:rgba(0,0,0,0.04); stroke:#cbd5e1; stroke-width:2;}
/* Subdued outer ring fills (reduced alpha from 0.10 -> 0.02) to avoid "candy" look while preserving subtle hue cues */
.node.kind-building .outer-ring {fill:rgba(28,105,51,0.02); stroke:#1C6933;}
.node.kind-floor .outer-ring {fill:rgba(99,102,241,0.02); stroke:#6366f1;}
.node.kind-dwelling .outer-ring {fill:rgba(236,72,153,0.02); stroke:#ec4899;}
.node.kind-room .outer-ring {fill:rgba(14,165,233,0.02); stroke:#0ea5e9;}
.node.kind-machine .outer-ring {fill:rgba(234,179,8,0.02); stroke:#eab308;}
.inner-node {stroke:#1e293b; stroke-width:2;}
.selected .inner-node {stroke:#1C6933; stroke-width:3; filter:drop-shadow(0 0 4px rgba(28,105,51,0.6));}
.legend {position:absolute; top:8px; right:8px; background:#fff; padding:6px 10px; border:1px solid #e2e8f0; font-size:12px; border-radius:4px;}
.highlight {color:var(--highlight-text);}
.error { color:#dc2626; font-weight:600; margin-bottom:8px; }
/* Force graph host overrides */
.graph-host { position:absolute; inset:0; width:100%; height:100%; }
.graph-host svg { width:100%; height:100%; background:#fff; border:1px solid #e2e8f0; border-radius:0; box-shadow:none; }
.graph-legend { font-size:11px; margin-top:4px; display:flex; gap:14px; flex-wrap:wrap; }
.graph-legend .legend-swatch { display:inline-block; width:14px; height:14px; border-radius:50%; margin-right:4px; vertical-align:middle; border:2px solid #64748b; }
.graph-legend .kind-building.legend-swatch { background:rgba(28,105,51,0.4); border-color:#1C6933; }
.graph-legend .kind-floor.legend-swatch { background:rgba(99,102,241,0.4); border-color:#6366f1; }
.graph-legend .kind-dwelling.legend-swatch { background:rgba(236,72,153,0.4); border-color:#ec4899; }
.graph-legend .kind-room.legend-swatch { background:rgba(14,165,233,0.4); border-color:#0ea5e9; }
.graph-legend .kind-machine.legend-swatch { background:rgba(234,179,8,0.5); border-color:#eab308; }
.node .kind-badge { font-size:9px; fill:#fff; font-weight:600; pointer-events:none; }
.node.kind-building .inner-node,
.node.kind-floor .inner-node,
.node.kind-dwelling .inner-node,
.node.kind-room .inner-node,
.node.kind-machine .inner-node { stroke:#1e293b; }

/* Resource kind icons */
.rk-icon { display:inline-flex; width:20px; height:20px; align-items:center; justify-content:center; color:#1e293b; }
.rk-icon svg { width:18px; height:18px; stroke-width:2; }
.rk-kind-building { color:#1C6933; }
.rk-kind-floor { color:#6366f1; }
.rk-kind-dwelling { color:#ec4899; }
.rk-kind-room { color:#0ea5e9; }
.rk-kind-machine { color:#eab308; }

/* Footer CMS layout */
.footer { font-weight:400; color:#fff; }
.footer-panel { background:rgb(0,167,76); width:80%; margin:0 auto; padding:16px 28px; border-radius:14px; box-sizing:border-box; }
/* Center first footer column content */
.footer .fcol1 { display:flex; flex-direction:column; align-items:center; }
.footer-collapse-toggle { position:absolute; left:50%; transform:translateX(-50%); top:-32px; background:rgb(0,167,76); color:#fff; border:none; padding:4px 12px; border-radius:14px 14px 0 0; cursor:pointer; font-size:12px; font-weight:600; }
.footer-collapse-toggle:hover { filter:brightness(1.08); }
.footer-panel { position:relative; }
.footer-grid.collapsed .logo2-text { display:none; }
.footer-grid.collapsed .contact-card:not(:first-child) { display:none; }
.privacy-btn { margin-top:12px; background:rgba(255,255,255,0.15); color:#fff; border:1px solid rgba(255,255,255,0.3); padding:6px 10px; font-size:12px; border-radius:20px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.privacy-btn:hover { background:rgba(255,255,255,0.25); }
.privacy-icon { font-size:14px; line-height:1; }
/* Modal */
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; z-index:200; }
.privacy-modal { background:#fff; color:#1e293b; width:min(640px,90%); padding:24px 28px 32px; border-radius:16px; box-shadow:0 10px 28px -4px rgba(0,0,0,0.3); display:flex; flex-direction:column; gap:14px; }
.privacy-modal h3 { margin:0; font-size:20px; color:#0f172a; }
.privacy-text { font-size:14px; line-height:1.5; max-height:50vh; overflow:auto; }
.privacy-ok { align-self:flex-end; background:rgb(0,167,76); color:#fff; border:none; padding:8px 18px; font-size:14px; border-radius:8px; cursor:pointer; font-weight:600; }
.privacy-ok:hover { filter:brightness(1.1); }
.footer-grid { display:grid; grid-template-columns:20% 20% 40% 20%; gap:24px; align-items:flex-start; }
.footer .fcol { font-size:13px; line-height:1.35; }
.footer-logo { max-width:100%; height:auto; display:block; margin-bottom:8px; }
.footer-logo.primary { width:151px; height:47.65px; object-fit:contain; }
.footer-logo.secondary { width:253px; height:53.13px; object-fit:contain; }
.footer .logo2-text { margin:4px 0 0; font-size:12px; line-height:1.3; }
.contacts-wrapper { display:grid; gap:12px; }
.contacts-wrapper.single { grid-template-columns:1fr; }
.contacts-wrapper.split { grid-template-columns:1fr 1fr; }
.contact-card { background:rgba(255,255,255,0.15); padding:8px 10px; border-radius:6px; backdrop-filter:blur(2px); }
.contact-title { font-size:14px; font-weight:600; margin:0 0 4px; }
.contact-name { font-size:12px; font-weight:500; }
.contact-email { font-size:12px; color:rgb(252,230,2); text-decoration:none; word-break:break-all; }
.contact-email:hover { text-decoration:underline; }
.follow-title { font-size:14px; font-weight:600; margin:0 0 6px; }
.social-links { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.social-links a { text-decoration:none; color:rgb(252,230,2); font-size:12px; position:relative; padding-left:18px; }
.social-links a:before { content:""; width:12px; height:12px; position:absolute; left:0; top:2px; background:rgb(252,230,2); mask-size:contain; mask-repeat:no-repeat; mask-position:center; -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center; }
.social-links a.name-linkedin:before { mask-image:url('/icons/linkedin.svg'); -webkit-mask-image:url('/icons/linkedin.svg'); }
.social-links a.name-youtube:before { mask-image:url('/icons/youtube.svg'); -webkit-mask-image:url('/icons/youtube.svg'); }
.footer-loading, .footer-error { font-size:13px; }
.footer-error { color:#b91c1c; font-weight:600; }

@media (max-width:1100px){
	.footer-grid { grid-template-columns:1fr 1fr; }
	.footer .fcol3 { grid-column:1 / -1; }
}

@media (max-width:640px){
	.footer-grid { grid-template-columns:1fr; }
	.contacts-wrapper.split { grid-template-columns:1fr; }
	.collapsed {
		display:none;
	}
}

a {
	text-decoration: none !important;
	color: rgb(252, 230, 2);
}

a:hover {
	color: #F37021;
}

/* Local FontAwesome SVG subset utility class (Gaetan 2025-08-26) */
img.fa-svg-icon { /* Sizing now controlled per-instance via width/height attributes on <img>. (Gaetan 2025-08-26) */
	display:block;
	object-fit:contain;
	color:inherit;
	fill:currentColor;
}
/* Left navigation icon sizing via CSS variable for easy tuning (Gaetan 2025-08-26) */
img.fa-svg-icon.nav-icon-size { width:var(--icon-nav-size); height:var(--icon-nav-size); }
/* Menu card icon sizing via CSS variable (Gaetan 2025-08-26) */
img.fa-svg-icon.card-icon-size { width:var(--icon-card-size); height:var(--icon-card-size); }