/* ============================================================
   ATL PIM Suite Design Gallery - shell layout (LIGHT ONLY).
   Zones: app bar (wordmark + instance + global search), icon module rail,
   page bar, main workspace, status bar. Token-driven (see tokens.css).
   Every metric below is measured from Kathryn's Figma frame "ATLNext -Home"
   (file hZbCPOHa9IREnP8AR02nY8, node 16079:4116, 1784 x 1192). Figma strokes are
   INSIDE strokes, so a 1px border here is taken out of the Figma padding.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--pim-font);
    color: var(--pim-ink-kit);
    background: var(--pim-canvas);
    font-size: var(--pim-font-size-md);
    -webkit-font-smoothing: antialiased;
}

/* Kit icon: Material Symbols Sharp, 20px glyph in a 16px box (MaterialSymbol "Default"). */
.material-symbols {
    font-family: 'Material Symbols Sharp';
    font-weight: normal;
    font-style: normal;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
    font-size: var(--pim-icon-glyph);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    user-select: none;
}
/* Kit icon "sm": 16px glyph in a 16px box. */
.material-symbols--sm { font-size: var(--pim-icon-glyph-sm); }

/* ---------- Shell grid ---------- */
.app-shell {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: var(--pim-appbar-h) 1fr var(--pim-statusbar-h);
    overflow: hidden;
    background: var(--pim-canvas);
}

.app-body {
    display: grid;
    grid-template-columns: var(--pim-rail-w) 1fr;
    min-height: 0;
    overflow: hidden;
}

/* ---------- App bar (16079:7197): padding 8 / 10 / 9, bottom border inside ---------- */
.app-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pim-space-2) var(--pim-space-2-5); /* 8 + 32 + 8 + 1px border = 49 */
    background: var(--pim-surface);
    border-bottom: 1px solid var(--pim-border-card);
}

.app-bar__brand { display: flex; align-items: center; gap: var(--pim-space-2); min-width: 0; }
.app-bar__scope { display: flex; align-items: center; gap: var(--pim-space-1); min-width: 0; height: var(--pim-control-h); }

.wordmark {
    padding: 0 var(--pim-space-2-5);
    font-size: var(--pim-font-size-lg);
    font-weight: var(--pim-font-weight-semibold);
    line-height: 1;
    color: var(--pim-ink-kit);
    white-space: nowrap;
}
.bar-sep {
    width: 5px;
    text-align: center;
    font-size: var(--pim-font-size-lg);
    line-height: var(--pim-line-height-lg);
    color: var(--pim-border-control);
}
/* Kit DropDown Button (16079:7212): 12 / 5 padding, 6 gap, 30 high. */
.instance-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--pim-space-1-5);
    padding: 5px var(--pim-space-3);
    border-radius: var(--pim-radius-md);
    font-size: var(--pim-font-size-md);
    font-weight: var(--pim-font-weight-semibold);
    line-height: var(--pim-line-height-md);
    color: var(--pim-ink-kit);
    white-space: nowrap;
    min-width: 0;
}
.instance-chip__name { overflow: hidden; text-overflow: ellipsis; }
.instance-chip .material-symbols {
    width: var(--pim-icon-box);
    height: var(--pim-icon-box);
    display: inline-grid;
    place-items: center;
    color: var(--pim-ink-subtle);
}

/* Compact global search (16079:7220): 260 x 32, 1px control border, 30px prefix. */
.app-bar__search {
    flex: none;
    display: flex;
    align-items: center;
    width: 260px;
    height: var(--pim-control-h);
    background: var(--pim-surface);
    border: 1px solid var(--pim-border-control);
    border-radius: var(--pim-radius-md);
}
.app-bar__search:focus-within {
    outline: var(--pim-focus-ring-width) solid var(--pim-focus-ring);
    outline-offset: 1px;
}
.search__prefix {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--pim-ink-subtle);
}
.search__input {
    flex: 1;
    min-width: 0;
    padding: 5px var(--pim-space-2-5);
    border: none;
    background: transparent;
    outline: none;
    font: inherit;
    font-size: var(--pim-font-size-md);
    line-height: var(--pim-line-height-md);
    color: var(--pim-ink-kit);
}
.search__input::placeholder { color: var(--pim-ink-subtle); opacity: 1; }
.search__suffix { flex: none; display: flex; padding: 0 var(--pim-space-1); }
/* Kit badge: 7 / 5 padding inside a 1px stroke, Cascadia Code 10 medium. */
.search__kbd {
    display: inline-block;
    padding: var(--pim-space-1) var(--pim-space-1-5);
    font-family: var(--pim-font-mono);
    font-size: var(--pim-font-size-xs);
    font-weight: var(--pim-font-weight-medium);
    line-height: 1;
    color: var(--pim-ink-subtle);
    background: var(--pim-selected);
    border: 1px solid var(--pim-selected);
    border-radius: var(--pim-radius-md);
}

/* Right icons (16079:7222): fixed 495 wide, end-justified, 10 gap. */
.app-bar__actions {
    flex: 0 1 var(--pim-appbar-actions-w);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pim-space-2-5);
}

/* Kit icon button: 32 x 32, 8 padding, transparent stroke, 4 radius. */
.icon-btn {
    position: relative;
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--pim-control-h);
    height: var(--pim-control-h);
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--pim-radius-md);
    color: var(--pim-ink-subtle);
    text-decoration: none;
    cursor: pointer;
}
.icon-btn:hover { background: var(--pim-hover); color: var(--pim-ink-kit); }
.icon-btn:focus-visible, .nav-item:focus-visible {
    outline: var(--pim-focus-ring-width) solid var(--pim-focus-ring);
    outline-offset: var(--pim-focus-ring-offset);
}
/* Kit badge: 16 x 16 primary disc centered at (+10, -9) from the button center. */
.icon-btn__badge {
    position: absolute;
    left: calc(50% + 10px);
    top: calc(50% - 9px);
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: var(--pim-icon-box);
    height: var(--pim-icon-box);
    border-radius: var(--pim-radius-pill);
    background: var(--pim-brand);
    color: var(--pim-on-brand);
    font-size: var(--pim-font-size-xs);
    font-weight: var(--pim-font-weight-semibold);
    line-height: 1;
}
.app-bar__sep { flex: none; width: 1px; height: var(--pim-icon-box); background: var(--pim-border-control); }

/* Kit avatar: 32 primary disc, 16 user icon. */
.avatar {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--pim-control-h);
    height: var(--pim-control-h);
    border-radius: var(--pim-radius-pill);
    background: var(--pim-brand);
}

/* ---------- Module rail (16079:4170): 56 wide, padding 8 / 10 / 12, 36px items, 2 gap ---------- */
.nav-rail {
    display: flex;
    flex-direction: column;
    gap: var(--pim-space-2);
    background: var(--pim-surface);
    border-right: 1px solid var(--pim-border-card);
    padding: var(--pim-space-2) calc(var(--pim-space-2-5) - 1px) var(--pim-space-3) var(--pim-space-2-5);
    overflow: hidden;
}
.nav-rail__items { flex: 1; display: flex; flex-direction: column; gap: var(--pim-space-0-5); }
.nav-rail__footer { display: flex; flex-direction: column; gap: var(--pim-space-0-5); }

.nav-item {
    display: grid; place-items: center;
    width: 36px; height: 36px;
    padding: 0;
    border: none; background: transparent;
    border-radius: var(--pim-radius-md);
    color: var(--pim-ink-subtle);
    cursor: pointer;
}
.nav-item:hover { background: var(--pim-hover); color: var(--pim-ink-kit); }
.nav-item--active, .nav-item--active:hover { background: var(--pim-selected-wash); color: var(--pim-brand); }

/* ---------- Workspace ---------- */
.workspace {
    display: flex; flex-direction: column;
    min-width: 0; min-height: 0;
    background: var(--pim-canvas);
    overflow: hidden;
}
/* Page bar (16079:4264): 64 high, app-surface fill, 16 / 24 padding, bottom border inside. */
.workspace__toolbar {
    flex: none;
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--pim-space-3);
    height: var(--pim-pagebar-h);
    padding: var(--pim-space-4) var(--pim-space-6) calc(var(--pim-space-4) - 1px);
    background: var(--pim-canvas);
    border-bottom: 1px solid var(--pim-border-card);
}
.workspace__content { flex: 1; min-height: 0; overflow: auto; }

/* ---------- Status bar (16079:4425): 32 high, 10 / 12 padding, top border inside ---------- */
.status-bar {
    display: flex; align-items: center; gap: var(--pim-space-1-5);
    padding: 0 var(--pim-space-3);
    background: var(--pim-surface);
    border-top: 1px solid var(--pim-border-card);
    font-family: var(--pim-font-mono);
    font-size: var(--pim-font-size-sm);
    line-height: 1;
    color: var(--pim-ink-subtle);
    white-space: nowrap;
    overflow: hidden;
}
.status-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--pim-success-dot); }
.status-bar__spacer { flex: 1; }
/* Gallery addition, not in the Figma frame. */
.sample-notice {
    display: inline-flex; align-items: center; gap: var(--pim-space-1);
    font-family: var(--pim-font);
    font-size: var(--pim-font-size-sm);
    font-weight: var(--pim-font-weight-semibold);
    color: var(--pim-warning-text);
    background: var(--pim-warning-chip-bg);
    border: 1px solid var(--pim-warning-text);
    border-radius: var(--pim-radius-sm);
    padding: 1px var(--pim-space-2);
}
.sample-notice .material-symbols { font-size: 14px; }

@media (max-width: 1100px) {
    .app-bar__actions { flex-basis: auto; }
}
@media (max-width: 720px) {
    .app-bar__search { display: none; }
}