:root{
  --bg:#f6f7fb;
  --panel:#ffffff;
  --panel2:#fbfcff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --shadow:0 10px 30px rgba(2,6,23,.10);
  --radius:16px;

  --headerH:56px;
  --sidebarW:320px;

  /* Primary button = sage green, matching the sidebar's "Project Overview"
     headline (--mod-headline-bg). Slate-900 felt too high-contrast for the
     calmer construction-PM aesthetic. */
  --btn:#4a6b3a;
  --btnHover:#3e5a30;
  --btnText:#fff;
  --accent:#2563eb;
  --accent2:#22c55e;
  --danger:#ef4444;

  --paneA: 320px;
  --paneC: 360px;

  --splitW: 10px;
  --gap: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter's improved letterforms */
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  transition:0.2s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app{ height:100%; display:flex; flex-direction:column; }
/* --demoBannerH defaults to 0; only the readonly-guest demo session sets it
   (body[data-demo="1"] below). The content height subtracts both so panes
   still fill the viewport correctly whether or not the banner is present. */
.content{ height:calc(100% - var(--headerH) - var(--demoBannerH, 0px)); display:flex; position:relative; }

/* ───── Demo (read-only sample-project) banner ─────────────────────────────
   Server-rendered above <header> when $is_readonly_guest. The body gets
   data-demo="1" so CSS can both size the banner slot and gate tour styles. */
body[data-demo="1"]{ --demoBannerH:40px; }
.demoBanner{
  height:var(--demoBannerH);
  display:flex; align-items:center; justify-content:center;
  gap:14px; padding:0 16px;
  background:linear-gradient(90deg,#fef3c7,#fde68a);
  color:#78350f;
  border-bottom:1px solid #f59e0b;
  font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden;
}
.demoBanner .demoBanner-dot{
  width:8px; height:8px; border-radius:50%;
  background:#b45309; box-shadow:0 0 0 4px rgba(180,83,9,.18);
  flex:0 0 8px;
}
.demoBanner .demoBanner-text{
  overflow:hidden; text-overflow:ellipsis;
}
.demoBanner .demoBanner-cta{
  background:#b45309; color:#fff;
  padding:5px 12px; border-radius:999px;
  text-decoration:none; font-weight:800; font-size:12px;
  flex:0 0 auto;
}
.demoBanner .demoBanner-cta:hover{ background:#92400e; }
@media (max-width:640px){
  body[data-demo="1"]{ --demoBannerH:56px; } /* wraps to 2 lines on phones */
  .demoBanner{ white-space:normal; text-align:center; font-size:12px; }
}

/* ───── Demo guided tour ────────────────────────────────────────────────────
   Dim-the-room + spotlight cutout + tooltip card. Shown once per browser
   session for readonly guests via demo-tour.js. */
.demoTour-overlay{
  position:fixed; inset:0; z-index:9000;
  pointer-events:auto;
  /* The spotlight is a giant box-shadow with a transparent cutout. We set
     its dimensions via CSS vars updated from JS per step. */
  background:transparent;
}
.demoTour-spotlight{
  position:fixed;
  left:var(--dt-x,50vw); top:var(--dt-y,50vh);
  width:var(--dt-w,0px); height:var(--dt-h,0px);
  border-radius:12px;
  box-shadow:0 0 0 9999px rgba(15,23,42,.55), 0 0 0 3px rgba(59,130,246,.9);
  transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  pointer-events:none;
  z-index:9001;
}
/* When the step has no target (welcome / outro), we hide the cutout and
   just dim everything by stretching a covering layer. */
.demoTour-spotlight.demoTour-spotlight--center{
  left:50vw; top:50vh; width:1px; height:1px;
}
.demoTour-card{
  position:fixed; z-index:9002;
  max-width:340px;
  background:#fff; color:#0f172a;
  border-radius:14px; padding:16px 18px;
  box-shadow:0 24px 60px -10px rgba(2,6,23,.5);
  font-size:14px; line-height:1.45;
  transition:left .25s ease, top .25s ease;
}
.demoTour-card .demoTour-title{
  font-weight:800; font-size:15px; margin:0 0 6px;
}
.demoTour-card .demoTour-body{
  color:#334155; margin:0 0 14px;
}
.demoTour-card .demoTour-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.demoTour-card .demoTour-dots{
  display:flex; gap:6px;
}
.demoTour-card .demoTour-dot{
  width:7px; height:7px; border-radius:50%;
  background:#cbd5e1;
}
.demoTour-card .demoTour-dot.is-active{ background:#2563eb; }
.demoTour-card .demoTour-actions{ display:flex; gap:8px; }
.demoTour-card .demoTour-btn{
  appearance:none; border:1px solid var(--line);
  background:#fff; color:#0f172a;
  padding:7px 12px; border-radius:8px;
  font-weight:700; font-size:13px; cursor:pointer;
}
.demoTour-card .demoTour-btn:hover{ background:#f1f5f9; }
.demoTour-card .demoTour-btn.is-primary{
  background:#2563eb; color:#fff; border-color:transparent;
}
.demoTour-card .demoTour-btn.is-primary:hover{ background:#1d4ed8; }
.demoTour-card .demoTour-skip{
  background:transparent; border:none; color:#64748b;
  font-size:12px; cursor:pointer; padding:0; font-weight:600;
}
.demoTour-card .demoTour-skip:hover{ color:#0f172a; text-decoration:underline; }
/* Mobile tweaks — match the dashboard.css 920px breakpoint where the
   three-pane layout collapses into the pane-switcher view. Tighter
   padding, smaller font, and the card claims full width minus safe-area
   margins. The JS-driven placement uses the mobile-pane-switcher's
   bounding box as a bottom inset, so card position is correct without
   needing fixed margins here. */
@media (max-width:920px){
  .demoTour-card{
    max-width:calc(100vw - 24px);
    padding:14px 16px;
    border-radius:12px;
  }
  .demoTour-card .demoTour-title{ font-size:14px; }
  .demoTour-card .demoTour-body{ font-size:13px; margin-bottom:12px; }
  .demoTour-card .demoTour-btn{ padding:8px 12px; font-size:13px; }
  /* Hit-targets a hair larger on touch. */
  .demoTour-card .demoTour-actions{ gap:6px; }
}

.sidebar{
  position:absolute; top:0; left:0; height:100%; width:var(--sidebarW);
  background:var(--panel);
  border-right:1px solid var(--line);
  transform:translateX(-102%);
  transition:transform .18s ease;
  box-shadow:var(--shadow);
  z-index:40;
  display:flex;
  flex-direction:column;
}
.sidebar.open{ transform:translateX(0); }

.scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
  z-index:30;
}
.scrim.show{ opacity:1; pointer-events:auto; }

.workspace{
  height:100%; width:100%;
  padding:16px;
  display:flex;
  align-items:stretch;
  min-width:0;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(2,6,23,.04);
  overflow:hidden;
  min-width:0;
}
.panel .ph{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* Added specific layout for header controls */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 75px; 
}
.panel .pb{
  padding:14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  min-height:0;
  height:calc(100% - 44px);
  overflow-y:auto;
}

.colA{ width:var(--paneA); flex:0 0 var(--paneA); }
.colB{ flex:1 1 auto; min-width:0; }
.colC{ width:var(--paneC); flex:0 0 var(--paneC); }

.splitter{
  width:var(--splitW);
  flex:0 0 var(--splitW);
  border-radius:10px;
  background:transparent;
  position:relative;
  cursor:col-resize;
  user-select:none;
  touch-action:none;
}
.splitter::before{
  content:"";
  position:absolute;
  top:10px;
  bottom:10px;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:rgba(100,116,139,.35);
  border-radius:999px;
}
.splitter:hover::before{ background:rgba(37,99,235,.55); }
.splitter.dragging::before{ background:rgba(37,99,235,.85); width:3px; }

.btn{
  appearance:none;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  padding:9px 10px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .06s ease, background .12s ease;
}
.btn:hover{ background:var(--panel2); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--btn); color:var(--btnText); border-color:transparent; }
.btn.primary:hover{ background:var(--btnHover); }

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid var(--line);
  color:var(--muted);
  background:var(--panel2);
}

.flash{
  position:absolute;
  left:16px; top:16px;
  z-index:20;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}
.flash.success{ border-color:rgba(34,197,94,.35); }
.flash.error{ border-color:rgba(239,68,68,.35); }
.dot{ width:10px;height:10px;border-radius:999px;background:var(--accent); }
.flash.success .dot{ background:var(--accent2); }
.flash.error .dot{ background:var(--danger); }

body.is-resizing{ cursor:col-resize !important; user-select:none !important; }

.project-item.active{
  border-color:rgba(37,99,235,.45) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.controlStack{ display:flex; flex-direction:column; gap:10px; }
.controlHint{ font-size:12px; font-weight:500; color:var(--muted); margin-top:4px; }

.moduleTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.moduleTitle{ font-weight:700; color:var(--text); letter-spacing:-0.01em; }

.moduleShell{
  height:calc(100% - 44px);
  min-height:0;
}
.moduleFrame{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  color:#000;
}

.modalWrap{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  z-index:60;
}
.modalWrap.show{ display:flex; }
.modalScrim{ position:absolute; inset:0; background:rgba(15,23,42,.45); }
.modal{
  position:relative;
  width:min(720px, calc(100% - 28px));
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modalHead{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg, var(--panel2), var(--panel));
}
.modalTitle{ font-weight:700; font-size:14px; letter-spacing:-0.01em; }
.modalBody{ padding:14px; }
.grid{ display:grid; grid-template-columns: 1fr 180px; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-size:12px; font-weight:600; color:var(--muted); }
input, textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 11px;
  font:inherit;
  font-size:14px;
  outline:none;
  background:#fff;
}
textarea{ min-height:110px; resize:vertical; }
input:focus, textarea:focus{
  border-color:rgba(37,99,235,.35);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}
.modalFoot{
  padding:12px 14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

@media (max-width: 920px){
  .colA, .colC{ display:none; }
  .splitter{ display:none; }
  .workspace{ padding:12px; }
  :root{ --sidebarW: 86vw; }
  .grid{ grid-template-columns:1fr; }
  .moduleShell{ height:auto; }
}

/* Prevents iframes from capturing mouse events during resize */
body.is-resizing iframe {
  pointer-events: none;
}

/* 1. Performance: Kill transitions during manual resize */
body.is-resizing .panel {
  transition: none !important;
}

.panel {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              flex 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; /* Needed for overlay */
  pointer-events: auto !important;
}

/* 2. Layout Rules */
.colA { min-width: 200px !important; }
.colB { min-width: 300px !important; flex: 1 1 auto; }
.colC { min-width: 60px; }

/* 3. ORIGINAL FOCUS MODE: Focus (Widens Pane, shrinks others) */
/* When C is focused */
.workspace[data-focus="C"] { --paneA: 200px; }
.workspace[data-focus="C"] .colB { 
  flex: 0 0 300px !important; 
  width: 300px !important;
}
.workspace[data-focus="C"] .colC { flex: 1 1 auto; }

/* When B is focused */
.workspace[data-focus="B"] { --paneA: 200px; }
.workspace[data-focus="B"] .colC { 
  flex: 0 0 200px !important; 
  width: 60px !important;
}
.workspace[data-focus="B"] .colB { flex: 1 1 auto; }

/* Focus Mode Visuals */
.workspace[data-focus] .panel {
  opacity: 1 !important;
  z-index: auto;
}
.workspace[data-focus] .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.05);
  pointer-events: none;
  border-radius: inherit;
  transition:.3s;
}
.workspace[data-focus] .panel.focused { z-index: 10; }
.workspace[data-focus] .panel.focused::after { background: transparent; }
.workspace[data-focus] .panel:not(.focused):hover::after { background: rgba(0,0,0,0.01); }

/* Remove splitters during focus to prevent layout fighting */
.workspace[data-focus] .splitter {
  display: none !important;
  pointer-events: none !important;
}

/* 4. NEW FULLSCREEN MODE: Hides other panes completely */
.workspace[data-fullscreen="B"] .colC,
.workspace[data-fullscreen="B"] #splitC { display: none !important; }
.workspace[data-fullscreen="B"] .colB { flex: 1 1 auto !important; width: 100% !important; }

.workspace[data-fullscreen="C"] .colB,
.workspace[data-fullscreen="C"] #splitC { display: none !important; }
.workspace[data-fullscreen="C"] .colC { flex: 1 1 auto !important; width: 100% !important; }

/* 5. Header Control Buttons */
/* Container for buttons in top right */
.panel .ph .header-controls {
    position: absolute;
    top: 9px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 20;
}

.focus-btn {
  width: 26px; height: 26px; 
  border-radius: 6px; 
  border: 1px solid var(--line);
  background: var(--panel); 
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px;
  pointer-events: auto;
}
.focus-btn:hover { background: var(--accent); color: #fff; }

/* 6. Mini Sidebar A State */
.workspace[data-mini="true"] { --paneA: 64px !important; }
.workspace[data-mini="true"] .colA { min-width: 64px !important; }
.workspace[data-mini="true"] #splitA { display: none !important; }
.workspace[data-mini="true"] .colA .ph span,
.workspace[data-mini="true"] .colA .btn b, 
.workspace[data-mini="true"] .colA .controlHint { display: none; }
.workspace[data-mini="true"] .colA .ph { justify-content: center; padding-right: 0; }
.workspace[data-mini="true"] .colA .btn { justify-content: center; padding: 9px 13px; }

/* Sidebar Group Headers */
.nav-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 6px 4px; /* Space above, little space below */
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* Group Container (Optional: if you want tighter spacing between buttons in a group) */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Slightly tighter than the default controlStack gap */
}

/* ... existing mini sidebar rules ... */

/* Transform Headers into Dividers when Minimized */
.workspace[data-mini="true"] .colA .nav-header {
    font-size: 0;            /* Hide the text */
    color: transparent;      /* Make text invisible */
    height: 1px;             /* Turn container into a thin line */
    background: var(--line); /* Use your standard border color */
    margin: 10px 12px;       /* Center the line with vertical spacing */
    overflow: hidden;        /* Clip any remaining text rendering */
    opacity: 0.5;            /* Make it subtle */
}














/* Default: Switcher hidden on Desktop */
.mobile-pane-switcher { display: none; }

/* MOBILE STYLES */
@media (max-width: 920px) {

    /* 1. HIDE ALL PANES BY DEFAULT */
    /* This overrides the flex layout */
    .colA, .colB, .colC {
        display: none !important; /* Force hide */
        width: 100% !important;   /* Full width when visible */
        flex: none !important;
        border: none;
        border-radius: 0;
        height: 100%;
    }

    /* 2. SHOW PANE BASED ON BODY CLASS */
    body.show-pane-A .colA { display: block !important; }
    body.show-pane-B .colB { display: block !important; }
    body.show-pane-C .colC { display: block !important; }

    /* 3. SWITCHER BAR STYLING */
    .mobile-pane-switcher {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 64px;
        background: #0f172a; /* Dark background */
        border-top: 1px solid rgba(255,255,255,0.1);
        z-index: 999;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .switcher-btn {
        flex: 1;
        background: transparent;
        border: none;
        color: #64748b; /* Inactive Color */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        position: relative;
    }

    .switcher-btn span {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .switcher-btn svg {
        width: 24px; height: 24px;
        fill: currentColor;
    }

    /* ACTIVE STATE (Highlight the selected button) */
    .switcher-btn.active { color: #38bdf8; } /* CivilXL Blue */
    .switcher-btn.active::before {
        content: "";
        position: absolute; top: 0; left: 30%; right: 30%;
        height: 2px;
        background: #38bdf8;
        box-shadow: 0 2px 8px #38bdf8;
    }
    
    /* Adjust Workspace padding so content isn't hidden behind the bar */
    .panel .pb { padding-bottom: 80px; }
	
	
	/* Inside dashboard.css -> @media (max-width: 920px) { ... */

	  /* Hide the desktop-specific header controls (Expand/Fullscreen buttons) */
	  .panel .ph .header-controls {
		  display: none !important;
	  }

	/* } */
}

/* Default: Hide mobile-only buttons on Desktop */
.mobile-only-btn {
    display: none !important;
}

/* Mobile View: Show the button */
@media (max-width: 920px) {
    .mobile-only-btn {
        display: inline-flex !important; /* Force show */
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text);
        margin-right: 8px;
        padding: 4px;
        cursor: pointer;
        border-radius: 50%;
    }
    
    .mobile-only-btn:active {
        background: rgba(0,0,0,0.1);
    }
}

/* ==========================================================================
   MODULE BUTTONS — pale sage green / near-white palette
   Scoped to .controlStack so the rest of the app is untouched.
   ========================================================================== */
.controlStack {
  --mod-card-bg:     #f4f7f0;          /* near-white with a hint of sage */
  --mod-card-hover:  #e8efe1;          /* slightly more saturated sage on hover */
  --mod-border:      #dde6d2;          /* soft sage border */
  --mod-border-hover:#c5d3b3;          /* hover border */
  --mod-text:        #3f4a36;          /* deep sage-ink, readable but soft */
  --mod-text-soft:   #6b7a5d;          /* sage-grey for icons */
  --mod-text-strong: #1f2a18;          /* near-black with sage tint for hover */
  --mod-active-bg:   #6b8e5a;          /* sage green for pressed/active */
  --mod-active-fg:   #f4f7f0;
  --mod-headline-bg: #4a6b3a;          /* deeper sage for the headline button */
  --mod-headline-bg-hover:#3e5a30;
  --mod-headline-fg: #f4f7f0;
  --mod-section:     #5a7048;          /* mid-sage for the section header text */
}

/* Default state: outlined card on white, low-contrast taupe text */
.controlStack .btn.primary {
  background: var(--mod-card-bg);
  color: var(--mod-text);
  border: 1px solid var(--mod-border);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(28, 25, 23, 0.03);
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.controlStack .btn.primary i,
.controlStack .btn.primary svg {
  color: var(--mod-text-soft);
  fill: currentColor;
}

/* Hover: slightly warmer card, stronger ink, taupe icon */
.controlStack .btn.primary:hover {
  background: var(--mod-card-hover);
  color: var(--mod-text-strong);
  border-color: var(--mod-border-hover);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
}
.controlStack .btn.primary:hover i,
.controlStack .btn.primary:hover svg {
  color: var(--mod-active-bg);
}

/* Pressed / persisted active state */
.controlStack .btn.primary:active,
.controlStack .btn.primary.is-active {
  background: var(--mod-active-bg);
  color: var(--mod-active-fg);
  border-color: var(--mod-active-bg);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.18);
}
.controlStack .btn.primary:active i,
.controlStack .btn.primary:active svg,
.controlStack .btn.primary.is-active i,
.controlStack .btn.primary.is-active svg {
  color: var(--mod-active-fg);
}

/* Headline button — Project Overview gets the olive */
.controlStack #btnOverview.btn.primary {
  background: var(--mod-headline-bg);
  color: var(--mod-headline-fg);
  border-color: var(--mod-headline-bg);
}
.controlStack #btnOverview.btn.primary i,
.controlStack #btnOverview.btn.primary svg {
  color: var(--mod-headline-fg);
}
.controlStack #btnOverview.btn.primary:hover {
  background: var(--mod-headline-bg-hover);
  border-color: var(--mod-headline-bg-hover);
  color: var(--mod-headline-fg);
}

/* Section headers ("Construction Admin", "Revenue Management", etc.) */
.controlStack .nav-header {
  color: var(--mod-section);
  opacity: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Settings/Project Entities (.btn without .primary) — keep ghosty */
.controlStack .btn:not(.primary) {
  background: transparent;
  color: var(--mod-text-soft);
  border: 1px dashed var(--mod-border);
}
.controlStack .btn:not(.primary):hover {
  background: var(--mod-card-hover);
  color: var(--mod-text-strong);
  border-style: solid;
  border-color: var(--mod-border-hover);
}