/* ===========================================================================
   PROJECT BOARDS AND THE CARD WINDOW - the mockup's (mockup/, agreed 2026-10-16): Davidson HR has no boards to copy.
   Class names Bootstrap already owns are renamed here (.bcard, not .card; .ck-progress, not .progress); the mockup's
   ink is this app's (--app-black). Support (step 4) uses the same tiles and the same card window. */

/* The board picker: a pill per board with its colour, and New project board. */
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.subtab { border: 1px solid #ced4da; background: #fff; border-radius: 16px; padding: 4px 12px 4px 6px; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; color: #222a37; font-family: inherit; }
.subtab .sw { width: 18px; height: 18px; border-radius: 5px; background: var(--b); }
.subtab.on { border-color: var(--app-black); box-shadow: inset 0 0 0 1px var(--app-black); font-weight: 600; color: var(--app-black); }
.subtab.add { padding: 4px 12px; border-style: dashed; color: #667085; }
.subtab .cnt, .blist-h .cnt, .sec-h .cnt { font-size: 11px; background: #dfe3ea; color: #555; border-radius: 8px; padding: 0 6px; line-height: 16px; font-weight: 600; }

/* THE BOARD FILLS WHAT'S LEFT OF THE PANE (Steven, 2026-10-17), down to its foot with the pane's own margin, and each
   column scrolls on its own. Every link in the chain takes the remaining height (flex 1 1 0) and may shrink below its
   content (min-height 0) - the customer page's Projects tab while it's the one on show, and a board's own tab. A floor
   keeps a usable board on a short window, the pane scrolling instead. */
.ws-pane-inner:has(.board-pane:not([hidden])), .ws-pane-inner:has(.board-page) { display: flex; flex-direction: column; }
.ws-pane-inner:has(.board-pane:not([hidden])) .detail-view,
.ws-pane-inner:has(.board-pane:not([hidden])) .detail-cols { flex: 1 1 0; min-height: 0; }
.detail-cols .tab-pane.board-pane:not([hidden]) { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.board-page { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.pboards { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.pboards > .board-wrap, .board-page > .board-wrap { flex: 1 1 0; min-height: 340px; display: flex; flex-direction: column; }
.board-wrap > .board { flex: 1 1 0; min-height: 0; }
.board-wrap .blist { max-height: 100%; }
.board-wrap .cards { overflow-y: auto; min-height: 0; flex: 0 1 auto; margin: 0 -4px; padding: 0 4px 2px; }
.badges .b.open-by { gap: 4px; color: #44546f; }
.badges .b.open-by .who { width: 20px; height: 20px; font-size: 9.5px; }

/* A board: its colour behind it, a darker band for its header, then its lists side by side, scrolling sideways. */
.board-wrap { border-radius: 10px; background: var(--b); padding: 0 0 4px; min-width: 0; }
.board-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: rgba(0,0,0,.18); border-radius: 10px 10px 0 0; color: #fff; }
.board-h .bn { font-weight: 700; font-size: 16px; }
.board-h .bh-meta { font-size: 12.5px; opacity: .9; }
.board-h .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.board-h .cmd-btn { color: #fff; background: rgba(255,255,255,.18); padding: 3px 9px; font-size: 12.5px; }
.board-h .cmd-btn:hover:not(:disabled) { background: rgba(255,255,255,.3); color: #fff; }
.board-h .avs .who + .who { box-shadow: 0 0 0 2px rgba(255,255,255,.5); }
.board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 12px; }
.blist { flex: 0 0 264px; background: #f1f2f4; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; }
.blist.over { background: #dfe6f0; box-shadow: inset 0 0 0 2px #8fa7c6; }
.blist-h { display: flex; align-items: center; gap: 8px; padding: 4px 6px 2px; font-weight: 600; font-size: 13.5px; color: #172b4d; }
.blist-h .cnt { margin-left: auto; }
.cards { display: flex; flex-direction: column; gap: 8px; min-height: 6px; }

/* A card's tile. */
.bcard { background: #fff; border-radius: 8px; box-shadow: 0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.3); padding: 8px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; text-align: left; border: 0; color: #172b4d; width: 100%; box-sizing: border-box; font-size: 14px; font-family: inherit; }
.bcard:hover { box-shadow: 0 0 0 2px #1a7fe8; }
.bcard.dragging { opacity: .45; }
.bcard.drop-before { box-shadow: 0 -3px 0 0 #1a7fe8, 0 1px 1px rgba(9,30,66,.25); }
.bcard-t { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.lbls { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.lbl { font-size: 11px; font-weight: 600; border-radius: 4px; padding: 1px 7px; display: inline-flex; align-items: center; gap: 3px; }
.lbl .lx { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 13px; line-height: 1; opacity: .7; }
.lbl .lx:hover { opacity: 1; }
.lbl-ok { background: #e2f4e8; color: #1c7a44; }
.lbl-warn { background: #fdf1dc; color: #9a6a12; }
.lbl-bad { background: #fbe9e9; color: #b32121; }
.lbl-info { background: #e3ecfa; color: #2b5cad; }
.lbl-violet { background: #ede9f7; color: #5b4a9e; }
.lbl-orange { background: #fdeadd; color: #b25a12; }
.lbl-teal { background: #e0f2f4; color: #16717c; }
.lbl-grey { background: #f0f0f0; color: #6f6f6f; }
.badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #44546f; }
.badges .b { display: inline-flex; align-items: center; gap: 3px; }
.badges .b.due-warn { background: #fdf1dc; color: #9a6a12; border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.badges .b.due-bad { background: #fbe9e9; color: #b32121; border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.badges .b.done { background: #e2f4e8; color: #1c7a44; border-radius: 4px; padding: 1px 5px; font-weight: 600; }
.badges .avs { margin-left: auto; }
.avs { display: inline-flex; }
.avs .who { width: 24px; height: 24px; font-size: 10.5px; }
.avs .who + .who { margin-left: -3px; box-shadow: 0 0 0 2px #fff; }
.add-card { background: none; border: 0; text-align: left; padding: 6px 8px; border-radius: 8px; color: #44546f; font-size: 13.5px; cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: inherit; }
.add-card:hover { background: #dcdfe4; color: #172b4d; }
.add-form { display: flex; flex-direction: column; gap: 6px; }
.add-form textarea { font-size: 14px; font-family: inherit; border: 0; border-radius: 8px; padding: 8px 10px; box-shadow: 0 1px 1px rgba(9,30,66,.25), 0 0 0 2px #1a7fe8; resize: vertical; min-height: 54px; }
.add-form textarea:focus { outline: none; }
.add-form .act { display: flex; gap: 6px; align-items: center; margin: 0; }
.plain-x { background: none; border: 0; width: 28px; height: 28px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; color: #4a5368; cursor: pointer; flex: 0 0 auto; }
.plain-x:hover { background: #e9ecf1; color: var(--app-black); }

/* THE CARD WINDOW: the platform's dialog shell (.dlg-*), wider, with the mockup's sections inside. */
.dlg.card-dlg { width: 780px; }
.card-dlg .dlg-head { align-items: flex-start; gap: 10px; }
.card-dlg .dlg-head .ttl { flex: 1; min-width: 0; }
.card-title-input { width: 100%; box-sizing: border-box; font-size: 18px; font-weight: 600; color: var(--app-black); font-family: inherit; line-height: 1.3; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; margin: -3px 0 0 -7px; background: transparent; }
.card-title-input:hover:not(:disabled) { border-color: #e3e7ee; }
.card-title-input:focus { outline: none; border-color: #1a7fe8; background: #fff; }
.card-title-input:disabled { color: var(--app-black); }
.card-dlg .sub-line { font-size: 13px; color: #667085; margin-top: 2px; font-weight: 400; }
.card-dlg .dlg-body { display: flex; flex-direction: column; gap: 16px; }
.card-fs { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sec-h { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6478; margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; min-width: 0; }
.field > label, .field > .flab { color: #555; font-weight: 600; }
.field input:not([type=checkbox]), .field select { font-size: 14px; font-family: inherit; border: 1px solid #c8c8c8; border-radius: 6px; padding: 7px 9px; color: #222a37; background: #fff; min-width: 0; }
/* A read-only card (somebody else has it open): Davidson HR's read-only look - grey ground, muted text, no text
   cursor - so nothing looks as if it could be changed. */
.card-fs:disabled .field input, .card-fs:disabled .field select, .card-fs:disabled textarea.desc {
    background: #f1f2f5; color: #5b6275; border-color: #dcdfe6; cursor: default; opacity: 1;
}
.card-fs:disabled .check { cursor: default; }
.mem span.mtog { cursor: default; }
.trow { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; }
.mem { display: flex; gap: 6px; flex-wrap: wrap; }
.mtog { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #ced4da; background: #fff; border-radius: 16px; padding: 3px 10px 3px 3px; font-size: 13px; cursor: pointer; color: #667085; font-family: inherit; }
.mtog .who { width: 24px; height: 24px; font-size: 10.5px; opacity: .45; }
.mtog.on { border-color: var(--app-black); color: var(--app-black); font-weight: 600; }
.mtog.on .who { opacity: 1; }
.lbl-add { font-size: 12.5px; font-family: inherit; border: 1px solid #c8c8c8; border-radius: 6px; padding: 3px 6px; background: #fff; color: #222a37; }
.card-dlg .lbls .lbl { font-size: 12px; padding: 3px 6px 3px 8px; }
textarea.desc { width: 100%; box-sizing: border-box; font-size: 14px; font-family: inherit; line-height: 1.5; border: 1px solid #e3e7ee; background: #f7f8fa; border-radius: 6px; padding: 9px 11px; resize: vertical; color: #222a37; }
textarea.desc:focus { background: #fff; border-color: #1a7fe8; outline: none; }
.ck-progress { height: 6px; background: #e4e7ee; border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.ck-progress i { display: block; height: 100%; background: #1c7a44; }
.check { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; cursor: pointer; margin: 0; }
.check.done span { text-decoration: line-through; color: #667085; }
.check .plain-x { margin-left: auto; width: 24px; height: 24px; opacity: 0; }
.check:hover .plain-x, .check .plain-x:focus-visible { opacity: 1; }
.ck-add { margin-top: 4px; font-size: 13.5px; font-family: inherit; border: 1px dashed #ced4da; border-radius: 6px; padding: 6px 9px; width: 100%; box-sizing: border-box; }
.seg { display: inline-flex; border: 1px solid #ced4da; border-radius: 6px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: none; padding: 5px 12px; font-size: 13px; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: #222a37; }
.seg button + button { border-left: 1px solid #ced4da; }
.seg button.on { background: var(--app-black); color: #fff; }
.composer { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.composer .seg { align-self: flex-start; }
.composer textarea { font-size: 14px; font-family: inherit; border: 1px solid #c8c8c8; border-radius: 6px; padding: 8px 10px; min-height: 64px; resize: vertical; color: #222a37; background: #fff; }
.composer textarea.code { font-family: 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 13px; background: #0f1b2d; color: #e6edf6; border-color: #0f1b2d; min-height: 110px; }
.composer .act { display: flex; align-items: center; gap: 10px; margin: 0; }
.note-list { display: flex; flex-direction: column; gap: 10px; }
.note-item { border: 1px solid #e3e7ee; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.note-item .who-line { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }
.note-item .who-line .who { width: 24px; height: 24px; font-size: 10.5px; }
.note-item .who-line .plain-x { margin-left: auto; width: 24px; height: 24px; }
.code-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 3px; padding: 2px 6px; background: #e7edf6; color: var(--app-black); }
.codewrap { position: relative; }
.codewrap pre { margin: 0; background: #0f1b2d; color: #e6edf6; border-radius: 6px; padding: 10px 44px 10px 12px; overflow-x: auto; font-family: 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 12.5px; line-height: 1.55; }
.codewrap .copy { position: absolute; top: 6px; right: 6px; color: #c3cde4; background: rgba(255,255,255,.08); border: 0; width: 28px; height: 28px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.codewrap .copy:hover { background: rgba(255,255,255,.2); color: #fff; }

/* The band's extras: the customer (a board in its own tab), Archived with Restore, and where it's linked from. */
.board-h .bh-cust { color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; opacity: .92; }
.board-h .bh-cust:hover { text-decoration: underline; opacity: 1; }
.board-h .bh-archived { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.2); border-radius: 4px; padding: 2px 8px; }
.board-h .bh-from { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; opacity: .95; }
.board-h .bh-from a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* An archived board: its colour muted, so it reads as put away. */
.board-wrap.archived { filter: saturate(.35); }

/* Columns dragged by their name bar (Steven, 2026-10-17), and "+ Add another list" after the last (as Trello). */
.blist-h[draggable="true"] { cursor: grab; }
.blist.dragging { opacity: .45; }
.blist.drop-before { box-shadow: -6px 0 0 -2px #fff; }
.blist.add-list { background: rgba(255,255,255,.22); padding: 6px; }
.blist.add-list.over { box-shadow: inset 0 0 0 2px #fff; }
.add-list-btn { background: none; border: 0; color: #fff; font-weight: 600; font-size: 14px; font-family: inherit; text-align: left; padding: 6px 8px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%; }
.add-list-btn:hover { background: rgba(255,255,255,.18); }
.blist.add-list .add-form { background: #f1f2f4; border-radius: 8px; padding: 6px; }
.blist.add-list .add-form input { font-size: 14px; font-family: inherit; border: 0; border-radius: 6px; padding: 7px 9px; box-shadow: 0 0 0 2px #1a7fe8; }
.blist.add-list .add-form input:focus { outline: none; }

/* The board picker's Archived area (Steven, 2026-10-17). */
.subtab.archived-toggle { border-style: dashed; color: #667085; }
.subtab.archived-toggle.open, .subtab.archived-toggle.on { border-style: solid; color: var(--app-black); }
/* The archived boards' drop-down - the working tabs' "All open tabs" menu (workspace.css), with a search when long. */
.arch-drop { position: relative; display: inline-flex; }
.arch-back { position: fixed; inset: 0; z-index: 59; }
.arch-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 60; min-width: 240px; max-width: 360px; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e3e6ee; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); padding: 4px; max-height: 50vh; overflow-y: auto; }
.arch-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; font-family: inherit; }
.arch-menu button:hover { background: var(--app-grey-light); }
.arch-menu button.on { font-weight: 600; color: var(--app-black); }
.arch-menu .sw { width: 14px; height: 14px; border-radius: 4px; background: var(--b); flex: 0 0 auto; }
.arch-menu .an { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-find { margin: 2px 2px 6px; padding: 6px 8px; font-size: 13px; border: 1px solid #ced4da; border-radius: 6px; font-family: inherit; }
.subtab.dragging { opacity: .45; }
.subtab.drop-before { box-shadow: -5px 0 0 -1px #1a7fe8; }
.subtab.on.drop-before { box-shadow: -5px 0 0 -1px #1a7fe8, inset 0 0 0 1px var(--app-black); }
.subtab.add.over { border-style: solid; border-color: #1a7fe8; color: #1a7fe8; }

/* A support ticket's tile: its reference and priority above the rest. */
.card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ref { font-family: 'Cascadia Mono', Consolas, 'SFMono-Regular', Menlo, monospace; font-size: 11.5px; color: #5b6478; white-space: nowrap; }
.lbl.pri { border-radius: 10px; padding: 1px 8px; }

/* The card window: a ticket's reference before its title; linked boards. */
.card-dlg .ttl-row { display: flex; align-items: baseline; gap: 8px; }
.card-dlg .ttl-ref { font-size: 14px; flex: 0 0 auto; }
.card-dlg .sub-line a { color: inherit; font-weight: 600; }
ul.links { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
ul.links li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; flex-wrap: wrap; }
ul.links li .sw { width: 14px; height: 14px; border-radius: 4px; background: var(--b); flex: 0 0 auto; }
ul.links li a { color: var(--app-black); font-weight: 600; }
.lk-progress { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #5b6478; }
.lk-progress .ck-progress { width: 80px; margin: 0; }
.link-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dlg-foot .foot-left { margin-right: auto; display: flex; gap: 8px; }

/* ---------- SUPPORT (step 4, the mockup's) ---------- */
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--d); flex: 0 0 auto; display: inline-block; }
.sup-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.list-toolbar.sup-title { min-height: 0; align-items: center; }
.sup-sub { font-size: 13.5px; }
.sup-actions { margin-left: auto; gap: 10px; }
.sup-filters { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.sup-filters .search-option { font-size: 13.5px; color: #222a37; padding-top: 7px; }
.sup-filters .list-search-wrap { margin-left: 0; }
.sup-filters .sup-cust { padding: 6px 8px; font-size: 13.5px; }
.sup-counts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.sup-count { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; background: #eef1f6; color: #3d4a63; border-radius: 4px; padding: 2px 8px; white-space: nowrap; }
.sup-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vmeta { display: inline-flex; align-items: center; gap: 8px; color: #5b6478; font-size: 12.5px; }
.vmeta > span { display: inline-flex; align-items: center; gap: 2px; }
/* The grid view fills what's left, as the board does. */
.pboards > .sup-grid, .board-page > .sup-grid { flex: 1 1 0; min-height: 300px; }
.sup-grid .avs .who { width: 22px; height: 22px; font-size: 10px; }

/* The board options: a column per row - its name, up, down, remove. */
.col-rows { display: flex; flex-direction: column; gap: 6px; }
.col-row { display: flex; gap: 6px; align-items: center; }
.col-row input { flex: 1; min-width: 0; }
.hsw-row { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px; }
.hsw { width: 28px; height: 28px; border-radius: 6px; border: 0; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.hsw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--app-black); }

/* ---------- ATTACHMENTS (step 6, the mockup's) ---------- */
.sec-h .sec-act { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; cursor: pointer; }
.files { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; }
.files li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #edf0f4; font-size: 13.5px; }
.files li:first-child { border-top: 0; }
.files li > .sp-icon { color: #5b6478; flex: 0 0 auto; }
.files .fn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.files .fn > a { color: var(--app-black); font-weight: 600; text-decoration: none; }
.files .fn > a:hover { text-decoration: underline; }
.files .fs { color: #667085; font-size: 12px; white-space: nowrap; }
.files .fd { display: block; font-size: 12px; color: #667085; margin-top: 1px; }
.files a.plain-x { color: #5b6478; display: inline-flex; }
.fdesc { display: block; width: 100%; box-sizing: border-box; margin-top: 3px; font-size: 12.5px; color: #222a37; border: 1px solid transparent;
    border-radius: 4px; padding: 2px 6px; background: #f6f8fa; font-family: inherit; }
.fdesc:hover { border-color: #ced4da; }
.fdesc:focus { outline: none; border-color: #1a7fe8; background: #fff; }
.fdesc::placeholder { color: #9aa3b5; }
.drop { position: relative; border: 2px dashed #c3cad8; border-radius: 8px; padding: 10px; text-align: center; color: #667085; font-size: 13px;
    display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.drop:hover, .drop:focus-within { border-color: #1a7fe8; color: var(--app-black); }
.drop.busy { opacity: .7; cursor: progress; }
.drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }