/* Havren CRM shell polish
   Navigation, botanical brand detail, compact sync status, and small interaction refinements.
   Deliberately uses no external icon/font dependencies. */

.nav-icon-sprite{
  position:absolute!important;
  width:0!important;
  height:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

.sidebar{
  position:relative;
  isolation:isolate;
}

.sidebar nav a{
  gap:10px;
  white-space:nowrap;
}

.nav-icon{
  width:17px;
  height:17px;
  flex:0 0 17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.72;
  transition:opacity .16s ease,transform .16s ease,color .16s ease;
}

.nav-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sidebar nav a:hover .nav-icon,
.sidebar nav a:focus-visible .nav-icon{
  opacity:1;
  transform:translateX(1px);
}

.sidebar nav a.active .nav-icon,
.sidebar nav a[aria-current="page"] .nav-icon{
  opacity:1;
  color:#8af3ea;
}

.sidebar nav a[aria-current="page"]{
  font-weight:780;
}

.sidebar .nav-section{
  position:relative;
  padding-left:1px;
}

.sidebar .nav-section::after{
  content:"";
  position:absolute;
  left:0;
  right:8px;
  bottom:-4px;
  height:1px;
  background:linear-gradient(90deg,rgba(112,219,211,.20),rgba(112,219,211,0));
  pointer-events:none;
}

/* Use a subtle themed scrollbar everywhere in the desktop sidebar. */
.sidebar nav{
  scrollbar-width:thin;
  scrollbar-color:rgba(111,227,216,.28) transparent;
}
.sidebar nav::-webkit-scrollbar{width:5px}
.sidebar nav::-webkit-scrollbar-track{background:transparent}
.sidebar nav::-webkit-scrollbar-thumb{
  background:rgba(111,227,216,.22);
  border-radius:999px;
}
.sidebar nav:hover::-webkit-scrollbar-thumb{background:rgba(111,227,216,.40)}

/* Replace the old text-only pseudo signoff with the Havren botanical mark. */
.dashboard-page .sidebar::after{display:none!important}
.sidebar-foot{
  position:relative;
  z-index:3;
}

.sidebar-brand-signoff{
  position:absolute;
  z-index:1;
  left:13px;
  bottom:5px;
  width:194px;
  height:92px;
  pointer-events:none;
  overflow:hidden;
  opacity:.78;
}

.sidebar-brand-signoff svg{
  position:absolute;
  inset:auto 0 0 0;
  width:100%;
  height:100%;
}

.sidebar-brand-signoff span{
  position:absolute;
  left:27px;
  bottom:11px;
  color:rgba(144,219,214,.86);
  font-size:10px;
  font-style:italic;
  font-weight:620;
  line-height:1.35;
  letter-spacing:.1px;
  text-shadow:0 1px 8px rgba(3,27,40,.35);
}

.plant-line,
.plant-ground{
  fill:none;
  stroke:rgba(89,196,184,.48);
  stroke-width:1.25;
  stroke-linecap:round;
}
.plant-line-branch{stroke:rgba(115,214,203,.42);stroke-width:1.05}
.plant-ground{stroke:rgba(92,178,173,.28);stroke-dasharray:3 5}
.plant-leaf{
  fill:rgba(71,177,160,.20);
  stroke:rgba(117,222,208,.42);
  stroke-width:.9;
}
.plant-leaf-soft{fill:rgba(111,211,198,.12)}

@media (min-width:761px){
  .sidebar-foot{padding-bottom:72px}
}

/* Real field-sync status should be visible but not dominate the CRM. */
#fieldSyncBanner.warning-box{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:min(760px,calc(100% - 8px));
  min-height:36px;
  margin:10px 0 2px;
  padding:8px 12px 8px 35px;
  border:1px solid #d8e6e8;
  border-radius:10px;
  background:rgba(248,252,252,.96);
  color:#526b75;
  box-shadow:0 5px 16px rgba(13,48,60,.045);
  font-size:11px;
  line-height:1.35;
}

#fieldSyncBanner.warning-box::before{
  content:"↻";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:16px;
  height:16px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e8f6f4;
  color:#0a8b83;
  font-weight:900;
}

#fieldSyncBanner[data-state="offline"]{
  border-color:#ead9a7;
  background:#fffaf0;
  color:#725f2f;
}
#fieldSyncBanner[data-state="offline"]::before{content:"⌁";background:#fff1ca;color:#8c6a16}
#fieldSyncBanner[data-state="review"]{
  border-color:#f0cfd3;
  background:#fff7f8;
  color:#7b4048;
}
#fieldSyncBanner[data-state="review"]::before{content:"!";background:#ffe8eb;color:#ad3344}
#fieldSyncBanner[hidden]{display:none!important}

/* Small interaction refinements inspired by mature CRM shells: click targets feel
   connected without adding visual noise or fake analytics. */
.dashboard-page .kpi-card,
.dashboard-page .dash-card{
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.dashboard-page .dash-card:focus-within{
  border-color:#c9dfe2;
  box-shadow:0 12px 30px rgba(12,42,54,.07);
}
.dashboard-page .dash-head>a,
.dashboard-page .attention-list a,
.dashboard-page .control-links a{
  text-underline-offset:3px;
}
.dashboard-page .dash-head>a:hover,
.dashboard-page .attention-list a:hover,
.dashboard-page .control-links a:hover{
  text-decoration:underline;
}

@media (max-width:760px){
  .nav-icon{width:18px;height:18px;flex-basis:18px}
  .sidebar-brand-signoff{display:none}
  .sidebar-foot{padding-bottom:0}
  .sidebar nav{scrollbar-width:none}
  .sidebar nav::-webkit-scrollbar{display:none}
  #fieldSyncBanner.warning-box{
    width:100%;
    max-width:100%;
    margin:8px 0 2px;
  }
}

@media (prefers-reduced-motion:reduce){
  .nav-icon,.dashboard-page .kpi-card,.dashboard-page .dash-card{transition:none!important}
}

/* Live production QA: keep identity art in its own visual zone instead of
   overlapping the signed-in user or sign-out control. */
@media (min-width:761px){
  .sidebar-foot{
    padding-bottom:0!important;
    padding-top:13px;
    margin-top:10px;
    border-top:1px solid rgba(128,198,198,.14);
  }

  .sidebar-foot .user-chip{
    position:relative;
    z-index:4;
    margin-bottom:3px;
  }

  .sidebar-foot form{
    position:relative;
    z-index:4;
    margin-top:5px;
  }

  .sidebar-foot .link-button{
    opacity:.78;
  }

  .sidebar-foot .link-button:hover,
  .sidebar-foot .link-button:focus-visible{
    opacity:1;
  }

  .sidebar-brand-signoff{
    position:relative;
    z-index:2;
    left:auto;
    bottom:auto;
    flex:0 0 82px;
    width:calc(100% - 20px);
    height:82px;
    margin:4px 10px 9px;
    opacity:.92;
    overflow:hidden;
  }

  .sidebar-brand-signoff svg{
    inset:0;
    width:100%;
    height:100%;
  }

  .sidebar-brand-signoff span{
    left:auto;
    right:3px;
    bottom:9px;
    width:102px;
    text-align:right;
    color:rgba(158,225,220,.88);
    font-size:9.5px;
    line-height:1.38;
  }

  .plant-line,
  .plant-ground{
    stroke:rgba(101,206,194,.55);
  }
  .plant-line-main{stroke-width:1.4}
  .plant-line-branch{stroke:rgba(127,221,210,.50);stroke-width:1.1}
  .plant-leaf{fill:rgba(67,183,163,.22);stroke:rgba(132,229,216,.48)}
  .plant-ground{stroke:rgba(99,190,184,.33)}
}

/* Make the sidebar icon system easier to scan without becoming noisy. */
.nav-icon{opacity:.80}
.sidebar nav a.active .nav-icon,
.sidebar nav a[aria-current="page"] .nav-icon{filter:drop-shadow(0 0 6px rgba(97,230,219,.14))}

/* Keep paired business-performance cards visually balanced with the attention card
   beside them, now that intentionally fake mini charts have been removed. */
.dashboard-page .performance-card-v3{
  display:flex;
  flex-direction:column;
}
.dashboard-page .performance-card-v3 .performance-panels{
  flex:1 1 auto;
  align-items:stretch;
}
.dashboard-page .performance-card-v3 .performance-panel{
  min-height:96px;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Slightly stronger readability for the dark control-center card. */
.dashboard-page .control-card h2{
  max-width:520px;
  line-height:1.12;
  text-wrap:balance;
}
.dashboard-page .control-card p{
  max-width:620px;
}