html, body{ height: 100%; }

.shell{
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* Left icon rail */
.rail{
  width: 52px;
  flex-shrink: 0;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  z-index: 9999;
}
.rail-mark{
  width: 26px; height: 26px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg,
    var(--accent) 0 3px, transparent 3px 5px,
    var(--accent) 5px 6px, transparent 6px 9px,
    var(--accent) 9px 11px, transparent 11px 14px,
    var(--accent) 14px 16px, transparent 16px 20px,
    var(--accent) 20px 22px, transparent 22px 26px);
  background-color: #2a2b30;
  margin-bottom: 8px;
}
.rail-icon{
  width: 36px; height: 36px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #9a9ca6;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.rail-icon:hover{ background: #2a2b30; color: #f5f3ee; }
.rail-icon.active{ background: var(--accent); color: #fff; }
.rail-spacer{ flex: 1; }

/* Main workspace */
.workspace{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.topbar{
  display: flex; align-items: stretch;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.tabstrip{
  display: flex; align-items: center; gap: 2px;
  padding: 0 16px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}
.tab{
  display: flex; align-items: center; gap: 8px;
  padding: 12px 8px 10px 14px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover{ color: var(--ink); }
.tab.active{ color: var(--accent-ink); border-bottom-color: var(--accent); }
.tab[draggable="true"]:active{ cursor: grab; }
.tab.dragging{ opacity: 0.4; }
.tab-pin-glyph{ font-size: 11px; flex-shrink: 0; transform: rotate(0deg); }
.tab.pinned{ padding-right: 14px; }
.tab-close{
  width: 16px; height: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; border-radius: 4px;
  color: var(--ink-faint); font-size: 15px; line-height: 1; cursor: pointer;
}
.tab-close:hover{ background: var(--surface-sunk); color: var(--bad); }

.profile-chip{
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px;
  font-size: 12.5px; font-weight: 500; color: var(--ink-soft);
  white-space: nowrap;
  border-left: 1px solid var(--border);
}

.panels{ flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.panel-view{ flex: 1; min-height: 0; display: flex; flex-direction: column; }
.panel-view[hidden]{ display: none; }

.placeholder-panel{
  display: block;
  padding: 60px 40px;
  max-width: 560px;
}
.placeholder-panel h2{ font-family: var(--font-display); font-size: 22px; margin: 0 0 10px; color: var(--ink); }
.placeholder-panel p{ font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.filterbar{
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.filterbar-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.filterbar-row.filterbar-advanced{
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.filterbar-row.filterbar-advanced[hidden]{ display: none; }
.filterbar-col{
  display: flex; flex-direction: row; gap: 8px;
}
.filterbar input, .filterbar select{
  padding: 7px 10px; border-radius: 5px; border: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink); background: var(--surface);
  min-width: 150px;
}
.filterbar input:focus, .filterbar select:focus{
  outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px var(--steel-soft);
}
/* SelectField.js's trigger replaces the native <select> visually within
   filter bars — same footprint as the inputs/select it sits next to. */
.filterbar .filter-dropdown-trigger{
  min-width: 150px; padding: 7px 10px; font-size: 12.5px;
}
.filterbar-toggle{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 10px; border-radius: 5px; border: 1px solid var(--border);
  background: var(--surface); color: var(--steel);
  font-size: 12.5px; font-weight: 600; cursor: pointer;
  margin-left: auto;
}
.filterbar-toggle:hover{ border-color: var(--steel); }
.filterbar-toggle .chev{ font-size: 11px; }

.actionbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.actionbar-left{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.actionbar-right{ display: flex; align-items: center; gap: 8px; }

.link-btn{
  background: none; border: none; cursor: pointer; padding: 2px 0;
  font-size: 13px; font-weight: 500; color: var(--steel);
}
.link-btn:hover{ text-decoration: underline; }
.link-btn.danger{ color: var(--bad); }
.link-btn:disabled{ opacity: 0.45; cursor: not-allowed; pointer-events: none; text-decoration: none; }
/* Adjust Position / Preview Manifest (Manage): stay visible and clickable-looking
   at all times, just dimmed less than the generic disabled state while nothing's
   selected — see ManageController._updateSelectionActions. */
.link-btn.selection-gated:disabled{ opacity: 0.8; cursor: not-allowed; pointer-events: auto;
  color: var(--ink-faint); }
/* Persistent toggle buttons (Pending transfers) rather than one-shot
   actions — underline stays on while the filter is active, same visual
   language as :hover so "pressed" reads as a natural extension of it. */
.link-btn.active{ color: var(--warn); text-decoration: underline; }
.link-sep{ color: var(--border); font-size: 12px; }

.grid-panel{
  margin: 0 8px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.grid-scroll{ flex: 1; min-height: 0; overflow: auto;}

/* Warehouse side tabs (Manage/assets page) — sourced from Warehouse
   Information; sits to the left of the assets grid. */
.assets-body{
  display: flex; align-items: stretch;
  margin: 0; flex: 1; min-width: 0; min-height: 0;
}
/* .assets-body .grid-panel{ margin: 0; } */
.warehouse-tab{
  width: 22px; height: 100%;
  background: var(--surface);
}
.warehouse-filter-btn{
  width: 22px; flex-shrink: 0; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  border: none; 
  background: transparent; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}
.warehouse-filter-btn[hidden]{ display: none; }
.warehouse-filter-btn:hover{ background: var(--surface-sunk); color: var(--ink); }

.grid-footer{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.grid-footer-left{ display: flex; align-items: center; gap: 16px; font-size: 12.5px; color: var(--ink-faint); }
/* nowrap: the page-size select and the prev/numbers/next/goto cluster
   read as one control, not two stacked rows — see the @media override
   below, which is the only place this should actually wrap (a real
   narrow-viewport constraint, not the false one this had before). */
.grid-footer-right{ display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.grid-footer-right select{
  padding: 6px 8px; border-radius: 5px; border: 1px solid var(--border);
  font-size: 12.5px; color: var(--ink); background: var(--surface);
}
.grid-footer-right .filter-dropdown-trigger{
  padding: 6px 8px; font-size: 12.5px; min-width: 90px;
}
.goto-label{ font-size: 12.5px; color: var(--ink-faint); margin-left: 4px; }

#gotoPageInput,
#iaGotoPageInput,
#ugGotoPageInput,
#uaGotoPageInput,
.loc-goto-input{
  width: 48px; padding: 6px 6px; border-radius: 5px; border: 1px solid var(--border);
  font-size: 12.5px; text-align: center;
}