/* Eshraq Professional v1.30.15 — visual-only refinement.
   Safety contract: no form geometry, field semantics, routes, actions or operational data are changed here. */
:root{
  --pv-green:#0f735f;
  --pv-green-dark:#075846;
  --pv-gold:#c99a2f;
  --pv-cream:#f7f3ea;
  --pv-paper:#fffefa;
  --pv-line:#e6dcc8;
  --pv-soft-green:#edf7f2;
  --pv-soft-gold:#fff5d8;
  --pv-soft-blue:#edf5fb;
  --pv-soft-violet:#f3eef9;
  --pv-shadow:0 14px 34px rgba(28,70,56,.08);
}
html,body{
  background:
    radial-gradient(circle at 10% 8%,rgba(218,173,64,.09),transparent 24%),
    radial-gradient(circle at 84% 14%,rgba(38,132,105,.08),transparent 25%),
    linear-gradient(180deg,#fbfaf5 0%,#f7f3ea 58%,#fbfaf6 100%);
}
#app .shell{
  position:relative;
}
#app .shell::before{
  content:"";
  position:fixed;
  inset:72px 252px 0 0;
  pointer-events:none;
  opacity:.22;
  background:
    radial-gradient(circle at 20% 20%,rgba(205,164,64,.08),transparent 20%),
    radial-gradient(circle at 78% 32%,rgba(38,132,105,.07),transparent 24%);
  z-index:-1;
}

/* Home hero: richer, calmer, and still uses the exact existing content. */
#main>.hero{
  position:relative;
  min-height:250px;
  overflow:hidden;
  padding:34px 40px;
  border:1px solid rgba(81,120,103,.18);
  border-radius:28px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.28) 38%,rgba(255,255,255,.96) 73%),
    url('./assets/eshraq-professional-landscape-v13015.svg') center/cover no-repeat;
  box-shadow:0 20px 46px rgba(34,74,59,.10);
}
#main>.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:34%;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(247,243,234,.18),transparent);
}
#main>.hero .hero-grid{
  position:relative;
  z-index:2;
  min-height:178px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
#main>.hero .hero-grid>div:first-child{
  width:min(620px,100%);
  margin-inline-start:0;
  margin-inline-end:auto;
  text-align:right;
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:22px;
  background:rgba(255,253,248,.72);
  backdrop-filter:blur(7px);
  box-shadow:0 12px 28px rgba(35,69,57,.07);
}
#main>.hero h1{
  margin:8px 0 10px;
  color:#0b4f40;
  font-size:clamp(2rem,3.2vw,2.9rem);
  line-height:1.2;
  letter-spacing:-.025em;
}
#main>.hero p{
  margin:0;
  color:#49675d;
  font-size:1.04rem;
  line-height:1.9;
  font-weight:650;
}
#main>.hero .tiny{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid rgba(201,154,47,.28);
  border-radius:999px;
  background:rgba(255,246,216,.82);
  color:#735717;
  font-weight:850;
}

/* Dashboard metrics: same values, more readable hierarchy. */
#main>.metrics{
  gap:14px;
  margin-top:16px;
  margin-bottom:18px;
}
#main>.metrics>.metric{
  position:relative;
  overflow:hidden;
  min-height:118px;
  border-radius:21px;
  border-color:rgba(83,120,106,.14);
  box-shadow:0 10px 24px rgba(34,70,58,.055);
}
#main>.metrics>.metric::after{
  content:"";
  position:absolute;
  width:76px;
  height:76px;
  left:-22px;
  bottom:-28px;
  border-radius:50%;
  background:rgba(15,115,95,.07);
}
#main>.metrics>.metric:nth-child(1){background:linear-gradient(145deg,#ffffff,#eaf7f1)}
#main>.metrics>.metric:nth-child(2){background:linear-gradient(145deg,#ffffff,#edf5fb)}
#main>.metrics>.metric:nth-child(3){background:linear-gradient(145deg,#ffffff,#fff5d8)}
#main>.metrics>.metric:nth-child(4){background:linear-gradient(145deg,#ffffff,#f3eef9)}
#main>.metrics>.metric:nth-child(5){background:linear-gradient(145deg,#ffffff,#fff0ec)}
#main>.metrics>.metric:nth-child(6){background:linear-gradient(145deg,#ffffff,#eef6ea)}
#main>.metrics>.metric b{
  position:relative;
  z-index:1;
  font-size:2rem;
  color:#0c755f;
}
#main>.metrics>.metric span{
  position:relative;
  z-index:1;
  margin-top:5px;
  color:#63766f;
  font-weight:750;
}

/* Quick actions remain the same buttons and routes. */
#main>.quick-grid{
  gap:10px;
  margin:18px 0;
}
#main>.quick-grid>.btn{
  position:relative;
  min-height:52px;
  overflow:hidden;
  border-color:rgba(106,124,114,.18);
  background:linear-gradient(180deg,#fffefa,#f8f5ec);
  box-shadow:0 6px 16px rgba(41,70,59,.035);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
#main>.quick-grid>.btn:hover{
  transform:translateY(-1px);
  border-color:rgba(15,115,95,.28);
  box-shadow:0 10px 20px rgba(41,70,59,.07);
}
#main>.quick-grid>.btn::before{
  content:"";
  width:7px;
  height:7px;
  margin-inline-end:8px;
  display:inline-block;
  border-radius:50%;
  background:#c99a2f;
  box-shadow:0 0 0 4px rgba(201,154,47,.10);
}

/* Home operational cards: richer surfaces without changing their content or clicks. */
#main>.grid>.card,
#main>.hero~.grid>.card,
#main>.hero~.card{
  border-color:rgba(86,119,106,.15);
  box-shadow:var(--pv-shadow);
}
#main>.hero~.grid>.card{
  background:
    radial-gradient(circle at 92% 4%,rgba(15,115,95,.055),transparent 24%),
    rgba(255,255,255,.94);
}
#main>.hero~.grid>.card:nth-child(2){
  background:
    radial-gradient(circle at 92% 4%,rgba(201,154,47,.07),transparent 25%),
    rgba(255,255,255,.94);
}
#main>.hero~.card{
  background:
    radial-gradient(circle at 90% 5%,rgba(108,86,170,.055),transparent 24%),
    rgba(255,255,255,.94);
}
#main>.hero~.grid>.card h3,
#main>.hero~.card h3{
  display:flex;
  align-items:center;
  gap:9px;
  color:#16483e;
}
#main>.hero~.grid>.card h3::before,
#main>.hero~.card h3::before{
  content:"";
  width:9px;
  height:9px;
  flex:0 0 9px;
  border-radius:50%;
  background:#c99a2f;
  box-shadow:0 0 0 4px rgba(201,154,47,.11);
}
#main>.hero~.grid>.card .item,
#main>.hero~.card .item{
  border-color:#e5e3d8;
  background:rgba(255,254,250,.92);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
#main>.hero~.grid>.card button.item:hover,
#main>.hero~.card button.item:hover{
  transform:translateY(-1px);
  border-color:#cadfd5;
  box-shadow:0 8px 18px rgba(36,70,58,.06);
}

/* Subtle continuity on non-home workspace cards, no geometry changes. */
#main>.page-head+ .card,
#main>.page-head~.grid>.card,
#main>.page-head~.list .item{
  border-color:rgba(86,119,106,.15);
}
#main>.page-head h2{
  position:relative;
  padding-inline-start:15px;
}
#main>.page-head h2::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:18%;
  width:5px;
  height:64%;
  border-radius:999px;
  background:linear-gradient(180deg,#0f735f,#d0a13a);
}

@media (min-width:821px){
  body.professional-sidebar-collapsed-v1304 #app .shell::before{inset-inline-end:86px}
  /* Keep each desktop navigation label visually close to its icon without changing routes or hit areas. */
  #app .nav-items-v1304>button{
    grid-template-columns:32px auto!important;
    justify-content:start!important;
    column-gap:6px!important;
  }
  #app .nav-items-v1304>button small{
    width:auto!important;
    justify-self:start!important;
  }
  body.professional-sidebar-collapsed-v1304 #app .nav-items-v1304>button{
    grid-template-columns:1fr!important;
    justify-content:stretch!important;
  }
}
@media (max-width:820px){
  #app .shell::before{display:none}
  #main>.hero{min-height:230px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.44)),url('./assets/eshraq-professional-landscape-v13015.svg') center/cover no-repeat}
  #main>.hero .hero-grid{min-height:188px}
  #main>.hero .hero-grid>div:first-child{margin:0;width:100%;padding:16px;text-align:right}
  #main>.hero h1{font-size:2rem}
}
@media (max-width:520px){
  #main>.hero{border-radius:20px;padding:14px}
  #main>.hero h1{font-size:1.72rem}
  #main>.hero p{font-size:.92rem}
}