/* ===========================================================================
   Movement page — mirrors the Budget page pattern/visual language.
   =========================================================================== */

.mv-page { display: flex; flex-direction: column; gap: 14px; }

/* -------------------------------- banner --------------------------------- */
.mv-banner {
    background: linear-gradient(120deg, #f7ecef 0%, #faf3ee 55%, #fdfbfa 100%);
    border: 1px solid #f1e6e8;
    border-radius: 18px;
    padding: 12px 24px;
}
.mv-banner__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mv-crumb { display: flex; align-items: center; gap: 9px; font-size: .85rem; margin-bottom: 4px; flex-wrap: wrap; }
.mv-crumb a { color: #9a7b82; text-decoration: none; }
.mv-crumb a:hover { color: var(--primary-color); text-decoration: underline; }
.mv-crumb strong { color: var(--ink); font-weight: 700; }
.mv-crumb__sep { color: #cdbfc3; }
.mv-title { font-size: 1.5rem; font-weight: 800; color: #1c1416; margin: 0 0 2px; }
.mv-sub { color: #6b5f63; font-size: .85rem; margin: 0; }

/* view toggle */
.mv-viewtoggle { display: inline-flex; background: #fff; border: 1px solid #e3d8db; border-radius: 10px; padding: 4px; gap: 2px; }
.mv-viewbtn {
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    border: none; background: transparent; cursor: pointer;
    font-size: .86rem; font-weight: 600; color: #4b4145;
    padding: 8px 14px; border-radius: 8px;
}
.mv-viewbtn.is-active { background: var(--primary-color); color: #fff; box-shadow: 0 1px 3px rgba(122, 31, 43, .3); }
.mv-viewbtn .material-symbols-rounded { font-size: 16px; }

/* --------------------------------- card ---------------------------------- */
.mv-card {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 20, 40, .04);
}

/* -------------------------------- period ---------------------------------- */
.mv-period { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; padding: 10px 18px; }
.mv-period__field { display: flex; flex-direction: column; gap: 3px; }
.mv-period__label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: #8a8f99; }
.mv-period__select {
    border: 1px solid #d9dde3; border-radius: 9px; padding: 6px 12px;
    font-size: .9rem; color: var(--ink); background: #fff; min-width: 180px; cursor: pointer;
}
.mv-apply {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    border: none; background: var(--primary-color); color: #fff; cursor: pointer;
    border-radius: 9px; padding: 9px 16px; font-size: .88rem; font-weight: 600;
}
.mv-apply:hover { filter: brightness(1.05); }
.mv-apply .material-symbols-rounded { font-size: 17px; }
.mv-period__range { margin-left: auto; font-size: .85rem; color: #6b5f63; align-self: center; }

/* -------------------------------- tabs ------------------------------------ */
.mv-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mv-tab {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid #e3e6ea; background: #fff; cursor: pointer;
    font-size: .85rem; font-weight: 600; color: #4b4145;
    padding: 4px 12px; border-radius: 999px;
}
.mv-tab:hover { border-color: var(--primary-color); color: var(--primary-color); }
.mv-tab.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; box-shadow: 0 1px 3px rgba(122, 31, 43, .3); }
.mv-tab .material-symbols-rounded { font-size: 16px; }
.mv-tab__count {
    font-size: .76rem; font-weight: 700; padding: 1px 8px; border-radius: 999px;
    background: rgba(0, 0, 0, .06); color: inherit;
}
.mv-tab.is-active .mv-tab__count { background: rgba(255, 255, 255, .22); }

/* ----------------------------- table card -------------------------------- */
.mv-table-card { border-top: 3px solid #e9c7d2; }

/* ----------------------------- table header ------------------------------ */
.mv-thead-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
    padding: 10px 20px; border-bottom: 1px solid #ECE6E2;
}
.mv-thead-bar__title { display: flex; flex-direction: column; gap: 3px; margin-right: auto; }
.mv-mini-crumb { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: #9a9095; }
.mv-mini-crumb__sep { color: #cdbfc3; }
.mv-mini-crumb strong { color: var(--ink); font-weight: 700; }
.mv-thead-bar__h { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; font-weight: 700; color: #1c1416; }
.mv-h-accent { width: 4px; height: 20px; border-radius: 3px; background: var(--primary-color); }
.mv-h-sub { font-size: .85rem; font-weight: 500; color: #6b5f63; }

/* actions */
.mv-actions { display: flex; align-items: center; gap: 12px; }
.mv-link-btn {
    border: none; background: transparent; cursor: pointer;
    font-size: .88rem; font-weight: 600; color: var(--primary-color); white-space: nowrap;
}
.mv-link-btn:hover { text-decoration: underline; }
.mv-export {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    border: 1px solid #d9dde3; background: #fff; cursor: pointer;
    font-size: .88rem; font-weight: 600; color: var(--ink);
    padding: 9px 14px; border-radius: 10px;
}
.mv-export:hover { border-color: var(--primary-color); color: var(--primary-color); }
.mv-export .material-symbols-rounded { font-size: 18px; }
.mv-export:disabled { opacity: .6; cursor: default; }
.mv-export-error { padding: 0 22px 14px; font-size: .84rem; color: #B42318; }

/* -------------------------------- table ---------------------------------- */
.mv-table-scroll { overflow-x: auto; }
.mv-table { width: max-content; min-width: 100%; }
.mv-tr {
    display: grid;
    grid-template-columns: 70px 150px 340px 190px 230px 190px;
    align-items: center;
    column-gap: 0;
    padding: 0;
}
.mv-th, .mv-td { box-sizing: border-box; padding: 0 10px; min-width: 0; }
.mv-tr > :first-child { padding-left: 20px; }
.mv-tr > :last-child { padding-right: 22px; }

.mv-tr--head { height: 38px; background: #faf7f8; border-bottom: 1px solid #ECE6E2; }
.mv-th { font-size: .78rem; font-weight: 700; color: #7a6f73; text-transform: none; }
.mv-th--num, .mv-td--num { color: #6B5F63; }
.mv-th--r, .mv-td--r { text-align: right; justify-self: end; }
.mv-num { font-variant-numeric: tabular-nums; }

/* sortable column headers */
button.mv-th.mv-sort {
    display: inline-flex; align-items: center; gap: 5px;
    border: none; background: transparent; padding: 0; cursor: pointer;
    font: inherit; text-align: left;
}
.mv-sort__icon { flex: none; }
.mv-sort__icon path { fill: #c9bcc0; transition: fill .15s; }
.mv-sort:hover .mv-sort__icon path { fill: #8a8f99; }
.mv-sort.is-active { color: var(--primary-color); }
.mv-sort__icon path.is-on { fill: var(--primary-color); }
.mv-sort:hover .mv-sort__icon path.is-on { fill: var(--primary-color); }

/* ---- frozen first three columns (sticky while the rest scrolls) ---- */
.mv-tr > :nth-child(1),
.mv-tr > :nth-child(2),
.mv-tr > :nth-child(3) { position: sticky; z-index: 2; background: #fff; }
.mv-tr > :nth-child(1) { left: 0; }
.mv-tr > :nth-child(2) { left: 70px; }
.mv-tr > :nth-child(3) { left: 220px; border-right: 1px solid #ece6e2; }
.mv-tr--head > :nth-child(-n+3),
.mv-tr--filter > :nth-child(-n+3) { background: #faf7f8; }

/* the filter row lives outside the scrolling table body (so multi-select panels
   aren't clipped), so it has nothing to freeze against — cancel the sticky/z-index
   above for it, which otherwise traps the dropdown panels in an isolated stacking
   context and makes them paint underneath the table. */
.mv-tr--filter > :nth-child(-n+3) { position: static; z-index: auto; left: auto; }

/* per-column filter row */
.mv-tr--filter { min-height: 40px; padding-top: 4px; padding-bottom: 4px; background: #faf7f8; border-bottom: 1px solid #ECE6E2; }
.mv-fl { display: block; min-width: 0; }
.mv-fl select, .mv-fl input {
    width: 100%; box-sizing: border-box;
    border: 1px solid #d9dde3; border-radius: 8px;
    padding: 5px 9px; font-size: .82rem; color: var(--ink);
    background: #fff; outline: none;
}
.mv-fl select { cursor: pointer; }
.mv-fl select:focus, .mv-fl input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }

/* multi-select-with-search dropdown */
.mv-msel { position: relative; width: 100%; }
.mv-msel__trigger {
    width: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1px solid #d9dde3; border-radius: 8px; background: #fff; cursor: pointer;
    padding: 5px 9px; font-size: .82rem; color: var(--ink); font-family: inherit;
}
.mv-msel__trigger.is-open { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(122, 31, 43, .12); }
.mv-msel__trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-msel__trigger-text.is-placeholder { color: #8a8f99; }
.mv-msel__chevron { font-size: 18px; color: #8a8f99; flex: none; }

.mv-msel__scrim { position: fixed; inset: 0; z-index: 60; background: transparent; }
.mv-msel__panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 61;
    width: max-content; min-width: 230px; max-width: 320px;
    background: #fff; border: 1px solid #e3e6ea; border-radius: 12px;
    box-shadow: 0 14px 34px rgba(20, 20, 40, .14);
    padding: 10px; display: flex; flex-direction: column; gap: 4px;
}
.mv-msel__search {
    display: flex; align-items: center; gap: 7px;
    border: 1px solid #d9dde3; border-radius: 8px; padding: 7px 10px; margin-bottom: 4px;
}
.mv-msel__search .material-symbols-rounded { font-size: 18px; color: #8a8f99; }
.mv-msel__search input {
    border: none; outline: none; flex: 1; min-width: 0; font-size: .85rem; color: var(--ink); background: transparent;
}
.mv-msel__item {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 8px 6px; border-radius: 7px; font-size: .88rem; color: #2b2f36;
}
.mv-msel__item:hover { background: #faf7f8; }
.mv-msel__item input[type="checkbox"] { accent-color: var(--primary-color); width: 15px; height: 15px; cursor: pointer; }
.mv-msel__item--all { font-weight: 700; border-bottom: 1px solid #ECE6E2; border-radius: 0; padding-bottom: 10px; margin-bottom: 4px; }
.mv-msel__list {
    max-height: 230px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #c9bcc0 transparent;
}
.mv-msel__list::-webkit-scrollbar { width: 8px; }
.mv-msel__list::-webkit-scrollbar-track { background: transparent; }
.mv-msel__list::-webkit-scrollbar-thumb { background: #c9bcc0; border-radius: 999px; }
.mv-msel__empty { padding: 14px 6px; text-align: center; font-size: .85rem; color: #8a8f99; }

.mv-tr:not(.mv-tr--head):not(.mv-tr--filter) { min-height: 44px; border-bottom: 1px solid #f2eeef; font-size: .9rem; color: #3d3236; }
.mv-tr:not(.mv-tr--head):not(.mv-tr--filter):hover { background: #fcf9fa; }
.mv-tr:not(.mv-tr--head):not(.mv-tr--filter):hover > :nth-child(-n+3) { background: #fcf9fa; }
.mv-td { overflow: hidden; }
.mv-td--strong { font-weight: 700; color: #1c1416; }
.mv-td--muted { color: #6b5f63; }
.mv-jobbtn {
    border: none; background: transparent; padding: 0; cursor: pointer;
    color: var(--primary-color); font-weight: 600; font-size: inherit;
    font-family: inherit; text-align: left; text-decoration: none;
    white-space: nowrap;
}
.mv-jobbtn:hover { text-decoration: underline; }
.mv-empty { padding: 48px 20px; text-align: center; font-size: .92rem; color: #6b5f63; }

/* nature + movement badges */
.mv-nature {
    display: block; font-size: .85rem; font-weight: 600; color: #5b5156;
    max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-badge { display: inline-block; font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.mv-badge.is-new       { background: #e8f0fe; color: #2251b5; }
.mv-badge.is-wip        { background: #fdf3e0; color: #9a6a12; }
.mv-badge.is-sent       { background: #fbe9ec; color: #a31f15; }
.mv-badge.is-review     { background: #f1e8fb; color: #6b2fb5; }
.mv-badge.is-completed  { background: #e9f7ef; color: #1c6b3c; }
.mv-badge.is-neutral    { background: #f0f1f4; color: #6b7280; }

/* -------------------------------- footer --------------------------------- */
.mv-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; padding: 14px 22px; font-size: .84rem; color: #6B5F63;
}
.mv-foot__right { display: flex; align-items: center; gap: 14px; }
.mv-perpage {
    border: 1px solid #d9dde3; border-radius: 9px; padding: 7px 10px;
    font-size: .84rem; color: var(--ink); background: #fff; cursor: pointer;
}
.mv-pager { display: inline-flex; align-items: center; gap: 4px; }
.mv-pager__pg, .mv-pager__nav {
    min-width: 34px; height: 34px; border-radius: 9px;
    border: 1px solid #e3e6ea; background: #fff; cursor: pointer;
    font-size: .86rem; font-weight: 600; color: var(--ink);
    display: inline-flex; align-items: center; justify-content: center;
}
.mv-pager__pg:hover, .mv-pager__nav:hover:not(:disabled) { border-color: var(--primary-color); color: var(--primary-color); }
.mv-pager__pg.is-active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.mv-pager__nav:disabled { opacity: .4; cursor: default; }

/* ------------------------- manager view pivot table ------------------------ */
.mv-mgrtable-scroll { overflow-x: auto; }
.mv-mgrtable { border-collapse: collapse; width: max-content; min-width: 100%; }
.mv-mgrtable th, .mv-mgrtable td {
    padding: 14px 18px; font-size: .88rem; white-space: nowrap; text-align: center;
    border-bottom: 1px solid #f2eeef;
}
.mv-mgrtable thead th {
    position: sticky; top: 0; z-index: 2;
    background: #faf7f8; border-bottom: 1px solid #ECE6E2;
    font-size: .72rem; font-weight: 700; color: #7a6f73; letter-spacing: .03em; text-transform: uppercase;
}
.mv-mgrtable__status {
    text-align: left; font-weight: 600; color: var(--primary-color);
    position: sticky; left: 0; z-index: 1; background: #fff; min-width: 190px;
}
.mv-mgrtable thead th.mv-mgrtable__status { z-index: 3; background: #faf7f8; }
.mv-mgrtable tbody tr:hover td:not(.mv-mgrtable__status) { background: #fcf9fa; }
.mv-mgrtable__total { font-weight: 700; color: #1c1416; background: #faf7f8; }
.mv-mgrtable__totalrow td { border-top: 2px solid #ECE6E2; font-weight: 700; background: #faf7f8; }
.mv-mgrtable__grandtotal { color: var(--primary-color); }

.mv-mgrcell {
    display: inline-flex; min-width: 26px; align-items: center; justify-content: center;
    padding: 4px 11px; border-radius: 999px; font-weight: 700; font-size: .85rem;
    background: #fbe9ec; color: #a31f15;
    border: none; font-family: inherit; cursor: pointer;
}
button.mv-mgrcell:hover { background: var(--primary-color); color: #fff; }
.mv-mgrcell--zero { background: transparent; color: #c9bcc0; font-weight: 500; cursor: default; }
.mv-mgrcell--max { background: var(--primary-color); color: #fff; }

/* ------------------- MovementJobDetailModal (reuses Budget's .jm-* --------- */
/* component styles from budget.css, plus these two Movement-only additions) */
.jm-meta--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.jm-loading { font-size: .88rem; color: #6b5f63; margin: 0; }

/* status × partner cell detail modal (click a Manager view pivot cell to list its jobs) */
.mv-cellmodal { width: 100%; max-width: 1280px; }
/* .jm-dialog caps at max-height:92vh with overflow:hidden, so this body needs to scroll
   internally (min-height:0 is the usual flex-child fix needed for overflow-y to actually
   engage instead of the content just growing past the dialog and being clipped) — a real
   bug, not a missing feature: it worked by coincidence when a cell's job count fit onscreen
   and silently clipped the rest when it didn't. */
.mv-cellmodal-body { padding: 0; overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.mv-cellmodal-table .mv-tr { grid-template-columns: 60px 150px 280px 170px 190px 150px 150px 120px; }
.mv-cellmodal-table .mv-tr > :nth-child(-n+3) { position: static; left: auto; z-index: auto; border-right: none; }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 1100px) {
    .mv-thead-bar { align-items: flex-start; }
    .mv-actions { width: 100%; }
}
@media (max-width: 680px) {
    .mv-banner__top { flex-direction: column; }
}