.vesta-topbar {
  position: sticky;
  top: 0;
  z-index: 300;
  flex: 0 0 auto;
  min-height: var(--vesta-topbar-h);
  background:#fff;
  border-bottom:1px solid var(--vesta-border);
  display:flex;
  flex-direction:column;
  padding:0 var(--vesta-page-padding);
}
.vesta-topbar__row--main {
  min-height: var(--vesta-topbar-h);
  display:grid;
  grid-template-columns:auto minmax(280px, 1fr) auto;
  gap:18px;
  align-items:center;
}
.vesta-topbar__row--mobile-search {
  display:none;
  padding:0 0 14px;
}
.vesta-topbar__row--mobile-search.is-open {
  display:block;
}
.vesta-topbar__left, .vesta-topbar__right {
  display:flex;
  align-items:center;
  gap:12px;
}
.vesta-topbar__title-wrap { min-width: 0; }
.vesta-topbar__title { font-size:15px; font-weight:600; }
.vesta-search {
  display:flex;
  align-items:center;
  gap:10px;
  height:44px;
  background:var(--vesta-surface);
  border:1px solid var(--vesta-border);
  border-radius:999px;
  padding:0 14px;
}
.vesta-search input { border:none; outline:none; background:transparent; padding:0; width:100%; }
.vesta-topbar__mobile-search-toggle { display:none; }

@media (max-width: 900px) {
  .vesta-topbar { padding: 0 16px; }
  .vesta-topbar__row--main {
    grid-template-columns:minmax(0, 1fr) auto;
    gap: 12px;
  }
  .vesta-topbar__center { display:none; }
  .vesta-topbar__mobile-search-toggle { display:grid; }
  .vesta-topbar__right { gap: 8px; }
  .vesta-user-chip__label { display:none; }
  .vesta-user-chip { padding-right: 6px; }
}

@media (max-width: 767px) {
  .vesta-topbar { padding: 0 12px; }
  .vesta-topbar__row--main { min-height: 60px; gap: 10px; }
  .vesta-topbar__left { min-width: 0; gap: 10px; }
  .vesta-topbar__title-wrap { overflow: hidden; }
  .vesta-breadcrumb {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }
  .vesta-topbar__title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }
  .vesta-topbar__create {
    padding: 0 12px;
    min-width: auto;
    gap: 6px;
  }
  .vesta-topbar__create span { display:none; }
}


@media (max-width: 767px) {
  .vesta-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    padding: var(--vesta-mobile-safe-top) 12px 0;
    min-height: var(--vesta-topbar-mobile-total);
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
  }
  .vesta-topbar__row--main {
    min-height: var(--vesta-topbar-mobile-row-h);
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .vesta-topbar__row--mobile-search {
    padding-bottom: 12px;
  }
  .vesta-topbar__row--mobile-search.is-open {
    display:block;
  }
}


.clockin-network-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:34px;
  padding:0 11px;
  border:1px solid var(--vesta-border);
  border-radius:999px;
  background:#fff;
  color:var(--vesta-text-2);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  line-height:1;
}
.clockin-network-status__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#9ca3af;
  box-shadow:0 0 0 3px rgba(156,163,175,.14);
}
.clockin-network-status[data-state="online"]{color:#166534;background:#f0fdf4;border-color:#bbf7d0;}
.clockin-network-status[data-state="online"] .clockin-network-status__dot{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.16);}
.clockin-network-status[data-state="offline"]{color:#991b1b;background:#fef2f2;border-color:#fecaca;}
.clockin-network-status[data-state="offline"] .clockin-network-status__dot{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.16);}
.clockin-hard-refresh.is-refreshing{pointer-events:none;opacity:.65;}
.clockin-hard-refresh.is-refreshing svg{animation:clockin-spin .8s linear infinite;}
@keyframes clockin-spin{to{transform:rotate(360deg)}}
@media (max-width: 1100px){
  .clockin-network-status__label{display:none;}
  .clockin-network-status{width:34px;padding:0;justify-content:center;}
}
@media (max-width: 767px){
  .clockin-network-status{display:none;}
}

/* v2.3.4: keep network status visible on mobile as a compact red/green dot */
@media (max-width: 767px){
  .clockin-network-status{
    display:inline-flex !important;
    width:24px;
    height:24px;
    min-width:24px;
    padding:0;
    justify-content:center;
    align-items:center;
    border-radius:999px;
    border:1px solid var(--vesta-border);
    background:#fff;
  }
  .clockin-network-status__label{display:none !important;}
  .clockin-network-status__dot{
    width:10px;
    height:10px;
  }
  .vesta-topbar__right{gap:6px;}
}
@media (max-width: 420px){
  .clockin-network-status{
    width:20px;
    height:20px;
    min-width:20px;
  }
  .clockin-network-status__dot{
    width:9px;
    height:9px;
  }
}


/* v2.3.5: mobile header uses network dot in place of notification bell */
@media (max-width: 767px){
  .vesta-topbar__notifications{display:none !important;}
  .vesta-topbar__right{display:flex !important;align-items:center !important;gap:7px !important;overflow:visible !important;}
  #clockinNetworkStatus.clockin-network-status{
    display:inline-flex !important;
    order:2;
    flex:0 0 34px;
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
    padding:0 !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  #clockinNetworkStatus .clockin-network-status__label{display:none !important;}
  #clockinNetworkStatus .clockin-network-status__dot{
    display:block !important;
    width:11px !important;
    height:11px !important;
    min-width:11px !important;
    border-radius:999px !important;
  }
  #clockinHardRefresh{order:3;}
  .vesta-topbar__create{order:4;}
}
@media (max-width: 420px){
  #clockinNetworkStatus.clockin-network-status{flex-basis:30px;width:30px !important;height:30px !important;min-width:30px !important;max-width:30px !important;}
  #clockinNetworkStatus .clockin-network-status__dot{width:10px !important;height:10px !important;min-width:10px !important;}
}


/* v2.3.6: hard mobile replacement for notification bell with network dot */
.clockin-mobile-network-indicator{
  display:none;
  align-items:center;
  justify-content:center;
}
.clockin-mobile-network-indicator__dot{
  width:11px;
  height:11px;
  min-width:11px;
  border-radius:999px;
  background:#9ca3af;
  box-shadow:0 0 0 3px rgba(156,163,175,.16);
  display:block;
}
.clockin-mobile-network-indicator[data-state="online"] .clockin-mobile-network-indicator__dot{
  background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.18);
}
.clockin-mobile-network-indicator[data-state="offline"] .clockin-mobile-network-indicator__dot{
  background:#ef4444;
  box-shadow:0 0 0 3px rgba(239,68,68,.18);
}
@media (max-width: 900px){
  .vesta-topbar__notifications{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }
  #clockinNetworkStatus.clockin-network-status{
    display:none !important;
  }
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    padding:0 !important;
    border-radius:999px !important;
  }
}
@media (max-width: 420px){
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    max-width:34px !important;
  }
}

/* v2.3.7: final network status cleanup
   Desktop shows the text pill only. Mobile hides the bell and replaces it with a solid status-dot button. */
#clockinMobileNetworkStatus.clockin-mobile-network-indicator{
  display:none !important;
}
.clockin-network-status[data-state="pending"]{
  color:#92400e;
  background:#fffbeb;
  border-color:#fde68a;
}
.clockin-network-status[data-state="pending"] .clockin-network-status__dot{
  background:#f59e0b;
  box-shadow:0 0 0 3px rgba(245,158,11,.18);
}
.clockin-mobile-network-indicator[data-state="online"]{
  background:#f0fdf4 !important;
  border-color:#bbf7d0 !important;
}
.clockin-mobile-network-indicator[data-state="offline"]{
  background:#fef2f2 !important;
  border-color:#fecaca !important;
}
.clockin-mobile-network-indicator[data-state="pending"]{
  background:#fffbeb !important;
  border-color:#fde68a !important;
}
.clockin-mobile-network-indicator[data-state="online"] .clockin-mobile-network-indicator__dot{
  background:#22c55e !important;
  box-shadow:0 0 0 3px rgba(34,197,94,.18) !important;
}
.clockin-mobile-network-indicator[data-state="offline"] .clockin-mobile-network-indicator__dot{
  background:#ef4444 !important;
  box-shadow:0 0 0 3px rgba(239,68,68,.18) !important;
}
.clockin-mobile-network-indicator[data-state="pending"] .clockin-mobile-network-indicator__dot{
  background:#f59e0b !important;
  box-shadow:0 0 0 3px rgba(245,158,11,.18) !important;
}
@media (min-width: 768px){
  #clockinNetworkStatus.clockin-network-status{display:inline-flex !important;}
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator{display:none !important;width:0!important;min-width:0!important;max-width:0!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important;}
}
@media (max-width: 767px){
  .vesta-topbar__notifications{display:none !important;width:0!important;min-width:0!important;max-width:0!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important;pointer-events:none!important;}
  #clockinNetworkStatus.clockin-network-status{display:none !important;width:0!important;min-width:0!important;max-width:0!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important;}
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid var(--vesta-border) !important;
    border-radius:999px !important;
    background:#f9fafb !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;
  }
  #clockinMobileNetworkStatus .clockin-mobile-network-indicator__dot{
    display:block !important;
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    max-width:12px !important;
    border-radius:999px !important;
    visibility:visible !important;
    opacity:1 !important;
  }
}

/* v2.3.8: mobile header ghost-button cleanup.
   The mobile network status is a real dot, not an empty rounded button. */
@media (max-width: 767px){
  #clockinNetworkStatus.clockin-network-status{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }
  .vesta-topbar__notifications,
  button.vesta-topbar__notifications,
  .vesta-topbar__right > .vesta-topbar__notifications{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:18px !important;
    min-width:18px !important;
    max-width:18px !important;
    height:18px !important;
    min-height:18px !important;
    max-height:18px !important;
    padding:0 !important;
    margin:0 2px !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:999px !important;
    overflow:visible !important;
    visibility:visible !important;
    opacity:1 !important;
    order:2 !important;
  }
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator::before{
    content:"";
    display:block !important;
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    min-height:12px !important;
    border-radius:999px !important;
    background:#9ca3af !important;
    box-shadow:0 0 0 4px rgba(156,163,175,.16) !important;
  }
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator[data-state="online"]::before{
    background:#22c55e !important;
    box-shadow:0 0 0 4px rgba(34,197,94,.18) !important;
  }
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator[data-state="offline"]::before{
    background:#ef4444 !important;
    box-shadow:0 0 0 4px rgba(239,68,68,.18) !important;
  }
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator[data-state="pending"]::before{
    background:#f59e0b !important;
    box-shadow:0 0 0 4px rgba(245,158,11,.18) !important;
  }
  #clockinMobileNetworkStatus .clockin-mobile-network-indicator__dot{
    display:none !important;
  }
  #clockinHardRefresh{order:3 !important;}
  .vesta-topbar__create{order:4 !important;}
  .vesta-user-chip{order:5 !important;}
}

/* v2.3.9: real mobile network dot render fix.
   This replaces the former empty button wrapper with a plain status span and
   hides notification bell on compact/touch headers. */
.clockin-mobile-network-dot{
  display:none;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:18px;
  height:18px;
  min-width:18px;
  max-width:18px;
  padding:0;
  margin:0 2px;
  border:0;
  background:transparent;
  box-shadow:none;
  line-height:1;
}
.clockin-mobile-network-dot__inner{
  display:block;
  width:12px;
  height:12px;
  min-width:12px;
  min-height:12px;
  border-radius:999px;
  background:#9ca3af;
  box-shadow:0 0 0 4px rgba(156,163,175,.16);
}
.clockin-mobile-network-dot[data-state="online"] .clockin-mobile-network-dot__inner{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.18);}
.clockin-mobile-network-dot[data-state="offline"] .clockin-mobile-network-dot__inner{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.18);}
.clockin-mobile-network-dot[data-state="pending"] .clockin-mobile-network-dot__inner{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.18);}

@media (min-width: 1025px) and (pointer: fine){
  #clockinNetworkStatus.clockin-network-status{display:inline-flex !important;}
  #clockinMobileNetworkStatus.clockin-mobile-network-dot{display:none !important;}
}

@media (max-width: 1024px), (pointer: coarse){
  .vesta-topbar__right{display:flex !important;align-items:center !important;gap:7px !important;}

  #clockinNetworkStatus.clockin-network-status,
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator,
  .vesta-topbar__notifications,
  button.vesta-topbar__notifications,
  .vesta-topbar__right > .vesta-topbar__notifications{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    overflow:hidden !important;
    pointer-events:none !important;
  }

  #clockinMobileNetworkStatus.clockin-mobile-network-dot{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    order:2 !important;
  }
  #clockinHardRefresh{order:3 !important;}
  .vesta-topbar__create{order:4 !important;}
  .vesta-user-chip{order:5 !important;}
}

/* v2.3.10: restore visible network pill on mobile/touch headers.
   The previous mobile-only dot was hidden by header constraints on iOS/PWA.
   Use the same real desktop status pill everywhere, compacted for mobile. */
@media (max-width: 1024px), (pointer: coarse){
  .vesta-topbar__right{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
  }

  #clockinMobileNetworkStatus,
  #clockinMobileNetworkStatus.clockin-mobile-network-dot,
  #clockinMobileNetworkStatus.clockin-mobile-network-indicator{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
  }

  #clockinNetworkStatus.clockin-network-status{
    display:inline-flex !important;
    visibility:visible !important;
    opacity:1 !important;
    order:2 !important;
    width:auto !important;
    min-width:auto !important;
    max-width:none !important;
    height:34px !important;
    min-height:34px !important;
    padding:0 9px !important;
    margin:0 !important;
    border-width:1px !important;
    border-style:solid !important;
    border-radius:999px !important;
    overflow:visible !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    font-size:11px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    pointer-events:auto !important;
  }

  #clockinNetworkStatus .clockin-network-status__label{
    display:inline !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  #clockinNetworkStatus .clockin-network-status__dot{
    display:block !important;
    width:9px !important;
    height:9px !important;
    min-width:9px !important;
    max-width:9px !important;
    border-radius:999px !important;
  }

  .vesta-topbar__notifications,
  button.vesta-topbar__notifications{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  #clockinHardRefresh{order:3 !important;}
  .vesta-topbar__create{order:4 !important;}
  .vesta-user-chip{order:5 !important;}
}

@media (max-width: 420px){
  #clockinNetworkStatus.clockin-network-status{
    height:32px !important;
    min-height:32px !important;
    padding:0 7px !important;
    font-size:10px !important;
    gap:5px !important;
  }
  #clockinNetworkStatus .clockin-network-status__dot{
    width:8px !important;
    height:8px !important;
    min-width:8px !important;
  }
}


/* Clock In System: mobile network status now lives in sidebar, not cramped topbar */
@media (max-width:767px){
  #clockinNetworkStatus.clockin-network-status,
  #clockinMobileNetworkStatus,
  .clockin-mobile-network-dot,
  .vesta-topbar__notifications{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}