/* Hub Navigation — sidebar + topbar */
.hub-layout {
  display: flex;
  min-height: 100vh;
}

.hub-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.25rem 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  transition: transform .25s ease;
  overflow-y: auto;
}
.hub-sidebar__brand {
  padding: 0 1.25rem .75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
  padding-bottom: 1rem;
}
.hub-sidebar__brand-logo {
  height: 40px;
  width: 40px;
  object-fit: contain;
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}
.hub-sidebar__brand-tag {
  font-size: .6rem;
  font-weight: 700;
  padding: .1rem .4rem;
  background: var(--accent);
  color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.hub-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hub-sidebar__clock {
  padding: .25rem 1.25rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
}
.hub-sidebar__clock-line {
  line-height: 1.2;
}
.hub-sidebar__clock-line--weekday {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.hub-sidebar__clock-line--date {
  font-size: .78rem;
  color: var(--text);
  font-weight: 500;
}
.hub-sidebar__clock-line--time {
  font-size: 1.05rem;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.hub-sidebar__search {
  padding: 0 1.25rem .75rem;
  margin-bottom: .25rem;
}
.hub-sidebar__search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.hub-sidebar__search-icon {
  position: absolute;
  left: .55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}
.hub-sidebar__search-input {
  width: 100%;
  padding: .4rem .55rem .4rem 1.7rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .8rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.hub-sidebar__search-input::placeholder {
  color: var(--muted);
}
.hub-sidebar__search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
.hub-sidebar__search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.hub-nav-group {
  padding: 0 .75rem;
  margin-bottom: .25rem;
}
.hub-nav-group__title {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: .5rem .5rem .35rem;
}
.hub-nav-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .65rem;
  border-radius: 8px;
  font-size: .85rem;
  color: var(--text);
  text-decoration: none;
  transition: background .12s, color .12s;
  cursor: pointer;
}
.hub-nav-item:hover {
  background: rgba(99,102,241,.08);
  color: var(--accent);
}
.hub-nav-item.active {
  background: rgba(99,102,241,.12);
  color: var(--accent);
  font-weight: 500;
}
.hub-nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: .7;
}
.hub-nav-item.active svg { opacity: 1; }

.hub-sidebar__footer {
  margin-top: auto;
  padding: .75rem 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.hub-sidebar__footer button {
  width: 100%;
  padding: .45rem;
  font-size: .8rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, color .15s;
}
.hub-sidebar__footer > button:hover {
  border-color: var(--error);
  color: var(--error);
}

.hub-lang-row {
  display: flex;
  gap: 0.35rem;
}
.hub-lang-btn {
  flex: 1;
  padding: 0.4rem 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 600;
}
.hub-lang-btn--active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: rgba(99, 102, 241, 0.08) !important;
}
.hub-lang-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Theme toggle */
.hub-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
.hub-theme-toggle:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.hub-theme-toggle__icon {
  display: flex;
  align-items: center;
}
.hub-theme-toggle__label {
  font-size: .8rem;
}

.hub-main {
  flex: 1;
  margin-left: 240px;
  padding: 2rem;
  min-width: 0;
}

/* Mobile toggle */
.hub-toggle {
  display: none;
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 110;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.hub-toggle svg { width: 20px; height: 20px; }

.hub-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 99;
}

/* Notifications bell (top-right of hub-main) */
.hub-bell-wrap {
  position: fixed;
  top: .85rem;
  right: 1rem;
  z-index: 110;
}
.hub-bell {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .15s, color .15s, background .15s;
}
.hub-bell:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.hub-bell svg { width: 20px; height: 20px; }
.hub-bell__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  line-height: 1;
}
.hub-bell__badge[hidden] { display: none; }

.hub-notif-panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  width: min(380px, calc(100vw - 2rem));
  max-height: 70vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.hub-notif-panel.open { display: flex; }
.hub-notif-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--border);
}
.hub-notif-panel__title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
}
.hub-notif-panel__mark {
  background: none;
  border: none;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  padding: .2rem .35rem;
  border-radius: 6px;
}
.hub-notif-panel__mark:hover { background: rgba(99,102,241,.1); }
.hub-notif-panel__mark[disabled] { opacity: .4; cursor: default; }
.hub-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.hub-notif-item {
  display: flex;
  gap: .7rem;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
  transition: background .12s;
}
.hub-notif-item:last-child { border-bottom: none; }
.hub-notif-item:hover { background: rgba(99,102,241,.06); }
.hub-notif-item.unread { background: rgba(99,102,241,.08); }
.hub-notif-item.unread:hover { background: rgba(99,102,241,.14); }
.hub-notif-item__icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(99,102,241,.12);
  color: var(--accent);
}
.hub-notif-item__icon svg { width: 18px; height: 18px; }
.hub-notif-item__icon--order    { background: rgba(99,102,241,.12); color: #a5b4fc; }
.hub-notif-item__icon--payment  { background: rgba(34,197,94,.14); color: #86efac; }
.hub-notif-item__icon--warning  { background: rgba(239,68,68,.14); color: #fca5a5; }
.hub-notif-item__icon--stock    { background: rgba(234,179,8,.15); color: #fde047; }
.hub-notif-item__icon--review   { background: rgba(236,72,153,.14); color: #f9a8d4; }
.hub-notif-item__icon--cert     { background: rgba(14,165,233,.14); color: #7dd3fc; }
.hub-notif-item__icon--shipping { background: rgba(59,130,246,.14); color: #93c5fd; }
.hub-notif-item__icon--ticket   { background: rgba(168,85,247,.14); color: #d8b4fe; }
.hub-notif-item__icon--user     { background: rgba(16,185,129,.14); color: #6ee7b7; }
.hub-notif-item__icon--integration { background: rgba(148,163,184,.18); color: #cbd5e1; }
.hub-notif-item__icon--info { background: rgba(59,130,246,.14); color: #93c5fd; }
.hub-notif-item__icon--critical { background: rgba(239,68,68,.18); color: #fca5a5; }
.hub-notif-item__body { min-width: 0; flex: 1; }
.hub-notif-item__title {
  font-size: .85rem;
  font-weight: 600;
  margin: 0 0 .15rem;
  color: var(--text);
  line-height: 1.3;
}
.hub-notif-item__desc {
  font-size: .78rem;
  color: var(--muted);
  margin: 0 0 .25rem;
  line-height: 1.35;
}
.hub-notif-item__time {
  font-size: .7rem;
  color: var(--muted);
}
.hub-notif-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: .55rem;
  opacity: 0;
}
.hub-notif-item.unread .hub-notif-item__dot { opacity: 1; }
.hub-notif-panel__empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
}
.hub-notif-panel__footer {
  border-top: 1px solid var(--border);
  padding: .5rem;
  display: flex;
  justify-content: center;
}
.hub-notif-panel__footer a {
  font-size: .78rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  padding: .35rem .5rem;
  border-radius: 6px;
}
.hub-notif-panel__footer a:hover { background: rgba(99,102,241,.1); }

@media (max-width: 768px) {
  .hub-toggle { display: flex; }
  .hub-sidebar {
    transform: translateX(-100%);
  }
  .hub-sidebar.open {
    transform: translateX(0);
  }
  .hub-overlay.open {
    display: block;
  }
  .hub-main {
    margin-left: 0;
    padding: 3.5rem 1.25rem 1.5rem;
  }
  .hub-bell-wrap {
    top: .75rem;
    right: .75rem;
  }
}