/*
 * Tema moderno (inspirado no shadcn/ui) aplicado sobre Bootstrap 5.1.3 + Skote.
 *
 * Não cria classes novas: só redefine o visual das classes que já existem
 * (.card, .btn, .form-control, .table, .badge, .dropdown-menu, .modal...).
 * Carregado por último em head-css.html.twig. A cor primária continua vindo
 * do perfil (topbar-colors.html.twig) via --bs-primary / --bs-primary-rgb.
 * O modo escuro é ativado por html[data-theme="dark"] (public/js/app.js).
 */

/* ===================== Tokens ===================== */
:root {
    --ui-font: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

    --ui-background: color-mix(in srgb, var(--bs-primary) 3%, #fafafa);
    --ui-foreground: #09090b;

    /* tons derivados da cor do perfil (--bs-primary vem de topbar-colors.html.twig) */
    --ui-primary-soft: rgba(var(--bs-primary-rgb), .08);
    --ui-primary-softer: rgba(var(--bs-primary-rgb), .04);
    --ui-primary-border: rgba(var(--bs-primary-rgb), .22);
    --ui-primary-strong: color-mix(in srgb, var(--bs-primary) 80%, #000000);
    --ui-primary-muted-text: color-mix(in srgb, var(--bs-primary) 55%, #3f3f46);
    --ui-card: #ffffff;
    --ui-muted: #f4f4f5;
    --ui-muted-foreground: #71717a;
    --ui-border: #e4e4e7;
    --ui-input: #e4e4e7;
    --ui-sidebar: #ffffff;
    --ui-hover: rgba(9, 9, 11, .045);
    --ui-ring: rgba(var(--bs-primary-rgb, 85, 110, 230), .22);

    --ui-radius-sm: .375rem;
    --ui-radius: .5rem;
    --ui-radius-lg: .75rem;
    --ui-radius-xl: 1rem;

    --ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .04);
    --ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .06), 0 1px 2px -1px rgba(0, 0, 0, .06);
    --ui-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .05);
    --ui-shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, .22);

    --ui-transition: .15s cubic-bezier(.4, 0, .2, 1);

    --bs-body-font-family: var(--ui-font) !important;
    --bs-border-color: var(--ui-border);
}

html[data-theme="dark"] {
    --ui-background: #09090b;
    --ui-foreground: #fafafa;
    --ui-card: #121214;
    --ui-muted: #1c1c20;
    --ui-muted-foreground: #a1a1aa;
    --ui-border: #27272a;
    --ui-input: #2e2e33;
    --ui-sidebar: #0f0f11;
    --ui-hover: rgba(255, 255, 255, .06);
    --ui-ring: rgba(var(--bs-primary-rgb, 85, 110, 230), .35);
    /* cores de perfil escuras perdem contraste sobre fundo escuro */
    --ui-primary-text: color-mix(in srgb, var(--bs-primary) 60%, #ffffff);

    --ui-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .3);
    --ui-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .4);
    --ui-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, .5);
    --ui-shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, .7);

    color-scheme: dark;
}

/* ===================== Base ===================== */
body {
    font-family: var(--ui-font);
    background-color: var(--ui-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01";
}

html[data-theme="dark"] body {
    color: var(--ui-muted-foreground);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -.011em;
}

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--ui-foreground);
}

.text-muted {
    color: var(--ui-muted-foreground) !important;
}

::selection {
    background: rgba(var(--bs-primary-rgb), .18);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--ui-border) transparent;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ===================== Layout ===================== */
#page-topbar {
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

/* topbar-colors.html.twig zera o fundo do menu (background: 0 !important) */
#layout-wrapper .vertical-menu:not(.vertical-menu-mobile) {
    background: var(--ui-sidebar) !important;
    border-right: 1px solid var(--ui-border);
    box-shadow: none;
}

.page-content {
    background-color: var(--ui-background);
}

.footer {
    height: 28px !important;
    padding: 0 calc(24px / 2) !important;
    display: flex;
    align-items: center;
    background-color: var(--ui-card);
    border-top: 1px solid var(--ui-border);
    color: var(--ui-muted-foreground);
    font-size: .75rem;
    z-index: 2;
}

.footer > .container-fluid {
    width: 100%;
}

.page-title-box h4 {
    text-transform: none;
    font-size: 1.35rem !important;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--ui-foreground);
}

.page-title-box .breadcrumb-item,
.page-title-box .breadcrumb-item a {
    color: var(--ui-muted-foreground);
    font-size: .8125rem;
}

/* ===================== Sidebar ===================== */
#sidebar-menu:not(.sidebar-mobile-menu) .menu-title {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--ui-muted-foreground);
    padding: 16px 24px 6px;
}

#sidebar-menu:not(.sidebar-mobile-menu) ul li a {
    color: var(--ui-muted-foreground);
    font-weight: 500;
    transition: background-color var(--ui-transition), color var(--ui-transition);
}

#sidebar-menu:not(.sidebar-mobile-menu) ul li a i {
    transition: color var(--ui-transition);
}

body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > a {
    margin: 1px 12px;
    padding: .55rem .75rem;
    border-radius: var(--ui-radius);
}

body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) ul.sub-menu li a,
body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul li a {
    margin: 1px 12px 1px 46px;
    padding: .4rem .75rem;
    border-radius: var(--ui-radius);
    position: relative;
}

/* linha-guia vertical dos submenus */
body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul {
    position: relative;
}

body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 38px;
    width: 1px;
    background: var(--ui-border);
}

/* topbar-colors.html.twig pinta o <li> inteiro do submenu; o destaque fica só no link (pílula) */
#sidebar-menu:not(.sidebar-mobile-menu) ul > li > ul > li:hover,
#sidebar-menu:not(.sidebar-mobile-menu) ul > li > ul > li .active {
    background-color: transparent;
}

/* layout.css força hover roxo (#556ee6) */
#sidebar-menu:not(.sidebar-mobile-menu) ul li a:not(.active):hover {
    background-color: var(--ui-hover);
    color: var(--ui-foreground) !important;
}

#sidebar-menu:not(.sidebar-mobile-menu) ul li a:not(.active):hover i {
    color: var(--ui-foreground);
}

#sidebar-menu:not(.sidebar-mobile-menu) > ul > li.mm-active > a {
    background-color: rgba(var(--bs-primary-rgb), .09);
    color: var(--bs-primary) !important;
}

#sidebar-menu:not(.sidebar-mobile-menu) ul li ul li a.active,
#sidebar-menu:not(.sidebar-mobile-menu) ul li ul li.mm-active > a {
    background-color: rgba(var(--bs-primary-rgb), .09);
    color: var(--bs-primary) !important;
    font-weight: 600;
}

html[data-theme="dark"] #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.mm-active > a,
html[data-theme="dark"] #sidebar-menu:not(.sidebar-mobile-menu) ul li ul li a.active {
    background-color: rgba(var(--bs-primary-rgb), .18);
    color: var(--ui-primary-text) !important;
}

/* ===================== Cards ===================== */
.card {
    background-color: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-xs);
}

.card-header,
.card-footer {
    background-color: transparent;
    border-color: var(--ui-border);
}

.card-header:first-child {
    border-radius: calc(var(--ui-radius-lg) - 1px) calc(var(--ui-radius-lg) - 1px) 0 0;
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--ui-radius-lg) - 1px) calc(var(--ui-radius-lg) - 1px);
}

.card-title {
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ui-foreground);
}

.card-title-desc {
    color: var(--ui-muted-foreground);
}

.card-img-top {
    border-top-left-radius: calc(var(--ui-radius-lg) - 1px);
    border-top-right-radius: calc(var(--ui-radius-lg) - 1px);
}

.mini-stats-wid {
    transition: box-shadow var(--ui-transition);
}

.mini-stats-wid:hover {
    box-shadow: var(--ui-shadow-md);
}

/* ===================== Buttons ===================== */
.btn {
    border-radius: var(--ui-radius);
    font-weight: 500;
    transition: background-color var(--ui-transition), border-color var(--ui-transition),
        color var(--ui-transition), box-shadow var(--ui-transition), filter var(--ui-transition);
}

.btn:not(.btn-link):not(.header-item):not(.btn-close) {
    box-shadow: var(--ui-shadow-xs);
}

.btn-sm,
.btn-group-sm > .btn {
    border-radius: var(--ui-radius-sm);
}

.btn-lg,
.btn-group-lg > .btn {
    border-radius: var(--ui-radius-lg);
}

.btn-rounded {
    border-radius: 999px !important;
}

.btn:focus-visible,
.btn:focus {
    box-shadow: 0 0 0 3px var(--ui-ring);
}

.btn-primary:hover,
.btn-primary:focus {
    filter: brightness(.92);
}

/* "outline" do shadcn */
.btn-light,
.btn-outline-light {
    background-color: var(--ui-card);
    border-color: var(--ui-border);
    color: var(--ui-foreground);
}

.btn-light:hover,
.btn-light:focus,
.btn-outline-light:hover {
    background-color: var(--ui-muted);
    border-color: var(--ui-border);
    color: var(--ui-foreground);
}

.btn-outline-secondary {
    border-color: var(--ui-border);
    color: var(--ui-foreground);
}

.btn-outline-secondary:hover {
    background-color: var(--ui-muted);
    border-color: var(--ui-border);
    color: var(--ui-foreground);
}

.header-item {
    box-shadow: none !important;
}

/* ===================== Forms ===================== */
.form-control,
.form-select {
    background-color: var(--ui-card);
    border-color: var(--ui-input);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
    color: var(--ui-foreground);
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}

.form-control-sm,
.form-select-sm {
    border-radius: var(--ui-radius-sm);
}

.form-control::placeholder {
    color: var(--ui-muted-foreground);
    opacity: .8;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ui-card);
    border-color: rgba(var(--bs-primary-rgb), .6);
    box-shadow: 0 0 0 3px var(--ui-ring);
    color: var(--ui-foreground);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--ui-muted);
    box-shadow: none;
}

.form-floating > label {
    color: var(--ui-muted-foreground);
    /* Bootstrap 5.1 não limita o rótulo: em campos estreitos ele vaza para fora do input */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* rótulo encolhido (scale .85) pode ocupar um pouco mais de largura sem sair do campo */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
    max-width: calc(100% / .85);
}

.input-group-text {
    background-color: var(--ui-muted);
    border-color: var(--ui-input);
    border-radius: var(--ui-radius);
    color: var(--ui-muted-foreground);
}

/* layout.css fixa .25rem */
input + .input-group-text {
    border-top-right-radius: var(--ui-radius);
    border-bottom-right-radius: var(--ui-radius);
}

.form-check-input {
    border-color: var(--ui-input);
    box-shadow: var(--ui-shadow-xs);
}

.form-check-input[type="checkbox"]:not([role="switch"]) {
    border-radius: .3rem;
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), .6);
    box-shadow: 0 0 0 3px var(--ui-ring);
}

.form-switch .form-check-input {
    box-shadow: none;
}

.form-label,
.col-form-label {
    font-weight: 500;
    color: var(--ui-foreground);
}

/* Select2 (layout.css deixa o fundo cinza #eee) */
.select2-container--bootstrap-5 .select2-selection,
.select2-selection {
    background-color: var(--ui-card) !important;
    border-color: var(--ui-input) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-xs) !important;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: rgba(var(--bs-primary-rgb), .6) !important;
    box-shadow: 0 0 0 3px var(--ui-ring) !important;
}

.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--ui-card);
    border-color: var(--ui-border);
    border-radius: var(--ui-radius) !important;
    box-shadow: var(--ui-shadow-md);
    overflow: hidden;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    border-radius: var(--ui-radius-sm);
    margin: 2px 4px;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--ui-muted);
    color: var(--ui-foreground);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true] {
    background-color: rgba(var(--bs-primary-rgb), .12) !important;
    color: var(--bs-primary) !important;
    font-weight: 500;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    border-radius: var(--ui-radius-sm);
    border-color: var(--ui-input);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-muted) !important;
}

.ts-wrapper .ts-control,
.ts-dropdown {
    border-radius: var(--ui-radius) !important;
    border-color: var(--ui-input) !important;
}

/* ===================== Tables ===================== */
.table {
    --bs-table-hover-bg: var(--ui-hover);
    --bs-table-striped-bg: rgba(0, 0, 0, .018);
    border-color: var(--ui-border);
    color: inherit;
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--ui-border);
}

/* Bootstrap 5.1 coloca 2px currentColor entre thead e tbody */
.table > :not(:first-child) {
    border-top: 1px solid var(--ui-border);
}

.table > thead > tr > th,
.table thead th {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--ui-muted-foreground);
    white-space: nowrap;
}

.table-light,
.table .table-light,
.table > thead.table-light > tr > th {
    --bs-table-bg: var(--ui-muted);
    background-color: var(--ui-muted);
    border-color: var(--ui-border);
    color: var(--ui-muted-foreground);
}

.table-hover > tbody > tr {
    transition: background-color var(--ui-transition);
}

html[data-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255, 255, 255, .025);
    color: var(--ui-muted-foreground);
}

.table-responsive {
    border-radius: var(--ui-radius);
}

/* ===================== Badges ===================== */
.badge {
    border-radius: var(--ui-radius-sm);
    font-weight: 500;
    letter-spacing: .01em;
    padding: .35em .6em;
}

.badge.rounded-pill {
    border-radius: 999px;
}

/* ===================== Dropdowns / popovers / tooltips ===================== */
.dropdown-menu {
    background-color: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
    padding: .3rem;
}

.dropdown-item {
    border-radius: var(--ui-radius-sm);
    padding: .45rem .65rem;
    color: var(--ui-foreground);
    transition: background-color var(--ui-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ui-muted);
    color: var(--ui-foreground);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: rgba(var(--bs-primary-rgb), .12);
    color: var(--bs-primary);
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    color: var(--ui-muted-foreground);
    opacity: .6;
}

.dropdown-divider {
    border-color: var(--ui-border);
    margin: .3rem -.3rem;
}

.dropdown-header {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ui-muted-foreground);
}

.popover {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
}

.popover-header {
    background-color: transparent;
    border-color: var(--ui-border);
    font-weight: 600;
}

.tooltip-inner {
    border-radius: var(--ui-radius-sm);
    padding: .35rem .6rem;
    font-size: .78rem;
}

/* ===================== Modals / offcanvas ===================== */
.modal-content {
    background-color: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-xl);
    box-shadow: var(--ui-shadow-lg);
}

.modal-header {
    border-color: var(--ui-border);
    border-top-left-radius: calc(var(--ui-radius-xl) - 1px);
    border-top-right-radius: calc(var(--ui-radius-xl) - 1px);
}

.modal-footer {
    background-color: var(--ui-card);
    border-color: var(--ui-border);
    border-bottom-left-radius: calc(var(--ui-radius-xl) - 1px);
    border-bottom-right-radius: calc(var(--ui-radius-xl) - 1px);
}

.modal-title {
    font-weight: 600;
    letter-spacing: -.01em;
}

.modal-backdrop {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.offcanvas {
    background-color: var(--ui-card);
    border-color: var(--ui-border) !important;
    box-shadow: var(--ui-shadow-lg);
}

/* ===================== Navs / tabs ===================== */
.nav-tabs {
    border-bottom-color: var(--ui-border);
}

.nav-tabs .nav-link {
    border-top-left-radius: var(--ui-radius);
    border-top-right-radius: var(--ui-radius);
    color: var(--ui-muted-foreground);
    font-weight: 500;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--ui-foreground);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--ui-card);
    border-color: var(--ui-border) var(--ui-border) var(--ui-card);
    color: var(--ui-foreground);
}

.nav-tabs-custom {
    border-bottom: 1px solid var(--ui-border);
}

.nav-tabs-custom .nav-item .nav-link,
.nav-tabs-custom .nav-item .nav-link.active {
    background-color: transparent;
    border-color: transparent;
}

.nav-tabs-custom .nav-item .nav-link.active {
    color: var(--bs-primary);
}

.nav-tabs-custom .nav-item .nav-link::after {
    background: var(--bs-primary);
    height: 2px;
    border-radius: 2px;
}

.nav-pills .nav-link {
    border-radius: var(--ui-radius);
    font-weight: 500;
    transition: background-color var(--ui-transition), color var(--ui-transition);
}

.nav-pills .nav-link:not(.active):hover {
    background-color: var(--ui-muted);
}

/* ===================== Pagination ===================== */
.pagination {
    gap: .25rem;
}

.page-link {
    border-radius: var(--ui-radius) !important;
    border-color: transparent;
    background-color: transparent;
    color: var(--ui-foreground);
    min-width: 2.15rem;
    text-align: center;
    transition: background-color var(--ui-transition), color var(--ui-transition);
}

.page-link:hover {
    background-color: var(--ui-muted);
    border-color: transparent;
    color: var(--ui-foreground);
}

.page-link:focus {
    box-shadow: 0 0 0 3px var(--ui-ring);
}

.page-item.active .page-link {
    background-color: var(--ui-card);
    border-color: var(--ui-border);
    color: var(--ui-foreground);
    font-weight: 600;
    box-shadow: var(--ui-shadow-xs);
}

.page-item.disabled .page-link {
    background-color: transparent;
    border-color: transparent;
    color: var(--ui-muted-foreground);
}

/* ===================== Misc components ===================== */
.alert {
    border-radius: var(--ui-radius-lg);
}

.list-group {
    border-radius: var(--ui-radius-lg);
}

.list-group-item {
    background-color: var(--ui-card);
    border-color: var(--ui-border);
}

.accordion-item {
    background-color: var(--ui-card);
    border-color: var(--ui-border);
}

.accordion-item:first-of-type,
.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: var(--ui-radius-lg);
    border-top-right-radius: var(--ui-radius-lg);
}

.accordion-item:last-of-type,
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-left-radius: var(--ui-radius-lg);
    border-bottom-right-radius: var(--ui-radius-lg);
}

.accordion-button {
    font-weight: 500;
}

.accordion-button:focus {
    box-shadow: 0 0 0 3px var(--ui-ring);
}

.progress {
    border-radius: 999px;
    background-color: var(--ui-muted);
}

.progress-bar:last-child {
    border-radius: 999px;
}

.avatar-title.rounded,
.avatar-xs .rounded,
.avatar-sm .rounded,
.avatar-md.rounded {
    border-radius: var(--ui-radius) !important;
}

.img-thumbnail {
    border-color: var(--ui-border);
    border-radius: var(--ui-radius);
}

hr {
    border-color: var(--ui-border);
    opacity: 1;
}

.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
    border-color: var(--ui-border);
}

.bg-light {
    background-color: var(--ui-muted) !important;
}

.datepicker.dropdown-menu {
    padding: .5rem;
}

.datepicker table tr td,
.datepicker table tr th {
    border-radius: var(--ui-radius-sm);
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active {
    background: var(--bs-primary) !important;
    color: #fff !important;
    text-shadow: none;
}

/* ===================== Alerts de terceiros ===================== */
.swal2-popup {
    border-radius: var(--ui-radius-xl) !important;
    box-shadow: var(--ui-shadow-lg);
    font-family: var(--ui-font);
}

.swal2-styled {
    border-radius: var(--ui-radius) !important;
    font-weight: 500 !important;
}

#toast-container > div {
    border-radius: var(--ui-radius-lg);
    box-shadow: var(--ui-shadow-md);
    opacity: 1;
}

#toast-container > div:hover {
    box-shadow: var(--ui-shadow-lg);
}

/* ===================== Superfícies no modo escuro =====================
 * bootstrap-dark/app-dark usam um azul-acinzentado fixo (#2a3042, #32394e);
 * aqui as superfícies principais passam a seguir os tokens neutros.
 */
html[data-theme="dark"] .page-content,
html[data-theme="dark"] .main-content {
    background-color: var(--ui-background);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
    background-color: var(--ui-card);
    border-color: var(--ui-input);
    color: var(--ui-foreground);
}

html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-control[readonly] {
    background-color: var(--ui-muted);
}

html[data-theme="dark"] .form-check-input:not(:checked) {
    background-color: var(--ui-card);
}

html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table .table-light {
    --bs-table-bg: var(--ui-muted);
    color: var(--ui-muted-foreground);
}

html[data-theme="dark"] .btn-light {
    background-color: var(--ui-muted);
}

html[data-theme="dark"] .btn-light:hover {
    background-color: #26262b;
}

html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .page-title-box h4 {
    color: var(--ui-foreground);
}

html[data-theme="dark"] .select2-container--bootstrap-5 .select2-selection__rendered {
    color: var(--ui-foreground) !important;
}

html[data-theme="dark"] .text-primary,
html[data-theme="dark"] .nav-tabs-custom .nav-item .nav-link.active,
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true] {
    color: var(--ui-primary-text) !important;
}

html[data-theme="dark"] .alert {
    background-color: rgba(var(--ui-alert-rgb, 161, 161, 170), .1);
    border-color: rgba(var(--ui-alert-rgb, 161, 161, 170), .25);
    color: rgb(var(--ui-alert-rgb, 161, 161, 170));
}

html[data-theme="dark"] .alert-success { --ui-alert-rgb: 74, 222, 128; }
html[data-theme="dark"] .alert-danger { --ui-alert-rgb: 248, 113, 113; }
html[data-theme="dark"] .alert-warning { --ui-alert-rgb: 251, 191, 36; }
html[data-theme="dark"] .alert-info { --ui-alert-rgb: 56, 189, 248; }


/* ===================== Cor do perfil =====================
 * Espalha a cor do perfil (--bs-primary) por cabeçalhos, tabelas, forms e
 * modais, no lugar do roxo fixo do Skote (#556ee6). Só tons claros: o tema
 * continua claro.
 */

/* Skote fixa roxo em links, avatares, barras e badges "primary" */
a {
    color: var(--bs-primary);
}

a:hover {
    color: var(--ui-primary-strong);
}

.avatar-title {
    background-color: var(--bs-primary);
}

.progress-bar {
    background-color: var(--bs-primary);
}

.badge-soft-primary {
    color: var(--ui-primary-strong);
    background-color: rgba(var(--bs-primary-rgb), .14);
}

.badge-soft-primary[href]:hover,
.badge-soft-primary[href]:focus {
    color: var(--ui-primary-strong);
    background-color: rgba(var(--bs-primary-rgb), .26);
}

.bg-primary.bg-soft {
    background-color: rgba(var(--bs-primary-rgb), .18) !important;
}

/* SweetAlert recebe o roxo via confirmButtonColor inline; troca só esse caso */
.swal2-styled.swal2-confirm[style*="rgb(85, 110, 230)"] {
    background-color: var(--bs-primary) !important;
}

/* Cabeçalho da página em banner tingido */
.page-content > .container-fluid > .row > .col-12 > .page-title-box {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--bs-primary-rgb), .14) 0%, transparent 55%),
        linear-gradient(135deg, rgba(var(--bs-primary-rgb), .07), var(--ui-card) 70%);
    border: 1px solid var(--ui-primary-border);
    border-radius: var(--ui-radius-xl);
    padding: 1.25rem 1.5rem !important;
    margin-bottom: 1.5rem;
    box-shadow: var(--ui-shadow-xs);
}

.page-content > .container-fluid > .row > .col-12 > .page-title-box h4 {
    font-size: 1.5rem !important;
    font-weight: 700;
}

.page-title-box .fa-info-circle {
    color: var(--bs-primary);
    font-size: .9rem;
    opacity: .7;
}

/* Títulos de seção com barra de destaque */
.card-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 1em;
    margin-right: .55rem;
    border-radius: 4px;
    background: var(--bs-primary);
    vertical-align: -.14em;
}

/* KPIs */
.mini-stats-wid {
    border-color: var(--ui-primary-border);
    background-image: linear-gradient(160deg, rgba(var(--bs-primary-rgb), .07), transparent 55%);
}

.mini-stats-wid:hover {
    border-color: rgba(var(--bs-primary-rgb), .4);
}

/* Sidebar */
#sidebar-menu:not(.sidebar-mobile-menu) ul li a:not(.active):hover {
    background-color: var(--ui-primary-soft);
    color: var(--ui-primary-strong) !important;
}

#sidebar-menu:not(.sidebar-mobile-menu) ul li a:not(.active):hover i {
    color: var(--bs-primary);
}

#sidebar-menu:not(.sidebar-mobile-menu) > ul > li.mm-active > a {
    background-color: rgba(var(--bs-primary-rgb), .12);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

#sidebar-menu:not(.sidebar-mobile-menu) .menu-title {
    color: var(--ui-primary-muted-text);
}

/* Tabelas */
.table {
    --bs-table-hover-bg: rgba(var(--bs-primary-rgb), .045);
    --bs-table-striped-bg: var(--ui-primary-softer);
}

.table-light,
.table .table-light,
.table > thead.table-light > tr > th {
    --bs-table-bg: rgba(var(--bs-primary-rgb), .07);
    background-color: rgba(var(--bs-primary-rgb), .07);
    color: var(--ui-primary-muted-text);
}

.table > thead > tr > th {
    color: var(--ui-primary-muted-text);
}

/* linha marcada na seleção em lote */
.table > tbody > tr:has(.status-check:checked) > * {
    --bs-table-accent-bg: rgba(var(--bs-primary-rgb), .09);
}

.table > tbody > tr:has(.status-check:checked) > :first-child {
    box-shadow: inset 3px 0 0 var(--bs-primary), inset 0 0 0 9999px rgba(var(--bs-primary-rgb), .09);
}

.table > tfoot > tr > * {
    background-color: var(--ui-primary-softer);
    font-weight: 600;
}

/* Botões neutros ganham a cor do perfil ao interagir */
.btn-light:hover,
.btn-light:focus,
.btn-light.show,
.btn-outline-light:hover {
    background-color: var(--ui-primary-soft);
    border-color: var(--ui-primary-border);
    color: var(--ui-primary-strong);
}

.btn-outline-primary:not(:hover):not(.active) {
    background-color: var(--ui-primary-softer);
}

/* Chips selecionáveis (input.btn-check + label.btn-light): marcado vira sólido na cor do perfil.
 * Não usar btn-outline-primary aqui: o topbar-colors força color primary !important e o texto some quando marcado. */
.btn-check:checked + .btn-light,
.btn-check:active + .btn-light {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #ffffff;
}

.btn-check:focus-visible + .btn-light {
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .3);
}

/* Forms */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-select:focus ~ label {
    color: var(--bs-primary);
    opacity: 1;
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--ui-primary-border);
}

.input-group-text {
    background-color: var(--ui-primary-soft);
    border-color: var(--ui-input);
    color: var(--ui-primary-strong);
}

/* Abas */
.nav-tabs-custom .nav-item .nav-link.active {
    background-color: var(--ui-primary-soft);
    border-top-left-radius: var(--ui-radius);
    border-top-right-radius: var(--ui-radius);
}

.nav-tabs-custom .nav-item .nav-link:not(.active):hover {
    color: var(--bs-primary);
}

/* Dropdowns e Select2 */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
}

.dropdown-item:hover i,
.dropdown-item:focus i {
    color: var(--bs-primary);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
}

/* Paginação */
.page-link:hover {
    background-color: var(--ui-primary-soft);
    color: var(--ui-primary-strong);
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(var(--bs-primary-rgb), .55);
}

/* Modais: o header já usa .env-color (cor do perfil) */
.modal-content {
    border-color: var(--ui-primary-border);
}

.modal-footer {
    background-color: var(--ui-primary-softer);
}

/* Alerts "primary" e lista ativa */
.alert-primary {
    background-color: var(--ui-primary-soft);
    border-color: var(--ui-primary-border);
    color: var(--ui-primary-strong);
}

.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.datepicker table tr td.today {
    background: var(--ui-primary-soft) !important;
    color: var(--ui-primary-strong) !important;
}

html[data-theme="dark"] .page-content > .container-fluid > .row > .col-12 > .page-title-box {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(var(--bs-primary-rgb), .22) 0%, transparent 55%),
        var(--ui-card);
}

html[data-theme="dark"] .table > thead > tr > th,
html[data-theme="dark"] .table-light {
    color: var(--ui-muted-foreground);
}

html[data-theme="dark"] :is(.dropdown-item:hover, .btn-light:hover, .page-link:hover, .input-group-text, .badge-soft-primary) {
    color: var(--ui-primary-text);
}

/* ===================== Modais na cor do perfil =====================
 * Inspirado na tela de detalhe do Volly: superfícies tingidas, ícones em
 * "chips" sólidos, abas como controle segmentado e ações com brilho.
 */

/* _base-form.html.twig força border: none inline; a moldura vem do box-shadow */
.modal-content {
    box-shadow:
        0 0 0 1px rgba(var(--bs-primary-rgb), .28),
        0 28px 64px -16px rgba(var(--bs-primary-rgb), .45),
        var(--ui-shadow-lg);
}

/* .env-color mantém a cor do perfil; aqui só ganha brilho e profundidade */
.modal-header.env-color {
    background-image:
        radial-gradient(120% 220% at 100% 0%, rgba(255, 255, 255, .22) 0%, transparent 45%),
        linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .14));
    border-bottom: 0;
    padding: 1rem 1.25rem;
}

.modal-header:not(.env-color) {
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .12), rgba(var(--bs-primary-rgb), .02));
    border-bottom-color: var(--ui-primary-border);
}

.modal-header .modal-title {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.modal-header.env-color .modal-title > i:first-child {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--ui-radius);
    background-color: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    font-size: .95rem;
}

.modal-body {
    background:
        radial-gradient(90% 260px at 0% 0%, rgba(var(--bs-primary-rgb), .09), transparent 70%),
        linear-gradient(180deg, rgba(var(--bs-primary-rgb), .045), transparent 320px),
        var(--ui-card);
}

/* Resumo do registro no topo do form (alert bg-primary bg-opacity-10) como "hero" */
.modal-body .alert.bg-primary.bg-opacity-10 {
    background:
        radial-gradient(140% 160% at 0% 0%, rgba(var(--bs-primary-rgb), .2), transparent 60%),
        linear-gradient(120deg, rgba(var(--bs-primary-rgb), .12), rgba(var(--bs-primary-rgb), .03)) !important;
    border: 1px solid var(--ui-primary-border) !important;
    border-radius: var(--ui-radius-lg);
    padding: 1rem 1.25rem;
}

/* Badges sólidos do resumo: texto branco sobre success/warning/info/danger do Skote fica entre 1.8:1 e 3:1.
 * Viram um tom forte da própria cor com texto escuro (claro no modo escuro), >= 5:1. primary segue sólido (branco passa). */
.modal-body .alert.bg-primary.bg-opacity-10 .badge:is(.bg-success, .bg-danger, .bg-warning, .bg-info, .bg-secondary) {
    --ui-badge-color: var(--bs-success);
    background-color: color-mix(in srgb, var(--ui-badge-color) 18%, var(--ui-card)) !important;
    color: color-mix(in srgb, var(--ui-badge-color) 55%, #000000);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-badge-color) 35%, transparent);
}

.modal-body .alert.bg-primary.bg-opacity-10 .badge.bg-danger { --ui-badge-color: var(--bs-danger); }
.modal-body .alert.bg-primary.bg-opacity-10 .badge.bg-warning { --ui-badge-color: var(--bs-warning); }
.modal-body .alert.bg-primary.bg-opacity-10 .badge.bg-info { --ui-badge-color: var(--bs-info); }
.modal-body .alert.bg-primary.bg-opacity-10 .badge.bg-secondary { --ui-badge-color: var(--bs-secondary); }

html[data-theme="dark"] .modal-body .alert.bg-primary.bg-opacity-10 .badge:is(.bg-success, .bg-danger, .bg-warning, .bg-info, .bg-secondary) {
    background-color: color-mix(in srgb, var(--ui-badge-color) 22%, var(--ui-card)) !important;
    color: color-mix(in srgb, var(--ui-badge-color) 70%, #ffffff);
}

.modal-body .alert.bg-primary.bg-opacity-10 > i.text-primary:first-child {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--ui-radius-lg);
    background-color: var(--bs-primary);
    color: #fff !important;
    box-shadow: 0 6px 16px -6px rgba(var(--bs-primary-rgb), .8);
}

/* Cards de seção do form */
.modal-body .card {
    background-color: var(--ui-card);
    box-shadow: 0 0 0 1px var(--ui-primary-border), var(--ui-shadow-sm) !important;
}

.modal-body .card > .card-header.bg-primary.bg-opacity-10 {
    background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), .15), rgba(var(--bs-primary-rgb), .03)) !important;
    border-bottom: 1px solid var(--ui-primary-border);
    color: var(--ui-primary-strong);
}

.modal-body .card > .card-header i.text-primary:first-child {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    margin-right: .6rem !important;
    border-radius: var(--ui-radius);
    background-color: var(--bs-primary);
    color: #fff !important;
    font-size: .85rem;
    box-shadow: 0 4px 10px -4px rgba(var(--bs-primary-rgb), .8);
}

/* Abas do modal como controle segmentado */
.modal .nav-tabs-custom {
    gap: .3rem;
    padding: .3rem;
    border: 1px solid var(--ui-primary-border);
    border-radius: var(--ui-radius-lg);
    background-color: rgba(var(--bs-primary-rgb), .07);
}

.modal .nav-tabs-custom .nav-item .nav-link {
    border: 0;
    border-radius: var(--ui-radius) !important;
    color: var(--ui-primary-muted-text);
    padding: .55rem .75rem;
    transition: background-color var(--ui-transition), color var(--ui-transition), box-shadow var(--ui-transition);
}

.modal .nav-tabs-custom .nav-item .nav-link::after {
    display: none;
}

.modal .nav-tabs-custom .nav-item .nav-link:not(.active):hover {
    background-color: rgba(var(--bs-primary-rgb), .1);
    color: var(--ui-primary-strong);
}

/* !important no texto: a aba ativa aparecia com o texto escuro sobre o fundo primary (print do usuário) */
.modal .nav-tabs-custom .nav-item .nav-link.active,
.modal .nav-tabs-custom .nav-item .nav-link.active * {
    color: #fff !important;
}

.modal .nav-tabs-custom .nav-item .nav-link.active {
    background-color: var(--bs-primary);
    box-shadow: 0 6px 14px -6px rgba(var(--bs-primary-rgb), .85);
}

/* alerta de validação da aba (form-tabs-controller) sempre vermelho, inclusive na aba ativa;
   o fundo branco mantém o vermelho visível quando a cor do perfil também é vermelha */
.modal .nav-tabs-custom .nav-item .nav-link .form-tabs-error {
    color: var(--bs-danger) !important;
}

.modal .nav-tabs-custom .nav-item .nav-link.active .form-tabs-error {
    background: #fff;
    border-radius: 50%;
}

/* Campos sobre o fundo tingido */
.modal-body .form-control,
.modal-body .form-select,
.modal-body .select2-container--bootstrap-5 .select2-selection {
    background-color: var(--ui-card) !important;
}

.modal-body .form-check-input:checked {
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .18);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background-color: rgba(var(--bs-primary-rgb), .12) !important;
    color: var(--ui-primary-strong) !important;
}

.dropzone-container {
    border: 2px dashed var(--ui-primary-border);
    border-radius: var(--ui-radius-lg);
    background-color: var(--ui-primary-softer);
    transition: border-color var(--ui-transition), background-color var(--ui-transition);
}

.dropzone-container:hover {
    border-color: var(--bs-primary);
    background-color: var(--ui-primary-soft);
}

.dropzone-placeholder {
    color: var(--ui-primary-muted-text);
}

/* Rodapé: fica dentro do .modal-body e é sticky */
.modal .modal-footer {
    background-color: color-mix(in srgb, var(--ui-card) 82%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ui-primary-border);
}

/* bootstrap.min.css (Skote) força .btn-secondary { color: #eff2f7 !important } */
.modal .modal-footer .btn-secondary {
    background-color: var(--ui-card);
    border-color: var(--ui-border);
    color: var(--ui-foreground) !important;
}

.modal .modal-footer .btn-secondary:hover {
    background-color: var(--ui-primary-soft);
    border-color: var(--ui-primary-border);
    color: var(--ui-primary-strong) !important;
}

.modal .btn-primary {
    box-shadow: 0 8px 18px -8px rgba(var(--bs-primary-rgb), .9);
}

/* SweetAlert (confirmações) */
.swal2-popup {
    border-top: 4px solid var(--bs-primary);
    background:
        radial-gradient(120% 140px at 50% 0%, rgba(var(--bs-primary-rgb), .1), transparent 70%),
        var(--ui-card) !important;
}

html[data-theme="dark"] .modal-body .card > .card-header.bg-primary.bg-opacity-10,
html[data-theme="dark"] .modal .nav-tabs-custom .nav-item .nav-link:not(.active) {
    color: var(--ui-primary-text);
}

/* ===================== Navbar (topbar desktop) =====================
 * O fundo continua na cor do perfil (topbar-colors.html.twig usa
 * `background: <cor> !important`); aqui entram brilho, botões de ícone
 * arredondados e o usuário em pílula. O topbar mobile (#page-mobile-topbar)
 * não é alterado.
 */
html body[data-topbar=dark] #page-topbar {
    background-image:
        radial-gradient(60% 160% at 0% 0%, rgba(255, 255, 255, .16), transparent 60%),
        radial-gradient(40% 200% at 100% 100%, rgba(0, 0, 0, .18), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(0, 0, 0, .06)) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .12);
    box-shadow: 0 6px 20px -10px rgba(var(--bs-primary-rgb), .6);
}

#page-topbar .navbar-brand-box {
    position: relative;
}

/* os grupos internos esticavam os itens até 70px; agora ficam centralizados */
#page-topbar .navbar-header > .d-flex {
    align-items: center;
    align-self: stretch;
}

#page-topbar .navbar-header > .d-flex > .navbar-brand-box {
    align-self: stretch;
    display: flex;
    align-items: center;
}

#page-topbar .navbar-brand-box::after {
    content: "";
    position: absolute;
    top: 18px;
    bottom: 18px;
    right: 0;
    width: 1px;
    background: rgba(255, 255, 255, .18);
}

/* Botões de ícone: de faixa de 70px para quadrados arredondados */
#page-topbar .header-item:not(#page-header-user-dropdown) {
    height: 40px;
    min-width: 40px;
    margin: 0 2px;
    padding: 0 .6rem;
    border-radius: var(--ui-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .88);
    transition: background-color var(--ui-transition), color var(--ui-transition), transform var(--ui-transition);
}

#page-topbar .header-item:not(#page-header-user-dropdown):hover,
#page-topbar .navbar-header .dropdown .show.header-item {
    background-color: rgba(255, 255, 255, .16);
    color: #fff;
}

#page-topbar .header-item:not(#page-header-user-dropdown):active {
    transform: scale(.94);
}

#page-topbar .noti-icon i {
    font-size: 20px;
    color: inherit;
}

#page-topbar #vertical-menu-btn {
    margin-left: .75rem;
}

#page-topbar .header-lang-img {
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .35);
}

/* layout.css posiciona o badge para a altura antiga (70px) */
#page-topbar .noti-icon .badge {
    top: 2px;
    right: 0;
    min-width: 18px;
    padding: .2em .4em;
    font-size: .65rem;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
}

/* Empresa / franquia atual */
#page-topbar .topbar-context {
    margin-left: .5rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    line-height: 1.15;
}

#page-topbar .topbar-context strong {
    font-weight: 600;
    letter-spacing: -.01em;
}

#page-topbar .topbar-context small {
    opacity: .75;
    font-size: .72rem;
}

/* Usuário em pílula */
#page-topbar #page-header-user-dropdown {
    height: 46px;
    margin: 0 .25rem 0 .35rem;
    padding: 3px .85rem 3px 3px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16) !important;
    color: #fff;
    line-height: 1.15;
    transition: background-color var(--ui-transition);
}

#page-topbar #page-header-user-dropdown:hover,
#page-topbar #page-header-user-dropdown[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, .18);
}

#page-topbar .header-profile-user {
    width: 40px;
    height: 40px;
    padding: 0;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}

#page-topbar #page-header-user-dropdown strong {
    font-weight: 600;
    font-size: .875rem;
}

#page-topbar #page-header-user-dropdown small {
    font-size: .65rem;
    letter-spacing: .06em;
    opacity: .75;
}

#page-topbar .topbar-logo {
    height: 32px;
    margin-left: .5rem !important;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, .18);
    opacity: .9;
}

/* Menus que abrem a partir da barra.
 * O Skote posiciona com top: 100% e anulava o transform do Popper pela própria animação
 * (DropDownSlide, fill-mode both); com a animação do tema, o deslocamento do Popper voltava a
 * somar e o menu abria longe. Os grupos ocupam a altura da barra e o menu abre logo abaixo dela. */
#page-topbar .navbar-header > .d-flex > .dropdown:not(.d-none) {
    display: flex !important;
    align-items: center;
    align-self: stretch;
    position: relative;
}

@media (min-width: 992px) {
    #page-topbar .navbar-header > .d-flex > .dropdown.d-lg-inline-block {
        display: flex !important;
        align-items: center;
        align-self: stretch;
        position: relative;
    }
}

/* Grupos que só aparecem a partir de um breakpoint (d-none d-md-inline-block) ficam fora da regra acima */
#page-topbar .navbar-header > .d-flex > .dropdown.d-none {
    align-self: stretch;
    position: relative;
}

/* No celular o Skote abre o menu na largura da tela (grupo estático + left/right: 10px);
 * com o grupo relativo, o menu ficava preso ao botão e saía pela direita. */
@media (max-width: 600px) {
    #page-topbar .navbar-header > .d-flex > .dropdown:not(.d-none),
    #page-topbar .navbar-header > .d-flex > .dropdown.d-none {
        position: static;
    }
}

#page-topbar .dropdown-menu.show {
    top: calc(100% + 10px) !important;
    transform: none !important;
}

#page-topbar .dropdown-menu {
    border-color: var(--ui-primary-border);
    box-shadow: 0 18px 40px -14px rgba(var(--bs-primary-rgb), .45), var(--ui-shadow-md);
}

#page-topbar .dropdown-menu.show {
    animation: ui-dropdown-in .14s cubic-bezier(.4, 0, .2, 1);
}

/* translate/scale (e não transform): o Popper posiciona o menu com transform inline */
@keyframes ui-dropdown-in {
    from {
        opacity: 0;
        translate: 0 -4px;
        scale: .98;
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

#page-topbar .notification-item:hover {
    background-color: var(--ui-primary-softer);
}

@media (prefers-reduced-motion: reduce) {
    #page-topbar .dropdown-menu.show {
        animation: none;
    }
}

/* ===================== Menu lateral: animações e modo recolhido =====================
 * Só desktop (>= 992px); o menu mobile (.mobile / .with-menu) tem comportamento próprio.
 */
@media (min-width: 992px) {
    /* --- micro-animações dos itens (aberto ou recolhido) --- */
    #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > a i {
        transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), color var(--ui-transition);
    }

    #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > a:hover i {
        transform: scale(1.15) rotate(-6deg);
    }

    /* ícone e texto lado a lado: rótulo longo quebra ao lado do ícone, não embaixo dele */
    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) ul li a {
        display: flex;
        align-items: center;
    }

    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) ul li a i {
        flex-shrink: 0;
    }

    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) ul li a span {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.3;
        transition: transform .2s ease;
    }

    /* a seta (float no Skote) vira o último item do flex */
    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) ul li a.has-arrow::after {
        margin-left: auto;
        padding-left: .35rem;
    }

    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > a:hover span {
        transform: translateX(3px);
    }

    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) ul.sub-menu li a,
    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul li a {
        transition: background-color var(--ui-transition), color var(--ui-transition), padding-left .2s ease;
    }

    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) ul.sub-menu li a:hover,
    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul li a:hover {
        padding-left: 1.05rem;
    }

    /* submenu abrindo (metisMenu) */
    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul.mm-show > li {
        animation: ui-menu-item-in .22s ease both;
    }

    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul.mm-show > li:nth-child(2) { animation-delay: .03s; }
    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul.mm-show > li:nth-child(3) { animation-delay: .06s; }
    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul.mm-show > li:nth-child(4) { animation-delay: .09s; }
    body:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > ul.mm-show > li:nth-child(n+5) { animation-delay: .12s; }

    /* --- recolher / expandir (body.sidebar-animating é posto pelo clique em app.js) --- */
    body.sidebar-animating #layout-wrapper .vertical-menu,
    body.sidebar-animating .navbar-brand-box {
        transition: width .28s cubic-bezier(.4, 0, .2, 1);
        overflow: hidden;
    }

    body.sidebar-animating .main-content {
        transition: margin-left .28s cubic-bezier(.4, 0, .2, 1);
    }

    body.sidebar-animating .footer {
        transition: left .28s cubic-bezier(.4, 0, .2, 1);
    }

    body.sidebar-animating:not(.vertical-collpsed) #sidebar-menu:not(.sidebar-mobile-menu) :is(.menu-title, a span, ul.sub-menu) {
        animation: ui-label-in .3s ease both;
    }

    /* --- modo recolhido --- */
    /* Skote deixa o menu absolute (fundo só do tamanho da tela) e o simplebar com overflow visible;
       aqui ele fica fixo na altura toda e rola. O transform cria o bloco de contenção dos painéis fixed. */
    body.vertical-collpsed #layout-wrapper .vertical-menu:not(.vertical-menu-mobile) {
        position: fixed;
        top: 70px;
        bottom: 0;
        transform: translateX(0);
    }

    /* um único container de rolagem: o do simplebar (ou o próprio [data-simplebar] se ele não
       tiver inicializado); dois scrolls aninhados faziam a rolagem travar e pular */
    body.vertical-collpsed .vertical-menu:not(.vertical-menu-mobile) [data-simplebar]:not([data-simplebar="init"]),
    body.vertical-collpsed .vertical-menu:not(.vertical-menu-mobile) .simplebar-content-wrapper {
        height: 100%;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        scrollbar-width: none;
    }

    body.vertical-collpsed .vertical-menu:not(.vertical-menu-mobile) .simplebar-content-wrapper::-webkit-scrollbar {
        display: none;
    }

    body.vertical-collpsed .vertical-menu:not(.vertical-menu-mobile) .simplebar-mask {
        overflow: hidden !important;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul {
        padding-top: .5rem;
        padding-bottom: 1.5rem;
    }

    /* ícone sempre no centro do quadrado (Skote usa padding/margin-left/min-width para alinhar) */
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > a,
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li:hover > a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-height: 44px;
        margin: 4px 13px;
        padding: 0 !important;
        border-radius: var(--ui-radius-lg);
        box-shadow: none;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li > a i,
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li:hover > a i {
        width: auto;
        min-width: 0;
        margin: 0 !important;
        padding: 0;
        font-size: 1.35rem;
        line-height: 1;
        text-align: center;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.mm-active > a {
        background-color: rgba(var(--bs-primary-rgb), .14);
        box-shadow: none;
    }

    /* Menu recolhido, ao lado do ícone (o ícone termina em 57px):
       - hover em qualquer item: tooltip com o nome;
       - item com submenu: nome + submenu abrem num painel só no clique (li.flyout-open, app.js).
       Tooltip e painel são fixed para escapar da rolagem do menu; --flyout-top vem de
       initCollapsedMenuFlyout. */
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li:hover > a,
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > a {
        background-color: rgba(var(--bs-primary-rgb), .14) !important;
        color: var(--bs-primary) !important;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li:hover > a i,
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > a i {
        color: var(--bs-primary);
    }

    /* Skote mostra o submenu no hover; aqui só com o painel aberto */
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li:not(.flyout-open) > ul {
        display: none !important;
    }

    /* item com submenu: nada no hover (o nome aparece no painel, ao clicar) */
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li:has(> ul):not(.flyout-open) > a span {
        display: none !important;
    }

    /* item sem submenu: tooltip com o nome (Skote mostrava o rótulo como faixa larga no hover) */
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li:not(:has(> ul)):hover > a span {
        position: fixed;
        top: calc(var(--flyout-top, 0px) + 26px);
        left: 66px;
        z-index: 11;
        display: block !important;
        padding: .35rem .65rem !important;
        border-radius: var(--ui-radius-sm);
        background-color: #18181b;
        color: #fff;
        font-size: .78rem;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        transform: translateY(-50%);
        box-shadow: var(--ui-shadow-md);
        pointer-events: none;
        animation: ui-flyout-in .15s ease both;
    }

    /* setinha apontando para o ícone */
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li:not(:has(> ul)):hover > a span::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -4px;
        width: 8px;
        height: 8px;
        background-color: inherit;
        transform: translateY(-50%) rotate(45deg);
        border-radius: 1px;
    }

    html[data-theme="dark"] body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li:not(:has(> ul)):hover > a span {
        background-color: #f4f4f5;
        color: #09090b;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > a span {
        position: fixed;
        top: calc(var(--flyout-top, 0px) + 4px);
        left: 64px;
        z-index: 10;
        display: flex !important;
        align-items: center;
        width: 230px;
        height: 44px;
        padding: 0 1rem !important;
        border-radius: var(--ui-radius-lg);
        background-color: var(--ui-card);
        color: var(--ui-primary-strong);
        font-weight: 600;
        white-space: nowrap;
        box-shadow: 0 0 0 1px var(--ui-primary-border), 0 12px 32px -12px rgba(var(--bs-primary-rgb), .45), var(--ui-shadow-md);
        animation: ui-flyout-in .18s ease both;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > a span {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > ul {
        display: block !important;
        position: fixed !important;
        top: calc(var(--flyout-top, 0px) + 48px);
        left: 64px !important;
        width: 230px !important;
        height: auto !important;
        max-height: calc(100vh - 70px - var(--flyout-top, 0px) - 64px);
        overflow-y: auto;
        padding: .35rem;
        background-color: var(--ui-card);
        border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
        box-shadow: 0 0 0 1px var(--ui-primary-border), 0 18px 36px -14px rgba(var(--bs-primary-rgb), .45), var(--ui-shadow-md);
        z-index: 9;
        animation: ui-flyout-in .18s ease both;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > ul a,
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > ul a:hover {
        width: auto !important;
        margin: 1px 0;
        padding: .45rem .7rem;
        border-radius: var(--ui-radius);
        color: var(--ui-muted-foreground);
        transition: background-color var(--ui-transition), color var(--ui-transition), padding-left .2s ease;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > ul a:hover {
        padding-left: 1rem;
        background-color: var(--ui-primary-soft);
        color: var(--ui-primary-strong) !important;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > ul a.active {
        background-color: rgba(var(--bs-primary-rgb), .12);
        color: var(--bs-primary) !important;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > ul > li {
        animation: ui-menu-item-in .2s ease both;
    }

    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > ul > li:nth-child(2) { animation-delay: .03s; }
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > ul > li:nth-child(3) { animation-delay: .06s; }
    body.vertical-collpsed #sidebar-menu:not(.sidebar-mobile-menu) > ul > li.flyout-open > ul > li:nth-child(n+4) { animation-delay: .09s; }
}

@keyframes ui-flyout-in {
    from {
        opacity: 0;
        translate: -6px 0;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes ui-menu-item-in {
    from {
        opacity: 0;
        translate: -8px 0;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes ui-label-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar-menu *,
    #sidebar-menu *::before,
    body.sidebar-animating * {
        animation: none !important;
        transition: none !important;
    }
}

/* ===================== Apelidos de ícones =====================
 * O projeto carrega o Font Awesome 5.13, mas vários templates usam nomes do FA4/FA6 que não
 * existem nele (o ícone ficava vazio — ex.: o lápis no cabeçalho de 39 modais de edição).
 * Aqui eles apontam para o glifo equivalente do FA5. Fica neste arquivo porque ele é carregado
 * nos modos claro e escuro (o custom-app.css é trocado pelo custom-app-dark.css).
 */
.fa-pencil::before {
    content: "\f303"; /* fa-pencil-alt (FA4: fa-pencil) */
}

.fa-gears::before {
    content: "\f085"; /* fa-cogs (FA6: fa-gears) */
}

.fa-bell-concierge::before {
    content: "\f562"; /* fa-concierge-bell (FA6: fa-bell-concierge) */
}

.fa-shines::before {
    content: "\f0d0"; /* fa-magic: usado nos botões de IA; "fa-shines" não existe */
}

.fa-file-promotion::before {
    content: "\f02c"; /* fa-tags: promoção de milhas; "fa-file-promotion" não existe */
}

/* =========================================================
   Kanban (Stimulus dragula-controller, motor SortableJS)
   ContactExternal e fluxos de Milhas. O espelho do card arrastado fica no <body>.
   O Sortable move o espelho com transform inline: inclinação via rotate/scale (propriedades independentes).
   ========================================================= */
.kanban-ghost {
    background: color-mix(in srgb, var(--flow-color, var(--bs-primary)) 10%, transparent) !important;
    border: 2px dashed color-mix(in srgb, var(--flow-color, var(--bs-primary)) 45%, transparent) !important;
    border-radius: var(--ui-radius) !important;
    box-shadow: none !important;
}

.kanban-ghost > * {
    visibility: hidden;
}

.kanban-drag,
.sortable-fallback {
    opacity: 1 !important;
    rotate: 2deg;
    scale: 1.02;
    cursor: grabbing !important;
    pointer-events: none;
    transition: rotate .15s ease, scale .15s ease;
}

.kanban-drag .status-item,
.sortable-fallback .status-item,
.kanban-drag.card,
.sortable-fallback.card {
    box-shadow: var(--ui-shadow-lg) !important;
}

.kanban-landed {
    border-radius: var(--ui-radius);
    animation: kanban-landed .6s cubic-bezier(.2, .8, .2, 1);
}

@keyframes kanban-landed {
    0% {
        scale: .97;
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--flow-color, var(--bs-primary)) 50%, transparent);
    }
    45% {
        scale: 1.01;
    }
    100% {
        scale: 1;
        box-shadow: 0 0 0 12px transparent;
    }
}

/* ---- Quadro, colunas e card base (.kanban-board): ContactExternal e flow.html.twig (Milhas) ---- */
/* QUADRO */
.kanban-board {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: .75rem;
    width: 100%;
    margin: 0;
    padding: 0 0 .75rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-border) transparent;
}

.kanban-board > .flow-list {
    flex: 1 1 0;
    width: auto;
    min-width: 270px;
    max-width: 340px;
    padding: 0;
    margin: 0;
}

/* COLUNA (etapa) */
.kanban-board .list-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 250px);
    min-height: 500px;
    margin: 0;
    background: var(--ui-muted);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    box-shadow: none;
    overflow: hidden;
}

.kanban-board .list-content > .card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 0;
    background: transparent;
    border-top: 3px solid var(--flow-color, var(--bs-primary));
}

.kanban-board .flow-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .75rem .75rem .5rem;
}

.kanban-board .flow-header .card-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: var(--ui-foreground);
    font-size: 14px;
    font-weight: 600;
}

/* a barra de destaque do .card-title do tema vira o ponto na cor da etapa */
.kanban-board .flow-header .card-title::before {
    content: '';
    width: 8px;
    height: 8px;
    margin: 0;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--flow-color, var(--bs-primary));
}

.kanban-board .flow-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.kanban-board .flow-header .total-number {
    flex: 0 0 auto;
    padding: .25rem .5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--flow-color, var(--bs-primary)) 14%, var(--ui-card));
    color: color-mix(in srgb, var(--flow-color, var(--bs-primary)) 75%, var(--ui-foreground));
    font-size: 12px;
    font-weight: 600;
}

.kanban-board .flow-menu {
    padding: .125rem .375rem;
    line-height: 1;
}

/* LISTA DE CARDS */
.kanban-board .task-list {
    flex: 1;
    min-height: 0;
    padding: .25rem .625rem .625rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ui-border) transparent;
}

.kanban-board .task-list:empty::before {
    content: attr(data-empty);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 1rem;
    border: 1px dashed var(--ui-border);
    border-radius: var(--ui-radius);
    color: var(--ui-muted-foreground);
    font-size: 13px;
    text-align: center;
}

/* o .task-box é o .card que o JS move; o visual fica no .kanban-card */
.kanban-board .task-box {
    margin-bottom: .5rem !important;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* CARD (base; o conteúdo de cada tela fica no CSS dela) */
.kanban-card {
    padding: .75rem;
    background: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-left: 3px solid var(--flow-color, var(--bs-primary));
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-xs);
    color: var(--ui-foreground);
    cursor: grab;
    transition: box-shadow var(--ui-transition), border-color var(--ui-transition), transform var(--ui-transition);
}

.kanban-card:hover {
    border-color: var(--ui-primary-border);
    border-left-color: var(--flow-color, var(--bs-primary));
    box-shadow: var(--ui-shadow-md);
    transform: translateY(-1px);
}

.kanban-card:active {
    cursor: grabbing;
}

/* partes do card reutilizáveis (card do contrato de Milhas) */
.kanban-card-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: color-mix(in srgb, var(--flow-color, var(--bs-primary)) 14%, var(--ui-card));
    color: color-mix(in srgb, var(--flow-color, var(--bs-primary)) 80%, var(--ui-foreground));
    font-size: 13px;
    font-weight: 600;
}

.kanban-card-title {
    color: var(--ui-foreground);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

.kanban-card-meta,
.kanban-card-footer {
    display: flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
    color: var(--ui-muted-foreground);
    font-size: 12px;
}

.kanban-card-meta i,
.kanban-card-footer i {
    font-size: 14px;
}

.kanban-card-footer {
    justify-content: space-between;
    gap: .5rem;
    margin-top: .625rem;
    padding-top: .5rem;
    border-top: 1px solid var(--ui-border);
}

.kanban-card-footer > span {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.kanban-card-footer .fw-semibold {
    color: var(--ui-foreground);
}

.kanban-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .5rem;
    background: var(--ui-primary-soft);
    border-radius: 999px;
    color: var(--ui-primary-muted-text);
    font-size: 12px;
}

/* situação com a cor vinda do registro (--status-color), em tom suave como o contador da etapa */
.kanban-status {
    padding: .25rem .5rem;
    background: color-mix(in srgb, var(--status-color, var(--bs-secondary)) 14%, var(--ui-card));
    color: color-mix(in srgb, var(--status-color, var(--bs-secondary)) 80%, var(--ui-foreground));
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
}

/* NOVA ETAPA */
.kanban-board > .flow-add-list {
    flex: 0 0 220px;
    min-width: 220px;
    max-width: 220px;
}

.kanban-board .flow-add-list .list-content {
    background: transparent;
    border-style: dashed;
}

.kanban-board .flow-add-list .card-body {
    border-top: 0;
}

/* o canUse envolve o link num <span>: ocupa a coluna toda */
.kanban-board .flow-add-list .card-body > span,
.kanban-board .flow-add-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    height: 100%;
}

.kanban-board .flow-add-button {
    color: var(--ui-muted-foreground);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--ui-radius-lg);
    transition: background var(--ui-transition), color var(--ui-transition);
}

.kanban-board .flow-add-button:hover {
    background: var(--ui-primary-softer);
    color: var(--bs-primary);
}

.kanban-board .flow-menu:focus-visible,
.kanban-board .flow-add-button:focus-visible,
.kanban-card:focus-visible {
    outline: 2px solid var(--ui-ring);
    outline-offset: 2px;
}

@media (max-width: 992px) {
    .kanban-board > .flow-list {
        flex: 0 0 270px;
        max-width: 270px;
    }
}


/* reordenação das etapas ligada: o cabeçalho é a alça (handle do Sortable); cards ficam travados */
.flow-sort-active > .flow-list:not(.flow-add-list) .list-content {
    outline: 2px dashed var(--ui-primary-border);
    outline-offset: 2px;
}

.flow-sort-active .flow-header,
.flow-sort-active .flow-list .card-title {
    cursor: grab;
}

.flow-sort-active .task-box {
    opacity: .6;
}

/* carregamento das colunas (contact-external-controller) */
.kanban-skeleton {
    margin-bottom: .5rem;
    padding: .75rem;
    background: var(--ui-card);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
}

.kanban-skeleton .placeholder {
    display: block;
    height: .625rem;
    margin-top: .5rem;
    border-radius: var(--ui-radius-sm);
    background-color: var(--ui-muted-foreground);
    opacity: .22;
}

.kanban-skeleton .d-flex .placeholder {
    margin-top: 0;
}

.kanban-skeleton .placeholder.kanban-skeleton-avatar {
    width: 2rem;
    height: 2rem;
    flex: 0 0 auto;
    border-radius: 50%;
}

.kanban-loading-more {
    display: flex;
    justify-content: center;
    padding: .5rem 0;
    color: var(--ui-muted-foreground);
}

.is-loading .task-box {
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .kanban-drag,
    .sortable-fallback {
        rotate: none;
        scale: none;
    }

    .kanban-landed {
        animation: none;
    }
}

/* ===================== Coluna de status (Components/table/status-column) =====================
   Pílula de situação que revela a ação ao passar o mouse e auditoria em dropdown (sem tooltip). */
/* grade de uma coluna: a célula assume a largura da peça maior e as duas esticam até ela.
   display: grid (e não inline) ignora o text-center que várias células usam. */
.status-cell {
    display: grid;
    gap: .25rem;
    width: max-content;
}

.status-cell > .btn-group {
    display: flex;
}

/* pílula e chip de auditoria compartilham altura, largura, borda e fonte para formar um par */
.status-pill,
.status-cell__audit {
    width: 100%;
    height: 1.625rem;
    font-size: 12px;
    line-height: 1;
}

.status-pill {
    --status-tone: var(--bs-success);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .6rem 0 .15rem;
    border: 1px solid color-mix(in srgb, var(--status-tone) 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--status-tone) 10%, var(--ui-card));
    color: color-mix(in srgb, var(--status-tone) 78%, var(--ui-foreground));
    font-weight: 500;
    white-space: nowrap;
    transition: background-color var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition), box-shadow var(--ui-transition);
}

.status-pill.is-inactive {
    --status-tone: var(--bs-danger);
}

/* margem lateral completa o espaço do avatar do chip de auditoria (.45 + 2 × .4 = 1.25rem):
   bolinha e avatar ficam no mesmo eixo e os textos começam na mesma coluna */
.status-pill__dot {
    flex: 0 0 auto;
    width: .45rem;
    height: .45rem;
    margin: 0 .4rem;
    border-radius: 50%;
    background: var(--status-tone);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-tone) 20%, transparent);
}

.status-pill.is-inactive .status-pill__dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--status-tone);
}

/* rótulo e ação empilhados na mesma célula: a pílula já nasce com a largura do maior */
.status-pill__text {
    display: inline-grid;
}

.status-pill__state,
.status-pill__action {
    grid-area: 1 / 1;
    transition: opacity var(--ui-transition), transform var(--ui-transition);
}

.status-pill__action {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    opacity: 0;
    transform: translateY(3px);
}

.status-pill__action i {
    font-size: .7em;
}

button.status-pill {
    cursor: pointer;
}

/* a ação mostra o tom do estado de destino */
button.status-pill:hover,
button.status-pill:focus-visible {
    --status-tone: var(--bs-danger);
    box-shadow: var(--ui-shadow-xs);
    outline: none;
}

button.status-pill.is-inactive:hover,
button.status-pill.is-inactive:focus-visible {
    --status-tone: var(--bs-success);
}

button.status-pill:focus-visible {
    box-shadow: 0 0 0 3px var(--ui-ring);
}

button.status-pill:hover .status-pill__state,
button.status-pill:focus-visible .status-pill__state {
    opacity: 0;
    transform: translateY(-3px);
}

button.status-pill:hover .status-pill__action,
button.status-pill:focus-visible .status-pill__action {
    opacity: 1;
    transform: none;
}

.status-pill.is-readonly {
    cursor: default;
}

.status-cell__audit {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 100%;
    padding: 0 .3rem 0 .15rem;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-card);
    color: var(--ui-muted-foreground);
    white-space: nowrap;
    transition: background-color var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition);
}

.status-cell__audit:hover,
.status-cell__audit:focus-visible,
.status-cell__audit[aria-expanded="true"] {
    background: var(--ui-primary-soft);
    border-color: var(--ui-primary-border);
    color: var(--ui-primary-muted-text);
    outline: none;
}

.status-cell__who {
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ui-foreground);
    font-weight: 500;
}

.status-cell__audit:hover .status-cell__who,
.status-cell__audit[aria-expanded="true"] .status-cell__who {
    color: inherit;
}

.status-cell__sep {
    opacity: .5;
}

.status-cell__caret {
    margin-left: auto;
    font-size: 14px;
    opacity: .6;
    transition: transform var(--ui-transition);
}

.status-cell__audit[aria-expanded="true"] .status-cell__caret {
    transform: rotate(180deg);
}

.status-cell__avatar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--ui-primary-soft);
    color: var(--bs-primary);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .02em;
}

.status-cell__history {
    min-width: 15rem;
    padding: .4rem;
}

.status-timeline {
    position: relative;
    margin: 0;
    padding: .25rem .5rem;
    list-style: none;
}

/* trilho ligando os avatares */
.status-timeline::before {
    content: "";
    position: absolute;
    top: 1rem;
    bottom: 1.4rem;
    left: calc(.5rem + .875rem);
    width: 1px;
    background: var(--ui-border);
}

.status-timeline__item {
    position: relative;
    display: flex;
    gap: .6rem;
    padding: .35rem 0;
}

.status-timeline__item .status-cell__avatar {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 10px;
    background: var(--ui-muted);
    color: var(--ui-muted-foreground);
    box-shadow: 0 0 0 3px var(--ui-card);
}

.status-timeline__item.is-current .status-cell__avatar {
    background: var(--bs-primary);
    color: #fff;
}

.status-timeline__body,
.status-cell__company > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.35;
}

.status-timeline__label {
    color: var(--ui-muted-foreground);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.status-timeline__who {
    color: var(--ui-foreground);
    font-size: 13px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.status-timeline__when {
    color: var(--ui-muted-foreground);
    font-size: 11.5px;
}

.status-cell__company {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .25rem .5rem .35rem;
}

.status-cell__company > i {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--ui-radius-sm);
    background: var(--ui-primary-soft);
    color: var(--bs-primary);
    font-size: 15px;
}

@media (prefers-reduced-motion: reduce) {
    .status-pill__state,
    .status-pill__action {
        transform: none !important;
    }
}