/* Shared outer page edge; independent of table height and column splitters. */
/* Comfort uses the original centered shell. Wide is explicit, never inferred
   from screen width or browser zoom, which cannot identify physical screen size. */
@media (min-width: 1201px) {
  #appShell.page-width-layout {
    width: calc(100% - 30px); max-width: none;
    margin-left: 15px; margin-right: 15px;
  }
}
.main-panel.page-width-resizable { position: relative; }
.page-layout-modes { display: flex; gap: 4px; margin-left: auto; padding: 3px; border: 1px solid rgba(130, 130, 130, .18); border-radius: 10px; flex: 0 0 auto; }
.sidebar > .page-layout-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; min-width: 0; padding: 5px; border-radius: 14px; background: rgba(255, 255, 255, .82); }
.sidebar > .page-layout-modes button { min-width: 0; padding: 7px 4px; }
.page-layout-modes button { padding: 5px 10px; min-height: 30px; border: 0; border-radius: 7px; box-shadow: none; background: transparent; color: #636363; font-size: 12px; white-space: nowrap; }
.page-layout-modes button[aria-pressed="true"] { background: #f9e9df; color: #ad441b; }
.page-layout-modes button:focus-visible { outline: 2px solid #d75c28; outline-offset: 2px; }
.page-layout-modes[hidden], .sidebar > .page-layout-modes[hidden] { display: none; }
.page-width-resize-handle {
  position: absolute; top: 0; bottom: 0; right: -8px; width: 16px;
  z-index: 8; cursor: ew-resize; touch-action: none; user-select: none;
  border-radius: 8px; outline-offset: 1px;
}
.page-width-resize-handle > span {
  display: block; position: sticky; top: 120px; margin: 100px auto 0;
  width: 5px; height: 76px; border-radius: 5px;
  background: rgba(215, 92, 40, .4);
}
.page-width-resize-handle:hover, .page-width-resize-handle:focus-visible {
  background: rgba(215, 92, 40, .12); outline: 1px solid rgba(215, 92, 40, .5);
}
.page-width-resize-handle:hover > span, .page-width-resize-handle:focus-visible > span { background: #d75c28; }
.is-resizing-page-width, .is-resizing-page-width * { cursor: ew-resize !important; user-select: none !important; }
.page-width-resize-handle[hidden] { display: none; }
@media (max-width: 1200px), print { .page-width-resize-handle, .page-layout-modes, .sidebar > .page-layout-modes { display: none; } }
@media print { #appShell { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; } }
