/* Top bar: identity cluster shared by every signed-in screen.
   It is fixed to the viewport top, so the sidebar and the page content are
   pushed down by its height below. */

:root {
  --topbar-height: 60px;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-height);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 0 20px;
  background: var(--color-paper-white);
  border-bottom: 1px solid var(--color-silver-mist);
  z-index: 1200;
}

.identity-cluster {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Only the content column is pushed below the bar: the sidebar owns the full
   height of the window, including the top-left corner the bar would cover. */
/* .main-content {
  padding-top: var(--topbar-height);
} */

/* The sidebar sits above the bar. The child selectors are deliberate: they beat
   sidebar.css's own rules whatever order the two stylesheets are loaded in. */
.layout-wrapper>*>.sidebar,
.layout-wrapper>.sidebar {
  top: 0;
  height: 100vh;
  z-index: 1250;
}

/* Desktop keeps the buttons in the bar, so the drawer leaves no room for them. */
.sidebar-identity {
  display: none;
}

.topbar-lang-switch {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-slate-border);
  border-radius: var(--radius-badges);
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
}

.topbar-lang-switch span {
  padding: 5px 12px;
  cursor: pointer;
  /* The resting half of the switch, in the role the script sets it to when it wires the
     click — see `wireLanguageSwitch`. */
  color: var(--text-subtle);
  transition: background var(--motion-control) var(--motion-ease), color var(--motion-control) var(--motion-ease);
  user-select: none;
}

.topbar-lang-switch span:hover {
  background: var(--color-silver-mist);
}

.topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border: 1px solid var(--color-slate-border);
  border-radius: var(--radius-badges);
  background: var(--color-paper-white);
  cursor: pointer;
  font-family: var(--font-inter);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-absolute-black);
  transition: background var(--motion-control) var(--motion-ease), border-color var(--motion-control) var(--motion-ease);
  max-width: 260px;
}

.topbar-user:hover {
  background: var(--color-light-gray);
  border-color: var(--color-primary);
}

.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.topbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.topbar-avatar svg {
  width: 18px;
  height: 18px;
}

.topbar-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The bell shares the sign-out button's shape: they are the two round controls in the
   cluster, and a second lone control that looked different would read as a third kind of
   thing rather than as one more button. */
.topbar-logout,
.topbar-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--color-slate-border);
  border-radius: 50%;
  background: var(--color-paper-white);
  color: var(--color-graphite);
  cursor: pointer;
  transition: background var(--motion-control) var(--motion-ease), color var(--motion-control) var(--motion-ease), border-color var(--motion-control) var(--motion-ease);
}

.topbar-logout:hover,
.topbar-bell:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.topbar-logout svg,
.topbar-bell svg {
  width: 17px;
  height: 17px;
}

/* 通知: the bell, its unread count, and the panel it opens.
   The panel is positioned against the bell rather than the bar, so it hangs under the
   control it belongs to wherever the cluster has been moved to (the top bar on a
   desktop, the bottom of the drawer on a phone). */
.topbar-bell-wrap {
  position: relative;
  display: inline-flex;
}

.topbar-bell {
  position: relative;
}

.topbar-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--color-primary);
  color: var(--color-paper-white);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 340px;
  max-height: 60vh;
  overflow-y: auto;
  box-sizing: border-box;
  background: var(--color-paper-white);
  border: 1px solid var(--color-silver-mist);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20, 24, 34, 0.14);
  z-index: 1400;
}

.notif-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-paper-white);
  border-bottom: 1px solid var(--color-silver-mist);
  font-size: 0.9rem;
}

.notif-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-graphite);
  cursor: pointer;
}

.notif-close:hover {
  background: var(--color-light-gray);
}

.notif-close svg {
  width: 15px;
  height: 15px;
}

.notif-note,
.notif-empty {
  margin: 0;
  padding: 12px 14px;
  color: var(--color-graphite);
  font-size: 0.8rem;
  line-height: 1.5;
}

.notif-enable {
  display: block;
  width: calc(100% - 28px);
  margin: 0 14px 12px;
  padding: 9px 12px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-buttons);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-inter);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.notif-enable:hover {
  background: var(--color-primary);
  color: var(--color-paper-white);
}

.notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The row is the message's own button plus its delete beside it, so the delete is a sibling of the
   thing that navigates rather than a corner of it — a click on the row opens the record, and a press
   on the minus must not be read as one. */
.notif-item {
  display: flex;
  align-items: stretch;
}

.notif-item+.notif-item {
  border-top: 1px solid var(--color-silver-mist);
}

.notif-item-button {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-inter);
  color: var(--color-absolute-black);
}

.notif-item-button:hover {
  background: var(--color-light-gray);
}

.notif-item-delete {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-graphite);
  cursor: pointer;
}

.notif-item-delete:hover {
  background: var(--color-light-gray);
  color: var(--color-absolute-black);
}

/* Sized here rather than inline, for the same reason the row's own mark is: lucide swaps the <i> for
   an <svg> that would otherwise fall back to the 300x150 default and tear the row open. */
.notif-item-delete svg {
  width: 14px;
  height: 14px;
}

/* Unread is a whisper rather than a shout: the badge is what says how many, and a row that
   is new only needs to be told apart from the ones around it. */
.notif-item.is-unread .notif-item-button {
  background: var(--color-primary-light);
  box-shadow: inset 3px 0 0 var(--color-primary);
}

.notif-item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
}

/* The mark a module put on its own message (an invoice's state, a district's calendar). Sized
   here rather than inline: lucide swaps the <i> for an <svg>, and an svg without a size of its
   own falls back to the 300x150 default, which would tear the row open. */
.notif-item-icon,
.notif-item-icon svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: var(--color-primary);
}

.notif-item-body {
  font-size: 0.8rem;
  color: var(--color-graphite);
  line-height: 1.45;
}

.notif-item-time {
  font-size: 0.72rem;
  color: var(--color-graphite);
}

/* 未讀 and 已讀 are two lists under one roof: the heading is what makes the split read as a split
   rather than as a tint a reader has to interpret. It is a label, not a row, so it has no hover and
   no pointer. */
.notif-group {
  padding: 9px 14px 4px;
  color: var(--color-graphite);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* The two things a reader may do to the whole list. Sticky to the bottom of the panel so they stay
   reachable however long the list grows, and set apart from the rows by their own edge. */
.notif-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-paper-white);
  border-top: 1px solid var(--color-silver-mist);
}

.notif-action {
  flex: 1 1 auto;
  padding: 7px 10px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-buttons);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-family: var(--font-inter);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.notif-action:hover {
  background: var(--color-primary);
  color: var(--color-paper-white);
}

/* Clearing cannot be undone, so it is drawn as the quieter of the two rather than the louder: it is
   scoped to the rows a reader has already read, and it is not the thing the panel wants pressed. */
.notif-action-quiet {
  border-color: var(--color-silver-mist);
  background: var(--color-paper-white);
  color: var(--color-graphite);
}

.notif-action-quiet:hover {
  background: var(--color-light-gray);
  color: var(--color-absolute-black);
}

/* The bar shows the icon alone; the drawer brings the word back. */
.topbar-logout-label {
  display: none;
  font-size: 0.85rem;
  font-weight: 600;
}

@media (max-width: 768px) {

  /* A phone has no room to spare: the bar disappears and its buttons move into
     the drawer (see the .sidebar-identity rules below), which gives the page a
     full extra 60px of height. */
  .topbar {
    display: none;
  }

  .main-content {
    padding-top: 0;
  }

  /* Above everything, so the open drawer covers the page without a seam. */
  .layout-wrapper>*>.sidebar,
  .layout-wrapper>.sidebar {
    z-index: 1300;
  }

  .sidebar-identity {
    display: block;
    padding: 16px;
    border-top: 1px solid var(--color-silver-mist);
  }

  .sidebar-identity .identity-cluster {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* Everything in the drawer is a thumb target, so the cluster is rebuilt at the size a thumb
     needs: 44px per control, rather than the bar's compact 28–36px, which it can afford because a
     mouse is precise and a phone is not. Each language is its own target in here, so each half
     gets the full height too. */
  .sidebar-identity .topbar-lang-switch {
    align-self: flex-start;
    min-height: 44px;
  }

  .sidebar-identity .topbar-lang-switch span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
  }

  .sidebar-identity .topbar-user {
    justify-content: flex-start;
    max-width: none;
    width: 100%;
    min-height: 44px;
  }

  /* A lone icon is ambiguous in the drawer, so the wording comes back. */
  .sidebar-identity .topbar-logout {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-buttons);
    gap: 8px;
    color: var(--danger-fg-strong);
  }

  .sidebar-identity .topbar-logout-label {
    display: inline;
  }

  /* A phone has no room beside the bell, so the panel becomes a sheet under the top of the
     screen — above the drawer, which is what the bell is inside of there. */
  .sidebar-identity .topbar-bell {
    width: 100%;
    height: 44px;
    border-radius: var(--radius-buttons);
  }

  .notif-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    max-height: 80vh;
    border-radius: 0 0 var(--radius-badges) var(--radius-badges);
    z-index: 1400;
  }
}