/* UMWE dashboard scenic context — approved 2026-09-15.
   Photography blends into the dashboard header instead of appearing as a boxed card. */

.dashboard-page{position:relative}

.dashboard-page > .welcome{
  width:calc(100% - 430px);
  min-height:190px;
  margin-bottom:14px;
  align-items:center;
  position:relative;
  z-index:2;
}
.dashboard-page > .welcome .quote{max-width:220px}

/* Scenic image: no card border, no hard box. The mask softly dissolves the image
   into the dashboard background on the left, bottom and outer edges. */
.dashboard-page > .dashboard-visual{
  position:absolute;
  top:10px;
  right:18px;
  width:430px;
  height:205px;
  margin:0;
  overflow:visible;
  z-index:1;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background-size:cover;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 13%,#000 31%,#000 88%,rgba(0,0,0,.75) 96%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.72) 84%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 13%,#000 31%,#000 88%,rgba(0,0,0,.75) 96%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 70%,rgba(0,0,0,.72) 84%,transparent 100%);
  mask-composite:intersect;
}
.dashboard-page > .dashboard-visual.admin-visual{background-position:center 44%}
.dashboard-page > .dashboard-visual.worker-visual{background-position:center 47%}
:root[data-theme="dark"] .dashboard-page > .dashboard-visual.admin-visual{background-position:center 43%}
:root[data-theme="dark"] .dashboard-page > .dashboard-visual.worker-visual{background-position:center 46%}

.dashboard-page > .dashboard-visual .visual-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(7,24,38,.16) 0%,transparent 35%),linear-gradient(180deg,transparent 45%,rgba(5,18,30,.20) 100%);
}

/* Live Kigali context sits over the visible part of the photography. */
.umwe-city-context{
  position:absolute;
  top:18px;
  right:18px;
  z-index:4;
  color:#fff;
  text-align:right;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
  pointer-events:none;
  min-width:150px;
}
.umwe-city-date{font-size:12px;font-weight:600;opacity:.88;margin-bottom:5px}
.umwe-city-weather{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.umwe-weather-icon{font-size:25px;line-height:1}
.umwe-temp{font-size:25px;font-weight:700;line-height:1}
.umwe-city-name{font-size:13px;font-weight:800;margin-top:5px}
.umwe-condition{font-size:11px;font-weight:600;opacity:.86;margin-top:2px}

/* Old generated location pill is intentionally removed. */
.dashboard-page > .dashboard-visual::after{content:none !important}

.dashboard-page > .summary-cards,
.dashboard-page > .dashboard-columns,
.dashboard-page > .admin-dashboard-grid{position:relative;z-index:2}

@media (max-width:1100px){
  .dashboard-page > .welcome{width:calc(100% - 330px);min-height:170px}
  .dashboard-page > .dashboard-visual{width:330px;height:180px;right:10px}
  .dashboard-page > .welcome .quote{display:none}
  .umwe-city-context{right:12px;top:15px}
}

@media (max-width:760px){
  .dashboard-page > .welcome{width:100%;min-height:0}
  .dashboard-page > .dashboard-visual{
    position:relative;top:auto;right:auto;width:100%;height:165px;margin:0 0 14px;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  }
  .umwe-city-context{right:16px;top:16px}
}