/* ------------------------------------------------------------------------------------------------
   COS UI primitives - toolbar buttons, popover menus and the small form controls that live inside
   them.

   Global rather than scoped on purpose: a popover's contents are written by whichever component
   opens it, so its markup carries that component's scope id and a scoped stylesheet on the popover
   itself could never reach it. One vocabulary here keeps every menu in the app looking the same.

   Colours come from Tabler's CSS variables so everything follows the app theme, with hard-coded
   fallbacks for anywhere the theme is not loaded.
   ------------------------------------------------------------------------------------------------ */

/* Defined on the root so the vocabulary below works anywhere, including inside components that
   build their own popover rather than using CosMenu (the grid's column panel, for one). */
:root {
    --cos-ui-surface: var(--tblr-bg-surface, #ffffff);
    --cos-ui-surface-muted: var(--tblr-bg-surface-secondary, #f8fafc);
    --cos-ui-border: var(--tblr-border-color, #e6e8eb);
    --cos-ui-border-soft: var(--tblr-border-color-light, #f1f3f5);
    --cos-ui-text: var(--tblr-body-color, #1f2937);
    --cos-ui-muted: var(--tblr-secondary, #6b7280);
    --cos-ui-accent: var(--tblr-primary, #206bc4);
    --cos-ui-accent-soft: rgba(32, 107, 196, 0.08);
}

/* The app-wide `.bi { color: #dee2e6 }` in app.css targets the <i> directly and would beat any
   colour set on the button around it. Inside these controls an icon follows its container. */
.cos-btn .bi,
.cos-menu .bi {
    color: inherit;
}

/* ---------------------------------------------------------------- toolbar button */

.cos-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cos-ui-text);
    background: var(--cos-ui-surface);
    border: 1px solid var(--cos-ui-border);
    border-radius: 0.5rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

    .cos-btn:hover {
        background: var(--cos-ui-surface-muted);
    }

    .cos-btn.is-active,
    .cos-btn.is-open {
        color: var(--cos-ui-accent);
        border-color: var(--cos-ui-accent);
        background: rgba(32, 107, 196, 0.06);
    }

    /* Square variant for icon-only triggers, sized to match .cos-grid-iconbtn. */
    .cos-btn.cos-btn-icon {
        width: 2.25rem;
        padding: 0;
        justify-content: center;
        color: var(--cos-ui-muted);
        background: transparent;
        border-color: transparent;
    }

        .cos-btn.cos-btn-icon:hover,
        .cos-btn.cos-btn-icon.is-open {
            color: var(--cos-ui-text);
            background: var(--cos-ui-surface-muted);
            border-color: var(--cos-ui-border);
        }

.cos-btn-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    background: var(--cos-ui-accent);
    border-radius: 999px;
}

/* ---------------------------------------------------------------- popover shell */

.cos-menu {
    position: relative;
    display: inline-flex;
}

/* Catches the click that dismisses the panel. Transparent, but it has to sit above the page so
   the next click closes the menu instead of hitting whatever is underneath. */
.cos-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1070;
}

.cos-menu-panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    z-index: 1080;
    display: flex;
    flex-direction: column;
    max-width: calc(100vw - 2rem);
    max-height: min(30rem, calc(100vh - 8rem));
    color: var(--cos-ui-text);
    font-size: 0.8125rem;
    background: var(--cos-ui-surface);
    border: 1px solid var(--cos-ui-border);
    border-radius: 0.625rem;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22);
    animation: cos-menu-in .12s ease;
}

    .cos-menu-panel.is-end {
        right: 0;
    }

    .cos-menu-panel.is-start {
        left: 0;
    }

@keyframes cos-menu-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.cos-menu-head {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.75rem 0.75rem 0.5rem;
}

.cos-menu-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.cos-menu-title {
    font-size: 0.875rem;
    font-weight: 600;
}

.cos-menu-hint {
    margin: 0.125rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.35;
    color: var(--cos-ui-muted);
}

.cos-menu-headbtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--cos-ui-muted);
    background: none;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
}

    .cos-menu-headbtn:hover:not(:disabled) {
        color: var(--cos-ui-text);
        background: var(--cos-ui-surface-muted);
    }

    .cos-menu-headbtn:disabled {
        opacity: .3;
        cursor: default;
    }

/* The body is the only part that scrolls, so the header and footer stay put on a long list. */
.cos-menu-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0.25rem 0.375rem;
    scrollbar-width: thin;
}

    /* A menu with no header gets its breathing room back. */
    .cos-menu-panel > .cos-menu-body:first-child {
        padding-top: 0.375rem;
    }

    .cos-menu-panel > .cos-menu-body:last-child {
        padding-bottom: 0.375rem;
    }

.cos-menu-foot {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
    padding: 0.5rem 0.625rem;
    border-top: 1px solid var(--cos-ui-border-soft);
}

.cos-menu-spacer {
    flex: 1 1 auto;
}

.cos-menu-label {
    padding: 0.375rem 0.5rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cos-ui-muted);
}

.cos-menu-sep {
    height: 1px;
    margin: 0.375rem 0.25rem;
    background: var(--cos-ui-border-soft);
}

/* ---------------------------------------------------------------- menu items */

.cos-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.4375rem 0.5rem;
    font: inherit;
    color: var(--cos-ui-text);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
}

    .cos-menu-item:hover:not(:disabled) {
        background: var(--cos-ui-surface-muted);
    }

    .cos-menu-item:disabled {
        opacity: .45;
        cursor: default;
    }

    .cos-menu-item.is-danger {
        color: var(--tblr-danger, #d63939);
    }

.cos-menu-item-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
    color: var(--cos-ui-muted);
    background: var(--cos-ui-surface-muted);
    border-radius: 0.375rem;
}

.cos-menu-item:hover .cos-menu-item-icon {
    color: var(--cos-ui-accent);
    background: var(--cos-ui-accent-soft);
}

.cos-menu-item.is-danger:hover .cos-menu-item-icon {
    color: var(--tblr-danger, #d63939);
    background: rgba(214, 57, 57, 0.1);
}

.cos-menu-item-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cos-menu-item-title {
    display: block;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cos-menu-item-desc {
    display: block;
    margin-top: 0.0625rem;
    font-size: 0.6875rem;
    line-height: 1.3;
    color: var(--cos-ui-muted);
}

.cos-menu-link {
    padding: 0.25rem 0.375rem;
    font-size: 0.75rem;
    color: var(--cos-ui-muted);
    background: none;
    border: 0;
    border-radius: 0.3125rem;
    cursor: pointer;
}

    .cos-menu-link:hover:not(:disabled) {
        color: var(--cos-ui-accent);
        background: var(--cos-ui-surface-muted);
    }

    .cos-menu-link:disabled {
        opacity: .4;
        cursor: default;
    }

.cos-menu-cta {
    height: 1.875rem;
    padding: 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: var(--cos-ui-accent);
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
}

    .cos-menu-cta:hover {
        filter: brightness(1.06);
    }

/* ---------------------------------------------------------------- controls inside menus */

.cos-menu-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 0.375rem 0.25rem;
}

.cos-menu-search-icon {
    position: absolute;
    left: 0.625rem;
    font-size: 0.8125rem;
    color: var(--cos-ui-muted);
    pointer-events: none;
}

.cos-menu-search-input {
    width: 100%;
    height: 2rem;
    padding: 0 0.625rem 0 2rem;
    font-size: 0.8125rem;
    color: var(--cos-ui-text);
    background: var(--cos-ui-surface-muted);
    border: 1px solid transparent;
    border-radius: 0.375rem;
    outline: none;
}

    .cos-menu-search-input:focus {
        background: var(--cos-ui-surface);
        border-color: var(--cos-ui-accent);
        box-shadow: 0 0 0 3px var(--cos-ui-accent-soft);
    }

.cos-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    user-select: none;
}

    .cos-check:hover {
        background: var(--cos-ui-surface-muted);
    }

    .cos-check input[type=checkbox] {
        flex: 0 0 auto;
        width: 0.9375rem;
        height: 0.9375rem;
        margin: 0;
        accent-color: var(--cos-ui-accent);
        cursor: pointer;
    }

    .cos-check:has(input:disabled) {
        opacity: .45;
        cursor: default;
    }

.cos-check-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A checkbox promoted to a full-width row with a supporting line, for the one-off toggles that
   deserve more than a list entry. */
.cos-check-card {
    align-items: flex-start;
    margin: 0 0.375rem;
    padding: 0.5rem;
    background: var(--cos-ui-surface-muted);
    border-radius: 0.5rem;
}

    .cos-check-card:hover {
        background: var(--cos-ui-border-soft);
    }

    .cos-check-card input[type=checkbox] {
        margin-top: 0.125rem;
    }

.cos-check-card .cos-check-text {
    white-space: normal;
    overflow: visible;
    font-weight: 500;
}

.cos-menu-empty {
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: var(--cos-ui-muted);
    font-size: 0.75rem;
}

/* ------------------------------------------------------------------------------------------------
   CosDialog - the chrome for a modal's contents.
   ------------------------------------------------------------------------------------------------ */

/* Host overrides. The modal shell paints its own 1.5rem padding and sizes to its content; a dialog
   with a section rail wants the full box and a predictable height. Three classes deep because the
   shell's own rules are scoped (one class + one attribute) and load after this file. */
.bm-container .cos-dialog-modal .bm-content {
    padding: 0;
}

.bm-container .cos-dialog-modal {
    height: min(86vh, 54rem);
}

.cos-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    color: var(--cos-ui-text);
}

    .cos-dialog .bi {
        color: inherit;
    }

/* ---------------------------------------------------------------- header */

.cos-dialog-head {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    flex: 0 0 auto;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cos-ui-border);
}

.cos-dialog-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cos-ui-accent);
    background: var(--cos-ui-accent-soft);
    border-radius: 0.625rem;
}

.cos-dialog-headtext {
    flex: 1 1 auto;
    min-width: 0;
}

.cos-dialog-eyebrow {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cos-ui-muted);
}

.cos-dialog-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cos-dialog-subtitle {
    margin: 0.0625rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--cos-ui-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cos-dialog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.cos-dialog-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--cos-ui-muted);
    background: var(--cos-ui-surface-muted);
    border: 1px solid var(--cos-ui-border-soft);
    border-radius: 999px;
    white-space: nowrap;
}

    .cos-dialog-chip strong {
        font-weight: 600;
        color: var(--cos-ui-text);
    }

    .cos-dialog-chip.is-accent {
        color: var(--cos-ui-accent);
        background: var(--cos-ui-accent-soft);
        border-color: transparent;
    }

.cos-dialog-headactions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 0 0 auto;
}

.cos-dialog-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: 0.875rem;
    color: var(--cos-ui-muted);
    background: none;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

    .cos-dialog-close:hover {
        color: var(--cos-ui-text);
        background: var(--cos-ui-surface-muted);
    }

/* ---------------------------------------------------------------- rail + body */

.cos-dialog-main {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.cos-dialog-rail {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 0 0 auto;
    width: 13.5rem;
    padding: 0.625rem 0.5rem;
    overflow-y: auto;
    background: var(--cos-ui-surface-muted);
    border-right: 1px solid var(--cos-ui-border);
    scrollbar-width: thin;
}

.cos-dialog-tab {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cos-ui-muted);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

    .cos-dialog-tab:hover:not(:disabled) {
        color: var(--cos-ui-text);
        background: var(--cos-ui-surface);
    }

    .cos-dialog-tab.is-active {
        color: var(--cos-ui-accent);
        background: var(--cos-ui-surface);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    }

    .cos-dialog-tab:disabled {
        opacity: .4;
        cursor: default;
    }

.cos-dialog-tab-icon {
    flex: 0 0 auto;
    width: 1rem;
    font-size: 0.875rem;
    text-align: center;
}

.cos-dialog-tab-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cos-dialog-tab-badge {
    flex: 0 0 auto;
    padding: 0.0625rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--cos-ui-muted);
    background: var(--cos-ui-border-soft);
    border-radius: 999px;
}

.cos-dialog-tab.is-active .cos-dialog-tab-badge {
    color: var(--cos-ui-accent);
    background: var(--cos-ui-accent-soft);
}

.cos-dialog-body {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 1.25rem 1.5rem;
    scrollbar-width: thin;
}

.cos-dialog-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--cos-ui-border);
    background: var(--cos-ui-surface-muted);
}

/* ---------------------------------------------------------------- top rail variant */

.cos-dialog.is-top .cos-dialog-main {
    flex-direction: column;
}

.cos-dialog.is-top .cos-dialog-rail {
    flex-direction: row;
    width: auto;
    padding: 0.375rem 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--cos-ui-border);
}

.cos-dialog.is-top .cos-dialog-tab {
    width: auto;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- narrow screens */

@media (max-width: 767.98px) {
    .bm-container .cos-dialog-modal {
        height: calc(100vh - 4rem);
    }

    /* A 13.5rem rail is most of a phone screen - fall back to the horizontal strip. */
    .cos-dialog-main {
        flex-direction: column;
    }

    .cos-dialog-rail {
        flex-direction: row;
        width: auto;
        padding: 0.375rem 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: 0;
        border-bottom: 1px solid var(--cos-ui-border);
    }

    .cos-dialog-tab {
        width: auto;
        white-space: nowrap;
    }

    .cos-dialog-tab-text {
        overflow: visible;
    }

    .cos-dialog-body {
        padding: 1rem;
    }

    .cos-dialog-head {
        padding: 0.875rem 1rem;
    }
}

/* ---------------------------------------------------------------- legacy panes inside a dialog

   Most sections predate CosDialog and open with a Bootstrap `.card` / `.card-body`, which brings
   its own border, padding and (in a couple of cases) a hard-coded height. Inside a dialog body
   that already provides padding and scrolling that reads as a box inside a box, so the outermost
   one is flattened here rather than by editing every section. */

.cos-dialog-body > .cos-dialog-pane > .card,
.cos-dialog-body > .cos-dialog-pane > .card-body {
    height: auto !important;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

    .cos-dialog-body > .cos-dialog-pane > .card > .card-body {
        padding: 0;
        border-bottom: 0;
    }

/* ---------------------------------------------------------------- read-only record view */

.cos-detail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cos-detail-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cos-detail-legend {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cos-ui-muted);
}

.cos-detail-list {
    display: grid;
    grid-template-columns: minmax(7rem, 12rem) 1fr;
    gap: 0;
    margin: 0;
    border: 1px solid var(--cos-ui-border);
    border-radius: 0.625rem;
    overflow: hidden;
}

.cos-detail-row {
    display: contents;
}

.cos-detail-list dt,
.cos-detail-list dd {
    margin: 0;
    padding: 0.5625rem 0.875rem;
    border-top: 1px solid var(--cos-ui-border-soft);
}

.cos-detail-list dt {
    font-weight: 500;
    color: var(--cos-ui-muted);
    background: var(--cos-ui-surface-muted);
}

.cos-detail-list dd {
    min-width: 0;
    color: var(--cos-ui-text);
    overflow-wrap: anywhere;
}

/* The grid has no rows to hang :first-child off, so the top pair loses its rule this way. */
.cos-detail-row:first-child dt,
.cos-detail-row:first-child dd {
    border-top: 0;
}

.cos-detail-empty {
    color: var(--cos-ui-muted);
}

.cos-detail-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
}

.cos-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cos-detail-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    font-size: 0.75rem;
    color: var(--cos-ui-text);
    background: var(--cos-ui-surface-muted);
    border: 1px solid var(--cos-ui-border);
    border-radius: 999px;
}

.cos-detail-tag-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.625rem;
    color: var(--cos-ui-muted);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
}

    .cos-detail-tag-x:hover:not(:disabled) {
        color: #fff;
        background: var(--tblr-danger, #d63939);
    }

    .cos-detail-tag-x:disabled {
        opacity: .4;
        cursor: default;
    }

/* ---------------------------------------------------------------- empty / placeholder state */

.cos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 3rem 1rem;
    text-align: center;
}

.cos-empty-icon {
    font-size: 1.75rem;
    color: var(--cos-ui-muted);
    opacity: .45;
}

.cos-empty-title {
    font-size: 0.9375rem;
    font-weight: 600;
}

.cos-empty-text {
    max-width: 26rem;
    font-size: 0.8125rem;
    color: var(--cos-ui-muted);
}