/* Edge expands the workspace, not every component. Standard keeps its template widths.
   Explicit region classes keep modal/form internals out of the wide-layout rules. */
.app-main, .app-nav-inner { min-width: 0; }
/* Headers define a readable intrinsic column width; only the table wrapper scrolls.
   Body cells retain their existing wrapping (long models, URLs and audit details). */
:is(.app-main, .roadmap-dialog) th {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}
/* Prefer intact words and balanced lines over Hangul character-by-character breaks.
   Existing explicit nowrap controls stay one line; break-word is an emergency fallback. */
:where(button, [role="button"], .roadmap-actions > a, .app-page-heading a, a.inline-block) {
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: balance;
}
/* Move complete actions to the next row before squeezing words in narrow dialogs. */
#modalButtons, #master-edit-actions { flex-wrap: wrap; }
#master-edit-actions { gap: .75rem; }
#emailModal input { min-width: 0; }
.account-layout { display: grid; gap: 1.5rem; }
.account-panel { min-width: 0; }
.account-panel :is(input, select) { min-width: 0; }
.account-panel :is(#displayLoginId, #displayNameNick, #currentEmailText) { overflow-wrap: anywhere; }
.account-preference-group + .account-preference-group {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}
.dark .account-preference-group + .account-preference-group { border-color: #334155; }

html[data-layout-skin="edge"] .app-main {
    max-width: none;
    padding-inline: 1.5rem;
}
.app-main { --standard-main-width: 80rem; --standard-inline: 1rem; }
.app-main.max-w-6xl { --standard-main-width: 72rem; }
.app-main.max-w-5xl { --standard-main-width: 64rem; }
.app-main.max-w-4xl { --standard-main-width: 56rem; }
.app-main.max-w-2xl { --standard-main-width: 42rem; }
@media (min-width: 640px) { .app-main { --standard-inline: 1.5rem; } }
@media (min-width: 1024px) { .app-main { --standard-inline: 2rem; } }
html[data-layout-skin="edge"] .app-page-heading {
    width: 100%; min-width: 0;
    max-width: calc(min(100vw, var(--standard-main-width)) - 2 * var(--standard-inline));
    margin-inline: auto;
}
html[data-layout-skin="edge"] .app-content-header {
    border-left: 4px solid #0284c7;
    padding-left: 1rem;
}
/* One menu heading contract; functional controls are a separate region below it. */
.app-content-header { display: block; margin-bottom: 1.5rem; min-width: 0; }
.app-content-title { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: #0f172a; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.app-content-description { margin-top: .25rem; font-size: .875rem; line-height: 1.6; color: #64748b; word-break: keep-all; overflow-wrap: break-word; }
.dark .app-content-title { color: #f1f5f9; }
.dark .app-content-description { color: #94a3b8; }
@media (min-width: 768px) { .app-content-title { font-size: 1.875rem; } }
.app-page-controls { width: 100%; min-width: 0; margin-bottom: 1.5rem; }
html[data-layout-skin="edge"] .app-page-controls {
    max-width: calc(min(100vw, var(--standard-main-width)) - 2 * var(--standard-inline)); margin-inline: auto;
}
.app-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.app-header-actions > * { min-width: 0; max-width: 100%; }
.app-header-actions #cleanupDropdown { left: 0; right: auto; max-width: calc(100vw - 3rem); }
.app-header-actions .app-refresh-controls { flex-wrap: wrap; }
.app-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
[data-selection-action]:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Compact two-row side groups preserve left/center/right even in a narrow PC window. */
.app-nav-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    height: auto;
    min-height: 4rem;
    gap: .4rem .75rem;
    padding-block: .5rem;
}
.app-nav-title { min-width: 0; max-width: min(20rem, 25vw); justify-self: center; text-align: center; word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; }
.app-nav-title-line { display: block; }
.app-nav-controls { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; gap: .25rem; max-width: 100%; }
.app-nav-tools, .app-nav-account { display: flex; align-items: center; justify-content: flex-end; min-width: 0; max-width: 100%; gap: .5rem; }
.app-nav-tools > *, .app-nav-account > * { white-space: nowrap; }
.app-nav-tools > *, .app-nav-account > a[href="/logout"] { flex-shrink: 0; }
.app-nav-tools #session-timer-badge { min-width: 0; flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; white-space: normal; text-align: right; }
.app-session-short { display: none; }
@media (max-width: 599px) {
    /* Equal side tracks retain the exact title center without a separate title row. */
    .app-nav-row { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); column-gap: .375rem; }
    .app-nav-title { width: 100%; max-width: none; line-height: 1.4; }
    .app-nav-row .app-nav-links { flex-direction: column; align-items: flex-start; gap: 0; }
    .app-nav-row .app-nav-link { padding: .4rem .15rem; }
    .app-nav-controls { display: grid; grid-template-areas: "logout" "user" "tools"; justify-items: end; align-items: center; gap: .25rem; }
    .app-nav-account { display: contents; }
    .app-nav-logout { grid-area: logout; padding-block: .25rem; }
    .app-nav-user { grid-area: user; }
    .app-nav-tools { grid-area: tools; gap: .2rem; }
    .app-nav-tools #theme-toggle-btn { padding: .2rem; min-width: 24px; min-height: 28px; }
    .app-nav-tools #session-timer-badge { padding: .2rem; min-height: 28px; font-size: .7rem; }
    .app-session-full { display: none; }
    .app-session-short { display: inline; white-space: nowrap; }
}
.app-nav-user { max-width: min(18rem, 100%); min-width: 0; flex-wrap: nowrap; justify-content: flex-end; }
.app-nav-nickname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nav-role { flex-shrink: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mini cards share surfaces, borders, corners and focus. Text colors retain meaning. */
.app-nav-controls .app-nav-control {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    min-height: 32px; max-width: 100%; padding: .35rem .6rem;
    border: 1px solid #e2e8f0; border-radius: .75rem; background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / .06); font-size: .75rem; line-height: 1.25; font-weight: 500;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.app-nav-controls .app-nav-control:hover { background: #f8fafc; border-color: #94a3b8; box-shadow: 0 2px 5px rgb(15 23 42 / .1); }
.app-nav-control:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.app-nav-control i { line-height: 1; }
.dark .app-nav-controls .app-nav-control { background: #1e293b; border-color: #475569; }
.dark .app-nav-controls .app-nav-control:hover { background: #334155; border-color: #94a3b8; }
.app-nav-controls .app-nav-user { justify-content: flex-end; }
.app-nav-controls .app-nav-logout { color: #dc2626; font-weight: 600; }
.dark .app-nav-controls .app-nav-logout { color: #f87171; }
.app-nav-controls [data-session-state="warning"], .app-nav-controls [data-session-state="expired"] { color: #dc2626; border-color: #fca5a5; }
.dark .app-nav-controls [data-session-state="warning"], .dark .app-nav-controls [data-session-state="expired"] { color: #f87171; border-color: #991b1b; }
@media (max-width: 599px) {
    .app-nav-controls .app-nav-control { padding: .25rem .3rem; font-size: .75rem; }
    .app-nav-controls .app-nav-user { gap: .1rem .25rem; }
}

/* Fixed track maxima prevent stretching; auto-fit collapses unoccupied columns so
   the visible card group, not an invisible grid reservation, can be centered. */
@media (min-width: 640px) {
    html[data-layout-skin="edge"] :is(.edge-card-grid, .edge-metric-grid) {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--edge-card-width, 19rem)), var(--edge-card-width, 19rem)));
        justify-content: center;
        align-items: start;
    }
}
html[data-layout-skin="edge"] .edge-metric-grid { --edge-card-width: 18rem; }
html[data-layout-skin="edge"] #dashboardWidget { --edge-card-width: 14rem; }
html[data-layout-skin="edge"] #admin-menus-grid { --edge-card-width: 18rem; }
html[data-layout-skin="edge"] .dashboard-metrics { --edge-card-width: 21.5rem; }
html[data-layout-skin="edge"] :is(.edge-card-grid, .edge-metric-grid) > * { min-width: 0; }

/* Filters and charts retain readable widths. Only list/tree regions use the full canvas. */
html[data-layout-skin="edge"] :is(.edge-filter-region, .edge-overview-region) {
    max-width: 76rem;
    margin-inline: auto;
}
html[data-layout-skin="edge"] .edge-filter-compact { max-width: 68rem; }
html[data-layout-skin="edge"] .edge-wide-region { max-width: none; }
html[data-layout-skin="edge"] .edge-panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 44rem), 1fr));
    gap: 1.5rem;
    align-items: start;
    max-width: 137.5rem; /* Two 68rem panels plus their gap, centered as one group. */
    margin-inline: auto;
    margin-bottom: 2rem;
}
html[data-layout-skin="edge"] .edge-panel-grid > * {
    min-width: 0;
    max-width: 68rem;
    margin-bottom: 0;
}
html[data-layout-skin="edge"] .app-main .overflow-x-auto { max-width: 100%; }
html[data-layout-skin="edge"] #equipmentTableBody td { padding-top: .65rem; padding-bottom: .65rem; }

/* Account settings remain one coherent panel; account/security stay in reading order.
   A bounded two-column layout avoids stretching fields or creating a third account column. */
html[data-layout-skin="edge"] .account-layout { max-width: 38rem; margin-inline: auto; }
@media (min-width: 1200px) {
    html[data-layout-skin="edge"] .account-layout {
        max-width: 78rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "profile preferences";
        align-items: start;
    }
    html[data-layout-skin="edge"] #account-profile { grid-area: profile; }
    html[data-layout-skin="edge"] #account-preferences { grid-area: preferences; }
}
.account-dialog { width: calc(100% - 2rem); max-width: 36rem; max-height: 90dvh; overflow-y: auto; margin: auto; border: 1px solid #cbd5e1; border-radius: 1rem; background: white; color: #0f172a; padding: 0; box-shadow: 0 20px 30px rgb(15 23 42 / .2); }
.account-dialog::backdrop { background: rgb(0 0 0 / .6); }
.dark .account-dialog { background: #1e293b; color: #f1f5f9; border-color: #475569; }
.permission-workspace { display: grid; gap: 1.5rem; min-width: 0; }
.permission-role-panel, .permission-detail-panel { min-width: 0; padding: 1.25rem; background: white; border: 1px solid #e2e8f0; border-radius: .75rem; }
.dark :is(.permission-role-panel, .permission-detail-panel) { background: #1e293b; border-color: #475569; }
.permission-role-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .5rem; max-height: 24rem; overflow-y: auto; }
.permission-role { padding: .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; text-align: left; overflow-wrap: anywhere; }
.permission-role[aria-pressed="true"] { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }
.dark .permission-role[aria-pressed="true"] { background: #172554; color: #93c5fd; }
#permission-detail[hidden] { display: none; }
@media (min-width: 1024px) { .permission-workspace { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); align-items: start; } }
.node-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.node-breadcrumb button { max-width: 100%; overflow-wrap: anywhere; }
.node-breadcrumb [aria-current="location"] { color: #2563eb; border-color: #60a5fa; font-weight: 700; }
.node-browser-grid { display: grid; gap: 1rem; min-width: 0; }
.node-child-panel, .node-detail-panel { min-width: 0; }
.node-list-title { overflow-wrap: anywhere; }
.node-choices { display: grid; gap: .5rem; }
.node-choice { padding: .75rem; border: 1px solid #cbd5e1; border-radius: .5rem; text-align: left; overflow-wrap: anywhere; }
.node-choice:hover, .node-choice:focus-visible { border-color: #2563eb; background: #eff6ff; }
.dark .node-choice:hover, .dark .node-choice:focus-visible { background: #172554; }
@media (min-width: 1024px) { .node-browser-grid { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); align-items: start; } }
@media (max-width: 639px) {
    html[data-layout-skin="edge"] .app-main { padding-inline: .75rem; }
    /* Keep template mobile grids: portal one column, compact log metrics two. */
}
/* No phantom row when the root template omits the parent link. */
.app-nav-links { display: flex; align-items: center; justify-self: start; gap: .25rem; }
.app-nav-history { display: flex; flex-direction: column; align-items: flex-start; }
.app-nav-link {
    display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
    padding: .4rem .5rem; border-radius: .5rem; font-size: .75rem; font-weight: 600;
}
.app-nav-link:hover { background: #e2e8f0; }
.dark .app-nav-link:hover { background: #334155; }
.app-nav-link:disabled, .app-nav-link[aria-disabled="true"] { opacity: .45; cursor: default; }
.app-nav-link:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }

.roadmap-search-basic { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.roadmap-search-basic .roadmap-keyword-label { flex: 1 1 10rem; min-width: 0; margin-bottom: 0; }
.roadmap-search-basic button { white-space: nowrap; }
.equipment-page-actions button, .account-profile-heading > * { white-space: nowrap; }
@media (max-width: 639px) {
    /* Keep search/toggle adjacent; the keyword occupies its own full-width row. */
    .roadmap-search-basic .roadmap-keyword-label { flex-basis: 100%; }
}
.roadmap-search-advanced { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #cbd5e1; }
.roadmap-search-advanced[hidden] { display: none; }
#roadmap-csv-actions[hidden] { display: none; }
.roadmap-search-help { grid-column: 1 / -1; }

/* Small screens read search first; roomy screens place actions left of search. */
.equipment-workspace { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "actions" "csv" "status"; gap: .75rem; }
.equipment-search-region { grid-area: search; min-width: 0; margin: 0; }
.equipment-action-region { grid-area: actions; min-width: 0; align-self: start; }
.equipment-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.equipment-include-mine { display: flex; align-items: flex-start; gap: .5rem; margin-top: .75rem; }
.equipment-include-mine input { flex-shrink: 0; margin-top: .2rem; }
.equipment-csv-panel { grid-area: csv; margin: 0; }
.equipment-list-status { grid-area: status; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.equipment-list-status .roadmap-actions { margin: 0; }
@media (min-width: 1024px) {
    .equipment-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-areas: "actions search" "csv csv" "status status"; align-items: start; }
}

.menu-card { display: flex; flex-direction: column; align-self: stretch; min-width: 0; }
.menu-card-description {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    line-height: 1.25rem; height: 3.75rem; flex-shrink: 0;
    overflow: hidden; overflow-wrap: anywhere; white-space: normal;
}
.menu-card-action { display: block; }