/* ===========================================================================
   Working tabs - copied from DavidsonHR's CRM (app.css "Working tabs"). Every open screen stays mounted;
   visibility is CSS-only. .ws-pane controls VISIBILITY, .ws-pane-inner controls
   LAYOUT - they must stay separate elements or layout rules override the hiding.
   The only differences are the colours: this app's variables (app.css) in place of DavidsonHR's navy. */

/* The workspace fills the shell body; each pane scrolls internally. */
.app-main:has(> .ws-workspace) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.ws-workspace { flex: 1; min-height: 0; position: relative; }

/* Inactive panes stay LAID OUT at full size, merely invisible - NOT display:none. A
   DevExpress grid that re-renders while display:none measures a 0-wide host and bakes
   junk column widths: the "come back to a squashed grid" bug. Stacked absolutely, every pane always sees the real
   width (and Chrome keeps scroll positions, which display:none threw away). visibility
   takes the pane out of focus order and the accessibility tree; opacity guarantees nothing
   inside can override visibility; pointer-events lets clicks fall through to the active
   pane whatever the DOM order. The ACTIVE pane gets no z-index/opacity of its own so its
   fixed dialogs still stack in the root context, above the sidebar and top band. */
.ws-pane { position: absolute; inset: 0; display: flex; flex-direction: column; visibility: hidden; opacity: 0; pointer-events: none; }
.ws-pane.ws-pane-active { visibility: visible; opacity: 1; pointer-events: auto; }
/* THE standard space above every page title. */
.ws-pane-inner { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 26px 24px; }

/* The page's title at the top of its pane (the header showed it before the tabs). */
.ws-page-title { font-size: 1.35rem; font-weight: 600; margin: 0 0 14px; color: var(--app-black); }

/* --- The strip in the top band --- */
.ws-strip-wrap {
    flex: 1; min-width: 0; height: 100%;
    display: flex; align-items: flex-end; gap: 2px; padding-top: 12px;
}
.ws-strip {
    flex: 1; min-width: 0; display: flex; gap: 3px; align-items: flex-end;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
}
.ws-strip::-webkit-scrollbar { display: none; }

/* EVERY TAB AT ITS NATURAL WIDTH (Steven, 2026-10-08): never shrinks, never cuts its title - the strip scrolls
   instead. */
.ws-tab {
    flex: 0 0 auto; height: 36px;
    display: flex; align-items: center;
    background: rgba(255, 255, 255, .07); color: #c3cbe4;
    border-radius: 7px 7px 0 0;
}
.ws-tab:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.ws-tab.active { background: var(--app-grey-light); color: var(--app-black); }
.ws-tab-main {
    display: flex; align-items: center; gap: 7px; height: 100%;
    padding: 0 8px 0 12px; background: none; border: 0; color: inherit;
    font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.ws-tab-title { white-space: nowrap; }

/* The drop zone past the last tab (only rendered while dragging). */
.ws-drop-end { flex: 0 0 0; width: 0; height: 36px; border-radius: 7px 7px 0 0; border: 1px dashed transparent; transition: flex-basis .12s; }
.ws-drop-end.active { flex-basis: 56px; border-color: rgba(255,255,255,.35); }
.ws-drop-end.drag-over { background: rgba(255,255,255,.18); border-style: solid; }
/* Home has no close button - give it symmetric padding so icon + label sit central. */
.ws-tab.home .ws-tab-main { padding: 0 14px; justify-content: center; }

/* Drag-reorder affordances: grab cursor on movable tabs, an insert marker on the hover
   target's left edge while a drag is in flight. */
.ws-tab[draggable="true"] { cursor: grab; }
.ws-tab.drag-over { box-shadow: inset 3px 0 0 var(--app-accent); }
/* The edit dot (2026-10-08): amber = in edit mode, red = unsaved changes. Darker shades in the white
   All open tabs list. */
.ws-dirty { color: #e8b34b; font-size: 9px; flex: 0 0 auto; }
.ws-dirty.changed { color: #ff6b6b; }
.ws-overflow-menu .ws-dirty { color: #b7791f; margin-left: auto; padding-left: 8px; }
.ws-overflow-menu .ws-dirty.changed { color: #c62828; }
.ws-tab-close {
    height: 100%; padding: 0 9px 0 2px; background: none; border: 0;
    color: inherit; opacity: .55; font-size: 15px; cursor: pointer; flex: 0 0 auto;
}
.ws-tab-close:hover { opacity: 1; }

.ws-scroll {
    align-self: flex-end; height: 36px; padding: 0 5px;
    background: none; border: 0; color: #8892ad; cursor: pointer; list-style: none;
    display: flex; align-items: center;
}
.ws-scroll:hover { color: #fff; }
.ws-scroll:focus-visible { outline: 2px solid var(--app-accent); outline-offset: -2px; border-radius: 4px; }
/* The arrows (js/hscroll.js): only while the tabs don't all fit; at an end, disabled - dimmed, no hover, and
   announced as unavailable. */
.ws-strip-wrap:not([data-overflow]) .ws-arrow { display: none; }
.ws-arrow:disabled { opacity: .3; cursor: default; }
.ws-arrow:disabled:hover { color: #8892ad; }
.ws-overflow { position: relative; align-self: flex-end; }
.ws-overflow summary { display: flex; align-items: center; height: 36px; }
.ws-overflow summary::marker, .ws-overflow summary::-webkit-details-marker { display: none; }
.ws-overflow-menu {
    position: absolute; right: 0; top: 40px; z-index: 60; min-width: 200px;
    background: #fff; border: 1px solid #e3e6ee; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 4px; max-height: 60vh; overflow-y: auto;
}
.ws-overflow-menu button {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 10px; background: none; border: 0; border-radius: 5px;
    font-size: 13px; color: #2b3142; cursor: pointer; text-align: left;
}
.ws-overflow-menu button:hover { background: var(--app-grey-light); }
.ws-overflow-menu button.on { font-weight: 600; color: var(--app-black); }

/* A tab whose page broke: says so in the pane, the rest of the workspace carries on. */
.page-error { background: #fff; border: 1px solid var(--app-grey); border-radius: 6px; padding: 18px 20px; max-width: 640px; }
.page-error h2 { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; margin: 0 0 8px; }