/* App shell: navy icon rail + top bar (InternalPortal) and navy top nav (ClientPortal), command palette, user menu.
   Shared file, edit in InternalPortal then run scripts/sync-ui-kit.sh. */

.uw-layout { min-height: 100vh; background: var(--uw-bg); }
.uw-skip { position: fixed; left: 12px; top: -60px; z-index: 3000; background: var(--uw-text); color: #fff !important; padding: 10px 16px; border-radius: var(--uw-r-md); font-weight: 600; text-decoration: none; transition: top var(--uw-dur) var(--uw-ease); }
.uw-skip:focus { top: 12px; }
.uw-kbd--pc { display: none; }
html[data-uw-platform="pc"] .uw-kbd--mac { display: none; }
html[data-uw-platform="pc"] .uw-kbd--pc { display: inline-flex; }

/* ---------- internal: rail ---------- */
.uw-shell { --_rail: var(--uw-rail-w); min-height: 100vh; }
.uw-shell--pinned { --_rail: var(--uw-rail-w-open); }
.uw-rail { position: fixed; inset: 0 auto 0 0; width: var(--uw-rail-w); z-index: 1100; background: var(--uw-nav); color: var(--uw-nav-text); display: flex; flex-direction: column; overflow: hidden; transition: width var(--uw-dur) var(--uw-ease), box-shadow var(--uw-dur) var(--uw-ease); border-right: 1px solid var(--uw-nav-border); }
.uw-shell--pinned .uw-rail, .uw-rail:hover, .uw-rail:has(:focus-visible) { width: var(--uw-rail-w-open); }
.uw-rail:hover, .uw-rail:has(:focus-visible) { box-shadow: 8px 0 32px rgba(2, 6, 23, 0.28); }
.uw-shell--pinned .uw-rail { box-shadow: none; }
.uw-rail__brand { display: flex; align-items: center; gap: 12px; height: var(--uw-topbar-h); padding: 0 16px; flex: none; }
.uw-rail__logo { width: 40px; height: 40px; border-radius: 10px; background: var(--uw-primary); color: #fff !important; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; text-decoration: none; flex: none; }
.uw-rail__wordmark { color: #fff; font-weight: 800; letter-spacing: 0.04em; font-size: 15px; }
.uw-rail__close { display: none; margin-left: auto; appearance: none; border: 0; background: transparent; color: var(--uw-nav-text); width: 44px; height: 44px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; }
.uw-rail__scrim { display: none; }

.uw-nav { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--uw-nav-active) transparent; }
.uw-nav__list, .uw-nav__sub { list-style: none; margin: 0; padding: 0; }
.uw-nav__item { appearance: none; border: 0; background: transparent; font: inherit; width: calc(100% - 24px); box-sizing: border-box; display: flex; align-items: center; gap: 14px; height: 44px; margin: 2px 12px; padding: 0 13px; border-radius: 12px; color: var(--uw-nav-text); text-decoration: none !important; cursor: pointer; text-align: left; white-space: nowrap; position: relative; transition: background var(--uw-dur) var(--uw-ease), color var(--uw-dur) var(--uw-ease); }
.uw-nav__item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.uw-nav__item.is-active { background: var(--uw-nav-active); color: #fff; }
.uw-nav__item.is-active-group { color: #fff; }
.uw-nav__icon { width: 22px !important; height: 22px !important; flex: none; color: inherit !important; }
.uw-nav__label { font-size: 14px; font-weight: 600; opacity: 0; transition: opacity var(--uw-dur) var(--uw-ease); overflow: hidden; text-overflow: ellipsis; }
.uw-shell--pinned .uw-nav__label, .uw-rail:hover .uw-nav__label, .uw-rail:has(:focus-visible) .uw-nav__label { opacity: 1; }
.uw-nav__chev { width: 18px !important; height: 18px !important; margin-left: auto; opacity: 0; transition: transform var(--uw-dur) var(--uw-ease), opacity var(--uw-dur) var(--uw-ease); }
.uw-nav__chev.is-open { transform: rotate(180deg); }
.uw-shell--pinned .uw-nav__chev, .uw-rail:hover .uw-nav__chev, .uw-rail:has(:focus-visible) .uw-nav__chev { opacity: 1; }
.uw-nav__section { margin: 14px 24px 4px; padding-top: 14px; border-top: 1px solid var(--uw-nav-border); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; white-space: nowrap; height: 14px; box-sizing: content-box; }
.uw-nav__sub { padding: 2px 0 6px; }
.uw-nav__sub[hidden] { display: none; }
.uw-nav__sublink { display: none; align-items: center; height: 38px; margin: 1px 12px 1px 48px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--uw-nav-text); text-decoration: none !important; white-space: nowrap; }
.uw-shell--pinned .uw-nav__sublink, .uw-rail:hover .uw-nav__sublink, .uw-rail:has(:focus-visible) .uw-nav__sublink { display: flex; }
.uw-nav__sublink:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.uw-nav__sublink.is-active { background: var(--uw-nav-active); color: #fff; font-weight: 600; }
.uw-nav__foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--uw-nav-border); }
.uw-nav__pin { color: #64748b; }

/* ---------- internal: body + top bar ---------- */
.uw-body { margin-left: var(--_rail); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--uw-dur) var(--uw-ease); }
.uw-topbar { position: sticky; top: 0; z-index: 1000; height: var(--uw-topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 32px; background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid var(--uw-border); flex: none; }
.uw-topbar__title { font-size: 15px; font-weight: 700; color: var(--uw-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.uw-topbar__spacer { flex: 1; }
.uw-topbar .uw-topbar__menu { display: none; }
.uw-topbar__search { appearance: none; display: flex; align-items: center; gap: 10px; height: 44px; min-width: 320px; padding: 0 12px; background: var(--uw-surface); border: 1px solid var(--uw-border-strong); border-radius: var(--uw-r-md); color: var(--uw-muted); font: inherit; font-size: 14px; cursor: pointer; text-align: left; box-sizing: border-box; transition: border-color var(--uw-dur) var(--uw-ease), background var(--uw-dur) var(--uw-ease); }
.uw-topbar__search:hover { border-color: var(--uw-faint); background: var(--uw-bg); }
.uw-topbar__search-text { flex: 1; }
.uw-iconbtn { appearance: none; position: relative; width: 44px; height: 44px; border: 0; background: transparent; border-radius: var(--uw-r-md); color: var(--uw-text-2) !important; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none !important; flex: none; transition: background var(--uw-dur) var(--uw-ease); }
.uw-iconbtn:hover { background: var(--uw-surface-2); }
.uw-badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--uw-danger); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; border: 2px solid #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.uw-usermenu { display: inline-flex; }
.uw-usermenu__btn { display: inline-flex; align-items: center; gap: 2px; padding: 4px 6px 4px 4px; border-radius: 999px; cursor: pointer; min-height: 44px; box-sizing: border-box; }
.uw-usermenu__btn:hover { background: var(--uw-surface-2); }
.uw-usermenu__chev { color: var(--uw-muted); }
.uw-usermenu__who { padding: 12px 16px; min-width: 220px; }
.uw-usermenu__name { font-weight: 700; font-size: 14px; color: var(--uw-text); }
.uw-usermenu__email { font-size: 12px; color: var(--uw-muted); overflow-wrap: anywhere; }

.uw-main { flex: 1; min-width: 0; outline: none; }
.uw-content { max-width: var(--uw-content-max); margin: 0 auto; padding: 24px 32px 48px; box-sizing: border-box; }

/* ---------- internal: tablet + phone ---------- */
@media (max-width: 1023px) { .uw-topbar__search { min-width: 0; } .uw-topbar__search-text, .uw-topbar__search .uw-kbd { display: none !important; } .uw-topbar__search { width: 44px; padding: 0; justify-content: center; border-color: transparent; } .uw-topbar__search:hover { background: var(--uw-surface-2); } }
@media (max-width: 899px) {
    .uw-body { margin-left: 0; }
    .uw-topbar { padding: 0 8px 0 4px; gap: 4px; }
    .uw-topbar .uw-topbar__menu { display: inline-flex; }
    .uw-content { padding: 16px 16px 40px; }
    .uw-rail { width: min(300px, 86vw); transform: translateX(-102%); transition: transform 220ms var(--uw-ease); box-shadow: none; }
    .uw-shell--mobile-open .uw-rail { transform: none; box-shadow: 8px 0 40px rgba(2, 6, 23, 0.4); }
    .uw-rail:hover, .uw-rail:has(:focus-visible), .uw-shell--pinned .uw-rail { width: min(300px, 86vw); }
    .uw-nav__label, .uw-nav__chev { opacity: 1 !important; }
    .uw-nav__sublink { display: flex; }
    .uw-nav__item { height: 48px; }
    .uw-nav__pin { display: none; }
    .uw-rail__close { display: inline-flex; }
    .uw-rail__scrim { display: block; position: fixed; inset: 0; z-index: 1090; background: var(--uw-scrim); opacity: 0; pointer-events: none; transition: opacity 220ms var(--uw-ease); }
    .uw-shell--mobile-open .uw-rail__scrim { opacity: 1; pointer-events: auto; }
    .uw-shell { --_rail: 0px; }
}

/* ---------- command palette ---------- */
.uw-pal__scrim { position: fixed; inset: 0; z-index: 2000; background: var(--uw-scrim); display: flex; justify-content: center; align-items: flex-start; padding: min(14vh, 120px) 16px 16px; box-sizing: border-box; }
.uw-pal { width: 100%; max-width: 680px; max-height: min(640px, 78vh); display: flex; flex-direction: column; background: var(--uw-surface); border-radius: 16px; box-shadow: var(--uw-shadow-modal); overflow: hidden; color: var(--uw-text); }
.uw-pal__input { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--uw-border); color: var(--uw-muted); }
.uw-pal__input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 18px; color: var(--uw-text); }
.uw-pal__input input::placeholder { color: var(--uw-muted) !important; }
.uw-pal__list { overflow-y: auto; padding: 8px 0; flex: 1; overscroll-behavior: contain; }
.uw-pal__group { padding: 10px 20px 6px; font-size: 12px; font-weight: 700; color: var(--uw-muted); }
.uw-pal__item { display: flex; align-items: center; gap: 12px; padding: 10px 20px; min-height: 48px; box-sizing: border-box; cursor: pointer; }
.uw-pal__item.is-active { background: var(--uw-primary-tint); }
.uw-pal__glyph { width: 30px; height: 30px; border-radius: 8px; flex: none; background: var(--uw-surface-2); color: var(--uw-text-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; }
.uw-pal__glyph.is-command { background: var(--uw-primary); color: #fff; }
.uw-pal__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.uw-pal__title { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uw-pal__sub { font-size: 12px; color: var(--uw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uw-pal__badge { font-size: 12px; color: var(--uw-muted); white-space: nowrap; }
.uw-pal__empty { padding: 28px 20px; text-align: center; color: var(--uw-muted); font-size: 14px; }
.uw-pal__foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 20px; border-top: 1px solid var(--uw-border); background: var(--uw-bg); font-size: 12px; color: var(--uw-muted); align-items: center; }
.uw-pal__foot-end { margin-left: auto; display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 700px) { .uw-pal__scrim { padding-top: 12px; } .uw-pal__foot { display: none; } .uw-pal { max-height: 86dvh; } .uw-pal__input input { font-size: 16px; } }

/* ---------- client portal: navy top nav ---------- */
.uw-top { position: sticky; top: 0; z-index: 1100; background: var(--uw-nav); color: #fff; }
.uw-top__bar { max-width: var(--uw-content-max); margin: 0 auto; height: var(--uw-top-h); padding: 0 32px; display: flex; align-items: center; gap: 24px; box-sizing: border-box; }
.uw-top__brand { color: #fff !important; font-weight: 800; letter-spacing: 0.04em; font-size: 16px; text-decoration: none !important; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.uw-top__mark { width: 32px; height: 32px; border-radius: 9px; background: var(--uw-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.uw-top__nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.uw-top__link { display: inline-flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 10px; color: var(--uw-nav-text) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; white-space: nowrap; transition: color var(--uw-dur) var(--uw-ease), background var(--uw-dur) var(--uw-ease); }
.uw-top__link:hover { color: #fff !important; background: rgba(255, 255, 255, 0.06); }
.uw-top__link.is-active { color: #fff !important; background: var(--uw-nav-active); }
.uw-top__end { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.uw-top .uw-iconbtn { color: var(--uw-nav-text) !important; }
.uw-top .uw-iconbtn:hover { background: rgba(255, 255, 255, 0.08); color: #fff !important; }
.uw-top .uw-badge { border-color: var(--uw-nav); background: var(--uw-primary); }
.uw-top__back { appearance: none; border: 1px solid #334155; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; height: 36px; padding: 0 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.uw-top__back:hover { background: rgba(255, 255, 255, 0.08); }
.uw-top .uw-top__menu { display: none; }
.uw-top__panel { display: none; }
.uw-top__panel-nav { display: flex; flex-direction: column; }
.uw-top .uw-usermenu__btn:hover { background: rgba(255, 255, 255, 0.08); }
.uw-top .uw-usermenu__chev { color: var(--uw-nav-text); }
@media (max-width: 860px) {
    .uw-top__bar { padding: 0 8px 0 16px; gap: 8px; }
    .uw-top__nav { display: none; }
    .uw-top .uw-top__menu { display: inline-flex; }
    .uw-top__back { display: none; }
    .uw-top__panel.is-open { display: flex; flex-direction: column; padding: 4px 12px 12px; border-top: 1px solid var(--uw-nav-border); }
    .uw-top__panel .uw-top__link { height: 48px; }
    .uw-top__panel .uw-top__back { display: inline-flex; align-items: center; height: 48px; margin-top: 6px; }
}