/* console.css -- the admin console's own layout only.
 *
 * Every value comes from design-tokens.css. Nothing here restyles an atom: a
 * bare atom class redeclared in an app stylesheet silently clobbers the atom
 * platform-wide, so every rule below is scoped to a console-owned class.
 *
 * Spacing contract: components carry no external margin. The parent owns the
 * space between children, via gap.
 */

/* --- shell ---------------------------------------------------------------- */

/* height, NOT min-height. With min-height the shell grows past the viewport,
 * .console-main grows with it, its scrollHeight never exceeds its clientHeight
 * so it never scrolls -- and because reset.css sets `body { overflow: hidden }`
 * the overspill is simply unreachable. A fixed-height shell is what pins
 * .console-main to the viewport and makes it the scroll region. */
#console-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-app);
}

.console-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-default);
}

/* PROD is the one state worth shouting about. This is not the safety mechanism
 * -- the server-side allow-list and the write confirmation are -- but it is what
 * stops the mistake being made in the first place. */
.console-header--prod {
    background: var(--color-error-light, var(--bg-surface));
    border-bottom: 2px solid var(--color-error);
}

.console-header__left,
.console-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.console-brand {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.console-crumbs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.crumb-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-primary);
    font-size: inherit;
}

.crumb-link:hover { color: var(--color-primary-hover); }
.crumb-sep { color: var(--text-tertiary); }
.crumb-current { color: var(--text-primary); }

.console-user {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.env-picker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.env-picker__label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.env-picker__select {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.env-picker--prod .env-picker__select {
    border-color: var(--color-error);
    color: var(--color-error);
    font-weight: var(--font-weight-semibold);
}

/* THE SCROLL CONTRACT.
 * reset.css sets `html, body { height: 100%; overflow: hidden }` -- the platform
 * is a fixed-viewport app where content regions scroll INTERNALLY, never the
 * page. The console inherits that, so without an explicit scroll region here
 * nothing scrolls at all and everything below the fold is unreachable.
 *
 * So: the header is fixed chrome and THIS is the scroll region. That is also why
 * every Panel is built with scrollable:false -- two nested scrollers (this and
 * the panel's own) is what produced the clipped, dead-space layout. One
 * scroller, here. */
.console-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4);
}

/* align-items:flex-start so children size to their content. Without it the
 * column stretches every child to full width -- which is what made the
 * SegmentedControl span the page when it is `display:inline-flex` by design. */
.screen {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}

/* ...but the panels DO want the full width; only the controls hug their content.
 * Panel's root class is `dashboard-section` (verified in Panel.js). */
.screen > .dashboard-section,
.screen > .tenant-body,
.screen > .loading-state,
.screen > .error-state,
.tenant-body > .dashboard-section,
.tenant-body > .seed-summary,
.tenant-body > .expandable-panel {
    width: 100%;
}

.tenant-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* --- sign-in -------------------------------------------------------------- */

.console-centre {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.signin-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 360px;
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.signin-title {
    margin: 0;
    font-size: var(--text-lg);
    color: var(--text-primary);
}

.signin-sub {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.signin-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.signin-input {
    padding: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
}

.signin-error {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-error-light);
    color: var(--color-error);
    font-size: var(--text-sm);
}

/* --- tables and cells ----------------------------------------------------- */

/* The tenants table is navigational -- every row opens a tenant -- so it needs
 * the affordance. Scoped under a console class so it cannot leak onto the
 * platform's own read-only DataTables, where a pointer cursor would lie. */
.screen .data-table-container[data-table-id="tenants"] .table-row,
.screen .data-table-container .table-row[data-row-id]:hover {
    cursor: pointer;
}

.screen .table-row[data-row-id]:hover {
    background: var(--bg-surface-hover);
}

/* DataTable DOES put .table-align-right on the header cell, but the label sits
 * inside .header-cell-content which is display:flex -- and flex ignores
 * text-align. So a right-aligned numeric column renders its values right and its
 * header left, platform-wide. Corrected here for the console only: never
 * redeclare a component class bare in an app stylesheet, or it clobbers the
 * component everywhere. The underlying DataTable defect is worth fixing at
 * source, separately. */
.screen .table-header-cell.table-align-right .header-cell-content {
    justify-content: flex-end;
}

.cell-strong {
    display: block;
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
}

.cell-sub {
    display: block;
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.console-search,
.console-select {
    padding: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--text-sm);
    min-width: 220px;
}

.req-dot {
    color: var(--color-error);
    margin-left: var(--space-1);
}

.seed-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.seed-hotel-pick {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

/* --- seed items (expandable rows) ----------------------------------------- */

.seed-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* .expandable-header-left is ALREADY a centred flex row with flex:1 -- the
 * component handles it. Nothing to override here; the row just needs its own
 * content to fill the width so the meta can sit hard right. */

/* NO width here. .expandable-header-left already has flex:1 inside a
 * space-between row; adding width:100% over-constrains it, pushes past the
 * chevron and wraps the meta onto a second line -- which is what put the count
 * and badge below the name instead of beside it. flex:1 is enough, and the
 * meta's margin-left:auto does the rest. */

/* The row owns its own layout so it does not depend on how the component lays
 * out its left slot. flex-wrap:nowrap is explicit: the name truncates, it never
 * pushes the badge onto a second line. */
.seed-item__row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-width: 0;
}

.seed-item__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.seed-item__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-left: auto;
}

.seed-item__count {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* PADDING ONLY WHEN EXPANDED. The component sets `padding: 0` deliberately:
 * collapse is `max-height: 0`, and padding is NOT inside max-height, so an
 * unconditional padding leaves ~24px of dead space on EVERY collapsed row. With
 * eleven rows that is a panel a third taller than its content for no reason. */
.seed-item.expanded .expandable-panel-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: 0 var(--space-4) var(--space-4);
}

/* --- upload and diff ------------------------------------------------------ */

.upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

.upload-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.upload-actions {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-3);
}

.preview-out { padding-top: var(--space-3); }

.diff-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.diff-chip {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    background: var(--bg-app);
    color: var(--text-secondary);
}

.diff-chip--add { background: var(--color-primary-light); color: var(--color-primary-hover); }
.diff-chip--change { background: var(--color-warning-light); color: var(--color-warning); }
.diff-chip--remove { background: var(--color-error-light); color: var(--color-error); }

.warn-note {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-warning-light);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.preview-errors {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-error-light);
    color: var(--text-primary);
}

.preview-errors h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.preview-errors ul { margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); }

.preview-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.hint {
    color: var(--text-tertiary);
    font-size: var(--text-sm);
    margin: 0;
}

/* --- toasts --------------------------------------------------------------- */

.console-toasts {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 1000  /* no z-index scale exists in design-tokens.css */;
}

.console-toast {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    font-size: var(--text-sm);
    box-shadow: var(--shadow-md);
}

.console-toast--error { border-color: var(--color-error); }
.console-toast--warning { border-color: var(--color-warning); }
.console-toast--success { border-color: var(--color-success); }

/* --- create tenant modal -------------------------------------------------- */

.create-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}

.confirm-prod {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-sm);
    background: var(--color-error-light);
    color: var(--text-primary);
    font-size: var(--text-sm);
}