:root {
    --surface-soft: var(--surface);
    --bg: #f4f6fa;
    --surface: #fff;
    --surface2: #f8f9fc;
    --text: #11182a;
    --muted: #7b8499;
    --line: #e7eaf1;
    --nav: #0b1222;
    --yellow: #ffd431;
    --purple: #ff5a0a;
    --cyan: #ff8a3d;
    --red: #ff5c6c;
    --green: #20bd75;
    --shadow: 0 12px 34px rgba(25, 35, 60, .08);
    --radius: 18px
}

/* Planejamento regional: decisão por CD, transferência e compra residual */
.plan-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 18px 0
}

.plan-kpi {
    position: relative;
    min-height: 126px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface) 88%, #ff6a1a 12%));
    overflow: hidden
}

.plan-kpi:after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    right: -35px;
    bottom: -55px;
    background: rgba(105, 77, 255, .08)
}

.plan-kpi.finance {
    border-color: color-mix(in srgb, #ffd431 48%, var(--line));
    box-shadow: 0 14px 34px rgba(255, 212, 49, .08)
}

.plan-dispatch-card[hidden] {
    display: none !important;
}

.plan-kpi span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--muted)
}

.plan-kpi strong {
    display: block;
    margin: 10px 0 6px;
    font-size: 26px;
    line-height: 1;
    color: var(--text)
}

.plan-kpi small {
    color: var(--muted);
    font-size: 11px
}

.plan-kpi>i {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: #ffd431;
    color: #111;
    font-style: normal;
    font-weight: 900
}

.plan-kpi>i.violet {
    background: rgba(255, 90, 10, .18);
    color: #ff7a26
}

.plan-kpi>i.cyan {
    background: rgba(34, 184, 214, .16);
    color: #22b8d6
}

.plan-kpi>i.red {
    background: rgba(255, 100, 119, .16);
    color: #ff6477
}

.plan-flow {
    margin-bottom: 16px
}

.plan-flow-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 14px;
    align-items: center;
    padding: 18px 22px 22px
}

.plan-flow-grid>span {
    color: #ffd431;
    font-size: 22px
}

.plan-flow-grid>div {
    display: grid;
    grid-template-columns: 40px 1fr;
    column-gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface) 95%, #ff6a1a 5%)
}

.plan-flow-grid b {
    grid-row: 1/3;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #ffd431;
    color: #111
}

.plan-flow-grid strong {
    font-size: 13px
}

.plan-flow-grid small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px
}

.plan-split {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(520px, .9fr);
    gap: 16px;
    margin-bottom: 16px
}

.plan-split>.panel {
    min-width: 0;
    margin: 0
}

.plan-table {
    max-height: 410px
}

.money-impact {
    color: #ff6477
}

.danger {
    color: #ff6477 !important
}

.plan-empty {
    padding: 28px !important;
    text-align: center;
    color: var(--muted)
}

.plan-transfer-list {
    max-height: 410px;
    overflow: auto;
    padding: 0 18px 18px
}

.plan-transfer-list>div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px 12px;
    padding: 15px 4px;
    border-bottom: 1px solid var(--line)
}

.plan-transfer-list strong {
    font-size: 12px
}

.plan-transfer-list small {
    grid-column: 1/-1;
    color: var(--muted);
    font-size: 11px
}

.transfer-route {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px
}

.transfer-route i {
    color: #ffd431;
    font-style: normal
}

.regional-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 240px;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.regional-toolbar .filter-input,
.regional-toolbar .select-shell {
    margin: 0
}

.plan-export {
    border-color: rgba(36, 196, 126, .35);
    color: #24c47e !important
}

/* Filtros das ordens de expedição */

.dispatch-filter-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 9px;
    align-items: end;
    margin: 0 18px 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface2);
}

.dispatch-filter-bar label {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.dispatch-filter-bar label>span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dispatch-filter-bar select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font: 700 9px Manrope, sans-serif;
}

.dispatch-filter-bar select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px color-mix(in srgb,
            var(--purple) 12%,
            transparent);
}

.dispatch-filter-bar button {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    font: 800 9px Manrope, sans-serif;
}

.dispatch-filter-bar button:hover {
    border-color: var(--yellow);
    color: var(--yellow);
}

/* Melhor organização das movimentações */

.plan-dispatch-list {
    max-height: 430px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 18px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--purple) transparent;
    scrollbar-gutter: stable;
}

.plan-dispatch-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 16px 4px;
}

.dispatch-prepare,
.dispatch-created {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    margin-top: 5px;
    justify-content: center;
    text-align: center;
}

.dispatch-items small {
    align-items: center;
}

/* Barras de rolagem no padrão do Supply */

.plan-table {
    scrollbar-width: thin;
    scrollbar-color: var(--purple) transparent;
    scrollbar-gutter: stable;
}

.plan-table::-webkit-scrollbar,
.plan-dispatch-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.plan-table::-webkit-scrollbar-track,
.plan-dispatch-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 999px;
}

.plan-table::-webkit-scrollbar-thumb,
.plan-dispatch-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb,
            var(--purple) 70%,
            var(--line));
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.plan-table::-webkit-scrollbar-thumb:hover,
.plan-dispatch-list::-webkit-scrollbar-thumb:hover {
    background: var(--yellow);
    border: 2px solid transparent;
    background-clip: padding-box;
}

@media(max-width:1250px) {
    .plan-split {
        grid-template-columns: 1fr;
    }
}

@media(max-width:700px) {
    .dispatch-filter-bar {
        grid-template-columns: 1fr;
    }

    .dispatch-filter-bar button {
        width: 100%;
    }
}

.plan-dispatch-list {
    max-height: 480px;
    overflow: auto;
    padding: 0 18px 18px
}

.plan-dispatch-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 14px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--line)
}

.plan-dispatch-card.created {
    opacity: .82
}

.dispatch-route span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px
}

.dispatch-route i {
    color: #ffd431;
    font-style: normal
}

.dispatch-route small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 10px
}

.dispatch-items {
    display: grid;
    grid-column: 1/-1;
    gap: 4px
}

.dispatch-items small {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--muted);
    font-size: 10px
}

.dispatch-items b {
    color: var(--text);
    white-space: nowrap
}

.dispatch-prepare,
.dispatch-created {
    grid-column: 2;
    grid-row: 1/3;
    align-self: center;
    white-space: nowrap;
    font-size: 10px !important;
    padding: 10px 12px !important
}

.regional-prefill-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -4px 0 18px;
    padding: 13px 15px;
    border: 1px solid color-mix(in srgb, #ffd431 42%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, #ffd431 7%, var(--surface));
    color: var(--text)
}

.regional-prefill-banner>span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #ffd431;
    color: #111;
    font-weight: 900
}

.regional-prefill-banner div {
    display: grid;
    gap: 3px
}

.regional-prefill-banner strong {
    font-size: 12px
}

.regional-prefill-banner small {
    color: var(--muted);
    font-size: 10px
}

@media(max-width:1180px) {
    .plan-kpis {
        grid-template-columns: repeat(2, 1fr)
    }

    .plan-split {
        grid-template-columns: 1fr
    }

    .plan-flow-grid {
        grid-template-columns: 1fr
    }

    .plan-flow-grid>span {
        display: none
    }
}

@media(max-width:700px) {
    .plan-kpis {
        grid-template-columns: 1fr
    }

    .regional-toolbar {
        grid-template-columns: 1fr
    }

    .plan-kpi strong {
        font-size: 22px
    }
}

[data-theme=dark] {
    --bg: #0b1020;
    --surface: #121a2d;
    --surface2: #172137;
    --text: #f6f8ff;
    --muted: #929db5;
    --line: #25314b;
    --shadow: 0 12px 34px rgba(0, 0, 0, .24)
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Manrope, system-ui, sans-serif;
    font-size: 14px
}

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 255px;
    background: linear-gradient(180deg, #10192d, #08101f);
    color: #fff;
    padding: 25px 17px;
    z-index: 20;
    display: flex;
    flex-direction: column
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0 10px 23px
}

.brand-mark {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    background: var(--yellow);
    color: #101629;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 21px;
    box-shadow: 0 8px 24px rgba(255, 212, 49, .25)
}

.brand strong,
.brand small {
    display: block;
    letter-spacing: 2px
}

.brand small {
    font-size: 8px;
    color: #8f9ab0;
    margin-top: 3px
}

.sidebar nav {
    overflow: auto;
    flex: 1
}

.sidebar nav p {
    font-size: 9px;
    letter-spacing: 1.8px;
    color: #60708c;
    margin: 22px 14px 8px
}

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #9da8bc;
    text-decoration: none;
    padding: 12px 14px;
    border-radius: 11px;
    margin: 3px 0;
    font-weight: 600;
    transition: .2s
}

.sidebar nav a:hover,
.sidebar nav a.active {
    background: rgba(255, 255, 255, .075);
    color: #fff
}

.sidebar nav a.active {
    box-shadow: inset 3px 0 var(--yellow)
}

.sidebar-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    border-top: 1px solid #233049;
    padding: 17px 8px 0
}

.sidebar-foot strong,
.sidebar-foot small {
    display: block
}

.sidebar-foot small {
    font-size: 10px;
    color: #72809b
}

.avatar {
    width: 37px;
    height: 37px;
    border-radius: 11px;
    background: #24304a;
    display: grid;
    place-items: center;
    font-weight: 800
}

/* Planejamento Regional • Supply Pro 5.0 */
.regional-hero {
    padding: 22px 24px;
    border: 1px solid color-mix(in srgb, var(--purple) 18%, var(--line));
    border-radius: 22px;
    background: linear-gradient(115deg, color-mix(in srgb, var(--surface) 94%, var(--purple)), var(--surface));
    box-shadow: var(--shadow)
}

.regional-metrics {
    margin-top: 17px
}

.result-pill {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 12px;
    color: var(--muted);
    font-size: 10px
}

.regional-toolbar {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 12px;
    padding: 15px;
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 12px
}

.regional-toolbar input,
.regional-toolbar select,
.network-card input,
.network-card select,
.level-card input,
.target-form input,
.target-form select,
.import-shell input {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 11px;
    padding: 12px;
    font: 600 12px Manrope;
    outline: none
}

.regional-toolbar input:focus,
.regional-toolbar select:focus,
.network-card input:focus,
.network-card select:focus,
.target-form input:focus,
.target-form select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 12%, transparent)
}

.action-chip {
    display: inline-flex;
    padding: 7px 9px;
    border-radius: 9px;
    font-size: 9px;
    font-weight: 800
}

.action-chip.ok {
    background: #dcf8ea;
    color: #138656
}

.action-chip.buy {
    background: #ffe5e9;
    color: #c73849
}

.action-chip.transfer {
    background: #fff2e9;
    color: #e94a00
}

.action-chip.ship {
    background: #fff1e8;
    color: #d94a06
}

.badge.excesso {
    background: #fff1e8;
    color: #d94a06
}

.badge.não-informado {
    background: #edf0f5;
    color: #667085
}

.empty-state {
    min-height: 420px;
    border: 1px dashed var(--line);
    border-radius: 24px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px;
    box-shadow: var(--shadow)
}

.empty-state>span {
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: var(--yellow);
    display: grid;
    place-items: center;
    font-size: 28px;
    box-shadow: 0 12px 30px rgba(255, 212, 49, .28)
}

.empty-state h2 {
    margin: 20px 0 5px
}

.empty-state p {
    color: var(--muted);
    max-width: 520px
}

.network-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 14px
}

.network-card {
    border: 1px solid var(--line);
    background: linear-gradient(145deg, var(--surface), var(--surface2));
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 12px
}

.network-card label,
.level-card label,
.target-form label,
.import-shell label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700
}

.network-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.network-title strong,
.network-title small {
    display: block
}

.network-title small {
    font-size: 9px;
    color: var(--muted);
    margin-top: 4px
}

.switch input {
    display: none
}

.switch span {
    width: 42px;
    height: 24px;
    border-radius: 99px;
    background: var(--line);
    display: block;
    position: relative
}

.switch span:after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .2s;
    box-shadow: 0 2px 6px #0002
}

.switch input:checked+span {
    background: var(--green)
}

.switch input:checked+span:after {
    transform: translateX(18px)
}

.network-bulk-form {
    padding-bottom: 96px
}

.network-bulk-head {
    align-items: center
}

.network-save-state {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    background: var(--surface2);
    padding: 8px 12px;
    border-radius: 12px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em
}

.network-save-state strong {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--yellow) 18%, var(--surface));
    color: var(--text);
    font-size: 13px
}

.network-card {
    transition: border-color .2s, box-shadow .2s, transform .2s
}

.network-card.is-changed {
    border-color: color-mix(in srgb, var(--yellow) 65%, var(--line));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--yellow) 10%, transparent)
}

.network-card.has-error {
    border-color: var(--red);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 12%, transparent)
}

.network-card-status {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-top: 2px;
    color: var(--muted)
}

.network-card-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green)
}

.network-card-status small {
    font-size: 9px
}

.network-card.is-changed .network-card-status span {
    background: var(--yellow)
}

.network-card.is-changed .network-card-status small {
    color: var(--text)
}

.network-save-dock {
    position: sticky;
    bottom: 16px;
    z-index: 20;
    margin: 16px auto 0;
    width: min(100%, 980px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--purple) 24%, var(--line));
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 18px 55px rgba(2, 8, 23, .24);
    backdrop-filter: blur(18px)
}

.network-save-dock strong,
.network-save-dock small {
    display: block
}

.network-save-dock strong {
    font-size: 13px
}

.network-save-dock small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px
}

.network-save-dock .btn {
    min-width: 235px
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 17px
}

.level-card {
    border: 1px solid var(--line);
    border-top: 4px solid var(--level);
    border-radius: 16px;
    background: var(--surface);
    padding: 16px;
    display: grid;
    gap: 10px;
    box-shadow: var(--shadow)
}

.level-card>span {
    font-size: 18px;
    font-weight: 900;
    color: var(--level)
}

.target-panel-head {
    align-items: center
}

.auto-badge {
    display: inline-flex;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--green) 45%, var(--line));
    background: color-mix(in srgb, var(--green) 10%, var(--surface));
    color: var(--green);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em
}

.target-form {
    display: grid;
    grid-template-columns: 2fr repeat(3, minmax(130px, 1fr)) 1.15fr 1.15fr 1.1fr auto;
    gap: 10px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface2);
    margin-bottom: 16px
}

.target-form label small {
    color: var(--purple);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em
}

.target-submit {
    min-height: 43px
}

.level-preview {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    padding-top: 4px
}

.level-preview-card {
    border: 1px solid color-mix(in srgb, var(--level) 38%, var(--line));
    border-left: 4px solid var(--level);
    background: color-mix(in srgb, var(--level) 6%, var(--surface));
    border-radius: 11px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3px 9px;
    align-items: center
}

.level-preview-card strong {
    color: var(--level);
    font-size: 12px
}

.level-preview-card>span {
    justify-self: end;
    color: var(--muted);
    font-size: 9px;
    font-weight: 800
}

.level-preview-card small {
    grid-column: 1/-1;
    color: var(--muted)
}

.level-preview-card b {
    color: var(--text);
    font-size: 13px
}

.target-hint {
    grid-column: 1/-1;
    margin: 0;
    color: var(--muted);
    font-size: 10px
}

.level-pill {
    display: inline-flex;
    border: 1px solid var(--level);
    color: var(--level);
    padding: 6px 9px;
    border-radius: 8px;
    font-weight: 800
}

.generated-label {
    display: block;
    color: var(--muted);
    font-size: 8px;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: .07em
}

.danger {
    color: var(--red);
    border-color: color-mix(in srgb, var(--red) 40%, var(--line))
}

.level-bulk-form {
    margin-bottom: 17px
}

.level-bulk-head,
.level-bulk-actions,
.target-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.level-bulk-head {
    padding: 0 2px 13px
}

.level-bulk-head h3,
.target-list-toolbar h3 {
    margin: 3px 0
}

.level-bulk-head p,
.target-list-toolbar p {
    margin: 0;
    color: var(--muted)
}

.bulk-change-badge {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em
}

.bulk-change-badge.has-changes {
    color: var(--yellow);
    border-color: color-mix(in srgb, var(--yellow) 50%, var(--line));
    background: color-mix(in srgb, var(--yellow) 8%, var(--surface))
}

.level-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.level-card-title span {
    font-size: 18px;
    font-weight: 900;
    color: var(--level)
}

.level-card-title small {
    padding: 5px 7px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--level) 10%, var(--surface2));
    color: var(--level);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em
}

.multiplier-field {
    position: relative
}

.multiplier-field input {
    padding-right: 35px !important
}

.multiplier-field span {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 900;
    color: var(--level)
}

.level-card input[readonly] {
    opacity: .72;
    cursor: not-allowed;
    background: var(--surface2)
}

.level-bulk-actions {
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: linear-gradient(110deg, var(--surface), color-mix(in srgb, var(--purple) 5%, var(--surface)));
    box-shadow: var(--shadow)
}

.level-bulk-actions div {
    display: grid;
    gap: 3px
}

.level-bulk-actions span {
    color: var(--muted);
    font-size: 10px
}

.regional-target-panel {
    overflow: visible
}

.catalog-picker {
    position: relative
}

.catalog-picker-input {
    padding-left: 38px !important
}

.catalog-picker-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--purple);
    font-size: 17px;
    pointer-events: none
}

.catalog-picker-menu {
    position: absolute;
    z-index: 40;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: 310px;
    overflow: auto;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: 0 18px 45px #0004
}

.catalog-picker-option {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 11px 12px;
    border-radius: 9px;
    cursor: pointer;
    font: 700 11px Manrope
}

.catalog-picker-option:hover,
.catalog-picker-option:focus {
    background: color-mix(in srgb, var(--purple) 10%, var(--surface));
    color: var(--purple);
    outline: none
}

.catalog-picker-empty {
    padding: 16px;
    text-align: center;
    color: var(--muted);
    font-size: 10px
}

.target-list-toolbar {
    margin: 7px 0 13px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface2)
}

.target-filter-box {
    position: relative;
    display: flex;
    align-items: center;
    width: min(440px, 42vw);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    transition: .2s
}

.target-filter-box:focus-within {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 12%, transparent)
}

.target-filter-box>span {
    padding-left: 14px;
    color: var(--purple)
}

.target-filter-box>input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    padding: 12px;
    font: 600 11px Manrope
}

.target-filter-box>button {
    margin-right: 7px;
    width: 29px;
    height: 29px;
    border: 0;
    border-radius: 8px;
    background: var(--surface2);
    color: var(--muted);
    cursor: pointer;
    font-size: 17px
}

.target-filter-box>button:hover {
    color: var(--red)
}

.target-filter-suggestions {
    position: absolute;
    z-index: 35;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    padding: 7px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 16px 40px #0003
}

.target-filter-suggestions button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font: 700 10px Manrope
}

.target-filter-suggestions button:hover {
    background: var(--surface2);
    color: var(--purple)
}

tr[hidden] {
    display: none !important
}

.import-shell {
    padding: 28px
}

.import-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 16px
}

.upload-zone {
    min-height: 190px;
    border: 1px dashed var(--purple) !important;
    border-radius: 18px !important;
    background: color-mix(in srgb, var(--purple) 5%, var(--surface2)) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer
}

.upload-zone input {
    position: absolute;
    opacity: 0;
    pointer-events: none
}

.upload-zone strong,
.upload-zone small {
    display: block
}

.upload-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: var(--yellow);
    color: #101629;
    display: grid;
    place-items: center;
    font-size: 25px;
    margin-bottom: 8px
}

.issue-row {
    display: grid;
    grid-template-columns: auto 180px 1fr;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line)
}

.issue-row p {
    margin: 0;
    color: var(--muted)
}

.release-card {
    margin: 28px 0 20px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    background: rgba(255, 255, 255, .08);
    backdrop-filter: blur(16px);
    max-width: 580px
}

.release-card>span {
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--yellow);
    font-weight: 800
}

.release-card h3 {
    margin: 7px 0 5px;
    font-size: 20px
}

.release-card p {
    margin: 0 0 9px !important;
    font-size: 12px !important
}

.release-card ul {
    margin: 0;
    padding-left: 18px;
    color: #c4ccda;
    font-size: 11px;
    line-height: 1.8
}

@media(max-width:1200px) {
    .network-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .level-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .target-form {
        grid-template-columns: repeat(4, 1fr)
    }

    .target-form label:first-of-type {
        grid-column: span 2
    }

    .level-preview {
        grid-template-columns: repeat(2, 1fr)
    }

    .target-list-toolbar {
        flex-wrap: wrap
    }

    .target-filter-box {
        width: min(520px, 70vw)
    }
}

@media(max-width:760px) {

    .regional-toolbar,
    .network-grid,
    .level-grid,
    .import-grid,
    .target-form {
        grid-template-columns: 1fr
    }

    .target-form label:first-of-type {
        grid-column: auto
    }

    .level-preview {
        grid-template-columns: 1fr
    }

    .regional-hero {
        align-items: flex-start
    }

    .release-card {
        display: none
    }

    .auto-badge {
        display: none
    }

    .level-bulk-head,
    .level-bulk-actions,
    .target-list-toolbar {
        align-items: stretch;
        flex-direction: column
    }

    .level-bulk-actions .btn {
        width: 100%
    }

    .target-filter-box {
        width: 100%
    }

    .target-list-toolbar .result-pill {
        align-self: flex-start
    }
}

@media(max-width:760px) {
    .network-save-dock {
        bottom: 8px;
        align-items: stretch;
        flex-direction: column
    }

    .network-save-dock .btn {
        width: 100%;
        min-width: 0
    }

    .network-save-state span {
        display: none
    }
}

.main {
    margin-left: 255px;
    min-height: 100vh
}

.topbar {
    height: 76px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 34px;
    position: sticky;
    top: 0;
    z-index: 10
}

.search {
    background: var(--surface2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px;
    width: 360px;
    color: var(--muted)
}

.search input,
.filter-input input {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    width: 90%;
    font: inherit
}

.top-actions {
    margin-left: auto;
    display: flex;
    gap: 9px
}

.icon-button {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    display: grid;
    place-items: center;
    text-decoration: none;
    cursor: pointer
}

.menu-btn {
    display: none
}

.content {
    padding: 32px 34px 50px;
    max-width: 1700px;
    margin: auto
}

.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
    gap: 20px
}

.page-head h1 {
    font-size: 28px;
    margin: 5px 0 3px;
    letter-spacing: -1px
}

.page-head p,
.panel-head p {
    margin: 0;
    color: var(--muted)
}

.eyebrow {
    font-size: 9px;
    color: #8b95a9;
    letter-spacing: 2px;
    font-weight: 800
}

.page-actions,
.inline-actions {
    display: flex;
    align-items: center;
    gap: 9px
}

.live {
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--green);
    font-weight: 800
}

.btn {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    padding: 11px 16px;
    border-radius: 11px;
    font: 600 13px Manrope;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 7px
}

.btn.primary {
    background: var(--yellow);
    border-color: var(--yellow);
    color: #101629;
    box-shadow: 0 8px 20px rgba(255, 212, 49, .19)
}

.btn.ghost:hover {
    background: var(--surface2)
}

.btn.wide {
    width: 100%;
    padding: 14px
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 17px
}

.metric {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    position: relative;
    box-shadow: var(--shadow)
}

.metric.hero {
    background: linear-gradient(135deg, #121b31, #182641);
    color: #fff;
    border: 0
}

.metric span,
.metric small,
.metric strong {
    display: block
}

.metric span {
    color: var(--muted);
    font-size: 12px
}

.metric.hero span {
    color: #9ba7bb
}

.metric strong {
    font-size: 25px;
    margin: 10px 0 4px
}

.metric small {
    color: var(--muted);
    font-size: 10px
}

.metric-icon {
    position: absolute;
    right: 17px;
    top: 17px;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: var(--yellow);
    color: #111a2e;
    display: grid;
    place-items: center;
    font-weight: 800
}

.metric-icon.purple {
    background: #fff2e9;
    color: var(--purple)
}

.metric-icon.cyan {
    background: #fff1e8;
    color: #079ab7
}

.metric-icon.red {
    background: #ffe9ec;
    color: var(--red)
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 17px
}

.panel-head,
.table-tools,
.panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px
}

.panel-head {
    margin-bottom: 18px
}

.panel-head h3,
.detail-card h3 {
    margin: 0 0 3px
}

.panel-head a {
    font-size: 12px;
    color: var(--purple);
    text-decoration: none;
    font-weight: 700
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 17px
}

.alert-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line)
}

.alert-row:last-child {
    border: 0
}

.alert-row div {
    flex: 1
}

.alert-row strong,
.alert-row small,
.sub {
    display: block
}

.alert-row small,
.sub {
    color: var(--muted);
    font-size: 10px;
    margin-top: 3px
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red)
}

.badge {
    padding: 5px 8px;
    border-radius: 7px;
    background: var(--surface2);
    font-size: 8px;
    letter-spacing: .6px;
    font-weight: 800;
    white-space: nowrap
}

.badge.big {
    font-size: 10px;
    padding: 9px 12px
}

.badge.normal {
    background: #dcf8ea;
    color: #138656
}

.badge.atenção {
    background: #fff5cd;
    color: #927200
}

.badge.baixo,
.badge.crítico,
.badge.sem-estoque {
    background: #ffe5e9;
    color: #c73849
}

.badge.neutral {
    background: #fff0e6;
    color: #e94a00
}

.table-tools {
    margin-bottom: 15px;
    color: var(--muted);
    font-size: 11px
}

.filter-input {
    border: 1px solid var(--line);
    background: var(--surface2);
    border-radius: 10px;
    padding: 9px 12px;
    width: 310px
}

.table-wrap {
    overflow: auto
}

table {
    width: 100%;
    border-collapse: collapse
}

th {
    text-align: left;
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line)
}

td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--line);
    font-size: 12px
}

tbody tr:hover {
    background: var(--surface2)
}

td a {
    color: var(--text);
    text-decoration: none
}

.code {
    font-family: monospace;
    background: var(--surface2);
    padding: 5px 7px;
    border-radius: 6px;
    color: var(--purple)
}

.empty {
    text-align: center !important;
    color: var(--muted);
    padding: 35px !important
}

.toast {
    padding: 12px 15px;
    border-radius: 11px;
    margin-bottom: 16px;
    background: #e9f8ef;
    color: #167347;
    border: 1px solid #c5eed7
}

.toast.danger {
    background: #fff0f2;
    color: #a52e3d;
    border-color: #ffd3d9
}

.toast.warning {
    background: #fff8dc;
    color: #856a00
}

.back {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-decoration: none;
    margin-bottom: 10px
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 17px
}

.detail-card dl {
    margin: 0
}

.detail-card dt {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 15px
}

.detail-card dd {
    margin: 4px 0 0;
    font-weight: 700
}

.table-input {
    max-width: 130px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text)
}

.panel-actions {
    border-top: 1px solid var(--line);
    padding-top: 17px;
    margin-top: 12px;
    justify-content: flex-end
}

.notice {
    margin-right: auto;
    color: var(--muted);
    font-size: 11px
}

.stepper {
    display: flex;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 16px 24px;
    margin-bottom: 17px
}

.stepper div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted)
}

.stepper b {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface2);
    font-size: 10px
}

.stepper div.done {
    color: var(--text);
    font-weight: 700
}

.stepper .done b {
    background: var(--yellow);
    color: #111
}

.stepper i {
    height: 1px;
    background: var(--line);
    flex: 1;
    margin: 0 10px
}

.stepper span {
    font-size: 10px
}

.table-tools select,
select,
input {
    font-family: inherit
}

dialog {
    border: 0;
    padding: 0;
    border-radius: 20px;
    background: transparent;
    max-height: 92vh;
    color: var(--text)
}

dialog::backdrop {
    background: rgba(4, 10, 22, .68);
    backdrop-filter: blur(5px)
}

.modal-card {
    background: var(--surface);
    width: 540px;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3)
}

.modal-card.large {
    width: 700px
}

.modal-card.xlarge {
    width: 900px
}

.modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px
}

.modal-head h2 {
    margin: 5px 0
}

.modal-close,
.remove-line {
    border: 0;
    background: var(--surface2);
    color: var(--muted);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 20px
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.form-grid label,
.login-card label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted)
}

.form-grid input,
.form-grid select,
.login-card input,
.table-tools select,
.item-line input,
.item-line select {
    border: 1px solid var(--line);
    background: var(--surface2);
    color: var(--text);
    border-radius: 10px;
    padding: 11px;
    outline: none
}

.span-2,
.section-label {
    grid-column: span 2
}

.section-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    font-weight: 800;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    padding: 15px 0 8px
}

.check {
    flex-direction: row !important;
    align-items: center
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin-top: 20px
}

.item-lines {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 11px 0
}

.item-line {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 34px;
    gap: 8px
}

.item-line.compact {
    grid-template-columns: 2fr 1fr 34px
}

.login-page {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    min-height: 100vh;
    background: #0b1325
}

.login-visual {
    position: relative;
    padding: 8vw;
    background: radial-gradient(circle at 15% 20%, rgba(255, 90, 10, .32), transparent 30%), radial-gradient(circle at 85% 70%, rgba(255, 212, 49, .18), transparent 25%), linear-gradient(135deg, #0a1224, #111d35);
    display: flex;
    align-items: center;
    color: white;
    overflow: hidden
}

.login-visual:after {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 50%;
    right: -200px;
    top: -80px;
    box-shadow: 0 0 0 80px rgba(255, 255, 255, .018), 0 0 0 160px rgba(255, 255, 255, .012)
}

.hero-copy {
    position: relative;
    z-index: 1;
    max-width: 650px
}

.hero-copy h1 {
    font-size: 54px;
    line-height: 1.08;
    letter-spacing: -3px
}

.hero-copy em {
    color: var(--yellow);
    font-style: normal
}

.hero-copy p {
    color: #a4aec2;
    font-size: 16px;
    line-height: 1.7;
    max-width: 560px
}

.hero-metrics {
    display: flex;
    gap: 50px;
    margin-top: 50px
}

.hero-metrics strong,
.hero-metrics small {
    display: block
}

.hero-metrics strong {
    font-size: 23px
}

.hero-metrics small {
    color: #73819b;
    font-size: 10px
}

.login-panel {
    background: #f5f7fb;
    display: grid;
    place-items: center;
    padding: 30px
}

.login-card {
    width: min(390px, 100%);
    background: white;
    border-radius: 22px;
    padding: 34px;
    box-shadow: 0 30px 80px rgba(10, 20, 40, .12);
    color: #11182a
}

.login-brand {
    padding: 0 0 25px
}

.login-card h2 {
    font-size: 25px;
    margin: 5px 0
}

.login-card>p {
    color: #7b8499;
    margin: 0 0 25px
}

.login-card label {
    margin-bottom: 15px
}

.login-hint {
    display: block;
    text-align: center;
    color: #8a94a7;
    margin-top: 16px
}

@media(max-width:1100px) {
    .metric-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .dashboard-grid,
    .detail-grid {
        grid-template-columns: 1fr
    }

    .modal-card.xlarge {
        width: 90vw
    }
}

@media(max-width:760px) {
    .sidebar {
        transform: translateX(-100%);
        transition: .2s
    }

    .menu-open .sidebar {
        transform: none
    }

    .main {
        margin: 0
    }

    .menu-btn {
        display: grid
    }

    .topbar {
        padding: 0 16px
    }

    .search {
        display: none
    }

    .content {
        padding: 22px 15px
    }

    .page-head {
        align-items: flex-start;
        flex-direction: column
    }

    .metric-grid {
        grid-template-columns: 1fr
    }

    .dashboard-grid {
        grid-template-columns: 1fr
    }

    .form-grid {
        grid-template-columns: 1fr
    }

    .span-2,
    .section-label {
        grid-column: span 1
    }

    .modal-card,
    .modal-card.large,
    .modal-card.xlarge {
        width: 94vw
    }

    .item-line,
    .item-line.compact {
        grid-template-columns: 1fr
    }

    .login-page {
        grid-template-columns: 1fr
    }

    .login-visual {
        display: none
    }

    .stepper span {
        display: none
    }
}

/* Corrige o botão Cancelar dos formulários */
.modal-actions .btn.modal-close {
    width: auto;
    height: auto;
    min-width: 110px;
    padding: 11px 18px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font-family: Manrope, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Efeito ao passar o mouse */
.modal-actions .btn.modal-close:hover {
    background: var(--surface2);
    border-color: var(--muted);
}

/* =====================================================
   PESQUISA MODERNA DE MATERIAIS
   ===================================================== */

.material-picker {
    position: relative;
    width: 100%;
    min-width: 0;
}

.material-search-control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.material-search-control .material-search {
    width: 100%;
    height: 44px;
    padding: 11px 38px 11px 40px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface2);
    color: var(--text);
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: 600;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.material-search-control .material-search::placeholder {
    color: var(--muted);
    font-weight: 500;
}

.material-search-control .material-search:focus {
    border-color: var(--yellow);
    background: var(--surface);
    box-shadow:
        0 0 0 3px rgba(255, 212, 49, 0.12);
}

.material-search-icon {
    position: absolute;
    left: 14px;
    z-index: 2;
    color: var(--muted);
    font-size: 17px;
    pointer-events: none;
}

.material-search-arrow {
    position: absolute;
    right: 14px;
    z-index: 2;
    color: var(--muted);
    font-size: 11px;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.material-picker:has(.material-results.open) .material-search-arrow {
    transform: rotate(180deg);
}

.material-picker.material-selected .material-search-control::after {
    content: "✓";
    position: absolute;
    right: 13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: white;
    font-size: 10px;
    font-weight: 800;
}

.material-picker.material-selected .material-search-arrow {
    display: none;
}


/* Caixa dos resultados */

.material-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 300;
    display: none;
    max-height: 390px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.30);
}

.material-results.open {
    display: block;
    animation: materialDropdown 0.16s ease;
}

@keyframes materialDropdown {

    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Cada material da lista */

.material-result-item {
    width: 100%;
    display: flex;
    padding: 12px;
    margin: 0 0 5px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--text);
    font-family: Manrope, sans-serif;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}

.material-result-item:last-of-type {
    margin-bottom: 0;
}

.material-result-item:hover {
    border-color: rgba(255, 212, 49, 0.35);
    background:
        rgba(255, 212, 49, 0.08);
    transform: translateX(2px);
}

.material-result-content {
    width: 100%;
    min-width: 0;
}

.material-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
}

.material-result-code {
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--surface2);
    color: var(--purple);
    font-family: monospace;
    font-size: 10px;
    font-weight: 800;
}

.material-result-category {
    max-width: 55%;
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.material-result-name {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-result-unit {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
}


/* Rodapé e resultado vazio */

.material-results-counter {
    position: sticky;
    bottom: -8px;
    margin: 7px -8px -8px;
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    background: var(--surface2);
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}

.material-result-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 15px;
    color: var(--muted);
    text-align: center;
}

.material-result-empty strong {
    color: var(--text);
    font-size: 12px;
}

.material-result-empty small {
    margin-top: 5px;
    font-size: 9px;
}


/* Barra de rolagem da pesquisa */

.material-results::-webkit-scrollbar {
    width: 7px;
}

.material-results::-webkit-scrollbar-track {
    background: transparent;
}

.material-results::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--line);
}


/* Largura da linha da compra */

.purchase-item-line {
    grid-template-columns:
        minmax(300px, 2fr) minmax(120px, 0.7fr) minmax(140px, 0.8fr) 34px;
}


/* Ajuste para telas menores */

@media (max-width: 760px) {

    .purchase-item-line {
        grid-template-columns: 1fr;
    }

    .material-results {
        max-height: 300px;
    }
}


/* =====================================================
   DESTINOS BLOQUEADOS DA MOVIMENTAÇÃO
   ===================================================== */

#branchField,
#warehouseField {
    position: relative;
    transition:
        opacity 0.2s ease,
        filter 0.2s ease;
}

.destination-disabled {
    opacity: 0.48;
}

.destination-disabled select {
    cursor: not-allowed;
    color: var(--muted);
    border-color: var(--line);
    background:
        repeating-linear-gradient(-45deg,
            var(--surface2),
            var(--surface2) 8px,
            color-mix(in srgb,
                var(--surface2) 94%,
                var(--muted)) 8px,
            color-mix(in srgb,
                var(--surface2) 94%,
                var(--muted)) 16px);
}

.destination-disabled select:hover,
.destination-disabled select:focus {
    border-color: var(--line);
    box-shadow: none;
}

.destination-lock-message {
    display: none;
    margin-top: 2px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 600;
}

.destination-disabled .destination-lock-message {
    display: block;
}

/* Linha dos materiais na movimentação */

.item-line.movement-item-line {
    grid-template-columns:
        minmax(380px, 2fr) minmax(150px, 0.7fr) 34px;
    align-items: start;
}


/* Deixar a pesquisa acima dos outros campos */

.movement-item-line .material-picker {
    z-index: 5;
}

.movement-item-line:focus-within .material-picker {
    z-index: 50;
}


/* Melhorar o campo de quantidade */

.movement-item-line input[name="quantity[]"] {
    height: 44px;
}


/* Responsividade */

@media (max-width: 760px) {

    .item-line.movement-item-line {
        grid-template-columns: 1fr;
    }
}


/* =====================================================
   PESQUISA MODERNA DE FILIAIS
   ===================================================== */

.branch-picker {
    position: relative;
    width: 100%;
}

.branch-search-control {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.branch-search {
    width: 100%;
    height: 44px;
    padding: 11px 38px 11px 40px;
    border: 1px solid var(--line);
    border-radius: 11px;
    outline: none;
    background: var(--surface2);
    color: var(--text);
    font-family: Manrope, sans-serif;
    font-size: 12px;
    font-weight: 600;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.branch-search::placeholder {
    color: var(--muted);
    font-weight: 500;
}

.branch-search:focus {
    border-color: var(--yellow);
    background: var(--surface);
    box-shadow:
        0 0 0 3px rgba(255, 212, 49, 0.12);
}

.branch-search-icon {
    position: absolute;
    left: 14px;
    z-index: 2;
    color: var(--muted);
    font-size: 17px;
    pointer-events: none;
}

.branch-search-arrow {
    position: absolute;
    right: 14px;
    z-index: 2;
    color: var(--muted);
    font-size: 11px;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.branch-picker:has(.branch-results.open) .branch-search-arrow {
    transform: rotate(180deg);
}

.branch-picker.branch-selected .branch-search-control::after {
    content: "✓";
    position: absolute;
    right: 13px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--green);
    color: white;
    font-size: 10px;
    font-weight: 800;
}

.branch-picker.branch-selected .branch-search-arrow {
    display: none;
}


/* Lista de filiais */

.branch-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 400;
    display: none;
    max-height: 360px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.30);
}

.branch-results.open {
    display: block;
    animation: materialDropdown 0.16s ease;
}


/* Item da filial */

.branch-result-item {
    width: 100%;
    display: block;
    padding: 12px;
    margin-bottom: 5px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--text);
    font-family: Manrope, sans-serif;
    text-align: left;
    cursor: pointer;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        transform 0.16s ease;
}

.branch-result-item:hover {
    border-color:
        rgba(255, 212, 49, 0.35);
    background:
        rgba(255, 212, 49, 0.08);
    transform: translateX(2px);
}

.branch-result-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.branch-result-name {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.branch-result-state {
    min-width: 30px;
    padding: 4px 7px;
    border-radius: 6px;
    background: var(--surface2);
    color: var(--purple);
    font-family: monospace;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
}

.branch-result-region {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 9px;
}

.branch-results-counter {
    position: sticky;
    bottom: -8px;
    margin: 7px -8px -8px;
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    background: var(--surface2);
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}

.branch-result-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 15px;
    color: var(--muted);
    text-align: center;
}

.branch-result-empty strong {
    color: var(--text);
    font-size: 12px;
}

.branch-result-empty small {
    margin-top: 5px;
    font-size: 9px;
}


/* Estado bloqueado */

.destination-disabled .branch-search {
    cursor: not-allowed;
    opacity: 0.55;
}


/* Corrigir espaçamento do texto na pesquisa de filial */

.form-grid .branch-search-control .branch-search {
    padding-left: 42px !important;
    padding-right: 42px !important;
    line-height: 20px;
}

.form-grid .branch-search-control .branch-search::placeholder {
    padding-left: 0;
}

.branch-search-icon {
    left: 15px;
    width: 18px;
    display: grid;
    place-items: center;
}

.branch-search-arrow {
    right: 15px;
}

/* ============================================================
   CENTRAL DE COMPRAS — PAINEL, FILTROS E ACOMPANHAMENTO
   ============================================================ */

.purchase-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.purchase-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(19, 31, 55, .98), rgba(13, 23, 42, .98));
    box-shadow: 0 14px 35px rgba(0, 0, 0, .13);
}

.purchase-kpi::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -38px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(105, 119, 255, .08);
}

.purchase-kpi-main {
    border-color: rgba(255, 212, 49, .3);
    background: linear-gradient(145deg, rgba(35, 34, 34, .98), rgba(18, 29, 49, .98));
}

.purchase-kpi-icon {
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    border: 1px solid rgba(255, 212, 49, .28);
    border-radius: 13px;
    color: #101827;
    background: var(--yellow);
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 8px 24px rgba(255, 212, 49, .15);
}

.purchase-kpi-icon.pending {
    color: #ffc09a;
    border-color: rgba(151, 112, 255, .25);
    background: rgba(126, 87, 255, .13);
}

.purchase-kpi-icon.received {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, .25);
    background: rgba(52, 211, 153, .11);
}

.purchase-kpi-icon.partial {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, .25);
    background: rgba(251, 191, 36, .11);
}

.purchase-kpi-icon.overdue {
    color: #fb7185;
    border-color: rgba(251, 113, 133, .25);
    background: rgba(251, 113, 133, .11);
}

.purchase-kpi>div:last-child {
    z-index: 1;
    min-width: 0;
}

.purchase-kpi span,
.purchase-kpi small {
    display: block;
    color: var(--muted);
}

.purchase-kpi span {
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.purchase-kpi strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: clamp(17px, 1.35vw, 23px);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-kpi small {
    margin-top: 6px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.purchase-control-panel {
    padding: 0;
    overflow: hidden;
}

.purchase-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px 16px;
}

.purchase-panel-head h2 {
    margin: 4px 0;
    font-size: 20px;
}

.purchase-panel-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.purchase-result-count {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, .025);
    font-size: 11px;
}

.purchase-result-count strong {
    color: var(--text);
}

.purchase-filters {
    display: grid;
    grid-template-columns: 1.7fr repeat(3, minmax(145px, 1fr));
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(7, 15, 29, .33);
}

.purchase-filters label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.purchase-filters input,
.purchase-filters select {
    width: 100%;
    height: 42px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text);
    background: var(--surface2);
    font-size: 12px;
}

.purchase-search-box {
    position: relative;
}

.purchase-search-box>span {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    color: #8fa6d8;
    transform: translateY(-50%);
}

.purchase-search-box input {
    padding-left: 35px;
}

.purchase-filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.purchase-filter-actions .btn {
    min-height: 42px;
    white-space: nowrap;
}

.purchase-quick-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
}

.purchase-quick-filters>span {
    margin-right: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.purchase-quick-filters a {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #a9b7d3;
    background: rgba(255, 255, 255, .02);
    font-size: 10px;
    font-weight: 700;
    transition: .18s ease;
}

.purchase-quick-filters a:hover,
.purchase-quick-filters a.active {
    color: #ffe785;
    border-color: rgba(255, 212, 49, .35);
    background: rgba(255, 212, 49, .09);
}

.purchase-quick-filters a.active.danger {
    color: #fda4af;
    border-color: rgba(251, 113, 133, .35);
    background: rgba(251, 113, 133, .09);
}

.purchase-table-wrap {
    padding: 0 20px 14px;
}

.purchase-table {
    min-width: 1080px;
}

.purchase-table th {
    padding-top: 17px;
    padding-bottom: 13px;
}

.purchase-table td {
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: middle;
}

.purchase-table tr.purchase-row-overdue {
    background: linear-gradient(90deg, rgba(251, 113, 133, .055), transparent 28%);
}

.purchase-number {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.purchase-number:hover,
.purchase-open-link:hover {
    color: var(--yellow);
}

.purchase-destination {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid rgba(115, 140, 191, .17);
    border-radius: 8px;
    color: #cbd7ed;
    background: rgba(84, 110, 160, .08);
    font-size: 10px;
    font-weight: 700;
}

.purchase-progress-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 130px;
    margin-bottom: 7px;
}

.purchase-progress-label span {
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
}

.purchase-progress-label small {
    color: var(--muted);
    font-size: 9px;
}

.purchase-progress {
    width: 130px;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
}

.purchase-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff6a1a, #4adeb3);
    box-shadow: 0 0 12px rgba(74, 222, 179, .25);
}

.purchase-pending-value {
    color: #fbbf24 !important;
}

.purchase-paid-value {
    color: #6ee7b7 !important;
}

.purchase-deadline {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.purchase-deadline.danger {
    color: #fb7185;
}

.purchase-deadline.warning {
    color: #fbbf24;
}

.purchase-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.purchase-status.success {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, .18);
    background: rgba(52, 211, 153, .1);
}

.purchase-status.warning {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, .18);
    background: rgba(251, 191, 36, .1);
}

.purchase-status.danger {
    color: #fda4af;
    border-color: rgba(251, 113, 133, .2);
    background: rgba(251, 113, 133, .1);
}

.purchase-status.info {
    color: #ffc09a;
    border-color: rgba(56, 189, 248, .18);
    background: rgba(56, 189, 248, .09);
}

.purchase-status.primary {
    color: #ffc09a;
    border-color: rgba(139, 92, 246, .2);
    background: rgba(139, 92, 246, .1);
}

.purchase-status.muted {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, .16);
    background: rgba(148, 163, 184, .08);
}

.purchase-open-link {
    display: block;
    margin-top: 9px;
    color: #8fa6d8;
    font-size: 9px;
    font-weight: 700;
}

.purchase-empty strong,
.purchase-empty span {
    display: block;
}

.purchase-empty strong {
    margin-bottom: 5px;
    color: var(--text);
}

.purchase-empty span {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 1350px) {
    .purchase-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .purchase-filters {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .purchase-filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 850px) {
    .purchase-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .purchase-kpi-main {
        grid-column: span 2;
    }

    .purchase-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .purchase-filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 580px) {

    .purchase-kpi-grid,
    .purchase-filters {
        grid-template-columns: 1fr;
    }

    .purchase-kpi-main,
    .purchase-filter-search {
        grid-column: auto;
    }

    .purchase-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .purchase-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ============================================================
   VISÃO GERAL — INTELIGÊNCIA OPERACIONAL
   ============================================================ */

.dashboard-page-head {
    align-items: center;
}

.dashboard-metrics .metric {
    min-height: 122px;
    overflow: hidden;
}

.dashboard-metrics .metric::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -48px;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--purple) 7%, transparent);
}

.dashboard-metrics .metric>* {
    position: relative;
    z-index: 1;
}

.dashboard-card {
    position: relative;
    padding: 22px;
    overflow: hidden;
}

.dashboard-card-kicker {
    display: block;
    margin-bottom: 6px;
    color: #8291ad;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.dashboard-chart-wrap {
    position: relative;
    width: 100%;
    height: 310px;
}

.dashboard-grid .dashboard-chart-wrap {
    height: 300px;
}

.dashboard-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0 15px;
}

.dashboard-section-head h2 {
    margin: 5px 0 3px;
    font-size: 22px;
    letter-spacing: -.55px;
}

.dashboard-section-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.strategic-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(420px, .9fr);
    gap: 17px;
}

.strategic-layout>.panel {
    margin: 0;
}

.strategic-chart-wrap {
    height: 390px;
}

.dashboard-info-pill {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface2);
    font-size: 9px;
    font-weight: 700;
}

.strategic-health-list {
    display: grid;
    gap: 13px;
    max-height: 410px;
    padding-right: 3px;
    overflow-y: auto;
}

.strategic-warehouse {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface2) 72%, transparent);
}

.strategic-warehouse-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 13px;
    border-bottom: 1px solid var(--line);
}

.strategic-warehouse-head strong {
    font-size: 11px;
}

.strategic-warehouse-head small {
    color: var(--muted);
    font-size: 9px;
}

.strategic-items {
    padding: 3px 12px;
}

.strategic-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 49px;
    border-bottom: 1px solid var(--line);
}

.strategic-item:last-child {
    border-bottom: 0;
}

.strategic-color {
    width: 7px;
    height: 26px;
    border-radius: 99px;
    background: var(--material-color);
    box-shadow: 0 0 13px color-mix(in srgb, var(--material-color) 25%, transparent);
}

.strategic-item>div:nth-child(2) {
    min-width: 0;
}

.strategic-item strong,
.strategic-item small {
    display: block;
}

.strategic-item strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.strategic-item small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 8px;
}

.strategic-item-value {
    min-width: 92px;
    text-align: right;
}

.strategic-item-value>strong {
    margin-bottom: 4px;
    font-size: 12px;
}

.dashboard-status {
    display: inline-flex;
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 6.5px;
    font-weight: 900;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.dashboard-status.success {
    color: #16865a;
    border-color: rgba(32, 189, 117, .22);
    background: rgba(32, 189, 117, .1);
}

.dashboard-status.warning {
    color: #967100;
    border-color: rgba(255, 190, 24, .25);
    background: rgba(255, 190, 24, .12);
}

.dashboard-status.danger {
    color: #c73849;
    border-color: rgba(255, 92, 108, .22);
    background: rgba(255, 92, 108, .1);
}

.dashboard-status.muted {
    color: var(--muted);
    border-color: var(--line);
    background: var(--surface2);
}

[data-theme=dark] .dashboard-status.success {
    color: #6ee7b7;
}

[data-theme=dark] .dashboard-status.warning {
    color: #fbbf24;
}

[data-theme=dark] .dashboard-status.danger {
    color: #fda4af;
}

.supplier-section-head {
    align-items: center;
}

.supplier-summary {
    min-width: 210px;
    padding: 12px 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-align: right;
}

.supplier-summary span,
.supplier-summary strong {
    display: block;
}

.supplier-summary span {
    color: var(--muted);
    font-size: 9px;
}

.supplier-summary strong {
    margin-top: 4px;
    font-size: 16px;
}

.supplier-chart-wrap {
    height: 330px;
}

/* Painel analítico de fornecedores */
.supplier-chart-card {
    overflow: visible;
}

.supplier-panel-head {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

.dashboard-info-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #20bd75;
    box-shadow: 0 0 0 4px rgba(32, 189, 117, .12);
}

.supplier-control-deck {
    position: relative;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface2) 74%, transparent);
}

.supplier-period-control {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.supplier-period-control>span {
    padding: 0 8px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
}

.supplier-period-control button {
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: 700 10px Manrope, sans-serif;
    cursor: pointer;
    transition: .18s ease;
}

.supplier-period-control button:hover {
    color: var(--text);
    background: var(--surface2);
}

.supplier-period-control button.active {
    color: #171b27;
    background: var(--yellow);
    box-shadow: 0 7px 18px rgba(255, 212, 49, .2);
}

.supplier-filter-shell {
    position: relative;
    width: min(330px, 100%);
}

.supplier-filter-trigger {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 8px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
}

.supplier-filter-trigger:hover,
.supplier-filter-shell.open .supplier-filter-trigger {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 12%, transparent);
}

.supplier-filter-trigger span,
.supplier-filter-trigger small,
.supplier-filter-trigger strong {
    display: block;
}

.supplier-filter-trigger small {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .14em;
}

.supplier-filter-trigger strong {
    font-size: 11px;
}

.supplier-filter-trigger i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--purple) 10%, transparent);
    color: var(--purple);
    font-style: normal;
}

.supplier-filter-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 100%;
    display: none;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface);
    box-shadow: 0 24px 70px rgba(5, 12, 28, .32);
}

.supplier-filter-shell.open .supplier-filter-popover {
    display: block;
    animation: supplierPopover .16s ease both;
}

@keyframes supplierPopover {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(.99)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.supplier-filter-search {
    height: 39px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface2);
}

.supplier-filter-search span {
    color: var(--purple);
}

.supplier-filter-search input {
    min-width: 0;
    flex: 1;
    border: 0 !important;
    background: transparent !important;
    color: var(--text) !important;
    outline: 0;
    font: 600 10px Manrope, sans-serif;
}

.supplier-filter-actions {
    display: flex;
    gap: 5px;
    padding: 8px 0;
}

.supplier-filter-actions button {
    flex: 1;
    min-height: 29px;
    padding: 0 6px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font: 700 8px Manrope, sans-serif;
    cursor: pointer;
}

.supplier-filter-actions button:hover {
    color: var(--text);
    border-color: var(--purple);
}

.supplier-filter-list {
    max-height: 260px;
    overflow: auto;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: var(--purple) transparent;
}

.supplier-filter-option {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 3px 0;
    padding: 9px;
    border-radius: 9px;
    cursor: pointer;
    transition: .15s ease;
}

.supplier-filter-option:hover {
    background: var(--surface2);
}

.supplier-filter-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.supplier-check {
    --supplier-color: var(--purple);
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: transparent;
    font-size: 10px;
}

.supplier-filter-option input:checked+.supplier-check {
    border-color: var(--supplier-color);
    background: var(--supplier-color);
    color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--supplier-color) 13%, transparent);
}

.supplier-filter-option>span:last-child {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.supplier-filter-option strong {
    overflow: hidden;
    color: var(--text);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-filter-option small {
    color: var(--muted);
    font-size: 8px;
    white-space: nowrap;
}

.supplier-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 9px 3px 0;
    border-top: 1px solid var(--line);
}

.supplier-filter-footer span {
    color: var(--muted);
    font-size: 8px;
}

.supplier-filter-footer button {
    padding: 7px 11px;
    border: 0;
    border-radius: 7px;
    background: var(--yellow);
    color: #171b27;
    font: 800 9px Manrope, sans-serif;
    cursor: pointer;
}

.supplier-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 16px 22px 5px;
}

.supplier-kpi {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface2) 72%, var(--surface)));
}

.supplier-kpi.hero {
    border-color: color-mix(in srgb, var(--yellow) 44%, var(--line));
}

.supplier-kpi-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: var(--yellow);
    color: #171b27;
    font-size: 11px;
    font-weight: 800;
}

.supplier-kpi-icon.violet {
    background: rgba(255, 90, 10, .14);
    color: #ff8a3d;
}

.supplier-kpi-icon.cyan {
    background: rgba(255, 138, 61, .13);
    color: #ff8a3d;
}

.supplier-kpi-icon.green {
    background: rgba(32, 189, 117, .13);
    color: #20bd75;
}

.supplier-kpi div {
    min-width: 0;
}

.supplier-kpi small,
.supplier-kpi strong,
.supplier-kpi em {
    display: block;
}

.supplier-kpi small {
    color: var(--muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .09em;
}

.supplier-kpi strong {
    overflow: hidden;
    margin: 3px 0;
    color: var(--text);
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-kpi em {
    color: var(--muted);
    font-size: 8px;
    font-style: normal;
}

.supplier-insight-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 14px;
    padding: 12px 22px 22px;
}

.supplier-chart-stage,
.supplier-ranking {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface2) 52%, var(--surface));
}

.supplier-chart-title,
.supplier-ranking-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.supplier-chart-title small,
.supplier-chart-title strong,
.supplier-ranking-head small,
.supplier-ranking-head strong {
    display: block;
}

.supplier-chart-title small,
.supplier-ranking-head small {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
}

.supplier-chart-title strong,
.supplier-ranking-head strong {
    font-size: 11px;
}

.supplier-chart-title>span,
.supplier-ranking-head>span {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 8px;
    white-space: nowrap;
}

.supplier-chart-stage .supplier-chart-wrap {
    height: 320px;
    padding: 12px 10px 5px;
}

.supplier-ranking-list {
    max-height: 345px;
    overflow: auto;
    padding: 7px 12px 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--purple) transparent;
}

.supplier-rank-item {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
}

.supplier-rank-item>b {
    color: var(--muted);
    font-size: 9px;
}

.supplier-rank-item>div,
.supplier-rank-item span {
    min-width: 0;
}

.supplier-rank-item span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.supplier-rank-item strong {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.supplier-rank-item em {
    color: var(--text);
    font-size: 8px;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.supplier-rank-item i {
    height: 4px;
    display: block;
    margin: 6px 0 4px;
    border-radius: 99px;
    background: var(--line);
    overflow: hidden;
}

.supplier-rank-item u {
    height: 100%;
    display: block;
    border-radius: 99px;
    text-decoration: none;
}

.supplier-rank-item small {
    color: var(--muted);
    font-size: 7px;
}

.supplier-ranking-empty {
    padding: 35px 10px;
    color: var(--muted);
    font-size: 9px;
    text-align: center;
}

[data-theme=light] .supplier-filter-popover {
    box-shadow: 0 24px 70px rgba(27, 42, 70, .17);
}

[data-theme=light] .supplier-kpi,
[data-theme=light] .supplier-chart-stage,
[data-theme=light] .supplier-ranking {
    box-shadow: 0 10px 25px rgba(29, 43, 71, .035);
}

@media(max-width:1180px) {
    .supplier-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .supplier-insight-layout {
        grid-template-columns: 1fr
    }

    .supplier-ranking-list {
        max-height: 270px
    }
}

@media(max-width:760px) {
    .supplier-control-deck {
        align-items: stretch;
        flex-direction: column
    }

    .supplier-filter-shell {
        width: 100%
    }

    .supplier-period-control {
        justify-content: center
    }

    .supplier-kpi-grid {
        grid-template-columns: 1fr
    }

    .supplier-insight-layout,
    .supplier-kpi-grid,
    .supplier-control-deck {
        padding-left: 14px;
        padding-right: 14px
    }

    .supplier-filter-popover {
        position: fixed;
        z-index: 1000;
        top: 50%;
        left: 14px;
        right: 14px;
        width: auto;
        transform: translateY(-50%)
    }

    .supplier-filter-shell.open .supplier-filter-popover {
        animation: none
    }
}

.dashboard-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    min-height: 260px;
    padding: 30px;
    border: 1px dashed color-mix(in srgb, var(--line) 86%, var(--purple));
    border-radius: 15px;
    background:
        radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--purple) 7%, transparent), transparent 42%),
        var(--surface2);
    text-align: center;
}

.dashboard-empty.compact {
    min-height: 270px;
}

.dashboard-empty-icon {
    display: grid;
    place-items: center;
    min-width: 48px;
    height: 48px;
    margin-bottom: 13px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, var(--purple) 26%, var(--line));
    border-radius: 14px;
    color: var(--purple);
    background: color-mix(in srgb, var(--purple) 8%, var(--surface));
    font-size: 11px;
    font-weight: 900;
}

.dashboard-empty strong {
    font-size: 15px;
}

.dashboard-empty small,
.dashboard-empty p {
    max-width: 580px;
    margin: 7px 0 15px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
}

.recent-movements {
    margin-top: 17px;
}

/* ============================================================
   TEMA CLARO — CONTRASTE E LEGIBILIDADE
   ============================================================ */

[data-theme=light] {
    --bg: #f3f6fb;
    --surface: #ffffff;
    --surface2: #f6f8fc;
    --text: #142038;
    --muted: #66748d;
    --line: #dce4ef;
    --shadow: 0 12px 34px rgba(33, 53, 86, .075);
}

[data-theme=light] body {
    background:
        radial-gradient(circle at 76% -10%, rgba(255, 90, 10, .055), transparent 30%),
        var(--bg);
}

[data-theme=light] .topbar {
    background: rgba(255, 255, 255, .92);
}

[data-theme=light] .metric.hero {
    color: var(--text);
    border: 1px solid rgba(255, 196, 0, .36);
    background:
        radial-gradient(circle at 93% 18%, rgba(255, 212, 49, .18), transparent 31%),
        linear-gradient(145deg, #fffdf5, #ffffff);
}

[data-theme=light] .metric.hero span {
    color: var(--muted);
}

[data-theme=light] .purchase-kpi,
[data-theme=light] .operation-kpi {
    border-color: var(--line);
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 90, 10, .06), transparent 35%),
        linear-gradient(145deg, #ffffff, #f8faff);
    box-shadow: var(--shadow);
}

[data-theme=light] .purchase-kpi-main,
[data-theme=light] .operation-kpi-main {
    border-color: rgba(255, 190, 0, .4);
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 212, 49, .13), transparent 38%),
        linear-gradient(145deg, #fffef8, #ffffff);
}

[data-theme=light] .purchase-kpi strong,
[data-theme=light] .operation-kpi strong {
    color: var(--text);
}

[data-theme=light] .purchase-filters,
[data-theme=light] .operation-filters {
    background: linear-gradient(180deg, #f7f9fd, #f2f5fa);
}

/* =====================================================
   SUPPLY PRO 4.0 — FLUXO, LOTES E MICROINTERAÇÕES
   ===================================================== */

@keyframes pageReveal {
    from {
        opacity: 0;
        transform: translateY(7px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content>* {
    animation: pageReveal .28s cubic-bezier(.2, .8, .2, 1) both;
}

.content>*:nth-child(2) {
    animation-delay: .035s;
}

.content>*:nth-child(3) {
    animation-delay: .07s;
}

.btn,
.panel,
.operation-kpi,
.metric {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}

.btn:not(:disabled):hover {
    transform: translateY(-1px);
}

.btn.is-processing {
    pointer-events: none;
    opacity: .72;
}

.btn.danger {
    color: #fff;
    border-color: #e84258;
    background: linear-gradient(135deg, #ef4760, #c72842);
    box-shadow: 0 10px 25px rgba(239, 71, 96, .2);
}

.movement-batch-toolbar {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(260px, 380px) auto;
    align-items: center;
    gap: 12px;
    margin: 0 20px 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 90, 10, .24);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 90, 10, .1), rgba(255, 138, 61, .04));
}

.movement-batch-toolbar strong,
.movement-batch-toolbar small {
    display: block;
}

.movement-batch-toolbar small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
}

.batch-check {
    width: 34px;
    text-align: center !important;
}

.batch-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--yellow);
    cursor: pointer;
}

.stock-origin-notice {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 12px;
    padding: 12px 14px;
    border: 1px dashed rgba(115, 140, 191, .3);
    border-radius: 12px;
    background: rgba(115, 140, 191, .06);
    color: var(--muted);
}

.stock-origin-notice>span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--surface2);
    font-size: 15px;
}

.stock-origin-notice strong,
.stock-origin-notice small {
    display: block;
}

.stock-origin-notice strong {
    color: var(--text);
    font-size: 11px;
}

.stock-origin-notice small {
    margin-top: 2px;
    font-size: 9px;
}

.stock-origin-notice.ready {
    border-color: rgba(32, 189, 117, .32);
    background: rgba(32, 189, 117, .07);
}

.stock-origin-notice.ready>span {
    color: #43d69a;
    background: rgba(32, 189, 117, .12);
}

.material-result-header {
    justify-content: flex-end;
}

.material-result-code {
    display: none;
}

.material-result-stock,
.material-stock-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.material-result-stock span,
.material-stock-summary span {
    padding: 5px 7px;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--muted);
    background: var(--surface2);
    font-size: 8px;
}

.material-result-stock b,
.material-stock-summary b {
    color: var(--text);
}

.material-result-stock span:last-child,
.material-stock-summary .available {
    color: #44d79b;
    border-color: rgba(32, 189, 117, .25);
    background: rgba(32, 189, 117, .08);
}

.material-result-stock.stock-empty span:last-child,
.material-stock-summary.stock-empty .available {
    color: #ff8392;
    border-color: rgba(239, 71, 96, .3);
    background: rgba(239, 71, 96, .08);
}

.material-unavailable {
    opacity: .72;
}

.movement-item-line.stock-overflow {
    padding: 7px;
    border: 1px solid rgba(239, 71, 96, .45);
    border-radius: 12px;
    background: rgba(239, 71, 96, .06);
}

.movement-item-line.stock-overflow input[name="quantity[]"] {
    border-color: #ef4760;
    box-shadow: 0 0 0 3px rgba(239, 71, 96, .1);
}

.movement-detail-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.movement-info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.movement-info-grid article {
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.movement-info-grid span,
.movement-info-grid strong {
    display: block;
}

.movement-info-grid span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.movement-info-grid strong {
    margin-top: 6px;
    font-size: 11px;
}

.movement-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 16px;
    padding: 18px;
    border-color: rgba(239, 71, 96, .22);
    background: linear-gradient(135deg, rgba(239, 71, 96, .06), var(--surface));
}

.movement-danger-zone h3 {
    margin: 4px 0;
}

.movement-danger-zone p {
    margin: 0;
    color: var(--muted);
    font-size: 10px;
}

.movement-danger-zone form {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: min(520px, 50%);
}

.movement-danger-zone input {
    flex: 1;
}

.stepper.cancelled {
    opacity: .58;
    filter: grayscale(.45);
}

.movement-edit-card {
    padding: 22px;
}

.category-value-card {
    position: relative;
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
}

.category-filter-panel {
    grid-row: span 2;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface2);
}

.category-filter-panel strong,
.category-filter-panel small {
    display: block;
}

.category-filter-panel small {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
}

.category-filter-actions {
    display: flex;
    gap: 7px;
    margin: 13px 0;
}

.category-filter-actions button {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: var(--surface);
    font: 700 8px Manrope;
    cursor: pointer;
}

.category-filter-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 270px;
    overflow: auto;
}

.category-filter-list label {
    cursor: pointer;
}

.category-filter-list input {
    position: absolute;
    opacity: 0;
}

.category-filter-list span {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
}

.category-filter-list span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 3px;
    background: var(--category-color);
    box-shadow: 0 0 10px color-mix(in srgb, var(--category-color) 45%, transparent);
}

.category-filter-list input:checked+span {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface);
}

.category-value-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
}

.category-value-summary span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.category-value-summary strong {
    font-size: 20px;
}

.category-value-chart-wrap {
    height: 330px;
}

/* Painel de materiais entregues aos suportes */
.delivery-section-head {
    margin-top: 34px;
}

.delivery-summary {
    min-width: 230px;
    padding: 13px 17px;
    border: 1px solid color-mix(in srgb, var(--yellow) 48%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--yellow) 9%, var(--surface));
    text-align: right;
}

.delivery-summary span,
.delivery-summary strong {
    display: block;
}

.delivery-summary span {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.delivery-summary strong {
    margin-top: 4px;
    font-size: 18px;
}

.delivery-card {
    overflow: visible;
}

.delivery-filters {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto repeat(3, minmax(170px, 1fr));
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface2) 72%, transparent);
}

.delivery-period {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
}

.delivery-period>span {
    padding: 0 7px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em;
}

.delivery-period button {
    height: 35px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font: 700 9px Manrope, sans-serif;
    cursor: pointer;
}

.delivery-period button.active {
    background: var(--yellow);
    color: #171b27;
    box-shadow: 0 7px 18px rgba(255, 212, 49, .2);
}

.delivery-filters label>span {
    display: block;
    margin: 0 0 5px 3px;
    color: var(--muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .12em;
}

.delivery-filters select {
    width: 100%;
    height: 45px;
    padding: 0 11px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface);
    color: var(--text);
    font: 700 9px Manrope, sans-serif;
    outline: none;
}

.delivery-filters select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 12%, transparent);
}

.delivery-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 17px 22px 5px;
}

.delivery-kpi {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface2) 72%, var(--surface)));
}

.delivery-kpi.hero {
    border-color: color-mix(in srgb, var(--yellow) 44%, var(--line));
}

.delivery-kpi>span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    background: var(--yellow);
    color: #171b27;
    font-size: 11px;
    font-weight: 800;
}

.delivery-kpi>span.purple {
    background: rgba(255, 90, 10, .14);
    color: #ff8a3d;
}

.delivery-kpi>span.cyan {
    background: rgba(255, 138, 61, .13);
    color: #ff8a3d;
}

.delivery-kpi>span.green {
    background: rgba(32, 189, 117, .13);
    color: #20bd75;
}

.delivery-kpi div {
    min-width: 0;
}

.delivery-kpi small,
.delivery-kpi strong,
.delivery-kpi em {
    display: block;
}

.delivery-kpi small {
    color: var(--muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .09em;
}

.delivery-kpi strong {
    overflow: hidden;
    margin: 3px 0;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delivery-kpi em {
    overflow: hidden;
    color: var(--muted);
    font-size: 8px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delivery-insights {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .7fr);
    gap: 14px;
    padding: 12px 22px;
}

.delivery-chart-stage,
.delivery-ranking {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface2) 52%, var(--surface));
}

.delivery-chart-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.delivery-chart-title small,
.delivery-chart-title strong {
    display: block;
}

.delivery-chart-title small {
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .13em;
}

.delivery-chart-title strong {
    font-size: 11px;
}

.delivery-chart-title>span {
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 8px;
    white-space: nowrap;
}

.delivery-month-chart,
.delivery-donut-chart {
    height: 330px;
    padding: 13px 10px 6px;
}

.delivery-donut-chart {
    padding-left: 18px;
    padding-right: 18px;
}

.delivery-ranking {
    margin: 0 22px 22px;
}

.delivery-material-ranking {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    padding: 8px 16px 14px;
}

.delivery-material-ranking>div {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
}

.delivery-material-ranking b {
    color: var(--muted);
    font-size: 9px;
}

.delivery-material-ranking span {
    min-width: 0;
}

.delivery-material-ranking strong,
.delivery-material-ranking small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delivery-material-ranking strong {
    font-size: 9px;
}

.delivery-material-ranking small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 7px;
}

.delivery-material-ranking i {
    height: 4px;
    display: block;
    margin-top: 6px;
    border-radius: 99px;
    background: var(--line);
    overflow: hidden;
}

.delivery-material-ranking u {
    height: 100%;
    display: block;
    border-radius: 99px;
    text-decoration: none;
}

.delivery-material-ranking em {
    color: var(--text);
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap;
}

.delivery-empty {
    grid-column: 1/-1;
    padding: 25px;
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}

@media(max-width:1180px) {
    .delivery-filters {
        grid-template-columns: 1fr 1fr
    }

    .delivery-period {
        justify-content: center
    }

    .delivery-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .delivery-insights {
        grid-template-columns: 1fr
    }

    .delivery-donut-chart {
        height: 300px
    }
}

@media(max-width:760px) {
    .delivery-summary {
        width: 100%;
        text-align: left
    }

    .delivery-filters,
    .delivery-kpis {
        grid-template-columns: 1fr
    }

    .delivery-filters,
    .delivery-kpis,
    .delivery-insights {
        padding-left: 14px;
        padding-right: 14px
    }

    .delivery-period {
        flex-wrap: wrap
    }

    .delivery-ranking {
        margin-left: 14px;
        margin-right: 14px
    }

    .delivery-material-ranking {
        grid-template-columns: 1fr
    }

    .delivery-month-chart {
        height: 290px
    }
}

@media(max-width:900px) {
    .movement-batch-toolbar {
        grid-template-columns: 1fr;
    }

    .movement-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .movement-danger-zone,
    .movement-danger-zone form {
        align-items: stretch;
        flex-direction: column;
        min-width: 0;
        width: 100%;
    }

    .category-value-card {
        grid-template-columns: 1fr;
    }

    .category-filter-panel {
        grid-row: auto
    }

    .category-filter-list {
        max-height: 180px;
    }
}

@media(max-width:560px) {
    .movement-info-grid {
        grid-template-columns: 1fr
    }

    .movement-detail-actions {
        justify-content: flex-start
    }
}

[data-theme=light] .movement-batch-toolbar {
    background: linear-gradient(135deg, #fff6f0, #f4fbfd);
}

[data-theme=light] .stock-origin-notice {
    background: #f6f8fc;
}

[data-theme=light] .stock-origin-notice.ready {
    background: #eefbf5;
}

[data-theme=light] .purchase-result-count,
[data-theme=light] .operation-result-count,
[data-theme=light] .purchase-quick-filters a,
[data-theme=light] .operation-quick-filters a {
    background: #ffffff;
}

[data-theme=light] .purchase-table tr.purchase-row-overdue,
[data-theme=light] .operation-table tr.operation-row-alert {
    background: linear-gradient(90deg, rgba(251, 113, 133, .07), transparent 30%);
}

[data-theme=light] .purchase-destination,
[data-theme=light] .operation-destination {
    color: #415374;
    border-color: #dce5f1;
    background: #f4f7fb;
}

[data-theme=light] .purchase-progress,
[data-theme=light] .operation-progress,
[data-theme=light] .stock-availability {
    background: #e7edf5;
}

[data-theme=light] .purchase-status.primary,
[data-theme=light] .operation-status.primary {
    color: #e94a00;
}

[data-theme=light] .purchase-status.info,
[data-theme=light] .operation-status.info {
    color: #d94a06;
}

[data-theme=light] .movement-route span {
    color: #34435f;
}

[data-theme=light] dialog::backdrop {
    background: rgba(13, 24, 44, .42);
}

[data-theme=light] .modal-card {
    box-shadow: 0 24px 80px rgba(25, 43, 75, .2);
}

@media (max-width: 1250px) {
    .strategic-layout {
        grid-template-columns: 1fr;
    }

    .strategic-health-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-height: none;
    }
}

@media (max-width: 900px) {
    .strategic-health-list {
        grid-template-columns: 1fr;
    }

    .dashboard-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .supplier-summary {
        width: 100%;
        text-align: left;
    }
}

/* Central Regional — memória do abastecimento já encaminhado */
.regional-need-stack {
    display: grid;
    gap: 4px;
    min-width: 110px;
}

.regional-coverage-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 190px;
}

.regional-coverage-chips .action-chip {
    white-space: nowrap;
}

/* =========================================================
   FATURAMENTO MULTINOTAS • SUPPLY ORANGE 6.3
   ========================================================= */
* { scrollbar-color: #ff5a0a transparent !important; }
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner,
select::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb,
select::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff3500, #ff8a00) padding-box !important;
    border-color: transparent !important;
}

.purchase-detail-head { align-items: end; }
.purchase-head-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.fiscal-status,
.purchase-fiscal-label {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid color-mix(in srgb, #ff5a0a 42%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, #ff5a0a 9%, var(--surface));
    color: #ff6a12;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
}
.purchase-fiscal-label { margin-top: 7px; padding: 5px 8px; }
.purchase-detail-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.purchase-detail-kpis article {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 5px;
    padding: 19px 20px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, #ff5a0a);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.purchase-detail-kpis article::after {
    content: "";
    position: absolute;
    right: -25px;
    bottom: -50px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: color-mix(in srgb, #ff5a0a 9%, transparent);
}
.purchase-detail-kpis span,
.purchase-detail-kpis small { color: var(--muted); font-size: 9px; font-weight: 800; }
.purchase-detail-kpis strong { color: var(--text); font-size: 20px; }
.purchase-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .28fr); }
.purchase-detail-table th { color: #ff6a12; }
.quantity-pill { display: inline-flex; min-width: 54px; justify-content: center; padding: 6px 8px; border-radius: 9px; font-weight: 900; }
.quantity-pill.received { background: color-mix(in srgb, #ff8a00 12%, var(--surface2)); color: #ff7a00; }
.quantity-pill.invoiced { background: color-mix(in srgb, #ff4b00 11%, var(--surface2)); color: #ff5a0a; }
.invoice-pending { color: #ff6a12; }
.purchase-data-card dl { margin-bottom: 0; }
.purchase-notes { margin-top: 18px; padding: 14px; border-radius: 12px; background: color-mix(in srgb, #ff5a0a 6%, var(--surface2)); }
.purchase-notes span { color: #ff5a0a; font-size: 8px; font-weight: 900; letter-spacing: .12em; }
.purchase-notes p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.invoice-center { margin-top: 16px; }
.invoice-center-head { align-items: center; }
.invoice-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 12px; padding: 18px; }
.invoice-card {
    display: grid;
    gap: 13px;
    padding: 17px;
    border: 1px solid color-mix(in srgb, var(--line) 72%, #ff5a0a);
    border-radius: 15px;
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, #ff5a0a 4%, var(--surface)));
}
.invoice-card-top { display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center; }
.invoice-card-top > span,
.invoice-empty > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #ff3500, #ff8a00); color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 8px 18px rgba(255, 76, 0, .22); }
.invoice-card-top div { display: grid; gap: 2px; }
.invoice-card-top div strong { font-size: 15px; }
.invoice-card-top div small { color: var(--muted); font-size: 9px; }
.invoice-card-top > b { color: #ff5a0a; font-size: 13px; }
.invoice-key { display: grid; gap: 5px; padding: 10px 12px; border-radius: 10px; background: var(--surface2); }
.invoice-key span { color: var(--muted); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.invoice-key code { overflow-wrap: anywhere; color: var(--text); font: 700 9px Manrope, sans-serif; }
.invoice-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.invoice-card li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.invoice-card li strong { flex: none; color: var(--text); }
.invoice-note { margin: 0; color: var(--muted); font-size: 10px; font-style: italic; }
.invoice-actions { display: flex; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.invoice-actions form { margin: 0; }
.btn.small { min-height: 31px; padding: 7px 10px; font-size: 9px; }
.btn.danger { color: #ff5a0a; }
.invoice-empty { display: flex; align-items: center; gap: 14px; margin: 18px; padding: 22px; border: 1px dashed color-mix(in srgb, #ff5a0a 45%, var(--line)); border-radius: 15px; background: color-mix(in srgb, #ff5a0a 4%, var(--surface)); }
.invoice-empty strong { display: block; color: var(--text); }
.invoice-empty p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.invoice-form { display: grid; gap: 17px; }
.invoice-identification .span-2 { grid-column: span 2; }
.invoice-items-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.invoice-items-head div { display: grid; gap: 3px; }
.invoice-items-head small,
.invoice-items-head > span { color: var(--muted); font-size: 9px; font-weight: 700; }
.invoice-item-list { display: grid; max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: 13px; background: var(--surface2); }
.invoice-item-row { display: grid !important; grid-template-columns: minmax(0, 1fr) 120px 125px; gap: 14px !important; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.invoice-item-row:last-child { border-bottom: 0; }
.invoice-item-row > span { display: grid; gap: 3px; min-width: 0; }
.invoice-item-row > span strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 10px; }
.invoice-item-row > span small { color: var(--muted); font-size: 8px; }
.invoice-item-row > b { color: #ff6a12; font-size: 9px; text-align: right; }
.invoice-item-row input { width: 100%; min-width: 0; text-align: right; }
.invoice-edit-panel { max-width: 1050px; margin-inline: auto; padding: 22px; }

@media (max-width: 980px) {
    .purchase-detail-kpis { grid-template-columns: 1fr; }
    .purchase-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    .invoice-identification .span-2 { grid-column: auto; }
    .invoice-item-row { grid-template-columns: 1fr 1fr; }
    .invoice-item-row > span { grid-column: 1 / -1; }
}

/* =========================================================
   SUPPLY ORANGE 6.1 — TEMA UNIFICADO
   Claro: branco + laranja | Escuro: preto + laranja
   ========================================================= */
:root,
[data-theme="light"] {
    --bg: #ffffff;
    --surface: #ffffff;
    --surface2: #fffaf7;
    --text: #191715;
    --muted: #746c67;
    --line: #eadfd8;
    --nav: #ffffff;
    --yellow: #ff6500;
    --purple: #ff5a0a;
    --cyan: #ff8a3d;
    --green: #f06a16;
    --shadow: 0 14px 38px rgba(64, 35, 18, .08);
}

[data-theme="dark"] {
    --bg: #070707;
    --surface: #101010;
    --surface2: #171311;
    --text: #ffffff;
    --muted: #aaa19b;
    --line: #35251d;
    --nav: #050505;
    --yellow: #ff6500;
    --purple: #ff5a0a;
    --cyan: #ff8a3d;
    --green: #f06a16;
    --shadow: 0 18px 52px rgba(0, 0, 0, .40);
}

[data-theme="light"] body,
[data-theme="light"] .content {
    background: #ffffff !important;
    color: #191715 !important;
}

[data-theme="dark"] body,
[data-theme="dark"] .content {
    background:
        radial-gradient(circle at 94% 2%, rgba(255, 85, 0, .09), transparent 27%),
        #070707 !important;
    color: #ffffff !important;
}

[data-theme="light"] .sidebar {
    background: #ffffff !important;
    border-right: 1px solid #eee2dc !important;
    box-shadow: 12px 0 36px rgba(70, 38, 20, .06) !important;
}

[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #050505, #0a0807 72%, #170a04) !important;
    border-right: 1px solid #3b1d0e !important;
    box-shadow: 14px 0 42px rgba(0, 0, 0, .42) !important;
}

[data-theme="light"] .brand strong,
[data-theme="light"] .sidebar-foot strong { color: #171411 !important; }
[data-theme="dark"] .brand strong,
[data-theme="dark"] .sidebar-foot strong { color: #ffffff !important; }

[data-theme="light"] .brand small,
[data-theme="light"] .sidebar nav p,
[data-theme="light"] .developer-signature > span { color: #e94a00 !important; }

[data-theme="dark"] .brand small,
[data-theme="dark"] .sidebar nav p,
[data-theme="dark"] .developer-signature > span { color: #ff7a26 !important; }

[data-theme="light"] .sidebar nav a { color: #665d57 !important; }
[data-theme="dark"] .sidebar nav a { color: #bdb4ae !important; }

[data-theme="light"] .sidebar nav a:hover {
    color: #e94a00 !important;
    border-color: #ffd7bf !important;
    background: #fff5ee !important;
}

[data-theme="dark"] .sidebar nav a:hover {
    color: #ffffff !important;
    border-color: #5c2a12 !important;
    background: #1d0e07 !important;
}

.sidebar nav a.active {
    color: #ffffff !important;
    border-color: #ff6a1a !important;
    background: linear-gradient(135deg, #f04400, #ff7900) !important;
    box-shadow: 0 10px 28px rgba(255, 77, 0, .28) !important;
}

[data-theme="light"] .sidebar-foot {
    border-color: #eadfd8 !important;
    background: #ffffff !important;
}

[data-theme="dark"] .sidebar-foot {
    border-color: #382319 !important;
    background: #080706 !important;
}

[data-theme="light"] .developer-signature {
    border-color: #f0d7c8 !important;
    background: #fff9f5 !important;
    color: #746c67 !important;
    box-shadow: 0 10px 28px rgba(83, 39, 14, .07) !important;
}

[data-theme="dark"] .developer-signature {
    border-color: #492617 !important;
    background: #160d09 !important;
    color: #aaa19b !important;
    box-shadow: none !important;
}

[data-theme="light"] .developer-signature strong { color: #211b17 !important; }
[data-theme="dark"] .developer-signature strong { color: #ffffff !important; }

[data-theme="light"] .topbar {
    background: #ffffff !important;
    border-color: #eadfd8 !important;
}

[data-theme="dark"] .topbar {
    background: #0a0a0a !important;
    border-color: #342118 !important;
}

[data-theme="light"] .search,
[data-theme="light"] .icon-button {
    border-color: #eadfd8 !important;
    background: #ffffff !important;
    color: #312a26 !important;
}

[data-theme="dark"] .search,
[data-theme="dark"] .icon-button {
    border-color: #39271e !important;
    background: #111111 !important;
    color: #ffffff !important;
}

[data-theme="light"] .panel,
[data-theme="light"] .metric,
[data-theme="light"] .purchase-kpi,
[data-theme="light"] .operation-kpi,
[data-theme="light"] .stock-kpi,
[data-theme="light"] .operation-table-wrap,
[data-theme="light"] .modal-card {
    border-color: #eadfd8 !important;
    background: #ffffff !important;
    color: #191715 !important;
    box-shadow: 0 14px 38px rgba(64, 35, 18, .07) !important;
}

[data-theme="dark"] .panel,
[data-theme="dark"] .metric,
[data-theme="dark"] .purchase-kpi,
[data-theme="dark"] .operation-kpi,
[data-theme="dark"] .stock-kpi,
[data-theme="dark"] .operation-table-wrap,
[data-theme="dark"] .modal-card {
    border-color: #3b251a !important;
    background: #101010 !important;
    color: #ffffff !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28) !important;
}

.purchase-kpi::after,
.operation-kpi::after,
.stock-kpi::after,
.plan-kpi::after {
    background: rgba(255, 90, 10, .10) !important;
}

[data-theme="light"] .purchase-kpi-main,
[data-theme="light"] .operation-kpi-main,
[data-theme="light"] .metric.hero {
    border-color: #ff9b60 !important;
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 111, 24, .16), transparent 40%),
        linear-gradient(145deg, #fff8f3, #ffffff) !important;
    color: #191715 !important;
}

[data-theme="dark"] .purchase-kpi-main,
[data-theme="dark"] .operation-kpi-main,
[data-theme="dark"] .metric.hero {
    border-color: #b9400a !important;
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 91, 10, .28), transparent 42%),
        linear-gradient(145deg, #120b08, #251006) !important;
    color: #ffffff !important;
}

.purchase-kpi-icon,
.operation-kpi-icon,
.stock-kpi-icon,
.plan-kpi > i {
    border-color: rgba(255, 90, 10, .35) !important;
    background: rgba(255, 90, 10, .12) !important;
    color: #ff5a0a !important;
}

.purchase-kpi-main .purchase-kpi-icon,
.operation-kpi-main .operation-kpi-icon {
    background: linear-gradient(135deg, #ff4b00, #ff8a00) !important;
    color: #ffffff !important;
}

[data-theme="light"] .purchase-filters,
[data-theme="light"] .operation-filters,
[data-theme="light"] .stock-filters,
[data-theme="light"] .movement-batch-toolbar,
[data-theme="light"] .regional-toolbar {
    border-color: #eadfd8 !important;
    background: #fffaf7 !important;
}

[data-theme="dark"] .purchase-filters,
[data-theme="dark"] .operation-filters,
[data-theme="dark"] .stock-filters,
[data-theme="dark"] .movement-batch-toolbar,
[data-theme="dark"] .regional-toolbar {
    border-color: #39251b !important;
    background: #15110f !important;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .supply-select-trigger,
[data-theme="light"] .supply-select-menu,
[data-theme="light"] .material-search-control,
[data-theme="light"] .branch-search-control {
    border-color: #e4d7cf !important;
    background: #ffffff !important;
    color: #191715 !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .supply-select-trigger,
[data-theme="dark"] .supply-select-menu,
[data-theme="dark"] .material-search-control,
[data-theme="dark"] .branch-search-control {
    border-color: #3d2c23 !important;
    background: #0d0d0d !important;
    color: #ffffff !important;
}

input:focus,
select:focus,
textarea:focus,
.supply-select.is-open .supply-select-trigger,
.material-search-control:focus-within,
.branch-search-control:focus-within {
    border-color: #ff5a0a !important;
    box-shadow: 0 0 0 3px rgba(255, 90, 10, .14) !important;
}

.supply-select-trigger::after,
.branch-search-arrow,
.material-search-arrow,
.purchase-filter-actions + span,
.operation-filter-actions + span {
    color: #ff5a0a !important;
}

.supply-select-option:hover,
.supply-select-option.is-selected,
.material-result:hover,
.branch-result:hover {
    background: rgba(255, 90, 10, .11) !important;
    color: #ff5a0a !important;
}

.purchase-quick-filters a.active,
.operation-quick-filters a.active,
.stock-quick-filters a.active,
.badge.primary,
.purchase-status.primary,
.operation-status.primary {
    border-color: #ff7a26 !important;
    background: rgba(255, 90, 10, .12) !important;
    color: #ff5a0a !important;
}

.purchase-progress,
.operation-progress,
.stock-availability {
    background: rgba(255, 90, 10, .12) !important;
}

.purchase-progress > span,
.operation-progress > span,
.stock-availability > span,
.progress > span,
.progress-bar > span {
    background: linear-gradient(90deg, #ff3d00, #ff8a00) !important;
}

.movement-batch-toolbar {
    border-color: rgba(255, 90, 10, .34) !important;
    box-shadow: inset 4px 0 #ff5a0a !important;
}

.batch-check input[type="checkbox"],
.movement-select,
input[type="checkbox"],
input[type="radio"] {
    accent-color: #ff5a0a !important;
}

th,
.section-label,
.table-tools > span,
.purchase-result-count,
.operation-result-count {
    color: #d84a06 !important;
}

[data-theme="light"] table tr,
[data-theme="light"] .panel-head,
[data-theme="light"] .purchase-panel-head,
[data-theme="light"] .operation-panel-head {
    border-color: #eee3dc !important;
}

[data-theme="dark"] table tr,
[data-theme="dark"] .panel-head,
[data-theme="dark"] .purchase-panel-head,
[data-theme="dark"] .operation-panel-head {
    border-color: #34251e !important;
}

[data-theme="light"] tbody tr:hover { background: #fff8f3 !important; }
[data-theme="dark"] tbody tr:hover { background: #1b100b !important; }

.stepper .done b,
.stepper .done + i,
.dashboard-bar span,
.chart-bar span,
.bar-fill {
    border-color: #ff5a0a !important;
    background: linear-gradient(90deg, #ff3d00, #ff8a00) !important;
    color: #ffffff !important;
}

.plan-flow-grid > span,
.transfer-route i,
.movement-route span,
a.back,
.purchase-open-link,
.operation-open-link {
    color: #ff5a0a !important;
}

[data-theme="light"] dialog::backdrop { background: rgba(25, 16, 10, .30) !important; }
[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, .78) !important; }

html,
body,
.sidebar nav,
.table-wrap,
.modal-card,
.supply-select-options,
.category-filter-list,
.plan-table,
.plan-dispatch-list {
    scrollbar-color: #ff5a0a transparent !important;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    background: linear-gradient(#ff3d00, #ff8a00) padding-box !important;
}
::-webkit-scrollbar-thumb:hover { background: #ff8a00 padding-box !important; }

#movementModal .modal-card,
.category-filter-list,
.supply-select-options {
    scrollbar-color: #ff5a0a transparent !important;
}

#movementModal .modal-card::-webkit-scrollbar-track,
.category-filter-list::-webkit-scrollbar-track,
.supply-select-options::-webkit-scrollbar-track {
    background: transparent !important;
}

#movementModal .modal-card::-webkit-scrollbar-thumb,
.category-filter-list::-webkit-scrollbar-thumb,
.supply-select-options::-webkit-scrollbar-thumb {
    border-color: transparent !important;
    background: linear-gradient(#ff3d00, #ff8a00) padding-box !important;
}

[data-theme="light"] ::selection { background: #ffd1b5; color: #191715; }
[data-theme="dark"] ::selection { background: #b93b00; color: #ffffff; }

/* =========================================================
   SUPPLY ORANGE 6.2 — CENTRAL DO ALMOXARIFADO
   ========================================================= */
.login-brand {
    align-items: center !important;
    min-height: 76px;
    padding: 0 0 22px !important;
}

.login-brand .brand-mark {
    flex: 0 0 72px;
    width: 72px !important;
    height: 72px !important;
    padding: 7px !important;
    border-color: rgba(255, 90, 10, .52) !important;
    background: #050505 !important;
    box-shadow: 0 14px 34px rgba(255, 74, 0, .25) !important;
}

.login-brand .brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.login-brand strong {
    color: var(--text) !important;
    font-size: 18px;
    letter-spacing: .06em;
}

.login-brand small { color: #ff5a0a !important; }

.warehouse-head { align-items: stretch; }
.warehouse-clock {
    display: grid;
    align-content: center;
    min-width: 245px;
    padding: 15px 19px;
    border: 1px solid var(--line);
    border-left: 4px solid #ff5a0a;
    border-radius: 15px;
    background: var(--surface);
}
.warehouse-clock span { color: #ff5a0a; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.warehouse-clock strong { margin-top: 5px; font-size: 13px; }
.warehouse-clock small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.warehouse-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin: 0 0 16px;
}

.warehouse-status-card {
    position: relative;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 13px;
    min-height: 128px;
    padding: 19px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.warehouse-status-card::after {
    content: "";
    position: absolute;
    right: -34px;
    bottom: -58px;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: rgba(255, 90, 10, .08);
}

.warehouse-status-card:hover { transform: translateY(-3px); border-color: #ff8a3d; box-shadow: 0 15px 34px rgba(255, 75, 0, .12); }
.warehouse-status-card.active { border-color: #ff5a0a; box-shadow: inset 0 -4px #ff5a0a, 0 14px 34px rgba(255, 75, 0, .14); }
.warehouse-status-card i { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 90, 10, .32); border-radius: 13px; background: rgba(255, 90, 10, .10); color: #ff5a0a; font-size: 11px; font-style: normal; font-weight: 900; }
.warehouse-status-card div { min-width: 0; }
.warehouse-status-card span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.warehouse-status-card strong { display: block; margin: 8px 0 4px; color: var(--text); font-size: 27px; line-height: 1; }
.warehouse-status-card small { color: var(--muted); font-size: 10px; }

.warehouse-workspace { overflow: hidden; }
.warehouse-workspace-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.warehouse-workspace-head h2 { margin: 6px 0 4px; font-size: 20px; }
.warehouse-workspace-head p { margin: 0; color: var(--muted); font-size: 11px; }
.warehouse-search { display: flex; align-items: center; gap: 8px; min-width: min(530px, 48vw); }
.warehouse-search > span { margin-right: -37px; z-index: 1; color: #ff5a0a; }
.warehouse-search input { flex: 1; min-width: 180px; height: 42px; padding-left: 38px; }

.warehouse-order-list { display: grid; gap: 10px; padding: 16px; }
.warehouse-order-card {
    display: grid;
    grid-template-columns: 46px minmax(250px, 1.35fr) minmax(135px, .65fr) minmax(120px, .55fr) minmax(300px, auto);
    gap: 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface2);
}
.warehouse-order-card.urgent { border-color: rgba(255, 90, 10, .52); box-shadow: inset 4px 0 #ff5a0a; }
.warehouse-order-index span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 90, 10, .12); color: #ff5a0a; font-size: 11px; font-weight: 900; }
.warehouse-order-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.warehouse-order-title a { color: var(--text); font-size: 14px; font-weight: 900; text-decoration: none; }
.warehouse-order-title b { padding: 4px 7px; border-radius: 999px; background: rgba(255, 90, 10, .13); color: #ff5a0a; font-size: 7px; letter-spacing: .06em; }
.warehouse-order-main > strong { display: block; margin: 5px 0 3px; color: #ff5a0a; font-size: 12px; }
.warehouse-order-main > small,
.warehouse-order-info small { color: var(--muted); font-size: 9px; }
.warehouse-order-info span { display: block; color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.warehouse-order-info strong { display: block; margin: 4px 0 2px; font-size: 11px; }
.warehouse-order-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.warehouse-order-actions form { margin: 0; }
.warehouse-order-actions .btn { min-height: 37px; padding: 0 11px; font-size: 9px; white-space: nowrap; }
.warehouse-empty { display: grid; place-items: center; padding: 58px 20px; text-align: center; }
.warehouse-empty span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: rgba(255, 90, 10, .12); color: #ff5a0a; font-size: 22px; }
.warehouse-empty strong { margin-top: 13px; font-size: 16px; }
.warehouse-empty p { margin: 4px 0 0; color: var(--muted); }

/* Checkboxes compactos e perfeitamente alinhados */
.movement-modern-table .batch-check {
    box-sizing: border-box !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    padding: 12px 10px !important;
}
.movement-modern-table .batch-check input[type="checkbox"],
.movement-modern-table .movement-select {
    display: inline-grid !important;
    place-content: center !important;
    box-sizing: border-box !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    padding: 0 !important;
    border: 1.5px solid color-mix(in srgb, #ff5a0a 58%, var(--line)) !important;
    border-radius: 6px !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}
.movement-modern-table .batch-check input[type="checkbox"]:checked,
.movement-modern-table .movement-select:checked {
    border-color: #ff5a0a !important;
    background: linear-gradient(135deg, #ff3d00, #ff8a00) !important;
    box-shadow: 0 5px 14px rgba(255, 75, 0, .24) !important;
}
.movement-modern-table .batch-check input[type="checkbox"]:checked::after,
.movement-modern-table .movement-select:checked::after {
    left: 6px !important;
    top: 3px !important;
    width: 5px !important;
    height: 9px !important;
    border-color: #ffffff !important;
}
.movement-modern-table tbody tr:has(.movement-select:checked) { box-shadow: inset 3px 0 #ff5a0a !important; }

@media (max-width: 1280px) {
    .warehouse-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .warehouse-order-card { grid-template-columns: 42px minmax(220px, 1.2fr) 1fr 1fr; }
    .warehouse-order-actions { grid-column: 2 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
    .warehouse-status-grid { grid-template-columns: 1fr; }
    .warehouse-workspace-head { align-items: stretch; flex-direction: column; }
    .warehouse-search { min-width: 0; width: 100%; flex-wrap: wrap; }
    .warehouse-search input { min-width: calc(100% - 28px); }
    .warehouse-order-card { grid-template-columns: 38px 1fr; }
    .warehouse-order-info,
    .warehouse-order-actions { grid-column: 2; }
    .warehouse-order-actions { justify-content: stretch; }
    .warehouse-order-actions .btn,
    .warehouse-order-actions form,
    .warehouse-order-actions form .btn { width: 100%; }
}

@media (max-width: 680px) {
    .dashboard-page-head {
        align-items: flex-start;
    }

    .dashboard-page-head,
    .dashboard-page-head .page-actions {
        flex-direction: column;
    }

    .dashboard-chart-wrap,
    .strategic-chart-wrap,
    .supplier-chart-wrap {
        height: 300px;
    }
}

/* Supply Pro 5.1 • revisão de metas e aplicabilidade */
.catalog-picker-menu,
.branch-list,
.applicability-grid {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--purple) 72%, var(--line)) transparent
}

.catalog-picker-menu::-webkit-scrollbar,
.branch-list::-webkit-scrollbar,
.applicability-grid::-webkit-scrollbar {
    width: 8px
}

.catalog-picker-menu::-webkit-scrollbar-track,
.branch-list::-webkit-scrollbar-track,
.applicability-grid::-webkit-scrollbar-track {
    background: transparent
}

.catalog-picker-menu::-webkit-scrollbar-thumb,
.branch-list::-webkit-scrollbar-thumb,
.applicability-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--purple), var(--cyan));
    border: 2px solid var(--surface);
    border-radius: 999px
}

.catalog-picker-option small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .06em
}

.target-generator-v2 {
    display: grid;
    gap: 14px
}

.target-base-row {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr) 1.1fr 1.1fr 1.1fr auto;
    gap: 10px;
    align-items: end;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: var(--surface2)
}

.target-generator-v2 label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700
}

.target-generator-v2 input,
.target-generator-v2 select {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    border-radius: 11px;
    padding: 12px;
    font: 600 12px Manrope;
    outline: none
}

.target-generator-v2 input:focus,
.target-generator-v2 select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 12%, transparent)
}

.editable-level-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px
}

.editable-level {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--level) 42%, var(--line));
    border-top: 4px solid var(--level);
    border-radius: 14px;
    background: color-mix(in srgb, var(--level) 5%, var(--surface))
}

.editable-level header {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between
}

.editable-level header strong {
    color: var(--level)
}

.editable-level header span {
    color: var(--muted);
    font-size: 9px
}

.target-review-bar,
.applicability-save {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line));
    border-radius: 15px;
    background: linear-gradient(110deg, var(--surface), color-mix(in srgb, var(--green) 5%, var(--surface)));
    box-shadow: var(--shadow)
}

.target-review-bar strong,
.target-review-bar span,
.applicability-save strong,
.applicability-save span {
    display: block
}

.target-review-bar span,
.applicability-save span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 10px
}

.applicability-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    align-items: start
}

.branch-selector {
    position: sticky;
    top: 92px;
    padding: 16px
}

.branch-selector h3 {
    margin: 5px 0 14px
}

.branch-search,
.material-search {
    display: flex;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--surface2);
    padding: 0 11px;
    color: var(--purple)
}

.branch-search input,
.material-search input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    padding: 11px;
    font: 600 11px Manrope
}

.branch-list {
    display: grid;
    gap: 5px;
    max-height: 62vh;
    overflow: auto;
    margin-top: 10px;
    padding-right: 4px
}

.branch-list a {
    display: grid;
    gap: 2px;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    text-decoration: none
}

.branch-list a small {
    color: var(--muted);
    font-size: 8px
}

.branch-list a:hover,
.branch-list a.active {
    border-color: color-mix(in srgb, var(--purple) 34%, var(--line));
    background: color-mix(in srgb, var(--purple) 8%, var(--surface));
    color: var(--purple)
}

.applicability-panel {
    padding: 18px
}

.applicability-count {
    text-align: right
}

.applicability-count strong,
.applicability-count span {
    display: block
}

.applicability-count strong {
    font-size: 25px;
    color: var(--green)
}

.applicability-count span {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase
}

.applicability-toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    margin: 15px 0
}

.applicability-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    max-height: 58vh;
    overflow: auto;
    padding-right: 5px;
    margin-bottom: 14px
}

.material-toggle-card {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface2);
    cursor: pointer
}

.material-toggle-card>input {
    display: none
}

.material-toggle-switch {
    width: 37px;
    height: 22px;
    border-radius: 99px;
    background: var(--line);
    position: relative;
    flex: 0 0 auto
}

.material-toggle-switch:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .2s;
    box-shadow: 0 2px 5px #0002
}

.material-toggle-card input:checked+.material-toggle-switch {
    background: var(--green)
}

.material-toggle-card input:checked+.material-toggle-switch:after {
    transform: translateX(15px)
}

.material-toggle-card strong,
.material-toggle-card small {
    display: block
}

.material-toggle-card strong {
    font-size: 10px
}

.material-toggle-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: 8px
}

.badge.não-se-aplica {
    background: #edf0f5;
    color: #667085
}

@media(max-width:1250px) {
    .target-base-row {
        grid-template-columns: repeat(4, 1fr)
    }

    .editable-level-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:800px) {

    .target-base-row,
    .editable-level-grid,
    .applicability-layout,
    .applicability-grid {
        grid-template-columns: 1fr
    }

    .branch-selector {
        position: static
    }

    .target-review-bar,
    .applicability-save {
        align-items: stretch;
        flex-direction: column
    }

    .target-review-bar .btn,
    .applicability-save .btn {
        width: 100%
    }
}

/* ============================================================
   ESTOQUE FÍSICO E MOVIMENTAÇÕES — PAINÉIS OPERACIONAIS
   ============================================================ */

.operation-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.operation-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    padding: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(19, 31, 55, .98), rgba(13, 23, 42, .98));
    box-shadow: 0 14px 35px rgba(0, 0, 0, .13);
}

.operation-kpi::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -38px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: rgba(105, 119, 255, .08);
}

.operation-kpi-main {
    border-color: rgba(255, 212, 49, .3);
    background: linear-gradient(145deg, rgba(35, 34, 34, .98), rgba(18, 29, 49, .98));
}

.operation-kpi-icon {
    z-index: 1;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    height: 42px;
    border: 1px solid rgba(255, 212, 49, .28);
    border-radius: 13px;
    color: #101827;
    background: var(--yellow);
    font-size: 13px;
    font-weight: 900;
    box-shadow: 0 8px 24px rgba(255, 212, 49, .15);
}

.operation-kpi-icon.stock,
.operation-kpi-icon.draft {
    color: #ffc09a;
    border-color: rgba(151, 112, 255, .25);
    background: rgba(126, 87, 255, .13);
}

.operation-kpi-icon.available,
.operation-kpi-icon.completed {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, .25);
    background: rgba(52, 211, 153, .11);
}

.operation-kpi-icon.reserved,
.operation-kpi-icon.separation {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, .25);
    background: rgba(251, 191, 36, .11);
}

.operation-kpi-icon.transit {
    color: #ffc09a;
    border-color: rgba(56, 189, 248, .25);
    background: rgba(56, 189, 248, .1);
}

.operation-kpi-icon.alert {
    color: #fb7185;
    border-color: rgba(251, 113, 133, .25);
    background: rgba(251, 113, 133, .11);
}

.operation-kpi>div:last-child {
    z-index: 1;
    min-width: 0;
}

.operation-kpi span,
.operation-kpi small {
    display: block;
    color: var(--muted);
}

.operation-kpi span {
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.operation-kpi strong {
    display: block;
    overflow: hidden;
    color: var(--text);
    font-size: clamp(17px, 1.35vw, 23px);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operation-kpi small {
    margin-top: 6px;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operation-control-panel {
    padding: 0;
    overflow: hidden;
}

.operation-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px 16px;
}

.operation-panel-head h2 {
    margin: 4px 0;
    font-size: 20px;
}

.operation-panel-head p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.operation-result-count {
    flex: 0 0 auto;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: rgba(255, 255, 255, .025);
    font-size: 11px;
}

.operation-result-count strong {
    color: var(--text);
}

.operation-filters {
    display: grid;
    grid-template-columns: 1.7fr repeat(3, minmax(145px, 1fr));
    gap: 12px;
    padding: 18px 24px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(7, 15, 29, .33);
}

.stock-filters {
    grid-template-columns: 1.7fr repeat(4, minmax(145px, 1fr));
}

.operation-filters label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
}

.operation-filters input,
.operation-filters select {
    width: 100%;
    height: 42px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text);
    background: var(--surface2);
    font-size: 12px;
}

.operation-search-box {
    position: relative;
}

.operation-search-box>span {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    color: #8fa6d8;
    transform: translateY(-50%);
}

.operation-search-box input {
    padding-left: 35px;
}

.operation-filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.operation-filter-actions .btn {
    min-height: 42px;
    white-space: nowrap;
}

.operation-quick-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
}

.operation-quick-filters>span {
    margin-right: 3px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.operation-quick-filters a {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: #a9b7d3;
    background: rgba(255, 255, 255, .02);
    font-size: 10px;
    font-weight: 700;
    transition: .18s ease;
}

.operation-quick-filters a:hover,
.operation-quick-filters a.active {
    color: #ffe785;
    border-color: rgba(255, 212, 49, .35);
    background: rgba(255, 212, 49, .09);
}

.operation-quick-filters a.active.danger {
    color: #fda4af;
    border-color: rgba(251, 113, 133, .35);
    background: rgba(251, 113, 133, .09);
}

.operation-table-wrap {
    padding: 0 20px 14px;
}

.operation-table {
    min-width: 1120px;
}

.operation-table th {
    padding-top: 17px;
    padding-bottom: 13px;
}

.operation-table td {
    padding-top: 16px;
    padding-bottom: 16px;
    vertical-align: middle;
}

.operation-table tr.operation-row-alert {
    background: linear-gradient(90deg, rgba(251, 113, 133, .055), transparent 28%);
}

.operation-number {
    color: var(--text);
    font-size: 12px;
    font-weight: 800;
}

.operation-number:hover,
.operation-open-link:hover {
    color: var(--yellow);
}

.operation-destination {
    display: inline-flex;
    padding: 6px 9px;
    border: 1px solid rgba(115, 140, 191, .17);
    border-radius: 8px;
    color: #cbd7ed;
    background: rgba(84, 110, 160, .08);
    font-size: 10px;
    font-weight: 700;
}

.movement-route {
    display: flex;
    align-items: center;
    gap: 7px;
    max-width: 245px;
}

.movement-route span {
    overflow: hidden;
    color: #dbe5f8;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.movement-route b {
    color: var(--yellow);
}

.operation-progress-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    width: 130px;
    margin-bottom: 7px;
}

.operation-progress-label span {
    color: var(--text);
    font-size: 11px;
    font-weight: 800;
}

.operation-progress-label small {
    color: var(--muted);
    font-size: 9px;
}

.operation-progress,
.stock-availability {
    width: 130px;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
}

.operation-progress span,
.stock-availability span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff6a1a, #4adeb3);
    box-shadow: 0 0 12px rgba(74, 222, 179, .25);
}

.stock-availability {
    margin-top: 8px;
    width: 105px;
}

.stock-main-quantity {
    font-size: 13px;
}

.stock-reserved-text {
    color: #fbbf24 !important;
}

.operation-status {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.operation-status.success {
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, .18);
    background: rgba(52, 211, 153, .1);
}

.operation-status.warning {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, .18);
    background: rgba(251, 191, 36, .1);
}

.operation-status.danger {
    color: #fda4af;
    border-color: rgba(251, 113, 133, .2);
    background: rgba(251, 113, 133, .1);
}

.operation-status.info {
    color: #ffc09a;
    border-color: rgba(56, 189, 248, .18);
    background: rgba(56, 189, 248, .09);
}

.operation-status.primary {
    color: #ffc09a;
    border-color: rgba(139, 92, 246, .2);
    background: rgba(139, 92, 246, .1);
}

.operation-status.muted {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, .16);
    background: rgba(148, 163, 184, .08);
}

.operation-open-link {
    display: block;
    margin-top: 9px;
    color: #8fa6d8;
    font-size: 9px;
    font-weight: 700;
}

.operation-empty strong,
.operation-empty span {
    display: block;
}

.operation-empty strong {
    margin-bottom: 5px;
    color: var(--text);
}

.operation-empty span {
    color: var(--muted);
    font-size: 11px;
}

@media (max-width: 1350px) {
    .operation-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .operation-filters,
    .stock-filters {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .operation-filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 850px) {
    .operation-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operation-kpi-main {
        grid-column: span 2;
    }

    .operation-filters,
    .stock-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 580px) {

    .operation-kpi-grid,
    .operation-filters,
    .stock-filters {
        grid-template-columns: 1fr;
    }

    .operation-kpi-main,
    .operation-filter-search {
        grid-column: auto;
    }

    .operation-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .operation-filter-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

[data-theme=light] .operation-kpi {
    border-color: var(--line);
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 90, 10, .06), transparent 35%),
        linear-gradient(145deg, #ffffff, #f8faff);
    box-shadow: var(--shadow);
}

[data-theme=light] .operation-kpi-main {
    border-color: rgba(255, 190, 0, .4);
    background:
        radial-gradient(circle at 100% 100%, rgba(255, 212, 49, .13), transparent 38%),
        linear-gradient(145deg, #fffef8, #ffffff);
}

[data-theme=light] .operation-kpi strong {
    color: var(--text);
}

[data-theme=light] .operation-filters {
    background: linear-gradient(180deg, #f7f9fd, #f2f5fa);
}

[data-theme=light] .operation-result-count,
[data-theme=light] .operation-quick-filters a {
    background: #ffffff;
}

[data-theme=light] .operation-table tr.operation-row-alert {
    background: linear-gradient(90deg, rgba(251, 113, 133, .07), transparent 30%);
}

[data-theme=light] .operation-destination {
    color: #415374;
    border-color: #dce5f1;
    background: #f4f7fb;
}

[data-theme=light] .operation-progress,
[data-theme=light] .stock-availability {
    background: #e7edf5;
}

[data-theme=light] .operation-status.primary {
    color: #e94a00;
}

[data-theme=light] .operation-status.info {
    color: #d94a06;
}

/* CORREÇÃO DOS CARDS DA VISÃO GERAL */

.dashboard-metrics .metric {
    position: relative;
    min-height: 122px;
    padding: 20px 76px 20px 20px;
}

/* Mantém somente os textos no fluxo normal */

.dashboard-metrics .metric>span,
.dashboard-metrics .metric>strong,
.dashboard-metrics .metric>small {
    position: relative;
    z-index: 2;
}

/* Fixa o ícone no canto superior direito */

.dashboard-metrics .metric>.metric-icon {
    position: absolute !important;
    top: 17px !important;
    right: 17px !important;
    left: auto !important;

    width: 35px;
    height: 35px;
    margin: 0 !important;

    display: grid;
    place-items: center;

    z-index: 3;
}

/* Impede o círculo decorativo de atrapalhar */

.dashboard-metrics .metric::after {
    z-index: 0;
    pointer-events: none;
}

/* Ajuste para telas pequenas */

@media (max-width: 600px) {
    .dashboard-metrics .metric {
        padding-right: 68px;
    }

    .dashboard-metrics .metric>.metric-icon {
        top: 15px !important;
        right: 15px !important;
    }
}

/* ASSINATURA DO DESENVOLVEDOR */

.developer-signature {
    margin: 14px 8px 0;
    padding: 13px 12px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;

    background:
        linear-gradient(135deg,
            rgba(255, 212, 49, 0.07),
            rgba(255, 90, 10, 0.05));
}

.developer-signature span,
.developer-signature strong,
.developer-signature small,
.developer-signature a {
    display: block;
}

.developer-signature span {
    margin-bottom: 6px;

    color: #ffd431;

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.developer-signature strong {
    color: #ffffff;

    font-size: 10px;
    line-height: 1.4;
}

.developer-signature small {
    margin-top: 3px;

    color: #72809b;

    font-size: 8px;
}

.developer-signature a {
    margin-top: 7px;

    color: #9dadd0;

    font-size: 8px;
    font-weight: 700;
    text-decoration: none;
}

.developer-signature a:hover {
    color: #ffd431;
}

/* =====================================================
   SCROLLBAR DO FILTRO DE CATEGORIAS
   ===================================================== */

.category-filter-list {
    padding-right: 6px;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #52617d transparent;
}

/* Chrome, Edge e Opera */
.category-filter-list::-webkit-scrollbar {
    width: 6px;
}

.category-filter-list::-webkit-scrollbar-track {
    margin: 4px 0;
    border-radius: 999px;
    background: transparent;
}

.category-filter-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg,
            #ff5a0a,
            #52617d);
}

.category-filter-list::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            #ff7a26,
            #6c7b99);
}

/* Ajuste específico para o tema claro */
[data-theme="light"] .category-filter-list {
    scrollbar-color: #a8b1c3 transparent;
}

[data-theme="light"] .category-filter-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            #ff5a0a,
            #a8b1c3);
}

/* =====================================================
   AÇÕES EM LOTE — VISUAL SUPPLY PRO
   ===================================================== */

/* Caixa de seleção da ação */
#movementBatchAction {
    min-height: 44px;
    padding: 0 42px 0 15px;

    appearance: none;
    -webkit-appearance: none;

    border: 1px solid #33415f;
    border-radius: 11px;

    background-color: #111a2e;
    background-image:
        linear-gradient(45deg, transparent 50%, #91a0bd 50%),
        linear-gradient(135deg, #91a0bd 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 18px,
        calc(100% - 13px) 18px;
    background-repeat: no-repeat;
    background-size: 5px 5px;

    color: #f5f7ff;
    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 700;

    outline: none;
    cursor: pointer;

    color-scheme: dark;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

#movementBatchAction:hover {
    border-color: #536382;
    background-color: #152039;
}

#movementBatchAction:focus {
    border-color: #ffd431;
    box-shadow:
        0 0 0 3px rgba(255, 212, 49, 0.12);
}

/* Opções abertas */
#movementBatchAction option {
    padding: 12px;

    background: #111a2e;
    color: #f5f7ff;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 600;
}

#movementBatchAction option:checked {
    background: #273452;
    color: #ffd431;
}

/* Primeira opção */
#movementBatchAction option[value=""] {
    color: #8f9bb3;
}


/* =====================================================
   CHECKBOX MODERNO DAS MOVIMENTAÇÕES
   ===================================================== */

.batch-check input[type="checkbox"],
.movement-select {
    position: relative;

    width: 18px;
    height: 18px;
    margin: 0;

    appearance: none;
    -webkit-appearance: none;

    border: 1px solid #53617c;
    border-radius: 5px;

    background: #111a2e;

    cursor: pointer;

    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.batch-check input[type="checkbox"]:hover,
.movement-select:hover {
    border-color: #ffd431;

    box-shadow:
        0 0 0 3px rgba(255, 212, 49, 0.1);

    transform: scale(1.05);
}

.batch-check input[type="checkbox"]:checked,
.movement-select:checked {
    border-color: #ffd431;

    background:
        linear-gradient(135deg,
            #ffe46a,
            #ffd431);

    box-shadow:
        0 4px 12px rgba(255, 212, 49, 0.22);
}

/* Símbolo de confirmação */
.batch-check input[type="checkbox"]:checked::after,
.movement-select:checked::after {
    content: "";

    position: absolute;
    left: 5px;
    top: 2px;

    width: 4px;
    height: 8px;

    border: solid #111a2e;
    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}

/* Estado de seleção parcial do checkbox principal */
#selectAllMovements:indeterminate {
    border-color: #ff5a0a;
    background: #ff5a0a;
}

#selectAllMovements:indeterminate::after {
    content: "";

    position: absolute;
    left: 4px;
    top: 7px;

    width: 8px;
    height: 2px;

    border: 0;
    border-radius: 2px;

    background: white;

    transform: none;
}


/* =====================================================
   LINHA SELECIONADA
   ===================================================== */

.movement-modern-table tbody tr {
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.movement-modern-table tbody tr:has(.movement-select:checked) {
    background:
        linear-gradient(90deg,
            rgba(255, 212, 49, 0.09),
            rgba(255, 90, 10, 0.05),
            transparent);

    box-shadow:
        inset 3px 0 0 #ffd431;
}

.movement-modern-table tbody tr:has(.movement-select:checked) td {
    border-bottom-color: rgba(255, 212, 49, 0.15);
}


/* Centralizar a coluna dos checkboxes */
.movement-modern-table .batch-check {
    width: 42px;
    min-width: 42px;

    padding-right: 8px;
    padding-left: 8px;

    text-align: center;
    vertical-align: middle;
}


/* =====================================================
   TEMA CLARO
   ===================================================== */

[data-theme="light"] #movementBatchAction {
    border-color: #d9dfeb;

    background-color: #ffffff;

    color: #162039;

    color-scheme: light;
}

[data-theme="light"] #movementBatchAction option {
    background: #ffffff;
    color: #162039;
}

[data-theme="light"] #movementBatchAction option:checked {
    background: #fff0e6;
    color: #e94a00;
}

[data-theme="light"] .batch-check input[type="checkbox"],
[data-theme="light"] .movement-select {
    border-color: #b8c1d2;
    background: #ffffff;
}

/* =====================================================
   CAMPO DE MOTIVO DO CANCELAMENTO
   ===================================================== */

.movement-danger-zone form {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(280px, 1fr) auto;

    align-items: center;
    gap: 10px;
}

/* Campo de motivo */
.movement-danger-zone form input[name="reason"] {
    width: 100%;
    min-width: 0;
    height: 44px;

    padding:
        0 16px 0 42px;

    border: 1px solid rgba(239, 71, 96, 0.28);
    border-radius: 11px;

    background:
        linear-gradient(135deg,
            rgba(239, 71, 96, 0.055),
            rgba(17, 26, 46, 0.96));

    color: #f5f7ff;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 650;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

/* Ícone antes do campo */
.movement-danger-zone form::before {
    content: "!";

    position: absolute;
    left: 14px;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 18px;
    height: 18px;

    border: 1px solid rgba(239, 71, 96, 0.35);
    border-radius: 50%;

    background: rgba(239, 71, 96, 0.12);
    color: #ff8292;

    font-size: 10px;
    font-weight: 900;

    pointer-events: none;
}

.movement-danger-zone form input[name="reason"]::placeholder {
    color: #78869f;
    font-weight: 500;
}

/* Campo em foco */
.movement-danger-zone form input[name="reason"]:focus {
    border-color: #ef4760;

    background:
        linear-gradient(135deg,
            rgba(239, 71, 96, 0.09),
            #131d32);

    box-shadow:
        0 0 0 3px rgba(239, 71, 96, 0.1),
        0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Campo preenchido corretamente */
.movement-danger-zone form input[name="reason"]:valid:not(:placeholder-shown) {
    border-color: rgba(52, 211, 153, 0.45);

    background:
        linear-gradient(135deg,
            rgba(52, 211, 153, 0.06),
            #131d32);
}

/* Ajustar o botão */
.movement-danger-zone form .btn.danger {
    height: 44px;
    padding: 0 18px;

    border: 1px solid #ef4760;
    border-radius: 11px;

    background:
        linear-gradient(135deg,
            #ef4760,
            #d92e49);

    color: white;

    font-size: 10px;
    font-weight: 800;

    white-space: nowrap;

    box-shadow:
        0 8px 22px rgba(239, 71, 96, 0.2);
}

.movement-danger-zone form .btn.danger:hover {
    border-color: #ff7183;

    background:
        linear-gradient(135deg,
            #ff5b70,
            #e53350);

    box-shadow:
        0 10px 28px rgba(239, 71, 96, 0.28);

    transform: translateY(-1px);
}


/* =====================================================
   TEMA CLARO
   ===================================================== */

[data-theme="light"] .movement-danger-zone form input[name="reason"] {
    border-color: rgba(220, 53, 69, 0.24);

    background:
        linear-gradient(135deg,
            rgba(239, 71, 96, 0.04),
            #ffffff);

    color: #182033;
}

[data-theme="light"] .movement-danger-zone form input[name="reason"]::placeholder {
    color: #8994a8;
}

[data-theme="light"] .movement-danger-zone form input[name="reason"]:focus {
    border-color: #ef4760;

    background: #ffffff;
}


/* =====================================================
   RESPONSIVIDADE
   ===================================================== */

@media (max-width: 760px) {
    .movement-danger-zone form {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .movement-danger-zone form .btn.danger {
        width: 100%;
    }

    .movement-danger-zone form::before {
        top: 13px;
    }
}

/* =====================================================
   FILTROS PADRONIZADOS — SUPPLY PRO
   Compras, Estoque físico e Movimentações
   ===================================================== */

/* Campos dos filtros */
.operation-filters select,
.operation-filters input,
.stock-filters select,
.stock-filters input {
    height: 44px;

    border: 1px solid #2d3a57;
    border-radius: 11px;

    background-color: #111a2e;
    color: #f2f5fb;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 600;

    outline: none;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.operation-filters select:hover,
.operation-filters input:hover,
.stock-filters select:hover,
.stock-filters input:hover {
    border-color: #475776;
    background-color: #152039;
}

.operation-filters select:focus,
.operation-filters input:focus,
.stock-filters select:focus,
.stock-filters input:focus {
    border-color: #ff5a0a;

    background-color: #152039;

    box-shadow:
        0 0 0 3px rgba(255, 90, 10, 0.12),
        0 8px 22px rgba(0, 0, 0, 0.1);
}


/* =====================================================
   SELECT COM SETA PERSONALIZADA
   ===================================================== */

.operation-filters select,
.stock-filters select {
    padding: 0 42px 0 14px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image:
        linear-gradient(45deg,
            transparent 50%,
            #8491aa 50%),
        linear-gradient(135deg,
            #8491aa 50%,
            transparent 50%);

    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 13px) 19px;

    background-repeat: no-repeat;

    background-size:
        5px 5px,
        5px 5px;

    color-scheme: dark;

    cursor: pointer;
}

.operation-filters select:hover,
.stock-filters select:hover {
    background-image:
        linear-gradient(45deg,
            transparent 50%,
            #ffd431 50%),
        linear-gradient(135deg,
            #ffd431 50%,
            transparent 50%);
}

.operation-filters select:focus,
.stock-filters select:focus {
    background-image:
        linear-gradient(45deg,
            transparent 50%,
            #ff7a26 50%),
        linear-gradient(135deg,
            #ff7a26 50%,
            transparent 50%);
}


/* =====================================================
   LISTA ABERTA DOS FILTROS
   ===================================================== */

.operation-filters select option,
.stock-filters select option {
    min-height: 36px;

    padding: 10px 14px;

    border: 0;

    background: #111a2e;
    color: #eef2fb;

    font-family: Manrope, sans-serif;
    font-size: 11px;
    font-weight: 600;
}

.operation-filters select option:checked,
.stock-filters select option:checked {
    background:
        linear-gradient(90deg,
            #ff5a0a,
            #e94a00);

    color: #ffffff;
}

.operation-filters select option:hover,
.stock-filters select option:hover {
    background: #1c2944;
    color: #ffd431;
}


/* Títulos: Centros de distribuição e Filiais */
.operation-filters select optgroup,
.stock-filters select optgroup {
    background: #0d1527;
    color: #ffd431;

    font-family: Manrope, sans-serif;
    font-size: 10px;
    font-weight: 800;
    font-style: normal;
    letter-spacing: 0.4px;
}


/* Barra de rolagem das listas */
.operation-filters select,
.stock-filters select {
    scrollbar-width: thin;
    scrollbar-color: #52617d #111a2e;
}

.operation-filters select::-webkit-scrollbar,
.stock-filters select::-webkit-scrollbar {
    width: 7px;
}

.operation-filters select::-webkit-scrollbar-track,
.stock-filters select::-webkit-scrollbar-track {
    background: #111a2e;
}

.operation-filters select::-webkit-scrollbar-thumb,
.stock-filters select::-webkit-scrollbar-thumb {
    border: 2px solid #111a2e;
    border-radius: 999px;

    background:
        linear-gradient(180deg,
            #ff5a0a,
            #52617d);
}


/* =====================================================
   CAMPOS DE DATA E ÍCONE DO CALENDÁRIO
   ===================================================== */

.operation-filters input[type="date"],
.stock-filters input[type="date"] {
    padding: 0 14px;

    color-scheme: dark;
    cursor: pointer;
}

/* Calendário do Chrome, Opera e Edge */
.operation-filters input[type="date"]::-webkit-calendar-picker-indicator,
.stock-filters input[type="date"]::-webkit-calendar-picker-indicator {
    width: 17px;
    height: 17px;

    padding: 5px;

    border-radius: 7px;

    background-color: rgba(255, 90, 10, 0.1);

    filter:
        invert(70%) sepia(15%) saturate(700%) hue-rotate(195deg) brightness(105%);

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.operation-filters input[type="date"]::-webkit-calendar-picker-indicator:hover,
.stock-filters input[type="date"]::-webkit-calendar-picker-indicator:hover {
    background-color: rgba(255, 212, 49, 0.16);

    transform: scale(1.06);

    filter:
        invert(86%) sepia(93%) saturate(800%) hue-rotate(330deg) brightness(105%);
}


/* =====================================================
   CAMPO DE PESQUISA DOS FILTROS
   ===================================================== */

.operation-search-box {
    border-radius: 11px;
}

.operation-search-box input {
    width: 100%;

    padding-right: 14px;
    padding-left: 40px;
}

.operation-search-box>span {
    color: #71809e;

    transition: color 0.2s ease;
}

.operation-search-box:focus-within>span {
    color: #ffd431;
}


/* =====================================================
   TEXTO ACIMA DOS FILTROS
   ===================================================== */

.operation-filters label>span,
.stock-filters label>span {
    display: block;

    margin-bottom: 7px;

    color: #8997b2;

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.3px;
}


/* =====================================================
   TEMA CLARO
   ===================================================== */

[data-theme="light"] .operation-filters select,
[data-theme="light"] .operation-filters input,
[data-theme="light"] .stock-filters select,
[data-theme="light"] .stock-filters input {
    border-color: #dbe1ec;

    background-color: #ffffff;
    color: #19233a;

    color-scheme: light;
}

[data-theme="light"] .operation-filters select option,
[data-theme="light"] .stock-filters select option {
    background: #ffffff;
    color: #19233a;
}

[data-theme="light"] .operation-filters select optgroup,
[data-theme="light"] .stock-filters select optgroup {
    background: #f1f3f8;
    color: #e94a00;
}

[data-theme="light"] .operation-filters input[type="date"],
[data-theme="light"] .stock-filters input[type="date"] {
    color-scheme: light;
}

/* =====================================================
   CORREÇÃO DEFINITIVA DOS FILTROS DE COMPRAS
   ===================================================== */

.purchase-filters select {
    height: 44px !important;

    padding:
        0 42px 0 14px !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    border:
        1px solid #2d3a57 !important;

    border-radius:
        11px !important;

    background-color:
        #111a2e !important;

    background-image:
        linear-gradient(45deg,
            transparent 50%,
            #8491aa 50%),
        linear-gradient(135deg,
            #8491aa 50%,
            transparent 50%) !important;

    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 13px) 19px !important;

    background-repeat:
        no-repeat !important;

    background-size:
        5px 5px,
        5px 5px !important;

    color:
        #f2f5fb !important;

    color-scheme:
        dark !important;

    font-family:
        Manrope,
        sans-serif !important;

    font-size:
        11px !important;

    font-weight:
        600 !important;

    outline:
        none !important;

    cursor:
        pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* Passar o mouse */
.purchase-filters select:hover {
    border-color:
        #536382 !important;

    background-color:
        #152039 !important;

    background-image:
        linear-gradient(45deg,
            transparent 50%,
            #ffd431 50%),
        linear-gradient(135deg,
            #ffd431 50%,
            transparent 50%) !important;
}


/* Campo selecionado */
.purchase-filters select:focus {
    border-color:
        #ff5a0a !important;

    background-color:
        #152039 !important;

    background-image:
        linear-gradient(45deg,
            transparent 50%,
            #ff7a26 50%),
        linear-gradient(135deg,
            #ff7a26 50%,
            transparent 50%) !important;

    box-shadow:
        0 0 0 3px rgba(255, 90, 10, 0.12) !important;
}


/* =====================================================
   OPÇÕES DAS LISTAS DE COMPRAS
   ===================================================== */

.purchase-filters select option {
    padding:
        10px 14px;

    background:
        #111a2e !important;

    color:
        #eef2fb !important;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        11px;

    font-weight:
        600;
}

.purchase-filters select option:checked {
    background:
        linear-gradient(90deg,
            #ff5a0a,
            #e94a00) !important;

    color:
        #ffffff !important;
}

.purchase-filters select optgroup {
    background:
        #0d1527 !important;

    color:
        #ffd431 !important;

    font-size:
        10px;

    font-weight:
        800;

    font-style:
        normal;
}


/* =====================================================
   BARRA DE ROLAGEM DAS LISTAS DE COMPRAS
   ===================================================== */

.purchase-filters select {
    scrollbar-width:
        thin;

    scrollbar-color:
        #ff5a0a #111a2e;
}

.purchase-filters select::-webkit-scrollbar {
    width:
        7px;
}

.purchase-filters select::-webkit-scrollbar-track {
    background:
        #111a2e;
}

.purchase-filters select::-webkit-scrollbar-thumb {
    border:
        2px solid #111a2e;

    border-radius:
        999px;

    background:
        linear-gradient(180deg,
            #ff5a0a,
            #52617d);
}


/* =====================================================
   DATAS DOS FILTROS DE COMPRAS
   ===================================================== */

.purchase-filters input[type="date"] {
    height:
        44px !important;

    padding:
        0 14px !important;

    border:
        1px solid #2d3a57 !important;

    border-radius:
        11px !important;

    background:
        #111a2e !important;

    color:
        #f2f5fb !important;

    color-scheme:
        dark !important;

    font-family:
        Manrope,
        sans-serif;

    font-size:
        11px;

    outline:
        none;
}

.purchase-filters input[type="date"]::-webkit-calendar-picker-indicator {
    width:
        17px;

    height:
        17px;

    padding:
        5px;

    border-radius:
        7px;

    background-color:
        rgba(255, 90, 10, 0.1);

    filter:
        invert(70%) sepia(15%) saturate(700%) hue-rotate(195deg) brightness(105%);

    cursor:
        pointer;
}


/* =====================================================
   TEMA CLARO
   ===================================================== */

[data-theme="light"] .purchase-filters select,
[data-theme="light"] .purchase-filters input[type="date"] {
    border-color:
        #dbe1ec !important;

    background-color:
        #ffffff !important;

    color:
        #19233a !important;

    color-scheme:
        light !important;
}

[data-theme="light"] .purchase-filters select option {
    background:
        #ffffff !important;

    color:
        #19233a !important;
}

/* =====================================================
   ACABAMENTO 4.1 — TEMA CLARO E CONTROLES SUPPLY PRO
   ===================================================== */
.supply-select {
    position: relative;
    min-width: 0;
    z-index: 3;
}

.supply-select.is-open {
    z-index: 80;
}

.supply-select-native {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.supply-select-trigger {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--field);
    color: var(--text);
    font: 600 11px Manrope, sans-serif;
    text-align: left;
    cursor: pointer;
    transition: .18s ease;
}

.supply-select-trigger:hover {
    border-color: #586986;
    transform: translateY(-1px);
}

.supply-select.is-open .supply-select-trigger {
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(255, 90, 10, .14);
}

.supply-select-trigger i {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: rgba(255, 90, 10, .1);
    display: grid;
    place-items: center;
    color: #ff8a3d;
    font-style: normal;
    font-size: 15px;
}

.supply-select-menu {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    display: none;
    padding: 8px;
    border: 1px solid #31405e;
    border-radius: 14px;
    background: #101a30;
    box-shadow: 0 20px 55px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.supply-select.is-open .supply-select-menu {
    display: block;
    animation: supplyMenuIn .16s ease both;
}

@keyframes supplyMenuIn {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(.99)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.supply-select-search {
    width: 100%;
    height: 38px;
    margin-bottom: 7px;
    padding: 0 12px;
    border: 1px solid #2e3b58;
    border-radius: 9px;
    background: #162139;
    color: #f4f7fc;
    outline: none;
    font: 600 11px Manrope, sans-serif;
}

.supply-select-search:focus {
    border-color: #ff5a0a;
    box-shadow: 0 0 0 3px rgba(255, 90, 10, .12);
}

.supply-select-options {
    max-height: 280px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: #ff5a0a #101a30;
}

.supply-select-option {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #dfe7f5;
    font: 600 11px Manrope, sans-serif;
    text-align: left;
    cursor: pointer;
}

.supply-select-option:hover {
    background: #1b2945;
    color: #fff;
}

.supply-select-option b {
    opacity: 0;
    color: #ffd431;
}

.supply-select-option.is-selected {
    background: linear-gradient(90deg, rgba(255, 90, 10, .22), rgba(255, 138, 61, .08));
    color: #fff;
}

.supply-select-option.is-selected b {
    opacity: 1;
}

.supply-select-group {
    padding: 10px 10px 5px;
    color: #ffd431;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.supply-select.is-disabled {
    opacity: .45;
    pointer-events: none;
}

[data-theme="light"] body {
    background: #eef2f8;
    color: #172033;
}

[data-theme="light"] .sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
    border-right: 1px solid #dfe5ef;
    box-shadow: 10px 0 35px rgba(27, 42, 72, .04);
}

[data-theme="light"] .brand strong,
[data-theme="light"] .sidebar-foot strong {
    color: #172033;
}

[data-theme="light"] .brand small,
[data-theme="light"] .sidebar-foot small,
[data-theme="light"] .sidebar nav p {
    color: #78869d;
}

[data-theme="light"] .sidebar nav a {
    color: #4b5d77;
}

[data-theme="light"] .sidebar nav a:hover {
    background: #eef2f8;
    color: #172033;
}

[data-theme="light"] .sidebar nav a.active {
    background: linear-gradient(90deg, #fff8d5, #f4f6fb 72%);
    color: #172033;
    box-shadow: inset 3px 0 #ffd431;
}

[data-theme="light"] .sidebar-foot {
    border-color: #dfe5ef;
}

[data-theme="light"] .developer-signature {
    border-color: #e1e6ef;
    background: #fff;
    box-shadow: 0 8px 24px rgba(29, 43, 71, .06);
}

[data-theme="light"] .developer-signature strong {
    color: #172033;
}

[data-theme="light"] .topbar {
    background: rgba(255, 255, 255, .92);
    border-color: #dfe5ef;
    backdrop-filter: blur(15px);
}

[data-theme="light"] .content {
    background: linear-gradient(135deg, #f8faff 0%, #eef3f9 100%);
}

[data-theme="light"] .panel,
[data-theme="light"] .metric,
[data-theme="light"] .operation-table-wrap {
    background: #fff;
    border-color: #dfe5ef;
    box-shadow: 0 14px 35px rgba(29, 43, 71, .055);
}

[data-theme="light"] .supply-select-trigger {
    border-color: #d9e0eb;
    background: #fff;
    color: #172033;
}

[data-theme="light"] .supply-select-menu {
    border-color: #dbe2ed;
    background: #fff;
    box-shadow: 0 22px 55px rgba(30, 43, 68, .16);
}

[data-theme="light"] .supply-select-search {
    border-color: #dbe2ed;
    background: #f5f7fb;
    color: #172033;
}

[data-theme="light"] .supply-select-options {
    scrollbar-color: #ff5a0a #eef2f7;
}

[data-theme="light"] .supply-select-option {
    color: #43536c;
}

[data-theme="light"] .supply-select-option:hover {
    background: #f1f3fb;
    color: #172033;
}

[data-theme="light"] .supply-select-option.is-selected {
    background: linear-gradient(90deg, #fff2e9, #fff1e8);
    color: #34286f;
}

[data-theme="light"] .supply-select-group {
    color: #715b00;
}

@media (max-width:760px) {
    .supply-select-menu {
        position: fixed;
        left: 16px;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
    }

    .supply-select.is-open .supply-select-menu {
        animation: none;
    }
}

/* Acessos, reservas e painel de TV */
.access-role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 18px
}

.access-role-grid article {
    border: 1px solid var(--line);
    background: linear-gradient(145deg, var(--panel), var(--panel-2));
    border-radius: 18px;
    padding: 20px;
    display: grid;
    gap: 7px
}

.access-role-grid b {
    font-size: 15px
}

.access-role-grid span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6
}

.access-role {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    background: rgba(255, 90, 10, .12);
    color: #ff8a3d
}

.role-administrador {
    background: rgba(255, 212, 49, .12);
    color: #ffd431
}

.role-almoxarifado {
    background: rgba(255, 138, 61, .12);
    color: #ff9b60
}

.password-shell {
    min-height: 70vh;
    display: grid;
    place-items: center
}

.password-card {
    width: min(520px, 100%);
    padding: 34px
}

.password-card form {
    display: grid;
    gap: 16px;
    margin-top: 24px
}

.password-card label {
    display: grid;
    gap: 8px;
    color: var(--muted);
    font-size: 12px
}

.password-card input {
    width: 100%
}

.page-head-actions,
.tv-command-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.tv-command {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px 18px;
    margin: -4px 0 18px;
    border: 1px solid rgba(32, 189, 117, .32);
    border-radius: 16px;
    background: linear-gradient(90deg, rgba(32, 189, 117, .1), rgba(255, 138, 61, .05))
}

.tv-command>div:first-child {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px
}

.tv-command small {
    grid-column: 2;
    color: var(--muted)
}

.tv-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #20bd75;
    box-shadow: 0 0 0 6px rgba(32, 189, 117, .12);
    align-self: center;
    animation: tvPulse 1.5s infinite
}

@keyframes tvPulse {
    50% {
        opacity: .45
    }
}

body.tv-display .sidebar {
    display: none
}

body.tv-display .main {
    margin-left: 0
}

body.tv-display .topbar {
    display: none
}

body.tv-display .content {
    max-width: none;
    padding: 24px 32px
}

body.tv-display .operation-kpi-grid {
    grid-template-columns: repeat(5, 1fr)
}

body.tv-display .movement-modern-table {
    font-size: 1.08rem
}

body.tv-display .operation-control-panel {
    border-color: rgba(255, 212, 49, .25)
}

@media(max-width:900px) {
    .access-role-grid {
        grid-template-columns: 1fr
    }

    .tv-command {
        align-items: flex-start;
        flex-direction: column
    }

    .tv-command-actions {
        flex-wrap: wrap
    }
}

.error-shell {
    min-height: 68vh;
    display: grid;
    place-items: center
}

.error-card {
    max-width: 560px;
    padding: 42px;
    text-align: center
}

.error-code {
    display: block;
    font-size: 70px;
    font-weight: 800;
    line-height: 1;
    color: #ffd431;
    opacity: .9
}

.error-card .btn {
    margin-top: 18px
}

/* ==================================================
   SCROLL MODERNO DO MENU LATERAL
   ================================================== */

.sidebar nav {
    padding-right: 6px;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 90, 10, 0.65) transparent;
}

/* Chrome, Edge e Opera */
.sidebar nav::-webkit-scrollbar {
    width: 7px;
}

.sidebar nav::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 20px;
}

.sidebar nav::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg,
            rgba(255, 90, 10, 0.90),
            rgba(255, 138, 61, 0.75));

    border: 2px solid transparent;
    background-clip: content-box;
    border-radius: 20px;
    min-height: 45px;
}

.sidebar nav::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
            #ffd431,
            #ff5a0a);

    border: 1px solid transparent;
    background-clip: content-box;
}

.sidebar nav::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.sidebar nav::-webkit-scrollbar-corner {
    background: transparent;
}

/* Registro histórico de movimentações */
.history-page-head {
    align-items: flex-end
}

.history-safe-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    border: 1px solid rgba(32, 189, 117, .35);
    border-radius: 999px;
    background: rgba(32, 189, 117, .09);
    color: #20bd75;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    white-space: nowrap
}

.history-workspace {
    display: grid;
    gap: 18px
}

.history-intro-card,
.history-builder-card {
    padding: 24px
}

.history-step-number {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #ffd431, #ffb800);
    color: #111a2e;
    font-weight: 900;
    box-shadow: 0 10px 25px rgba(255, 212, 49, .18);
    flex: 0 0 auto
}

.history-intro-card {
    display: grid;
    grid-template-columns: auto 260px 1fr;
    gap: 20px;
    align-items: start
}

.history-section-copy h2,
.history-card-heading h2 {
    margin: 4px 0 5px
}

.history-section-copy p,
.history-card-heading p {
    margin: 0;
    color: var(--muted)
}

.history-header-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(170px, 1fr));
    gap: 14px
}

.history-header-grid label,
.history-entry-row label,
.history-allocation-row label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700
}

.history-header-grid input,
.history-header-grid select,
.history-entry-row input,
.history-entry-row select,
.history-allocation-row input,
.history-allocation-row select {
    width: 100%;
    min-height: 46px
}

.history-card-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line)
}

.history-card-heading>div:nth-child(2) {
    flex: 1
}

.history-table-head,
.history-entry-row {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) minmax(130px, .7fr) minmax(140px, .7fr) minmax(130px, .7fr) 42px;
    gap: 12px;
    align-items: center
}

.history-allocation-head,
.history-allocation-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) minmax(170px, 1fr) 155px minmax(230px, 1.5fr) 140px 42px;
    gap: 10px;
    align-items: center
}

.history-table-head,
.history-allocation-head {
    padding: 18px 4px 9px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em
}

.history-entry-row,
.history-allocation-row {
    padding: 11px 4px;
    border-top: 1px solid var(--line)
}

.history-row-total {
    font-size: 15px;
    text-align: right
}

.history-remove {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    border: 1px solid rgba(255, 91, 111, .3);
    background: rgba(255, 91, 111, .08);
    color: #ff5b6f;
    font-size: 20px;
    cursor: pointer
}

.history-entry-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line)
}

.history-entry-total span {
    color: var(--muted)
}

.history-entry-total strong {
    font-size: 22px
}

.history-balance-board {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft)
}

.history-balance-board>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    margin-top: 13px
}

.history-balance-board>div>span {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 12px
}

.history-balance-board small {
    color: var(--muted)
}

.history-balance-board em {
    font-style: normal;
    color: #20bd75;
    font-weight: 800
}

.history-balance-board .invalid {
    border-color: #ff5b6f;
    background: rgba(255, 91, 111, .07)
}

.history-balance-board .invalid em {
    color: #ff5b6f
}

.history-submit-bar {
    position: sticky;
    bottom: 16px;
    z-index: 8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 17px 20px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    backdrop-filter: blur(18px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18)
}

.history-submit-bar div {
    display: grid;
    gap: 3px
}

.history-submit-bar span {
    color: var(--muted);
    font-size: 12px
}

.history-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px
}

.history-summary-grid article {
    display: grid;
    gap: 7px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface)
}

.history-summary-grid span {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase
}

.history-output-list {
    display: grid;
    gap: 9px
}

.history-output-list>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: .2s
}

.history-output-list>a:hover {
    border-color: #ffd431;
    transform: translateY(-1px)
}

.history-output-list>a>div {
    display: grid;
    gap: 4px
}

.history-output-list small,
.history-output-list span {
    color: var(--muted)
}

.mobile-label {
    display: none
}

@media(max-width:1100px) {
    .history-intro-card {
        grid-template-columns: auto 1fr
    }

    .history-header-grid {
        grid-column: 1/-1;
        grid-template-columns: repeat(2, 1fr)
    }

    .history-allocation-head,
    .history-table-head {
        display: none
    }

    .history-entry-row,
    .history-allocation-row {
        grid-template-columns: repeat(2, 1fr);
        padding: 16px;
        margin-top: 10px;
        border: 1px solid var(--line);
        border-radius: 15px
    }

    .mobile-label {
        display: block
    }

    .history-summary-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width:680px) {

    .history-header-grid,
    .history-entry-row,
    .history-allocation-row {
        grid-template-columns: 1fr
    }

    .history-card-heading {
        align-items: flex-start;
        flex-wrap: wrap
    }

    .history-card-heading .btn {
        width: 100%
    }

    .history-submit-bar {
        align-items: stretch;
        flex-direction: column
    }

    .history-submit-bar .btn {
        width: 100%
    }

    .history-summary-grid {
        grid-template-columns: 1fr
    }
}

/* Identificação fiscal dos lançamentos históricos */
.history-header-grid label small {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-align: right;
    margin-top: -3px
}

.history-fiscal-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding: 17px 20px;
    background: linear-gradient(135deg, var(--surface), var(--surface-soft))
}

.history-fiscal-card h3 {
    margin: 3px 0 0
}

.history-fiscal-card code,
.fiscal-key {
    font-family: "Manrope", sans-serif;
    font-size: 12px;
    letter-spacing: .045em;
    overflow-wrap: anywhere;
    color: var(--text)
}

.supplier-summary small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700
}

@media(max-width:760px) {
    .history-fiscal-card {
        align-items: flex-start;
        flex-direction: column
    }

    .history-fiscal-card code {
        font-size: 10px
    }
}

/* Fluxo histórico: alinhamento, revisão e exclusão administrativa */
.history-header-grid .history-key-field {
    grid-column: span 2
}

.history-header-grid .history-notes-field {
    grid-column: span 1
}

.history-review-overlay {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7, 14, 29, .66);
    backdrop-filter: blur(13px)
}

.history-review-overlay[hidden] {
    display: none
}

.history-review-modal {
    width: min(760px, 100%);
    max-height: min(780px, 90vh);
    overflow: auto;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .35)
}

.history-review-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    border-radius: 15px;
    background: linear-gradient(145deg, #ffd431, #ffb800);
    color: #111a2e;
    font-size: 23px;
    font-weight: 900
}

.history-review-modal h2 {
    margin: 7px 0
}

.history-review-modal>p {
    margin: 0 0 20px;
    color: var(--muted)
}

.history-review-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px
}

.history-review-content>div {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 15px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface-soft)
}

.history-review-content>div>strong {
    margin-bottom: 4px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em
}

.history-review-content span {
    display: grid;
    gap: 3px;
    padding: 10px;
    border-radius: 11px;
    background: var(--surface)
}

.history-review-content b {
    font-size: 12px
}

.history-review-content em {
    color: var(--muted);
    font-size: 11px;
    font-style: normal
}

.history-review-modal .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px
}

.modal-open {
    overflow: hidden
}

.history-delete-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 18px;
    padding: 20px;
    border-color: rgba(239, 71, 96, .25);
    background: linear-gradient(135deg, rgba(239, 71, 96, .055), var(--surface))
}

.history-delete-zone h3 {
    margin: 4px 0
}

.history-delete-zone p {
    margin: 0;
    color: var(--muted);
    font-size: 11px
}

.history-delete-zone form {
    display: flex;
    align-items: end;
    gap: 10px
}

.history-delete-zone label {
    display: grid;
    gap: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700
}

.history-delete-zone input {
    min-width: 230px
}

.history-delete-zone .btn.danger {
    white-space: nowrap
}

@media(max-width:1100px) {

    .history-header-grid .history-key-field,
    .history-header-grid .history-notes-field {
        grid-column: auto
    }

    .history-delete-zone,
    .history-delete-zone form {
        align-items: stretch;
        flex-direction: column
    }

    .history-delete-zone input {
        width: 100%;
        min-width: 0
    }
}

@media(max-width:680px) {
    .history-review-content {
        grid-template-columns: 1fr
    }

    .history-review-modal .modal-actions {
        flex-direction: column
    }

    .history-review-modal .btn {
        width: 100%
    }
}

.history-record-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
    padding: 17px 20px;
    border: 1px solid rgba(32, 189, 117, .3);
    border-radius: 17px;
    background: rgba(32, 189, 117, .07)
}

.history-record-banner>div {
    display: flex;
    align-items: center;
    gap: 13px
}

.history-record-banner>div>span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(32, 189, 117, .13);
    color: #20bd75;
    font-weight: 900
}

.history-record-banner p {
    display: grid;
    gap: 3px;
    margin: 0
}

.history-record-banner small {
    color: var(--muted)
}

.history-list-badge {
    color: #20bd75 !important;
    font-weight: 800;
    letter-spacing: .05em
}

/* Dashboard executivo 5.0 — hierarquia, alinhamento e leitura por setor */
.dashboard-page-head {
    padding-bottom: 4px
}

.dashboard-metrics {
    gap: 14px
}

.dashboard-metrics .metric {
    min-height: 126px;
    padding: 20px
}

.dashboard-grid {
    align-items: stretch;
    gap: 18px
}

.dashboard-grid>.dashboard-card {
    height: 100%
}

.delivery-card {
    padding: 0;
    overflow: hidden
}

.delivery-filters {
    padding: 20px;
    background: linear-gradient(135deg, var(--surface-soft), color-mix(in srgb, var(--surface-soft) 72%, transparent));
    border-bottom: 1px solid var(--line)
}

.delivery-kpis {
    padding: 18px 20px 0
}

.delivery-insights {
    padding: 18px 20px 0;
    align-items: stretch
}

.delivery-chart-stage {
    height: 100%
}

.delivery-ranking {
    margin: 18px 20px 20px
}

.sector-intelligence-card {
    margin-top: 18px;
    padding: 0;
    overflow: hidden
}

.sector-intelligence-head {
    padding: 22px 24px;
    margin: 0;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(115deg, color-mix(in srgb, var(--orange) 7%, var(--surface)), var(--surface) 48%, color-mix(in srgb, #ff8a3d 5%, var(--surface)))
}

.sector-intelligence-head h3 {
    font-size: 19px;
    margin: 5px 0
}

.sector-intelligence-head p {
    max-width: 760px
}

.sector-head-summary {
    min-width: 150px;
    display: grid;
    justify-items: end;
    gap: 2px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface)
}

.sector-head-summary span,
.sector-head-summary small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700
}

.sector-head-summary strong {
    font-size: 23px;
    line-height: 1.05
}

.sector-intelligence-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(290px, .9fr);
    gap: 0
}

.sector-chart-stage,
.sector-ranking-stage {
    min-width: 0;
    padding: 22px 24px 24px
}

.sector-ranking-stage {
    border-left: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 60%, var(--surface))
}

.sector-chart-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px
}

.sector-chart-toolbar>div {
    display: grid;
    gap: 4px
}

.sector-chart-toolbar small {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .12em
}

.sector-chart-toolbar strong {
    font-size: 13px
}

.sector-delivery-chart {
    height: 330px;
    transition: height .25s ease
}

.sector-value-ranking {
    display: grid;
    gap: 0;
    margin-top: 9px
}

.sector-value-ranking article {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line)
}

.sector-value-ranking article:last-child {
    border-bottom: 0
}

.sector-value-ranking article>b {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--orange) 11%, var(--surface));
    color: var(--orange);
    font-size: 9px
}

.sector-rank-copy {
    min-width: 0;
    display: grid;
    gap: 6px
}

.sector-rank-copy>span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.sector-rank-copy strong {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sector-rank-copy em {
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    white-space: nowrap
}

.sector-rank-copy small {
    color: var(--muted);
    font-size: 9px
}

.sector-rank-copy small u {
    text-decoration: none;
    color: var(--text);
    font-weight: 700
}

.sector-rank-copy>i {
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--line)
}

.sector-rank-copy>i>u {
    display: block;
    height: 100%;
    border-radius: inherit
}

.sector-empty {
    min-height: 250px;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 6px;
    color: var(--muted)
}

.sector-empty strong {
    color: var(--text)
}

@media(max-width:1100px) {
    .sector-intelligence-grid {
        grid-template-columns: 1fr
    }

    .sector-ranking-stage {
        border-left: 0;
        border-top: 1px solid var(--line)
    }

    .sector-value-ranking {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px
    }
}

@media(max-width:680px) {

    .sector-intelligence-head,
    .sector-chart-toolbar {
        align-items: flex-start;
        flex-direction: column
    }

    .sector-head-summary {
        width: 100%;
        justify-items: start
    }

    .sector-chart-stage,
    .sector-ranking-stage {
        padding: 18px
    }

    .sector-value-ranking {
        grid-template-columns: 1fr
    }
}

/* =========================================================
   SUPPLY PRO — CAMPOS DA MOVIMENTAÇÃO HISTÓRICA
   ========================================================= */

.history-workspace {
    --history-field-bg: var(--surface);
    --history-field-border: var(--line);
    --history-field-text: var(--text);
    --history-field-muted: var(--muted);
    --history-field-focus: #ff5a0a;
}

/* Todos os campos da tela histórica */
.history-workspace input,
.history-workspace select,
.history-workspace textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 46px 0 15px;

    border: 1px solid var(--history-field-border);
    border-radius: 13px;

    background-color: var(--history-field-bg);
    color: var(--history-field-text);

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    outline: none;
    box-shadow: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

/* Campos de texto e quantidade não precisam de espaço para seta */
.history-workspace input:not([type="date"]),
.history-workspace textarea {
    padding-right: 15px;
}

/* Placeholder */
.history-workspace input::placeholder,
.history-workspace textarea::placeholder {
    color: var(--history-field-muted);
    opacity: 0.72;
    font-weight: 500;
}

/* Efeito ao passar o mouse */
.history-workspace input:hover,
.history-workspace select:hover,
.history-workspace textarea:hover {
    border-color: rgba(255, 90, 10, 0.55);
}

/* Efeito ao selecionar o campo */
.history-workspace input:focus,
.history-workspace select:focus,
.history-workspace textarea:focus {
    border-color: var(--history-field-focus);

    box-shadow:
        0 0 0 3px rgba(255, 90, 10, 0.13),
        0 8px 22px rgba(20, 29, 52, 0.08);

    transform: translateY(-1px);
}

/* Remove a aparência antiga do Windows */
.history-workspace select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;

    background-image:
        linear-gradient(45deg,
            transparent 50%,
            var(--history-field-muted) 50%),
        linear-gradient(135deg,
            var(--history-field-muted) 50%,
            transparent 50%);

    background-position:
        calc(100% - 20px) 21px,
        calc(100% - 15px) 21px;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}

/* Cor da lista aberta */
.history-workspace select option {
    background: var(--surface);
    color: var(--text);

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;

    padding: 12px;
}

/* Grupos dentro das listas */
.history-workspace select optgroup {
    background: var(--surface);
    color: var(--muted);
    font-weight: 800;
}

/* Campo de data */
.history-workspace input[type="date"] {
    cursor: pointer;
}

/* Ícone do calendário */
.history-workspace input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.65;
    filter: none;
}

/* Remove setinhas antigas dos campos numéricos */
.history-workspace input[type="number"]::-webkit-inner-spin-button,
.history-workspace input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    opacity: 0;
}

/* Campo numérico recebe destaque ao passar o mouse */
.history-workspace input[type="number"]:hover::-webkit-inner-spin-button,
.history-workspace input[type="number"]:focus::-webkit-inner-spin-button {
    opacity: 1;
}

/* Labels */
.history-workspace label {
    color: var(--history-field-muted);
    font-size: 11px;
    font-weight: 750;
}

/* Linhas dos materiais */
.history-entry-row,
.history-allocation-row {
    border-radius: 14px;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.history-entry-row:hover,
.history-allocation-row:hover {
    background: rgba(255, 90, 10, 0.025);
}

/* Botão de remover */
.history-remove {
    display: grid;
    place-items: center;

    width: 40px;
    height: 40px;

    border: 1px solid rgba(255, 91, 111, 0.28);
    border-radius: 12px;

    background: rgba(255, 91, 111, 0.07);
    color: #ff5b6f;

    font-size: 18px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.history-remove:hover {
    background: #ff5b6f;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(255, 91, 111, 0.25);
}

/* Campo inválido */
.history-workspace input:invalid:not(:placeholder-shown),
.history-workspace select:invalid:not(:focus) {
    border-color: rgba(255, 91, 111, 0.45);
}

/* Campos preenchidos */
.history-workspace input:not(:placeholder-shown),
.history-workspace select:valid {
    color: var(--history-field-text);
}

/* =========================================================
   TEMA ESCURO
   ========================================================= */

[data-theme="dark"] .history-workspace,
.dark .history-workspace {
    --history-field-bg: #111a2d;
    --history-field-border: #293752;
    --history-field-text: #f3f6fc;
    --history-field-muted: #8f9bb2;
}

[data-theme="dark"] .history-workspace select option,
.dark .history-workspace select option,
[data-theme="dark"] .history-workspace select optgroup,
.dark .history-workspace select optgroup {
    background: #111a2d;
    color: #f3f6fc;
}

[data-theme="dark"] .history-workspace input[type="date"]::-webkit-calendar-picker-indicator,
.dark .history-workspace input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.75;
}

/* =========================================================
   TEMA BRANCO
   ========================================================= */

[data-theme="light"] .history-workspace,
.light .history-workspace {
    --history-field-bg: #f8faff;
    --history-field-border: #d5deed;
    --history-field-text: #172036;
    --history-field-muted: #74819a;
}

[data-theme="light"] .history-workspace select option,
.light .history-workspace select option,
[data-theme="light"] .history-workspace select optgroup,
.light .history-workspace select optgroup {
    background: #ffffff;
    color: #172036;
}

/* Responsividade */
@media (max-width: 680px) {

    .history-workspace input,
    .history-workspace select,
    .history-workspace textarea {
        min-height: 50px;
        font-size: 14px;
    }
}

/* Corrige a filtragem da busca de materiais */
.catalog-picker-option[hidden],
.catalog-picker-empty[hidden],
.catalog-picker-menu[hidden] {
    display: none !important;
}

/* =========================================================
   JANELA CRIAR MOVIMENTAÇÃO — ROLAGEM NO PADRÃO SUPPLY
   O dialog não rola mais; a rolagem fica dentro do cartão.
   ========================================================= */

#movementModal {
    overflow: hidden;
    max-height: 92vh;
}

#movementModal .modal-card {
    box-sizing: border-box;
    max-height: 92vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ff5a0a #111a2e;
}

#movementModal .modal-card::-webkit-scrollbar {
    width: 9px;
}

#movementModal .modal-card::-webkit-scrollbar-track {
    background: #111a2e;
    border-radius: 999px;
}

#movementModal .modal-card::-webkit-scrollbar-thumb {
    min-height: 42px;
    background: #ff5a0a;
    border: 2px solid #111a2e;
    border-radius: 999px;
}

#movementModal .modal-card::-webkit-scrollbar-thumb:hover {
    background: #ffd431;
}

#movementModal .modal-card::-webkit-scrollbar-button,
#movementModal .modal-card::-webkit-scrollbar-corner {
    display: none;
    background: transparent;
}

[data-theme="light"] #movementModal .modal-card {
    scrollbar-color: #ff5a0a #eef2f7;
}

[data-theme="light"] #movementModal .modal-card::-webkit-scrollbar-track {
    background: #eef2f7;
}

[data-theme="light"] #movementModal .modal-card::-webkit-scrollbar-thumb {
    border-color: #eef2f7;
}

#movementForm button[type="submit"][disabled] {
    cursor: wait;
    opacity: .72;
    filter: saturate(.75);
}

/* Material picker: independent scrolling and top-layer placement. */
.material-results.open{overscroll-behavior:contain;touch-action:pan-y;overflow-y:auto!important;overflow-x:hidden;scrollbar-gutter:stable;scroll-behavior:auto;box-sizing:border-box;animation:none!important;z-index:10050}
.material-results[popover]{inset:auto;margin:0}
.material-results[popover]::backdrop{background:transparent;pointer-events:none}
.material-results .material-result-item{padding:10px!important;min-height:0;transform:none}
.material-results .material-result-item:focus-visible{outline:2px solid var(--accent,#ff650a);outline-offset:-2px;background:var(--surface2)}
.material-results::-webkit-scrollbar{width:10px}
.material-results::-webkit-scrollbar-thumb{background:#ff8b45;border:2px solid var(--surface,#fff);border-radius:8px}
.material-results-counter{position:sticky;bottom:0;background:var(--surface,#fff);padding:8px}