/* Shared responsive geometry. Loaded before Common.css so view-state classes win. */
:root {
    --PageGap: 10px;
    --PanelPadding: clamp(10px, 3vw, 25px);
    --ViewportHeight: 100vh;
    --ViewportTop: 0px;
    --FooterHeight: 52px;
}
@supports (height: 100dvh) {
    :root { --ViewportHeight: 100dvh; }
}
body { font-size: 1rem; line-height: 1.4; }
html, body { width: 100%; height: 100%; }
input, button { font: inherit; }
input[type=text], input[type=password], input[type=number], button {
    min-width: 0;
    min-height: 45px;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
}
.MainView {
    top: var(--ViewportTop);
    left: 0;
    width: 100%;
    height: var(--ViewportHeight);
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: var(--PageGap);
    padding: max(var(--PageGap), env(safe-area-inset-top))
             max(var(--PageGap), env(safe-area-inset-right))
             max(var(--PageGap), env(safe-area-inset-bottom))
             max(var(--PageGap), env(safe-area-inset-left));
}
.PackingListView, .BoxView, .ItemsView, .ItemDetailView {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
    padding: var(--PanelPadding);
    /* Scroll the last item clear of the floating footer. */
    padding-bottom: calc(var(--FooterHeight) + 30px);
    scroll-padding-bottom: calc(var(--FooterHeight) + 30px);
    overflow-y: auto;
}
/* Each screen owns one scroll area, including its header at high text sizes. */
.PackingListView > *, .BoxView > *, .ItemsView > *, .ItemDetailView > * {
    flex-shrink: 0;
    min-width: 0;
}
.WorkingPackingList, .RecentBoxList,
.ItemDetailView .Content {
    height: auto;
    overflow: visible;
    padding-right: 0;
}
.ItemDetailView .Content:last-child { padding-bottom: 0; }
.FooterView {
    position: absolute;
    bottom: calc(max(var(--PageGap), env(safe-area-inset-bottom)) + 10px);
    left: calc(max(var(--PageGap), env(safe-area-inset-left)) + 15px);
    right: calc(max(var(--PageGap), env(safe-area-inset-right)) + 15px);
    height: var(--FooterHeight);
    z-index: 1;
    gap: 10px;
    padding: 0;
    pointer-events: none;
}
.FooterView div {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    height: var(--FooterHeight);
    pointer-events: auto;
    padding: 12px;
}
/* Hidden actions must not reserve a slot in the floating footer. */
.FooterView div.Collapsed { display: none; }
.PackingListView .Console input, .BoxView .Console input,
.ItemsListView .HeaderFilters .Row input { flex: 1 1 0; width: 100%; min-width: 0; }
.PackingListView .Console button, .BoxView .Console button,
.BoxView .Header button { flex: 0 0 auto; min-width: 45px; }
.BoxView .Header, .ItemsView .Header { margin: 0 0 16px; }
.BoxView .Header span, .ItemsView .Header div,
.ItemDetailView .Header .Info, .WorkingPackingList .Item div,
.RecentBoxList .Item div, .ItemsList .Item .Info { min-width: 0; overflow-wrap: anywhere; }
.WorkingPackingList .Item, .RecentBoxList .Item {
    flex-shrink: 0;
    height: auto;
    min-height: 80px;
    gap: 12px;
    padding: var(--PanelPadding);
}
.WorkingPackingList .Item > img { align-self: center; }
.ItemsView .Console .Row { gap: 10px; }
.ItemsView .Console .Row .Item {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 110px;
    padding: 12px;
    text-align: center;
    overflow-wrap: anywhere;
}
.ItemDetailView .Header, .ItemDetailView .Console,
.ItemDetailView .CountryInfo, .ItemDetailView .AdditionalsInfo { padding: var(--PanelPadding); }
.ItemDetailView .Header { flex-wrap: wrap; }
.ItemDetailView .Header .Info { flex: 1 1 100px; }
.ItemDetailView .Console .Progress { width: 100%; flex-wrap: wrap; gap: 10px; }
.ItemDetailView .Console .Progress span { overflow-wrap: anywhere; max-width: 100%; }
.ItemDetailView .Console .ProgressData { flex: 0 0 auto; width: 110px; height: 110px; }
.ItemDetailView .Console .Quantity { max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ItemDetailView .Console .Quantity span { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.ItemDetailView .CountryInfo { flex-wrap: wrap; }
.ItemDetailView .CountryInfo span { overflow-wrap: anywhere; }
/* Bound dialogs to the viewport; scrolling includes every action. */
.SettingsView, .MenuView, .BoxModelView, .GalleryView,
.ItemsListView, .FlagPickerView, .PopupView, .CameraView {
    top: calc(var(--ViewportTop) + var(--ViewportHeight) / 2);
    bottom: auto;
    width: calc(100% - 2 * var(--PageGap) - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-height: calc(var(--ViewportHeight) - 2 * var(--PageGap) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 0;
    height: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate(-50%, -50%);
    padding: var(--PanelPadding);
    overflow-wrap: anywhere;
}
.SettingsView > *, .MenuView > *, .BoxModelView > *, .GalleryView > *,
.ItemsListView > *, .FlagPickerView > *, .CameraView > * { flex-shrink: 0; min-width: 0; }
.ItemsList, .ItemsListView .NoResults, .FlagPickerView .Countries,
.GalleryMainContainer, .GalleryItems { height: auto; max-height: none; overflow: visible; }
.ItemsList .Item { flex-shrink: 0; padding: var(--PanelPadding); gap: 10px; }
.ItemsList .Item .Gallery button { width: 45px; height: auto; min-height: 45px; }
.ItemsListView .HeaderConsole { padding: 10px; }
.MenuItems div { height: auto; min-height: 100px; padding: 12px; text-align: center; }
.BoxModelView { row-gap: 16px; }
.BoxModelList { overflow-x: auto; }
.BoxModelListItem { flex-shrink: 0; }
/* Labels and controls share a row, so multiline labels cannot drift. */
.BoxModelData { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; }
.BoxModelData label { min-width: 0; }
.BoxModelData input { min-width: 0; width: 100%; }
.FlagPickerView .Countries { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.FlagPickerView .Countries .Item { padding: 12px; min-width: 0; text-align: center; }
.GalleryViewItem { max-width: 100%; }
.GalleryViewItemContentPhoto img { max-width: 100%; object-fit: contain; }
.CameraViewVideo video { display: block; max-height: calc(var(--ViewportHeight) * .55); object-fit: contain; }
.CameraViewVideo .Overlay { inset: 5px; }
.CameraViewVideo .Overlay .Console { padding: 5px; }
.CameraViewVideo .Overlay .Console .Command { padding: 10px; }
.AvailableCameras .Item { flex-shrink: 0; }
.LoginView {
    top: var(--ViewportTop);
    bottom: auto;
    width: min(440px, calc(100% - 32px));
    height: var(--ViewportHeight);
    padding: 16px 0 max(16px, env(safe-area-inset-bottom));
    overflow-y: auto;
}
.LoginView > * { flex-shrink: 0; }
.LoginView input:first-child { margin-top: auto; }
.LoginView { justify-content: flex-start; }
@media (max-width: 480px) {
    .ItemsList .Item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
    .ItemsList .Item .Info { grid-column: 2 / -1; }
    .ItemsList .Item .Gallery { grid-column: 1; justify-self: start; }
    .ItemsList .Item .Quantity { grid-column: 3; }
    .ItemDetailView .Console { row-gap: 16px; }
}
@media (max-width: 360px) {
    .ItemsView .Console .Row { flex-direction: column; }
    .ItemsView .Console .Row .Item { min-height: 70px; }
    .BoxModelData { grid-template-columns: minmax(0, 1fr); }
    .MenuItems { gap: 10px; }
    .MenuItems div { width: calc(50% - 5px); }
}
@media (max-height: 600px) {
    :root { --PageGap: 6px; --PanelPadding: 10px; }
    .ItemsView .Console .Row .Item, .MenuItems div { min-height: 70px; }
    .FooterView div { padding: 10px; }
    .ItemDetailView .Console .ProgressData { width: 90px; height: 90px; }
}

.ItemDetailView .AdditionalsInfo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
}
.ItemDetailView .AdditionalsInfo input { width: 100%; min-width: 0; }
.ItemDetailView .AdditionalsInfo label { overflow-wrap: anywhere; }
@media (max-width: 360px) {
    .ItemDetailView .AdditionalsInfo { grid-template-columns: minmax(0, 1fr); }
}