/* ThePact Platform — Layout */

/* ==================== TOP NAVIGATION BAR ==================== */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; }
.nav__bar {
  height: var(--nav-height);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-card) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--nav-padding-x);
  gap: var(--nav-item-gap);
}

/* Logo (left) */
.nav__logo {
  position: absolute;
  left: var(--nav-edge-offset);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}
.nav__logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Main nav items (center) */
.nav__main {
  display: flex;
  align-items: center;
  gap: var(--nav-item-gap);
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav__item { position: relative; }
.nav__link {
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);
  padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
  border-radius: var(--nav-link-radius);
  color: var(--text-secondary);
  font-size: var(--nav-font-size);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}
.nav__link:hover { background: transparent; color: var(--text); }
.nav__link.active { background: transparent; color: var(--text-secondary); font-weight: 500; }
.nav__link svg { width: 16px; height: 16px; }
.nav__icon { width: var(--nav-icon-size); height: var(--nav-icon-size); object-fit: contain; opacity: 0.7; transition: opacity var(--transition-fast); }
.nav__logo img, .nav__logo-img { height: var(--logo-height); }
.nav__link:hover .nav__icon, .nav__link.active .nav__icon { opacity: 1; }
.nav__link .unread-badge {
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 9999px;
  min-width: 16px;
  text-align: center;
}

/* Avatar (right) */
.nav__me {
  position: absolute;
  right: var(--nav-edge-offset);
  display: flex;
  align-items: center;
  gap: var(--nav-me-gap);
}
.nav__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  border: 2px solid var(--border);
  cursor: pointer;
  overflow: hidden;
}
.nav__ws-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-dim);
}

/* ==================== NAV DROPDOWN MENUS ==================== */
.nav-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  background: var(--dropdown-bg, var(--bg-elevated));
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  z-index: 950;
  overflow: hidden;
}
.nav-dropdown.open { display: block; }
.nav-dropdown--center { left: 50%; transform: translateX(-50%); }
.nav-dropdown--right { right: 0; }
.nav-dropdown--large { position: fixed !important; top: 58px !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; }
.nav-dropdown--hey { position: fixed !important; top: 58px !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; width: min(860px, calc(100vw - 32px)); height: calc(100vh - 208px); overflow-y: auto; }
.nav-dropdown--pings { position: fixed !important; top: 58px !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; }
.hey-load-more { text-align: center; padding: 14px 16px; border-top: 1px solid var(--border); background: var(--bg-elevated); position: sticky; bottom: 0; }
.hey-load-more__btn { background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--accent); font-size: 13px; font-family: inherit; cursor: pointer; padding: 7px 20px; transition: background var(--transition-fast); }
.hey-load-more__btn:hover { background: var(--bg-hover); }
.hey-footer-link { display: block; text-align: center; padding: 13px 16px; color: var(--accent); font-size: 13px; text-decoration: none; border-top: 1px solid var(--border); }
.hey-footer-link:hover { background: var(--bg-hover); text-decoration: none; }
.nav-dropdown--medium { width: 320px; max-height: 450px; overflow-y: auto; }
.nav-dropdown--small { width: 240px; }

.nav-dropdown__section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.nav-dropdown__section:last-child { border-bottom: none; }
.nav-dropdown__title {
  font-size: 11px;
  font-weight: 600;
  color: var(--dropdown-dim, var(--text-dim));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.nav-dropdown__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  color: var(--dropdown-text, var(--text));
  text-decoration: none;
  font-size: 13px;
  transition: background var(--transition-fast);
  cursor: pointer;
}
.nav-dropdown__item:hover { background: var(--dropdown-hover, var(--bg-hover)); }
.nav-dropdown__item svg { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; }
.nav-dropdown__item .nav__icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.nav-dropdown__item:hover .nav__icon { opacity: 1; }
.nav-dropdown__item .item-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.nav-dropdown__empty {
  text-align: center;
  padding: 20px;
  color: var(--dropdown-dim, var(--text-dim));
  font-size: 13px;
}
.nav-dropdown__divider { border-top: 1px solid var(--border); margin: 4px 0; }

/* Search overlay */
.search-overlay {
  padding: 16px;
}
.search-overlay input[type="search"] {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border-radius: 10px;
  margin-bottom: 10px;
  background: var(--bg);
  border: 2px solid var(--border);
}
.search-overlay input[type="search"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.search-filters {
  display: flex;
  gap: 6px;
}
.search-filters select {
  flex: 1;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
}
.search-results {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px 0;
  margin-top: 8px;
}

/* Hey! inbox — Basecamp style */
.hey-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  position: sticky;
  top: 0;
  z-index: 1;
}
.hey-header__title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.hey-header__action {
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0;
  line-height: 1;
}
.hey-header__action:hover { text-decoration: underline; }

.hey-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  transition: background var(--transition-fast);
  cursor: pointer;
  position: relative;
}
.hey-item:last-child { border-bottom: none; }
.hey-item:hover { background: var(--bg-hover); }
.hey-item.unread { background: var(--hey-unread-bg, rgba(70, 163, 116, 0.06)); }

.hey-item__av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}
.hey-item__av img { width: 100%; height: 100%; object-fit: cover; }

.hey-item__content {
  flex: 1;
  min-width: 0;
}
.hey-item__subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hey-item__preview {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hey-item__meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
}

.hey-item__unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hey-dot, var(--accent));
  flex-shrink: 0;
  margin-top: 5px;
}

/* Hey bookmark feature */
.hey-item-wrap { position: relative; }
.hey-item-wrap .hey-item { padding-right: 40px; }
.hey-item__bookmark {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; border-radius: 6px;
  background: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; opacity: 0; transition: opacity 0.15s, background 0.15s;
  z-index: 2;
}
.hey-item__bookmark img { opacity: 0.5; transition: opacity 0.15s; }
.hey-item-wrap:hover .hey-item__bookmark { opacity: 1; }
.hey-item__bookmark:hover { background: var(--bg-hover); }
.hey-item__bookmark:hover img { opacity: 1; }
.hey-item__bookmark.active { opacity: 1; }
.hey-item__bookmark.active img { opacity: 1; filter: brightness(1.5) sepia(1) hue-rotate(80deg) saturate(3); }
.hey-bookmarks-section {
  background: var(--hey-bookmarks-bg, rgba(70, 163, 116, 0.04));
  border-bottom: 2px solid var(--accent);
}
.hey-bookmarks-header {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; font-size: 11px; font-weight: 700;
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em;
}

/* Hey section labels — unread/read divider */
.hey-section-label {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.hey-section-label::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border);
}
.hey-section-label--new {
  color: var(--accent);
  background: var(--hey-unread-bg, rgba(70, 163, 116, 0.06));
}
.hey-section-label--new::after { background: var(--accent); opacity: 0.3; }
.hey-section-label--read {
  color: var(--text-dim);
  background: var(--bg-elevated);
}

/* ==================== BREADCRUMB BAR ==================== */
/* Breadcrumb bar — Basecamp-style: a thin centered strip with an icon and
   an accent-colored link showing the current board context. No hard border
   at the bottom (blends into the page) and the link is styled with an
   underline so it reads as clickable navigation. */
/* Breadcrumb bar: in normal page flow (NOT fixed). Scrolls with content.
   840px centered, dark bg, rounded top. */
.breadcrumb-bar {
  height: 40px;
  background: #152229;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 840px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 12px 12px 0 0;
  position: relative;
}
@media (max-width: 840px) {
  .breadcrumb-bar {
    width: 100%;
    border-radius: 0;
  }
}
.breadcrumb-bar.hidden { display: none; }
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.breadcrumb__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.breadcrumb__icon svg { display: block; width: 14px; height: 14px; }
.breadcrumb a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}
.breadcrumb a:hover { color: var(--accent-hover); }
.breadcrumb .sep { color: var(--breadcrumb-sep, var(--text-dim)); font-size: 14px; margin: 0 2px; }
.breadcrumb .current { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Jump menu in breadcrumb */
/* Grid icon button — opens board jump menu */
.breadcrumb__jump-btn {
  background: none;
  border: none;
  padding: 4px;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background var(--transition-fast);
  font-family: inherit;
  line-height: 1;
}
.breadcrumb__jump-btn:hover { background: var(--bg-hover); }
.breadcrumb__jump-btn svg { display: block; }

/* Board jump dropdown */
.breadcrumb-jump-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  max-width: 320px;
  padding: 6px 0;
  z-index: 960;
  margin-top: 4px;
}
.breadcrumb-jump-dropdown__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px 4px;
}
.breadcrumb-jump-dropdown__item {
  display: block;
  padding: 8px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  transition: background var(--transition-fast);
}
.breadcrumb-jump-dropdown__item:hover {
  background: var(--bg-hover);
  color: var(--text);
  text-decoration: none;
}
.breadcrumb-jump-dropdown__empty {
  padding: 12px 14px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}

/* ==================== MAIN CONTENT AREA ==================== */
/* Uses padding-top + box-sizing: border-box (NOT margin-top) so the fixed
   nav/breadcrumb space is reserved INSIDE the box. With margin-top the
   browser treated those pixels as extra scrollable area, causing a phantom
   83px scroll on otherwise-fitting pages. */
.main-area {
  padding-top: var(--nav-height);
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.main-area.with-breadcrumb {
  padding-top: var(--nav-height);
}

#pageContent {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 24px;
}
.with-breadcrumb #pageContent { padding-top: 10px; }
/* For tool pages where content box should sit flush under the breadcrumb tab */
.with-breadcrumb #pageContent.flush-top { padding-top: 0; }
#pageContent.flush-top { padding-top: 0; }
#pageContent.wide { max-width: 1400px; }
#pageContent.full-width { max-width: none; }
/* Board pages — responsive horizontal gutter (100px on wide, shrinks to 16px
   on narrow) + flex column so the kanban fills the remaining vertical space.
   The dark backdrop panel sits on a ::before pseudo-element that covers the
   ENTIRE page-board area (header + columns) from right below the breadcrumb
   all the way to the bottom of the viewport. */
#pageContent.page-board {
  --board-gutter: clamp(16px, 5.5vw, 100px);
  --backdrop-inset: max(0px, calc(var(--board-gutter) - 20px));
  padding: 0 var(--board-gutter) 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--nav-height) - 40px);
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative; /* anchor for the ::before backdrop */
}
#pageContent.page-board::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--backdrop-inset);
  right: var(--backdrop-inset);
  bottom: 0;
  background: var(--kanban-backdrop-bg);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
/* Under 940px: backdrop fills full screen width, no rounded corners */
@media (max-width: 940px) {
  #pageContent.page-board { --backdrop-inset: 0px; --board-gutter: 10px; }
  #pageContent.page-board::before { border-radius: 0; }
}
/* Column view — board-like backdrop, 1080px wide, rounded top, flat bottom */
#pageContent.page-column {
  max-width: 1080px;
  padding: 0 24px;
  position: relative;
  min-height: calc(100vh - var(--nav-height) - 40px);
  box-sizing: border-box;
}
#pageContent.page-column::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--kanban-backdrop-bg);
  border-radius: 12px 12px 0 0;
  pointer-events: none;
}
#pageContent.page-chat { max-width: none; padding: 0; height: calc(100vh - var(--nav-height)); overflow: hidden; }
.with-breadcrumb #pageContent.page-chat { height: calc(100vh - var(--nav-height) - 40px); }
body:has(#pageContent.page-chat) { overflow: hidden; }
body:has(#pageContent.page-chat) .main-area { min-height: 0; overflow: hidden; }
#pageContent.page-card {
  padding-top: 0;
  padding-bottom: 0;
}
#pageContent.card-sidebar { max-width: 1600px; }

/* Tool pages (КП-Авто, бъдещи инструменти) — card style */
#pageContent.page-tool {
  margin: 20px auto 24px;
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 50%, var(--bg) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
}

/* ==================== PAGE HEADERS ==================== */
.page-header { text-align: center; margin-bottom: 32px; }
.page-header h1 {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.page-header .page-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
}
.page-header .page-above {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  margin-bottom: 4px;
}

/* Page header with team avatars */
.page-header .avatar-group {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
.page-header .avatar-group > * + * { margin-left: -4px; }

/* ==================== PROJECT TOOL GRID ==================== */
.project-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tool-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 170px;
}
.tool-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.tool-card__header {
  padding: 14px 16px 0;
}
.tool-card__header .tool-card__desc {
  margin-top: 3px;
}
.tool-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.tool-card__body {
  flex: 1;
  padding: 12px 16px 16px;
}
.tool-card__blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  gap: 8px;
}
.tool-card__icon {
  font-size: 40px;
  opacity: 0.6;
}
.tool-card__desc {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.4;
  margin: 0;
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 900px) {
  .project-tools { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .project-tools { grid-template-columns: 1fr; }
  .nav__link span { display: none; }
  .nav__logo span { display: none; }
  #pageContent { padding: 16px 12px; }
  #pageContent.page-tool { border-radius: 10px; margin: 12px; }
}

/* ==================== COMPREHENSIVE RESPONSIVE — layout.css ==================== */

/* ---- Tablet: 768px–1200px ---- */
@media (max-width: 1200px) {
  /* Navigation: reduce padding on items */
  .nav__link {
    padding: 6px 10px;
    font-size: 12px;
  }
  .nav__bar {
    gap: 2px;
  }
  /* Main content: tighter padding */
  #pageContent {
    padding: 24px 16px;
  }
  #pageContent.page-tool {
    margin: 16px;
  }
  /* Tool grid: 2 columns on tablet */
  .project-tools {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  /* Dropdowns: constrain width */
  .nav-dropdown--large {
    width: min(480px, calc(100vw - 24px));
  }
  .nav-dropdown--hey {
    width: min(700px, calc(100vw - 24px));
  }
  /* Page headers */
  .page-header h1 {
    font-size: 26px;
  }
}

/* ---- Mobile: < 768px ---- */
@media (max-width: 767px) {
  /* Navigation bar: icon-only mode, compact */
  .nav__bar {
    height: 46px;
    padding: 0 8px;
    gap: 1px;
  }
  .nav__link {
    padding: 6px 8px;
    font-size: 12px;
  }
  .nav__link span:not(.unread-badge) {
    display: none;
  }
  .nav__link svg {
    width: 18px;
    height: 18px;
  }
  .nav__logo {
    left: 8px;
    font-size: 13px;
    gap: 5px;
  }
  .nav__logo span {
    display: none;
  }
  .nav__me {
    right: 8px;
    gap: 6px;
  }
  .nav__avatar {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
  .nav__ws-status {
    display: none;
  }

  /* Breadcrumb bar: compact */
  .breadcrumb-bar {
    top: 46px;
    height: 36px;
    padding: 0 8px;
  }
  .breadcrumb {
    font-size: 12px;
    gap: 4px;
    overflow-x: auto;
    white-space: nowrap;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .breadcrumb__jump-btn {
    font-size: 11px;
    padding: 2px 5px;
  }

  /* Main area: adjust for smaller nav + breadcrumb */
  .main-area {
    padding-top: 46px;
  }
  .main-area.with-breadcrumb {
    padding-top: 82px;
  }

  /* Main content area */
  #pageContent {
    padding: 14px 10px;
  }
  #pageContent.wide {
    max-width: none;
  }
  #pageContent.card-sidebar {
    max-width: none;
  }
  #pageContent.page-tool {
    margin: 8px;
    border-radius: 10px;
    padding: 16px 12px;
  }

  /* Page headers */
  .page-header {
    margin-bottom: 20px;
  }
  .page-header h1 {
    font-size: 22px;
    letter-spacing: -0.02em;
  }
  .page-header .page-subtitle {
    font-size: 12px;
  }

  /* Tool grid: single column */
  .project-tools {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .tool-card {
    min-height: 130px;
  }

  /* Dropdown menus: full width on mobile */
  .nav-dropdown {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    top: 52px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 60px);
    border-radius: 10px;
  }
  .nav-dropdown--center {
    left: 8px;
    transform: none;
  }
  .nav-dropdown--right {
    right: 8px;
  }
  .nav-dropdown--large,
  .nav-dropdown--medium,
  .nav-dropdown--small {
    width: auto !important;
  }
  .nav-dropdown--hey {
    position: fixed !important;
    top: 52px !important;
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    height: calc(100vh - 60px);
  }

  /* Hey item: slightly tighter */
  .hey-item {
    padding: 10px 12px;
    gap: 10px;
  }
  .hey-item__av {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }
  .hey-item__subject {
    font-size: 12px;
  }
  .hey-item__preview {
    font-size: 11px;
  }

  /* Search overlay */
  .search-overlay input[type="search"] {
    padding: 10px 14px;
    font-size: 14px;
  }
  .search-filters {
    flex-direction: column;
    gap: 6px;
  }
  .search-filters select {
    width: 100%;
  }
}

/* ---- Small mobile: < 480px ---- */
@media (max-width: 480px) {
  .nav__bar {
    height: 44px;
    gap: 0;
  }
  .nav__link {
    padding: 6px 6px;
  }
  .nav__main {
    gap: 0;
  }
  .breadcrumb-bar {
    top: 44px;
    height: 34px;
  }
  .main-area {
    padding-top: 44px;
  }
  .main-area.with-breadcrumb {
    padding-top: 78px;
  }
  #pageContent {
    padding: 10px 8px;
  }
  .page-header h1 {
    font-size: 20px;
  }
}