/* App.module.css -> .app__ */
/* Fixed-height, non-scrolling shell: only the content column scrolls. */
.app__app {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--text);
}

.app__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--content-pad);
}

/**
 * The design targets desktop and tablet and defines no mobile breakpoints. The
 * shell keeps its fixed sidebar at every width and scrolls horizontally below
 * the narrowest supported viewport, rather than reflowing into a phone layout
 * that was never designed. Screens collapse their own multi-column grids.
 */
.app__app {
  min-width: 720px;
}

@media (max-width: 1080px) {
  .app__content {
    padding: 20px;
  }
}

/* Sidebar.module.css -> .sb__ */
.sb__sidebar {
  flex: none;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  padding: 22px 16px;
}

/* ---- brand lockup ---- */
.sb__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 4px 8px 22px;
}

.sb__brand-mark {
  position: relative;
  width: 38px;
  height: 38px;
  flex: none;
  background: var(--brand-mark);
  border-radius: 11px;
}

/* The cross is knocked out in the sidebar colour, not filled white. */
.sb__brand-cross-h,
.sb__brand-cross-v {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--sidebar-bg);
  border-radius: 2px;
}

.sb__brand-cross-h {
  width: 16px;
  height: 5px;
}

.sb__brand-cross-v {
  width: 5px;
  height: 16px;
}

.sb__brand-name {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  line-height: 1;
}

.sb__brand-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--sidebar-muted);
  letter-spacing: 0.14em;
  margin-top: 3px;
}

/* ---- section labels ---- */
.sb__section-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--sidebar-label);
  padding: 6px 10px;
}

.sb__section-label-spaced {
  padding: 22px 10px 6px;
}

/* ---- nav ---- */
.sb__nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}

.sb__nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  background: transparent;
  color: var(--sidebar-fg);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--r-nav);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.sb__nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.sb__nav-item-active,
.sb__nav-item-active:hover {
  background: var(--sidebar-active-bg);
}

/* 3px accent rail, revealed only on the active item. */
.sb__active-bar {
  position: absolute;
  left: -4px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--accent);
  border-radius: 3px;
  opacity: 0;
}

.sb__nav-item-active .sb__active-bar {
  opacity: 1;
}

.sb__nav-icon {
  position: relative;
  flex: none;
}

.sb__nav-label {
  position: relative;
}

.sb__badge {
  position: relative;
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
}

/* ---- shortcut ---- */
.sb__shortcut {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 1px dashed var(--sidebar-dash-border);
  background: transparent;
  color: var(--sidebar-dash-fg);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--r-nav);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.sb__shortcut:hover {
  border-color: var(--accent);
  color: var(--sidebar-dash-hover-fg);
}

/* ---- user chip ---- */
.sb__user-chip {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px;
  background: var(--sidebar-chip-bg);
  border-radius: 12px;
}

.sb__user-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: var(--sidebar-avatar-bg);
  color: var(--sidebar-avatar-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.sb__user-meta {
  min-width: 0;
}

.sb__user-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--sidebar-user-name);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sb__user-role {
  display: block;
  font-size: 11.5px;
  color: var(--sidebar-muted);
}

/* TopBar.module.css -> .tb__ */
.tb__top-bar {
  flex: none;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 var(--content-pad);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border-topbar);
}

.tb__title-block {
  min-width: 0;
}

.tb__title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.tb__subtitle {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--text-sub);
}

/* ---- search ---- */
.tb__search-wrap {
  position: relative;
  margin-left: auto;
  width: 280px;
  flex: none;
}

.tb__search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted-2);
  pointer-events: none;
}

.tb__search {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--border-control);
  border-radius: var(--r-control);
  background: #fff;
  font-size: 13.5px;
  color: var(--text);
}

.tb__search:focus {
  border-color: var(--teal);
}

/* ---- bell ---- */
.tb__bell {
  position: relative;
  width: 42px;
  height: 42px;
  flex: none;
  border: 1px solid var(--border-control);
  background: #fff;
  border-radius: var(--r-control);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tb__bell-icon {
  color: #3d5655;
}

.tb__bell-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 7px;
  height: 7px;
  background: var(--amber);
  border-radius: 50%;
  border: 1.5px solid #fff;
}

/* ---- primary action ---- */
.tb__add-btn {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px;
  background: var(--teal);
  color: #fff;
  border: 0;
  border-radius: var(--r-control);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.tb__add-btn:hover {
  background: var(--teal-hover);
}

/**
 * Tablet: the search gives up width first, and the title truncates rather than
 * wrapping — the bar is a fixed 72px, so a wrapped title would overflow it.
 */
@media (max-width: 1080px) {
  .tb__search-wrap {
    width: auto;
    flex: 1 1 180px;
    min-width: 120px;
    max-width: 280px;
  }

  .tb__title,
  .tb__subtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ---- collapsible sidebar ------------------------------------------------ */
/**
 * Collapsing narrows the rail to its icons rather than hiding it: on a counter
 * terminal the nav still has to be one click away, and a drawer that slides
 * over the table would cover the row someone is reading.
 *
 * The width is a custom property so the transition animates one value and every
 * child follows.
 */
.sb__sidebar {
  transition: width 0.16s ease;
}

.sb__brand {
  position: relative;
}

.sb__brand-text {
  min-width: 0;
  overflow: hidden;
}

.sb__collapse {
  margin-left: auto;
  width: 26px;
  height: 26px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
}

.sb__collapse:hover {
  background: rgba(255, 255, 255, 0.07);
  color: var(--sidebar-dash-hover-fg);
}

[data-sidebar="collapsed"] .sb__sidebar {
  width: 76px;
  padding-left: 12px;
  padding-right: 12px;
}

/* Labels go, icons stay centred. `display:none` rather than opacity so they
   cannot be tabbed to or read out while invisible. */
[data-sidebar="collapsed"] .sb__brand-text,
[data-sidebar="collapsed"] .sb__nav-label,
[data-sidebar="collapsed"] .sb__section-label,
[data-sidebar="collapsed"] .sb__user-meta {
  display: none;
}

[data-sidebar="collapsed"] .sb__nav-item,
[data-sidebar="collapsed"] .sb__shortcut,
[data-sidebar="collapsed"] .sb__user-chip {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}

[data-sidebar="collapsed"] .sb__brand {
  justify-content: center;
  padding-bottom: 16px;
}

[data-sidebar="collapsed"] .sb__collapse {
  position: absolute;
  right: -6px;
  top: -2px;
  margin-left: 0;
  transform: rotate(180deg);
}

[data-sidebar="collapsed"] .sb__section-label-spaced {
  padding-top: 16px;
}

/* ---- footer ------------------------------------------------------------- */
.app__footer {
  flex: none;
  padding: 12px var(--content-pad);
  border-top: 1px solid var(--border-topbar);
  background: var(--topbar-bg);
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted-2);
  letter-spacing: 0.02em;
}

.app__footer b {
  color: var(--text-muted);
  font-weight: 700;
}