/* ===========================================================================
   THE CRM'S SCREENS - DavidsonHR's app.css rules, copied (2026-10-17) for the screens ported from it: the list page
   (DevExpress grid), the record page (title row, lock bar, folder tabs, info panels) and the dialogs. DavidsonHR's navy
   (#191F45) is this app's ink (--app-black, app.css); everything else is DavidsonHR's own value. Its icons are the
   font's <i>; here they are the inline SVG icons (.sp-icon). The few rules after "From the mockup" are the agreed
   mockup's own (mockup/), for what DavidsonHR has no equivalent of. */

/* ---------- List / search pages (DevExpress grid) - frozen-frame layout ---------- */
/* When a list-view is on the page, stop the pane's own scroll - the grid scrolls instead. ANCHORED AT THE PANE: with
   the tab workspace every open screen is mounted at once, so a body-level :has() would leak into every other tab. */
.ws-pane-inner:has(.list-view) { overflow: hidden; display: flex; flex-direction: column; }

.list-view { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; }

.list-toolbar {
    display: flex;
    align-items: flex-start;   /* title + actions align with the top of the search box */
    gap: 18px;
    min-height: 80px;
}

.list-title {
    font-size: 27px;
    font-weight: 600;
    color: var(--app-black);
    margin: 0;
    min-width: 150px;
    flex: 0 0 auto;
    line-height: 34px;   /* match the search box height so title sits level with it */
}

.list-commandbar { display: flex; gap: 4px; align-items: center; min-height: 34px; }
.list-commandbar .cmd-btn { white-space: nowrap; }

.list-search-wrap { margin-left: auto; display: flex; flex-direction: column; gap: 4px; }
.list-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    padding: 5px 10px;
    width: 280px;
}
.list-search .sp-icon { color: #888; flex: 0 0 auto; }
.list-search input { border: 0; outline: none; flex: 1; font-size: 14px; background: transparent; min-width: 0; }
.search-clear {
    background: transparent; border: 0; color: #999; cursor: pointer;
    padding: 0; margin: 0; font-size: 20px; line-height: 1; width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; flex-shrink: 0;
}
.search-clear:hover { color: #222; background: #eee; }
.list-search-status { font-size: 12px; color: #666; min-height: 0; padding-left: 2px; }

.search-option {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: #555; cursor: pointer; padding-left: 2px;
}
.search-option input { cursor: pointer; margin: 0; }

/* The grid fills remaining height and scrolls internally. */
.list-grid { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.list-grid .dxbl-grid,
.list-grid [class*="dxbl-grid-root"] { flex: 1; min-height: 0; }

/* Shade the main grid's column headers the same blue-grey as the panels' headers. */
.list-grid .dxbl-grid-header-row > th,
.list-grid .dxbl-grid-header { background-color: #eceff4 !important; }

/* The filter funnel: half-size, pinned to the header's top-right, shown on header hover only - except an ACTIVE
   filter's funnel, which stays visible, and keyboard focus always reveals it. */
.list-grid .dxbl-grid-header-row > th { position: relative; }
.list-grid .dxbl-grid-header-row > th button[class*="filter"],
.list-grid .dxbl-grid-header-row > th [class*="filter-menu"] {
    position: absolute; top: 5px; right: 1px;
    width: 15px; height: 15px; min-width: 15px; padding: 0;
    opacity: 0; transition: opacity .12s;
}
.list-grid .dxbl-grid-header-row > th button[class*="filter"] svg,
.list-grid .dxbl-grid-header-row > th [class*="filter-menu"] svg { width: 10px; height: 10px; }
.list-grid .dxbl-grid-header-row > th:hover button[class*="filter"],
.list-grid .dxbl-grid-header-row > th:hover [class*="filter-menu"],
.list-grid .dxbl-grid-header-row > th button[class*="filter"]:focus-visible,
.list-grid .dxbl-grid-header-row > th [class*="filter-menu"][class*="active"],
.list-grid .dxbl-grid-header-row > th button[class*="filter"][class*="active"],
.list-grid .dxbl-grid-header-row > th button[class*="filter"][aria-expanded="true"] { opacity: 1; }

.grid-link { color: #16233f; text-decoration: none; font-weight: 600; }
.grid-link:hover { text-decoration: underline; }
.grid-name { color: #222; font-weight: 500; }
.sub-item { font-size: 12px; color: #666; margin-top: 2px; }
.detail-grid { max-width: 100%; margin-top: 6px; }

/* Search-match highlight inside grid cells. */
.dxbl-grid mark, mark { background-color: #fff066; color: inherit; padding: 0; border-radius: 0; }

/* "Internal" tag beside the company's own name. */
.co-tag {
    display: inline-block; margin-left: 6px; vertical-align: middle;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    color: #16233f; background: #e7edf6; border-radius: 3px; padding: 1px 5px;
}

/* Status pill (Client / Lead / Inactive). */
.status-pill {
    display: inline-block; font-size: 12px; font-weight: 600;
    padding: 2px 10px; border-radius: 11px; line-height: 1.4;
}
.status-client   { background: #e2f4e8; color: #1c7a44; }
.status-lead     { background: #fdf1dc; color: #9a6a12; }
.status-inactive { background: #f0f0f0; color: #777; }

/* "Primary" marker beside the primary contact; an inactive contact (has left): the word, on a dashed grey tag. */
.primary-tag {
    display: inline-block; margin-left: 6px;
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: #16233f; background: #e7edf6; border-radius: 3px; padding: 1px 5px; vertical-align: middle;
}
.inactive-tag { color: #5b6275; background: #f1f2f5; border: 1px dashed #b9bfcc; }
.contact-inactive { color: #7a8090; }
.panel-actions .contacts-inactive { margin-left: auto; align-self: center; }

/* ---------- Record locking + the edit commands ---------- */
.detail-actions { margin-left: auto; display: flex; gap: 6px; }
.cmd-btn .sp-icon { flex: 0 0 auto; }

/* Lock status bar - amber when this session holds the lock, red when blocked by another holder. */
.lock-bar {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 14px; border-radius: 6px;
    font-size: 13.5px; font-weight: 600;
}
.lock-bar.mine    { background: #fdf1dc; color: #9a6a12; }
.lock-bar.blocked { background: #fbe9e9; color: #b32121; }
.lock-bar .lock-elapsed { margin-left: auto; font-weight: 400; font-variant-numeric: tabular-nums; }
.lock-bar .lock-takeover { padding: 2px 10px; font-size: 12.5px; margin-left: 6px; background: #fff; }

/* Inputs inside the info-grid when a section is in edit mode. */
.info-grid .edit-input { padding: 5px 9px; }

/* ---------- The record page: title row, meta line, info panels ---------- */
.detail-view { display: flex; flex-direction: column; gap: 12px; }
.detail-titlerow { display: flex; align-items: center; gap: 12px; }
.detail-title { font-size: 26px; font-weight: 600; color: var(--app-black); margin: 0; }
.detail-meta { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; font-size: 13.5px; color: #666; }
.detail-meta .m { display: inline-flex; align-items: center; gap: 7px; }
.detail-meta a { color: var(--app-black); font-weight: 600; text-decoration: none; }
.detail-meta a:hover { text-decoration: underline; }

.info-panels { max-width: 900px; display: flex; flex-direction: column; gap: 16px; margin-top: 6px; }
.info-panel { background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; overflow: hidden; }
.info-panel-header {
    background: #eceff4;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--app-black);
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    gap: 10px;
}
.info-panel-header .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
/* Header buttons must not fatten the bar - negative vertical margin keeps the header the same height as a plain one. */
.info-panel-header .right .cmd-btn { padding: 2px 10px; font-size: 12.5px; margin: -3px 0; }
.info-panel-body { padding: 16px; }
.info-grid {
    display: grid;
    grid-template-columns: 150px 1fr 150px 1fr;
    gap: 10px 16px;
    padding: 16px;
    margin: 0;
    background: #fff;
}
.info-grid dt { color: #666; font-weight: 400; font-size: 13.5px; align-self: center; }
.info-grid dd { margin: 0; color: #222; font-size: 13.5px; font-weight: 600; align-self: center; }
.info-grid dd a { color: var(--app-black); }
.new-tab-icon { margin-left: 3px; vertical-align: -2px; opacity: .8; }

/* ---------- Folder tabs inside a screen (UiTabs) ---------- */
/* The showing pane grows to the bottom of the screen, one white bordered area whatever it holds (DavidsonHR's
   .detail-cols). The hidden panes are display:none, so only the one on show takes the room. */
.ws-pane-inner:has(.detail-cols) { display: flex; flex-direction: column; }
.detail-view:has(> .detail-cols) { flex: 1 0 auto; }
.detail-cols { display: flex; flex-direction: column; flex: 1 0 auto; }
.detail-cols .tab-pane { flex: 1 0 auto; }
.tabs { display: flex; gap: 3px; align-items: flex-end; flex-wrap: wrap; }
.tab {
    border: 1px solid #ced4da; border-bottom: 0; background: #eceff4; color: #555;
    border-radius: 7px 7px 0 0; padding: 8px 12px; margin-bottom: 0;
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px; position: relative;
    min-width: 76px; justify-content: center;
}
.tab:hover { background: #f4f6f9; color: var(--app-black); }
.tab.on {
    background: #fff; color: var(--app-black);
    margin-bottom: -1px; padding-bottom: 9px;   /* drops over the pane's top border */
    z-index: 1;
}
/* The standard inner-tab accent, as a top edge on the ACTIVE tab: Davidson HR's is the DevExpress Office-White orange;
   Standpoint's is the logo's cyan (Steven, 2026-10-17). */
.tab.on { border-top: 3px solid var(--app-accent); padding-top: 6px; }
.tab .cnt { font-size: 11px; background: #e4e7ee; color: #666; border-radius: 8px; padding: 0 6px; line-height: 16px; }
.tab-pane { background: #fff; border: 1px solid #ced4da; border-radius: 0 6px 6px 6px; padding: 18px 20px; }

/* ---------- Bits ---------- */
.ico-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; background: #fff; border: 1px solid #c8c8c8; border-radius: 5px; cursor: pointer; color: var(--app-black); vertical-align: middle; font-size: 16px; }
.ico-btn:hover { background: #eef1f7; }
.ico-btn:disabled { opacity: .4; cursor: not-allowed; }
.req { color: #b32121; font-weight: 700; margin-left: 1px; }
.btn-link-plain { background: none; border: 0; padding: 0; color: var(--app-black); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: inherit; }
.cmd-btn-outline.cmd-btn-danger:hover:not(:disabled) { background: #fbe9e9; color: #b32121; border-color: #e0b4b4; }
@keyframes crm-spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: crm-spin 1s linear infinite; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---------- Dialogs: plain fields (DavidsonHR's .form-field inputs). Not the platform's .edit-input, which keeps its
   own look on the platform's screens. ---------- */
.form-field input:not(.edit-input):not([type=checkbox]):not([type=radio]):not([class*="dxbl"]),
.form-field select:not(.edit-input),
.form-field textarea:not(.edit-input) { width: 100%; border: 1px solid #c8c8c8; border-radius: 6px; padding: 8px 12px; font-size: 13.5px; font-family: inherit; }
.form-field input:is([readonly], :disabled):not([type=checkbox], [type=radio]):not([class*="dxbl"]):not(.edit-input),
.form-field select:disabled,
.form-field textarea:is([readonly], :disabled) {
    background: #f1f2f5; color: #5b6275; border-color: #dcdfe6; cursor: default;
}
/* New customer: similar names under Name, and Status beside it. */
.nc-similar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 6px; font-size: 13px; }
.nc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
/* The contact dialog. */
.cd-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }   /* only there to disable the lot when read only */
.cd-fieldset:disabled .cd-check { cursor: default; }
.cd-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 12px; }
.cd-grid .form-field { margin-bottom: 12px; }
.cd-grid input, .cd-grid textarea { width: 100%; }
.cd-check { display: block; margin-top: 4px; font-size: 13.5px; cursor: pointer; }
.cd-check input { margin-right: 7px; }
.cd-check .cell-sub { display: block; margin-left: 24px; font-weight: 400; }
.cd-mandatory { margin-top: 14px; }

/* ===========================================================================
   From the mockup (mockup/, agreed 2026-10-16) - what DavidsonHR has no equivalent of. */

/* The customer's colour: a small square before its name, wherever a customer is named (lists, tiles). */
.cust-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #34405a; white-space: nowrap; }
.cust-chip::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: 0 0 auto; }
.cust-chip .name { font-weight: 600; color: var(--app-black); }

/* The operating company itself: Internal on a dark tag, its row first in the list and tinted. */
.co-tag.own { background: var(--app-black); color: #fff; font-weight: 700; letter-spacing: .05em; padding: 2px 6px; margin-left: 0; }
.list-grid tr.own-row > td { background: #eef5ff; }
.list-grid tr.own-row:hover > td { background: #e3eefc; }
.list-grid tr.rowlink { cursor: pointer; }

/* Summary: Name and address beside Notes, two equal columns; one above the other when narrow. */
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1100px; }
.pair > .info-panel { min-width: 0; }
.pair .info-grid { grid-template-columns: 110px minmax(0, 1fr); }
.pair .info-grid dd { overflow-wrap: anywhere; }
.nt { font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes-input { width: 100%; box-sizing: border-box; min-height: 140px; resize: vertical; }
@media (max-width: 900px) {
    .pair { grid-template-columns: minmax(0, 1fr); }
}

/* Narrow screens (the mockup's): the title row wraps its buttons under the name, the search takes the full width,
   and on a phone each label sits above its value. */
.detail-titlerow { flex-wrap: wrap; }
.detail-titlerow .detail-title { overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .list-toolbar { flex-wrap: wrap; min-height: 0; }
    .list-search-wrap { margin-left: 0; width: 100%; }
    .list-search { width: 100%; box-sizing: border-box; }
    .tab-pane { padding: 14px 12px; }
    .pair .info-grid { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .pair .info-grid dd { margin-bottom: 8px; }
}

/* ---------- HOME (step 5, the mockup's) ---------- */
.list-toolbar.home-title { min-height: 0; align-items: center; margin-bottom: 14px; }
.home-date { font-size: 13.5px; white-space: nowrap; }
.home-actions { margin-left: auto; }
.home-cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; max-width: 1300px; }
.home-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.home-empty { margin: 0; padding: 12px 16px; font-size: 13.5px; }
.info-panel-header .cnt { font-size: 11px; background: #dfe3ea; color: #555; border-radius: 8px; padding: 0 6px; line-height: 16px; font-weight: 600; }
.att { list-style: none; margin: 0; padding: 0; }
.att li + li { border-top: 1px solid #edf0f4; }
.att li > button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 16px; border: 0; background: none;
    text-align: left; font: inherit; font-size: 13.5px; color: #222a37; cursor: pointer; }
.att li > button:hover { background: #f8f9fb; }
.att .ai { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.att .what { flex: 1; min-width: 0; }
.att .what .ref { font-size: 12.5px; color: var(--app-black); margin-right: 4px; }
.att .what .name { font-weight: 600; color: var(--app-black); }
.att .sub-line { display: block; font-size: 12px; color: #667085; margin-top: 2px; }
.att .chips { display: flex; gap: 4px; align-items: center; flex: 0 0 auto; }
.home-grid { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.home-grid th { text-align: left; font-weight: 600; font-size: 12.5px; color: #5b6478; padding: 8px 16px; border-bottom: 1px solid #e5e5e5; background: #fafbfc; }
.home-grid td { padding: 9px 16px; border-top: 1px solid #edf0f4; }
.home-grid tr.rowlink { cursor: pointer; }
.home-grid tr.rowlink:hover > td { background: #f8f9fb; }
.home-grid .num { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
    .home-cols { grid-template-columns: minmax(0, 1fr); }
}