/* Wadi Land v18 neutral application shell.
   This final override keeps the product workflows intact while replacing the
   wide green navigation chrome with a compact black rail and quiet white UI. */

:root{
  --color-primary:#202020;
  --color-primary-hover:#111;
  --color-primary-active:#000;
  --color-primary-light:#f1f1f1;
  --color-primary-border:#dedede;
  --color-page:#fff;
  --color-card:#fff;
  --color-sidebar:#050505;
  --color-sidebar-hover:#181818;
  --color-sidebar-active:#202020;
  --color-header:#fff;
  --color-text-primary:#191919;
  --color-text-secondary:#555;
  --color-text-muted:#787878;
  --color-border:#e6e6e6;
  --color-border-strong:#d6d6d6;
  --color-focus:#6b6b6b;
  --focus-ring:0 0 0 3px rgb(25 25 25 / 12%);
  --header-height:3.5rem;
  --sidebar-width-expanded:4rem;
  --sidebar-width-collapsed:4rem;
  --activity-rail-width:3.5rem;
  --radius-md:.5rem;
  --radius-lg:.625rem;
  --radius-xl:.75rem;
  --shadow-xs:0 1px 2px rgb(0 0 0 / 4%);
  --shadow-sm:0 3px 10px rgb(0 0 0 / 7%);
  --shadow-md:0 16px 36px rgb(0 0 0 / 14%);
}

html,body{background:#fff;color:var(--color-text-primary)}

/* Global geometry */
#appShell.app-shell{
  --sidebar-current-width:4rem;
  padding-top:var(--header-height);
  background:#f5f5f5;
}
#appShell.sidebar-collapsed{--sidebar-current-width:4rem}
#appShell .main-stage{
  height:calc(100dvh - var(--header-height) - .5rem);
  margin:.25rem .25rem .25rem 0;
  border:1px solid #e4e4e4;
  border-radius:.75rem;
  background:#fff;
  box-shadow:0 1px 3px rgb(0 0 0 / 4%);
  scroll-behavior:smooth;
}

/* Global top bar */
#appShell .topbar{
  position:fixed;
  z-index:90;
  inset:0 0 auto;
  width:100%;
  height:var(--header-height);
  display:grid;
  grid-template-columns:minmax(14rem,1fr) minmax(18rem,26rem) minmax(14rem,1fr);
  align-items:center;
  gap:1rem;
  padding:0 .75rem;
  border-bottom:1px solid var(--color-border);
  background:#fff;
  box-shadow:none;
}
#appShell .topbar-left{justify-self:start;gap:.35rem}
.topbar-brand-logo{
  width:10.25rem;
  height:2.6rem;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  border-radius:.35rem;
}
.topbar-brand-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
#appShell .topbar-calendar{
  width:2.25rem;
  height:2.25rem;
  border:0!important;
  border-radius:.5rem;
  color:#666;
}
#appShell .topbar-calendar:hover,#appShell .topbar-calendar[aria-expanded="true"]{
  background:#f1f1f1!important;
  color:#181818!important;
  box-shadow:none!important;
}

#appShell .topbar-search{
  position:static;
  justify-self:center;
  width:100%;
  min-width:0;
  height:2.25rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  padding:0 .7rem;
  border:1px solid var(--color-border-strong);
  border-radius:999px;
  background:#fff;
  color:#777;
  box-shadow:0 1px 2px rgb(0 0 0 / 4%);
}
#appShell .topbar-search:focus-within{border-color:#9c9c9c;box-shadow:var(--focus-ring)}
#appShell .topbar-search input{min-width:0;flex:1;color:#222}
#appShell .topbar-search input::placeholder{color:#8b8b8b}
#appShell #globalSearchInput{
  appearance:none;
  -webkit-appearance:none;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#appShell #globalSearchInput:focus,
#appShell #globalSearchInput:focus-visible{outline:0!important;box-shadow:none!important}
#appShell #globalSearchInput::-webkit-search-cancel-button,
#appShell #globalSearchInput::-webkit-search-decoration,
#appShell #globalSearchInput::-webkit-search-results-button,
#appShell #globalSearchInput::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}
#appShell .topbar-search kbd{border:0;background:transparent;color:#aaa;padding:0}
.topbar-ai-chip{display:inline-flex;align-items:center;border-left:1px solid var(--color-border);padding-left:.65rem;color:#777;white-space:nowrap;font-size:.75rem}
#appShell .topbar-actions{justify-self:end;gap:.25rem;margin:0}
#appShell .topbar-new-contract{
  min-height:2rem;
  height:2rem;
  padding:0 .65rem;
  gap:.35rem;
  border-radius:.45rem!important;
  background:#1f1f1f!important;
  color:#fff!important;
  font-size:.75rem!important;
  line-height:1!important;
  white-space:nowrap;
}
#appShell .topbar-new-contract:hover{background:#050505!important;transform:translateY(-1px)}
#appShell .topbar-new-contract svg{width:.85rem;height:.85rem;stroke-width:2}
#appShell .topbar .icon-button{border:1px solid transparent;background:transparent;color:#717171;box-shadow:none}
#appShell .topbar .icon-button:hover{border-color:#e2e2e2;background:#f1f1f1;color:#191919;box-shadow:none}

/* Dashboard controls share one compact toolbar row. */
#page-dashboard .dashboard-filter-button{
  min-height:2.25rem;
  height:2.25rem;
  padding:0 .65rem;
  gap:.35rem;
  border-radius:.5rem!important;
  font-size:.75rem!important;
  line-height:1!important;
  white-space:nowrap;
}
#page-dashboard .dashboard-filter-button svg{width:.9rem;height:.9rem}

#appShell .search-results{
  position:fixed;
  z-index:120;
  inset:auto auto auto 50%;
  top:3rem;
  width:min(32rem,calc(100vw - 2rem));
  max-height:min(30rem,calc(100dvh - 4rem));
  transform:translateX(-50%);
  border:1px solid var(--color-border);
  border-radius:.75rem;
  background:#fff;
  box-shadow:var(--shadow-md);
}

/* Narrow black navigation rail */
#appShell .sidebar{
  position:sticky;
  inset-block-start:calc(var(--header-height) + .25rem);
  align-self:start;
  width:3.5rem;
  height:calc(100dvh - var(--header-height) - .5rem);
  min-height:0;
  margin:.25rem;
  padding:.55rem .2rem;
  border-radius:.6rem;
  overflow-x:hidden;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  background:#050505;
  color:#fff;
  scrollbar-width:none;
}
#appShell .sidebar::-webkit-scrollbar{display:none}
#appShell .brand-row,#appShell .quick-filters,#appShell .staff-legend,
#appShell .sidebar-compact-stats{display:none!important}
#appShell .main-nav{gap:.16rem;margin:0;padding:0}
#appShell .nav-label{display:none}
#appShell .nav-item{
  position:relative;
  width:100%;
  min-width:0;
  height:4.2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.42rem;
  margin:0;
  padding:.3rem .1rem;
  border:0;
  border-radius:0;
  background:transparent;
  color:#bdbdbd;
  font-size:.62rem;
  font-weight:600;
  text-align:center;
}
#appShell .nav-item span{position:relative;z-index:2;display:block!important;max-width:100%;font-size:.56rem!important;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#appShell .nav-item svg{position:relative;z-index:2;width:1.2rem!important;height:1.2rem!important;transition:filter .18s ease,transform .18s ease,color .18s ease}
#appShell .nav-item:hover,#appShell .nav-item.is-active{background:transparent;color:#fff;box-shadow:none;transform:none}
#appShell .nav-item::before{
  content:"";
  position:absolute;
  z-index:0;
  top:.5rem;
  left:50%;
  width:2.15rem;
  height:2.15rem;
  border-radius:50%;
  background:conic-gradient(from 215deg,#7c4dff,#25c8ff,#fff,#ee4ac7,#7c4dff);
  filter:blur(.48rem);
  opacity:0;
  transform:translateX(-50%) scale(.72);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
#appShell .nav-item:hover::before{opacity:.23;transform:translateX(-50%) scale(.9)}
#appShell .nav-item.is-active::before{opacity:.62;transform:translateX(-50%) scale(1)}
#appShell .nav-item:hover svg{transform:translateY(-1px);filter:drop-shadow(0 0 .2rem rgb(255 255 255 / 80%)) drop-shadow(0 0 .5rem rgb(89 169 255 / 55%))}
#appShell .nav-item.is-active svg{color:#fff;filter:drop-shadow(0 0 .15rem #fff) drop-shadow(0 0 .45rem #78a9ff) drop-shadow(0 0 .8rem #b84dff)}
#appShell .nav-count{
  position:absolute;
  inset-block-start:.3rem;
  inset-inline-end:-.05rem;
  min-width:1.2rem;
  height:1.2rem;
  padding:0 .25rem;
  border:2px solid #050505;
  border-radius:999px;
  background:#e83078!important;
  color:#fff!important;
  font-size:.58rem!important;
}

/* User control belongs to the navigation rail, matching the global shell. */
#appShell .sidebar-bottom{
  position:sticky;
  bottom:0;
  flex:0 0 auto;
  min-height:3.25rem;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top:auto;
  padding:.45rem 0 .1rem;
  background:#050505;
}
#appShell .sidebar-profile{
  position:relative;
  width:2.2rem;
  height:2.2rem;
  min-width:2.2rem;
  min-height:2.2rem;
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  box-shadow:none;
}
#appShell .sidebar-profile .avatar{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border:2px solid #f5b700;
  border-radius:999px;
  background:linear-gradient(145deg,#272727,#050505);
  color:#fff;
  font-size:.65rem;
  font-weight:800;
  box-shadow:0 0 0 2px rgb(245 183 0 / 14%),0 0 15px rgb(245 183 0 / 45%),inset 0 1px 0 rgb(255 255 255 / 22%);
  transition:transform .16s ease,box-shadow .16s ease;
}
#appShell .sidebar-profile:hover .avatar,#appShell .sidebar-profile[aria-expanded="true"] .avatar{transform:translateY(-1px);box-shadow:0 0 0 3px rgb(245 183 0 / 18%),0 0 21px rgb(245 183 0 / 62%),inset 0 1px 0 rgb(255 255 255 / 30%)}
#appShell .sidebar-profile .profile-presence{position:absolute;right:.02rem;bottom:.02rem;width:.48rem;height:.48rem;border:2px solid #050505;border-radius:50%;background:#64748b}
#appShell .sidebar-profile .profile-copy{display:none}

/* Calendar mega menu: today and the live customer-delivery queue. */
#appShell .calendar-mega-menu{
  position:fixed;
  z-index:125;
  top:calc(var(--header-height) + .45rem);
  left:min(13.1rem,calc(100vw - 29.5rem));
  width:min(29rem,calc(100vw - 1.5rem));
  max-height:min(36rem,calc(100dvh - var(--header-height) - 1rem));
  display:flex;
  flex-direction:column;
  border:1px solid #dedede;
  border-radius:.85rem;
  background:rgb(255 255 255 / 98%);
  box-shadow:0 24px 70px rgb(0 0 0 / 18%),inset 0 1px 0 #fff;
  opacity:0;
  visibility:hidden;
  transform:translateY(-7px) scale(.985);
  transform-origin:top left;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  overflow:hidden;
  backdrop-filter:blur(16px);
}
#appShell .calendar-mega-menu.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.calendar-mega-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid #ececec;background:linear-gradient(180deg,#fff,#fafafa)}
.calendar-mega-icon{width:2.65rem;height:2.65rem;display:grid;place-items:center;border:1px solid #dcdcdc;border-radius:.7rem;background:#f5f5f5;color:#202020;box-shadow:none}
.calendar-mega-icon svg{width:1.2rem;height:1.2rem}
.calendar-mega-head small{display:block;margin-bottom:.15rem;color:#8b8b8b;font-size:.62rem;font-weight:800;letter-spacing:.12em}
.calendar-mega-head h2{margin:0;color:#191919;font-size:1rem;line-height:1.2}
.calendar-mega-head p{margin:.2rem 0 0;color:#696969;font-size:.75rem}
.calendar-mega-count{min-width:2rem;height:2rem;display:grid;place-items:center;padding:0 .55rem;border-radius:999px;background:#191919;color:#fff;font-size:.75rem;font-weight:800;box-shadow:inset 0 1px 0 rgb(255 255 255 / 22%),0 5px 14px rgb(0 0 0 / 18%)}
.calendar-mega-list{min-height:6rem;overflow:auto;padding:.45rem}
.calendar-mega-item{width:100%;display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;align-items:center;gap:.75rem;border:1px solid transparent;border-radius:.65rem;padding:.72rem;background:transparent;color:#222;text-align:left;cursor:pointer;transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}
.calendar-mega-item:hover{border-color:#e3e3e3;background:#f6f6f6;box-shadow:none;transform:none}
.calendar-mega-time{font-size:.77rem;font-weight:800;font-variant-numeric:tabular-nums}
.calendar-mega-copy{display:flex;flex-direction:column;min-width:0;gap:.18rem}
.calendar-mega-copy b{overflow:hidden;color:#202020;font-size:.8rem;text-overflow:ellipsis;white-space:nowrap}
.calendar-mega-copy span{overflow:hidden;color:#737373;font-size:.68rem;text-overflow:ellipsis;white-space:nowrap}
.calendar-mega-status{max-width:7.5rem;padding:.28rem .45rem;border-radius:999px;background:#f1f1f1;color:#555;font-size:.62rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-mega-status.is-overdue{background:#fff0f0;color:#b33131}
.calendar-mega-status.is-done{background:#eaf8f2;color:#475569}
.calendar-mega-empty{min-height:8rem;display:grid;place-items:center;padding:1.25rem;color:#777;font-size:.78rem;text-align:center}
.calendar-mega-menu>footer{padding:.65rem;border-top:1px solid #ececec;background:#fafafa}
.calendar-mega-open{width:100%;justify-content:center!important}
.calendar-mega-open svg{width:.95rem!important;height:.95rem!important}

/* Quiet, neutral project palette */
.page{background:#fff}
.main-stage::before{display:none!important}
.detail-card,.module-card,.payment-panel,.activity-log,.full-workflow-card,.case-identity,
.summary-static-card,.summary-achievement-card,.summary-next-card,.summary-payment-card,
.contract-summary-card,.traveler-directory-card,.calendar-board,.contracts-list,
.contract-overview-card,.traveler-workspace-card,.document-section{
  border-color:var(--color-border)!important;
  border-radius:.65rem!important;
  box-shadow:none!important;
}
.button{border-radius:.5rem!important;box-shadow:none!important;transition:background .16s ease,border-color .16s ease,color .16s ease!important}
.button:hover{transform:none;box-shadow:none!important}
.button.primary{border-color:#202020!important;background:#202020!important;color:#fff!important;box-shadow:none!important}
.button.primary:hover{border-color:#000!important;background:#000!important;box-shadow:none!important}
.button.secondary{border-color:var(--color-border-strong)!important;background:#fff!important;color:#292929!important}
.button.secondary:hover{background:#f5f5f5!important}
#page-dashboard .board-toolbar .icon-button,#page-dashboard .today-button,#page-dashboard .view-switch button{
  border-color:#dedede!important;
  background:#fff!important;
  box-shadow:none!important;
}
#page-dashboard .board-toolbar .icon-button:hover,#page-dashboard .today-button:hover,#page-dashboard .view-switch button:hover{
  background:#f3f3f3!important;
  box-shadow:none!important;
  transform:none;
}
#page-dashboard .view-switch button.is-active{border-color:#171717!important;background:#202020!important;color:#fff!important;box-shadow:none!important}
.case-tabs button.is-active,.settings-tabs button.is-active{color:#191919!important}
.case-tabs button.is-active::after,.settings-tabs button.is-active::after{background:#191919!important}
.workflow-step.is-current i{border-color:#202020!important;background:#202020!important;color:#fff!important;box-shadow:0 0 0 4px #ededed!important}
.workflow-step.is-current b{color:#191919!important}
.contract-overview-card{border-top-color:#202020!important}
.case-pulse-strip{border-color:var(--color-border)!important;background:#fafafa!important}
.case-pulse-item{border-radius:.5rem!important}
#appShell>.notification-panel{height:calc(100dvh - var(--header-height));max-height:calc(100dvh - var(--header-height))}

/* On laptops the workspace remains compact; notifications use the optional final column. */
@media (min-width:768px) and (max-width:1279px){
  #appShell.app-shell{
    --sidebar-current-width:4rem;
    display:grid;
    grid-template-columns:4rem minmax(0,1fr) var(--notification-current-width);
    min-height:100dvh;
  }
  #appShell>.sidebar{grid-column:1;position:sticky;inset:calc(var(--header-height) + .25rem) auto auto;transform:none;width:3.5rem;box-shadow:none}
  #appShell>.main-stage{grid-column:2;height:calc(100dvh - var(--header-height) - .5rem);min-height:0;overflow:auto}
  #appShell .mobile-menu{display:none}
}

@media(max-width:980px){
  #appShell .topbar{grid-template-columns:auto minmax(13rem,1fr) auto}
  .topbar-ai-chip{display:none}
  .topbar-brand-logo{width:8.75rem}
}

@media(max-width:767px){
  #appShell.app-shell{display:block;padding-top:var(--header-height)}
  #appShell .topbar{grid-template-columns:auto minmax(0,1fr) auto;gap:.4rem;padding:0 .5rem}
  #appShell .topbar-left{min-width:0}
  #appShell .topbar-brand-logo{width:7.5rem;height:2.25rem}
  #appShell .topbar-calendar{display:inline-grid}
  #appShell .topbar-search{justify-self:stretch;min-width:0}
  #appShell .topbar-search kbd{display:none}
  #appShell .topbar-new-contract{width:2rem;padding:0;justify-content:center}
  #appShell .topbar-new-contract span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  #appShell .sidebar{
    position:fixed;
    z-index:100;
    inset:var(--header-height) auto 0 0;
    width:15rem;
    height:calc(100dvh - var(--header-height));
    margin:0;
    border-radius:0 .65rem .65rem 0;
    padding:1rem .7rem;
    transform:translateX(-105%);
    box-shadow:var(--shadow-md);
  }
  html[dir="rtl"] #appShell .sidebar{inset:var(--header-height) 0 0 auto;transform:translateX(105%);border-radius:.65rem 0 0 .65rem}
  #appShell.mobile-menu-open .sidebar{transform:none}
  #appShell .main-nav{gap:.25rem}
  #appShell .nav-item{height:2.8rem;flex-direction:row;justify-content:flex-start;gap:.75rem;padding:0 .75rem;font-size:.8rem;text-align:start}
  #appShell .nav-item span{font-size:.8rem!important}
  #appShell .nav-item::before{top:50%;left:1.25rem;transform:translate(-50%,-50%) scale(.72)}
  #appShell .nav-item:hover::before{transform:translate(-50%,-50%) scale(.9)}
  #appShell .nav-item.is-active::before{transform:translate(-50%,-50%) scale(1)}
  #appShell .nav-count{position:static;margin-inline-start:auto;border:0}
  #appShell .sidebar-bottom{justify-content:flex-start;padding:.7rem .75rem}
  #appShell .sidebar-profile{width:100%;height:2.75rem;display:flex;justify-content:flex-start;gap:.7rem;border-radius:.65rem}
  #appShell .sidebar-profile .profile-copy{display:flex;flex-direction:column;min-width:0;color:#fff;text-align:left}
  #appShell .sidebar-profile .profile-copy b{font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #appShell .sidebar-profile .profile-copy small{color:#a9a9a9;font-size:.65rem}
  #appShell .sidebar-profile .profile-presence{left:1.8rem;right:auto;bottom:.35rem}
  #appShell .main-stage{height:auto;min-height:calc(100dvh - var(--header-height) - .5rem);margin:.25rem;border-radius:.75rem;overflow:visible}
  #appShell .calendar-mega-menu{left:.5rem;width:calc(100vw - 1rem);max-height:calc(100dvh - var(--header-height) - .75rem)}
  #page-dashboard .toolbar-right{justify-content:flex-end}
}

@media(max-width:460px){
  #appShell .topbar-search{border:0;box-shadow:none;padding-inline:.35rem}
  #appShell .topbar-brand-logo{width:5.5rem;height:2rem}
  #appShell .topbar-new-contract{display:none}
  .calendar-mega-item{grid-template-columns:2.8rem minmax(0,1fr)}
  .calendar-mega-status{grid-column:2;justify-self:start}
}