/**
 * Visible themed textures for sidebar + top bar (not main content).
 * Patterns are SVG data-URIs; strength tuned for light and dark Bootstrap themes.
 */

:root {
  --f21-chrome-base: #152238;
  --f21-chrome-pattern-size: 72px 36px;
  --f21-chrome-pattern-strength: 0.72;
  --f21-chrome-scene-opacity: 0.55;

  /* Running-bond brick */
  --f21-pattern-brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36' viewBox='0 0 72 36'%3E%3Cg fill='%23c4784a' fill-opacity='.32'%3E%3Crect x='2' y='2' width='32' height='14' rx='1'/%3E%3Crect x='38' y='2' width='32' height='14' rx='1'/%3E%3Crect x='20' y='20' width='32' height='14' rx='1'/%3E%3Crect x='56' y='20' width='14' height='14' rx='1'/%3E%3Crect x='2' y='20' width='14' height='14' rx='1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23e8a070' stroke-opacity='.45' stroke-width='.9'%3E%3Crect x='2' y='2' width='32' height='14'/%3E%3Crect x='38' y='2' width='32' height='14'/%3E%3Crect x='20' y='20' width='32' height='14'/%3E%3Crect x='56' y='20' width='14' height='14'/%3E%3Crect x='2' y='20' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E");

  /* Floor / window grid (home) */
  --f21-pattern-windows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%237eeadb' stroke-opacity='.22' stroke-width='.8'%3E%3Crect x='4' y='4' width='16' height='16'/%3E%3Crect x='28' y='4' width='16' height='16'/%3E%3Crect x='4' y='28' width='16' height='16'/%3E%3Crect x='28' y='28' width='16' height='16'/%3E%3C/g%3E%3C/svg%3E");

  /* Blueprint grid (sales) */
  --f21-pattern-blueprint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='none' stroke='%235eb8e8' stroke-opacity='.28' stroke-width='.7' d='M0 20h40M20 0v40'/%3E%3Cpath fill='none' stroke='%235eb8e8' stroke-opacity='.14' stroke-width='.5' d='M0 10h40M0 30h40M10 0v40M30 0v40'/%3E%3C/svg%3E");

  /* Ledger lines (receipts) */
  --f21-pattern-ledger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='24' viewBox='0 0 80 24'%3E%3Cpath fill='none' stroke='%236ee7b7' stroke-opacity='.3' stroke-width='.8' d='M0 6h80M0 12h80M0 18h80'/%3E%3C/svg%3E");

  /* Column grid (slabs / schedule) */
  --f21-pattern-columns: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='56' viewBox='0 0 32 56'%3E%3Crect x='4' y='0' width='6' height='56' fill='%23a5b4fc' fill-opacity='.18'/%3E%3Crect x='14' y='8' width='6' height='48' fill='%23a5b4fc' fill-opacity='.14'/%3E%3Crect x='24' y='4' width='4' height='52' fill='%23a5b4fc' fill-opacity='.12'/%3E%3C/svg%3E");

  /* Bank vertical bars */
  --f21-pattern-bank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='40' viewBox='0 0 56 40'%3E%3Cpath fill='%2394a3b8' fill-opacity='.16' d='M4 14h48v4H4zm0 10h48v4H4z'/%3E%3Cpath fill='none' stroke='%2394a3b8' stroke-opacity='.28' stroke-width='.8' d='M8 8h40M4 32h48'/%3E%3C/svg%3E");

  /* Vault hatch */
  --f21-pattern-vault: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='18' fill='none' stroke='%23f0c674' stroke-opacity='.28' stroke-width='1.2'/%3E%3Cpath fill='none' stroke='%23f0c674' stroke-opacity='.22' stroke-width='.8' d='M24 6v36M6 24h36M10 10l28 28M38 10L10 38'/%3E%3C/svg%3E");

  /* Expense dots */
  --f21-pattern-expenses: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='6' r='2' fill='%23c4a0e8' fill-opacity='.35'/%3E%3Ccircle cx='18' cy='12' r='2' fill='%23c4a0e8' fill-opacity='.28'/%3E%3Ccircle cx='8' cy='18' r='2' fill='%23c4a0e8' fill-opacity='.22'/%3E%3C/svg%3E");

  /* Admin hex */
  --f21-pattern-platform: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath fill='none' stroke='%23818cf8' stroke-opacity='.25' stroke-width='.8' d='M14 4h28l14 24-14 24H14L0 28z'/%3E%3C/svg%3E");

  /* Skyline silhouette (top bar accent) */
  --f21-scene-buildings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 90' preserveAspectRatio='xMaxYMax meet'%3E%3Cg fill='%23ffffff' fill-opacity='.16'%3E%3Crect x='0' y='42' width='34' height='48'/%3E%3Crect x='38' y='24' width='28' height='66'/%3E%3Crect x='70' y='52' width='24' height='38'/%3E%3Crect x='98' y='12' width='38' height='78'/%3E%3Crect x='140' y='36' width='30' height='54'/%3E%3Crect x='174' y='58' width='26' height='32'/%3E%3Crect x='204' y='28' width='34' height='62'/%3E%3Crect x='242' y='46' width='28' height='44'/%3E%3Crect x='274' y='18' width='40' height='72'/%3E%3Crect x='318' y='44' width='32' height='46'/%3E%3Crect x='354' y='26' width='26' height='64'/%3E%3Crect x='384' y='54' width='34' height='36'/%3E%3Crect x='422' y='32' width='36' height='58'/%3E%3Crect x='462' y='48' width='18' height='42'/%3E%3C/g%3E%3C/svg%3E");

  --f21-chrome-pattern: var(--f21-pattern-windows);
  --f21-chrome-scene: var(--f21-scene-buildings);
  --f21-chrome-pattern-size: 48px 48px;

  /* Menu sidebar + top bar — Ice blue */
  --f21-menu-base: #edf2fb;
  --f21-menu-base-deep: #e3ebf7;
  --f21-menu-gradient-start: #f3f6fd;
  --f21-menu-grid-opacity: 0.3;
  --f21-menu-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%237a9ec4' stroke-opacity='.38' stroke-width='.7' d='M18 0H0M0 0v18'/%3E%3C/svg%3E");
  --f21-menu-grid-size: 18px 18px;
  --f21-menu-edge-highlight: rgba(255, 255, 255, 0.6);
}

/* Dark theme: deep ice blue aligned with Bootstrap dark surfaces */
[data-bs-theme="dark"] {
  --f21-menu-base: #141c2e;
  --f21-menu-base-deep: #101828;
  --f21-menu-gradient-start: #1a2540;
  --f21-menu-grid-opacity: 0.42;
  --f21-menu-edge-highlight: rgba(255, 255, 255, 0.06);
  --f21-menu-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%2386a8d4' stroke-opacity='.4' stroke-width='.7' d='M18 0H0M0 0v18'/%3E%3C/svg%3E");
  --f21-topbar-border: var(--bs-border-color, rgba(255, 255, 255, 0.12));
  --f21-sidebar-border: var(--bs-border-color, rgba(255, 255, 255, 0.12));
}

/* --- Section themes (warm/cool bases + pattern choice) --- */

.floor21-body[data-nav-area="overview"] {
  --f21-chrome-base: #142a42;
  --f21-chrome-pattern: var(--f21-pattern-windows);
  --f21-chrome-pattern-size: 48px 48px;
  --f21-chrome-scene: var(--f21-scene-buildings);
}

.floor21-body[data-nav-area="property"] {
  --f21-chrome-base: #261a14;
  --f21-chrome-pattern: var(--f21-pattern-brick);
  --f21-chrome-pattern-size: 72px 36px;
  --f21-chrome-pattern-strength: 1;
  --f21-chrome-scene: var(--f21-scene-buildings);
  --f21-chrome-scene-opacity: 0.7;
  --f21-topbar-bg: linear-gradient(125deg, #3d2418 0%, #243528 48%, #1a3038 100%);
  --f21-sidebar-bg: linear-gradient(180deg, #322018 0%, #1e2828 55%, #141c24 100%);
}

.floor21-body[data-nav-area="sales"] {
  --f21-chrome-base: #142238;
  --f21-chrome-pattern: var(--f21-pattern-blueprint);
  --f21-chrome-pattern-size: 40px 40px;
  --f21-chrome-scene: var(--f21-scene-buildings);
}

.floor21-body[data-nav-area="receipts"] {
  --f21-chrome-base: #122a24;
  --f21-chrome-pattern: var(--f21-pattern-ledger);
  --f21-chrome-pattern-size: 80px 24px;
}

.floor21-body[data-nav-area="slabs"] {
  --f21-chrome-base: #1a1830;
  --f21-chrome-pattern: var(--f21-pattern-columns);
  --f21-chrome-pattern-size: 32px 56px;
}

.floor21-body[data-nav-area="banking"] {
  --f21-chrome-base: #101c2e;
  --f21-chrome-pattern: var(--f21-pattern-bank);
  --f21-chrome-pattern-size: 56px 40px;
}

.floor21-body[data-nav-area="vault"] {
  --f21-chrome-base: #2a2010;
  --f21-chrome-pattern: var(--f21-pattern-vault);
  --f21-chrome-pattern-size: 48px 48px;
}

.floor21-body[data-nav-area="expenses"] {
  --f21-chrome-base: #221828;
  --f21-chrome-pattern: var(--f21-pattern-expenses);
  --f21-chrome-pattern-size: 24px 24px;
}

.floor21-body[data-nav-area="platform"] {
  --f21-chrome-base: #181428;
  --f21-chrome-pattern: var(--f21-pattern-platform);
  --f21-chrome-pattern-size: 56px 48px;
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="overview"] {
  --f21-chrome-base: #0e1a2a;
  --f21-chrome-pattern-strength: 0.85;
}

[data-bs-theme="dark"] .floor21-body[data-nav-area="property"] {
  --f21-chrome-base: #1e1410;
  --f21-chrome-pattern-strength: 1;
  --f21-topbar-bg: linear-gradient(125deg, #2a1810 0%, #1a2820 50%, #121e28 100%);
  --f21-sidebar-bg: linear-gradient(180deg, #2a1810 0%, #161e22 60%, #0e1418 100%);
  --f21-pattern-brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='36' viewBox='0 0 72 36'%3E%3Cg fill='%23d48858' fill-opacity='.38'%3E%3Crect x='2' y='2' width='32' height='14' rx='1'/%3E%3Crect x='38' y='2' width='32' height='14' rx='1'/%3E%3Crect x='20' y='20' width='32' height='14' rx='1'/%3E%3Crect x='56' y='20' width='14' height='14' rx='1'/%3E%3Crect x='2' y='20' width='14' height='14' rx='1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23f0b080' stroke-opacity='.5' stroke-width='.9'%3E%3Crect x='2' y='2' width='32' height='14'/%3E%3Crect x='38' y='2' width='32' height='14'/%3E%3Crect x='20' y='20' width='32' height='14'/%3E%3Crect x='56' y='20' width='14' height='14'/%3E%3Crect x='2' y='20' width='14' height='14'/%3E%3C/g%3E%3C/svg%3E");
}

[data-bs-theme="dark"] .floor21-body {
  --f21-chrome-scene-opacity: 0.65;
}

/* --- Menu chrome: brown + square grid (sidebar + top bar) --- */

/* Sidebar menu: chocolate brown + fine square grid (reference mockup) */
.floor21-sidebar {
  --f21-chrome-base: var(--f21-menu-base);
  background-color: var(--f21-menu-base) !important;
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0) 12%,
      rgba(0, 0, 0, 0.08) 100%
    ),
    linear-gradient(
      180deg,
      var(--f21-menu-gradient-start) 0%,
      var(--f21-menu-base-deep) 100%
    ) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-repeat: no-repeat !important;
  border-radius: 0.75rem 0 0 0;
  box-shadow: inset 0 1px 0 var(--f21-menu-edge-highlight);
}

[data-bs-theme="dark"] .floor21-sidebar {
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0) 10%,
      rgba(0, 0, 0, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      var(--f21-menu-gradient-start) 0%,
      var(--f21-menu-base-deep) 100%
    ) !important;
}

.floor21-sidebar::before {
  content: "";
  position: absolute;
  height: auto;
  inset: 0;
  background: none;
  box-shadow: none;
  opacity: 1;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.floor21-sidebar::after {
  background-image: var(--f21-menu-grid);
  background-size: var(--f21-menu-grid-size);
  background-repeat: repeat;
  background-position: 0 0;
  opacity: var(--f21-menu-grid-opacity, 1);
  mix-blend-mode: normal;
}

/* Top bar matches menu chrome */
.floor21-topbar {
  --f21-chrome-base: var(--f21-menu-base);
  background-color: var(--f21-menu-base) !important;
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.07) 0%,
      rgba(0, 0, 0, 0.06) 100%
    ),
    linear-gradient(
      90deg,
      var(--f21-menu-gradient-start) 0%,
      var(--f21-menu-base-deep) 100%
    ) !important;
  background-size: 100% 100%, 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 -1px 0 var(--f21-menu-edge-highlight);
}

[data-bs-theme="dark"] .floor21-topbar {
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(0, 0, 0, 0.1) 100%
    ),
    linear-gradient(
      90deg,
      var(--f21-menu-gradient-start) 0%,
      var(--f21-menu-base-deep) 100%
    ) !important;
}

.floor21-topbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--f21-menu-grid);
  background-size: var(--f21-menu-grid-size);
  background-repeat: repeat;
  opacity: var(--f21-menu-grid-opacity, 1);
  mix-blend-mode: normal;
}

.floor21-topbar::after {
  display: none;
}

[data-bs-theme="light"] .floor21-topbar .btn-outline-light {
  border-color: rgba(30, 58, 95, 0.32);
  color: #1e3a5f;
}

[data-bs-theme="light"] .floor21-topbar .btn-outline-light:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(30, 58, 95, 0.48);
  color: #1e3a5f;
}