@charset "UTF-8";
:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
    --secondary-color: #6c757d;
    --bg-body: #f0f2f5;
    --bg-white: #ffffff;
    --text-main: #343a40;
    --text-muted: #6c757d;
    --border-color: #e9ecef;
    --sidebar-width: 276px; /* 292→276: um pouco mais estreito; nomes longos quebram em 2 linhas em vez de cortar */
    --sidebar-rail-width: 66px; /* largura da "régua de ícones" quando colapsado (desktop) */
    --sidebar-bg: #ffffff;
    --sidebar-text: #495057;
    --sidebar-active-bg: #e7f1ff;
    --sidebar-active-text: #007bff;
    --header-height: 60px;
    --page-padding: 20px;
    --page-padding-mobile: 15px;
    --system-desktop-min-width: 1600px;
    --system-desktop-scale: 1;
  /* 1% of live viewport height; updated via script.js on resize (PWA-safe). */
    --app-vh: 1dvh;
    --content-max-width: 1680px;
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

body {
    /* Report #2301 — a pilha não trazia NENHUMA fonte japonesa: Segoe UI/Helvetica/Arial não
       têm kanji, então cada máquina escolhia sozinha a fonte CJK de reserva. Em um Windows/
       navegador com idioma NÃO japonês (a interface pode estar em pt/en, e o <html lang> vai
       junto) essa reserva costuma ser uma fonte CHINESA, e kanji com desenho diferente em
       JP e SC (将, 直, 骨, 海, 者…) apareciam com o traço errado — nome de稼働者 "com kanji
       estranho" na tela. Declarando as japonesas ANTES da genérica, o japonês sai sempre com
       o desenho japonês. O latim continua vindo de Segoe UI/Helvetica Neue (primeiros da
       lista), então nada muda no resto da interface. */
    font-family: 'Segoe UI', "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                 "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP",
                 Arial, sans-serif;
    background-color: var(--bg-body);
    margin: 0;
    padding: 0;
    color: var(--text-main);
    line-height: 1.6;
}

html,
body {
    min-height: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--text-main);
    margin-top: 0;
}

/* Login Page */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(11, 95, 255, 0.22), transparent 32%),
        radial-gradient(circle at bottom right, rgba(0, 182, 122, 0.18), transparent 28%),
        linear-gradient(135deg, #edf3ff 0%, #dfe9f5 100%);
    padding: 14px;
}

.login-shell {
    width: min(460px, 100%);
    display: block;
}

.login-panel {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    background: var(--bg-white);
    padding: 40px;
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 400px;
    border-top: 5px solid var(--primary-color);
}

.login-box-modern {
    width: 100%;
    max-width: 100%;
    border-top: none;
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
    padding: 24px 20px 20px;
    background: rgba(255,255,255,0.96);
}

.login-language-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 18px;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header-left {
    text-align: left;
    margin-bottom: 24px;
}

.login-header h2 {
    color: var(--primary-color);
    margin-bottom: 5px;
    font-size: 1.8rem;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.login-input-wrap {
    position: relative;
}

.login-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.login-input-wrap .form-control {
    padding-left: 42px;
}

.login-language-switcher {
    margin-top: 0;
    font-size: 0.8rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-main);
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #f8f9fa;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.btn {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* O `border: none` acima é global e zerava a borda de TODO botão — inclusive das variantes
   `btn-outline-*` do Bootstrap, que vivem de borda + fundo transparente. Resultado: outline
   virava só texto colorido, sem nada indicando que era clicável (app inteiro, não uma tela).
   Aqui devolvemos SÓ estilo + espessura nas outline; a cor sai do `currentColor` que o
   `border: none` deixou = exatamente a cor da variante. Não declaramos `border-color` de
   propósito: assim as regras de estado do Bootstrap (`.btn:hover`, `:focus-visible`, `.active`,
   `:disabled` — especificidade maior) continuam mandando na cor da borda, e hover/active ficam
   iguais ao Bootstrap original. Botão sólido (btn-primary/success/danger…) segue SEM borda,
   como está hoje; `.border-0` (!important) continua vencendo onde a borda é tirada de propósito.
   `box-sizing: border-box` → 1px não muda o tamanho externo, não há reflow de layout. */
.btn[class*="btn-outline-"] {
    border-style: solid;
    border-width: var(--bs-btn-border-width, 1px);
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 123, 255, 0.25);
}

.btn-block {
    display: inline-flex;
    width: 100%;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: #fff;
}

.btn-info {
    background-color: #17a2b8;
    color: #fff;
}

.btn-pause {
    background-color: #f97316;
    border-color: #f97316;
    color: #fff;
    font-weight: 700;
}
.btn-pause:hover,
.btn-pause:focus-visible {
    background-color: #ea6c0a;
    border-color: #ea6c0a;
    color: #fff;
}
.btn-pause:active {
    background-color: #c2560a;
    border-color: #c2560a;
    color: #fff;
}
.btn-pause:focus,
.btn-pause:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(249, 115, 22, 0.35);
}

.btn-sm {
    padding: 6px 10px;
    font-size: 0.85rem;
    border-radius: 6px;
}

.app-scroll-top-btn {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.2s ease;
    z-index: 1040;
}

.app-scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.app-scroll-top-btn:hover {
    background: #1d4ed8;
    color: #fff;
}

.app-sortable-table__header {
    white-space: nowrap;
}

.app-sortable-table__button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
}

.app-sortable-table__button:hover {
    color: var(--primary-color);
}

.app-sortable-table__icon {
    flex: 0 0 auto;
}

.app-sortable-table__header.is-sorted .app-sortable-table__button {
    color: var(--primary-color);
}

@media (max-width: 767.98px) {
    .app-scroll-top-btn {
        /* Centralizado horizontalmente, próximo ao rodapé.
           Os FABs flutuantes (chat + bug-report) ficam ancorados à
           direita em mobile (ver layout-mobile-fix.css §11), portanto
           o botão de subir-ao-topo NÃO deve ir para o canto direito. */
        bottom: 5.5rem;
        bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateY(10px);
        width: 42px;
        height: 42px;
    }
    .app-scroll-top-btn.is-visible {
        transform: translateX(-50%) translateY(0);
    }
}

.global-upload-progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.38);
    backdrop-filter: blur(6px);
}

.global-upload-progress-overlay[hidden] {
    display: none !important;
}

.global-upload-progress-card {
    width: min(520px, 100%);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(148, 163, 184, 0.18);
    padding: 22px;
}

.global-upload-progress-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #0f172a;
}

.global-upload-progress-subtitle {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.9rem;
}

.global-upload-progress-track {
    margin-top: 16px;
    height: 14px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.global-upload-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b5fff 0%, #00b67a 100%);
    transition: width 0.18s ease;
}

.global-upload-progress-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font-size: 0.82rem;
    color: #475569;
    flex-wrap: wrap;
}

.global-upload-progress-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.global-upload-progress-stat {
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid rgba(148, 163, 184, 0.16);
    padding: 10px 12px;
}

.global-upload-progress-stat-label {
    display: block;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 700;
}

.global-upload-progress-stat-value {
    display: block;
    margin-top: 4px;
    font-size: 0.88rem;
    color: #0f172a;
    font-weight: 700;
}

.app-toast {
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
}

.app-toast .toast-header {
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.app-toast-success {
    border-left: 4px solid #16a34a;
}

.app-toast-success .toast-header i {
    color: #16a34a;
}

.app-floating-save {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 28px;
    z-index: 200000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.94);
    color: #fff;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(12px);
    max-width: min(92vw, 300px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.app-floating-save.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.app-floating-save-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.app-floating-save-title {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.15;
}

.app-floating-save-text {
    display: none;
}

.app-floating-save .btn {
    white-space: nowrap;
    border-radius: 10px;
    padding: 6px 12px;
    font-size: 0.82rem;
}

@media (max-width: 575.98px) {
    .global-upload-progress-card {
        padding: 18px;
    }

    .global-upload-progress-stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .app-floating-save {
        left: 50%;
        right: auto;
        bottom: 18px;
        max-width: min(92vw, 320px);
    }
}

.stock-management-filter-card {
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 22px;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.stock-management-filter-card .card-body {
    padding: 18px;
}

.stock-management-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.stock-management-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(150px, 0.7fr));
    gap: 10px;
    align-items: end;
}

.stock-management-filter-field .form-label {
    margin-bottom: 6px;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stock-management-filter-field .form-control,
.stock-management-filter-field .form-select {
    min-height: 40px;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    font-size: 0.92rem;
    border-radius: 14px;
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: none;
}

.stock-management-filter-input-wrap {
    position: relative;
}

.stock-management-filter-input-wrap .form-control {
    padding-left: 2.4rem;
}

.stock-management-filter-input-wrap i {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.stock-management-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.stock-management-filter-actions .btn {
    min-height: 40px;
    border-radius: 14px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.stock-management-item-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.stock-management-item-photo {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.stock-management-item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stock-management-item-photo span {
    font-weight: 800;
    font-size: 0.75rem;
}

.stock-management-item-copy {
    min-width: 0;
}

.stock-management-item-name {
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stock-management-item-meta {
    color: #64748b;
    font-size: 0.82rem;
}

.stock-management-item-meta-stack {
    display: grid;
    gap: 0.2rem;
}

.stock-management-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.stock-management-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border-radius: 999px;
    padding: 0.38rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.stock-management-pill i {
    font-size: 0.74rem;
}

.stock-management-quantity-stack {
    display: grid;
    gap: 0.45rem;
}

.stock-management-detail-list {
    display: grid;
    gap: 0.75rem;
}

.stock-management-detail-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 1));
}

.stock-management-detail-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    flex: 0 0 auto;
}

.stock-management-detail-copy {
    min-width: 0;
}

.stock-management-detail-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}

.stock-management-detail-value {
    color: #0f172a;
    font-weight: 600;
    word-break: break-word;
}

.stock-management-modal-empty {
    border: 1px dashed rgba(148, 163, 184, 0.35);
    border-radius: 16px;
    padding: 1rem;
    color: #64748b;
    background: rgba(248, 250, 252, 0.9);
}

.stock-management-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.stock-management-forecast-list {
    display: grid;
    gap: 0.75rem;
}

.stock-management-forecast-card {
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 16px;
    padding: 0.9rem;
    background: #fff;
}

@media (max-width: 1199px) {
    .stock-management-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .stock-management-filter-grid {
        grid-template-columns: 1fr;
    }

    .stock-management-filter-actions {
        justify-content: stretch;
    }

    .stock-management-filter-actions .btn {
        flex: 1 1 auto;
    }
}

.login-footer {
    margin-top: 20px;
    text-align: center;
}

.login-footer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.login-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.login-footer a:hover {
    text-decoration: underline;
}

/* QR Code login panel */
.login-qr-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 12px;
    color: var(--text-muted);
    font-size: 0.8rem;
}
.login-qr-divider::before,
.login-qr-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}
.qr-login-scan-btn {
    background: #f8f9fa;
    color: #374151;
    border: 1.5px solid #d1d5db;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 0.95rem;
    width: 100%;
}
.qr-login-scan-btn:hover {
    background: #f1f5f9;
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: none;
    box-shadow: none;
}
.qr-login-panel-header {
    margin-bottom: 14px;
    text-align: left;
}
.qr-login-panel-header h3 {
    font-size: 1.05rem;
    color: var(--primary-color);
    margin: 0 0 4px;
}
.qr-login-panel-header p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}
.qr-video-wrap {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    aspect-ratio: 1 / 1;
    max-height: 270px;
}
#qr-login-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.qr-scan-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.qr-scan-area {
    width: 58%;
    aspect-ratio: 1 / 1;
    border: 2.5px solid rgba(255,255,255,0.85);
    border-radius: 14px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.38);
}
.qr-login-status {
    margin: 10px 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: center;
    min-height: 1.4em;
}
.qr-login-back-btn {
    background: #f8f9fa;
    color: #374151;
    border: 1.5px solid #d1d5db;
    gap: 6px;
    margin-top: 10px;
    font-size: 0.92rem;
}
.qr-login-back-btn:hover {
    background: #e9ecef;
    transform: none;
    box-shadow: none;
}

/* Camera switch button (inside video overlay) */
.qr-switch-cam-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1.5px solid rgba(255,255,255,0.45);
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    padding: 0;
    z-index: 10;
}
.qr-switch-cam-btn:hover {
    background: rgba(0,0,0,0.75);
}

/* QR result modal */
.qr-result-modal {
    text-align: center;
    padding: 8px 0;
}
.qr-result-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.qr-result-photo-wrap {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #22c55e;
    flex-shrink: 0;
}
.qr-result-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.qr-result-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 2px 0 0;
}
.qr-result-msg {
    font-size: 0.88rem;
    margin: 0;
}
.qr-result-msg--ok  { color: #16a34a; }
.qr-result-msg--err { color: #dc2626; }

.alert {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 0.9rem;
    border: 1px solid transparent;
}
.alert-danger { background-color: #fff5f5; color: #c53030; border-color: #feb2b2; }
.alert-success { background-color: #f0fff4; color: #276749; border-color: #9ae6b4; }

.bug-report-fab {
    position: fixed;
    right: 24px;
    bottom: calc(var(--kimori-chat-bottom-clearance, 24px) - 72px);
    z-index: 1080;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #ff7a00;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 32px rgba(255, 122, 0, 0.34), 0 4px 10px rgba(255, 122, 0, 0.22);
}

.bug-report-fab i {
    font-size: 1.35rem;
    line-height: 1;
    transform: translateY(-1px);
}

.bug-report-fab:hover,
.bug-report-fab:focus {
    color: #fff;
    background: #ff8a1f;
    transform: translateY(-2px) scale(1.02);
}

.bug-report-fab.is-dragging,
.bug-report-fab.is-dragging:hover,
.bug-report-fab.is-dragging:focus {
    transform: none;
    transition: none;
}

/* Mostrar rótulo apenas no hover (desktop) */
.bug-report-fab span {
    display: none;
}

.bug-report-modal {
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 2rem);
    overflow: hidden;
    box-shadow: none;
}

.bug-report-windowbar {
    display: none;
}

.bug-report-windowbar-drag {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* título do windowbar e "semáforo" Mac removidos. No lugar das bolinhas, um
   GRIP neutro (afa de "arraste-me"); o título grande fica no header abaixo. */
.bug-report-windowbar-drag strong {
    display: none !important;
}
.bug-report-windowbar-dots {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.bug-report-windowbar-dots span {
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: #cbd5e1;
    border: 0;
}

.bug-report-windowbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.bug-report-windowbar-btn {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bug-report-windowbar-btn:hover {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.2);
    color: #1e293b;
}

.bug-report-modal > form {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.bug-report-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.bug-report-modal .modal-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    padding-bottom: 0.85rem !important;
    background: #ffffff;
}

.bug-report-modal .modal-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
}

.bug-report-modal-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #475569;
    margin-bottom: 0.3rem;
}

.bug-report-modal .modal-title {
    color: #0f172a;
    font-weight: 600;
}

.bug-report-subject-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.bug-report-subject-analyze {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.bug-report-subject-progress {
    position: relative;
    margin-top: 0.55rem;
    height: 8px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}

.bug-report-subject-progress-bar {
    position: absolute;
    inset: 0 auto 0 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
    animation: bugReportSubjectProgress 1.1s linear infinite;
}

.bug-report-subject-progress-text {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.78rem;
    color: #64748b;
}

.bug-report-subject-suggestions {
    margin-top: 0.7rem;
}

.bug-report-subject-suggestions-label {
    margin-bottom: 0.45rem;
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bug-report-subject-suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.bug-report-subject-suggestion-chip {
    border: 1px solid rgba(37, 99, 235, 0.22);
    background: #eff6ff;
    color: #1d4ed8;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.2;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.bug-report-subject-suggestion-chip:hover {
    background: #dbeafe;
    border-color: rgba(37, 99, 235, 0.35);
}

.bug-report-subject-suggestion-chip.is-active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

@keyframes bugReportSubjectProgress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(260%); }
}

.bug-report-step-indicator {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bug-report-step-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 4px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(148, 163, 184, 0.35);
    letter-spacing: 0.02em;
}

.bug-report-step-pill.is-active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

.bug-report-type-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.bug-report-type-grid--compact {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 0.45rem;
}

.bug-report-type-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 62px;
    padding: 0.55rem 0.65rem;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.30);
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.bug-report-type-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.bug-report-type-card input,
.bug-report-choice-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.bug-report-type-card:hover {
    border-color: rgba(15, 23, 42, 0.35);
    background: #f8fafc;
}

.bug-report-type-card.is-active {
    border-color: #0f172a;
    background: #f8fafc;
    box-shadow: inset 3px 0 0 0 #0f172a;
}

.bug-report-type-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.85rem;
    flex: 0 0 auto;
    border: 1px solid rgba(148, 163, 184, 0.30);
}

.bug-report-type-card strong {
    color: #0f172a;
    display: block;
    line-height: 1.2;
    font-weight: 600;
    font-size: 0.92rem;
}

.bug-report-type-card small {
    color: #64748b;
    line-height: 1.3;
    font-size: 0.72rem;
}

.bug-report-type-card--compact {
    min-height: 60px;
    padding: 0.5rem 0.55rem;
    gap: 0;
    justify-content: center;
}

.bug-report-type-card--compact .bug-report-type-heading {
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
}

.bug-report-type-card--compact strong {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Chips de sistema-alvo (KOREOS/Chat/Site) */
.bug-report-target-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.bug-report-target-chip {
    border: 1px solid rgba(148, 163, 184, 0.40);
    background: #ffffff;
    color: #475569;
    border-radius: 999px;
    padding: 4px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bug-report-target-chip:hover {
    border-color: #0f172a;
}
.bug-report-target-chip.is-active {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

.bug-report-type-card--compact .bug-report-type-icon {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
}

.bug-report-type-card--compact strong {
    font-size: 0.78rem;
    line-height: 1.15;
}

/* Per-type accents — flat, no gradients */
.bug-report-type-card[data-report-type-card="bug"] .bug-report-type-icon {
    background: #fee2e2;
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.30);
}
.bug-report-type-card[data-report-type-card="bug"].is-active {
    border-color: #dc2626;
    box-shadow: inset 3px 0 0 0 #dc2626;
}

.bug-report-type-card[data-report-type-card="board"] .bug-report-type-icon {
    background: #ede9fe;
    color: #6d28d9;
    border-color: rgba(124, 58, 237, 0.30);
}
.bug-report-type-card[data-report-type-card="board"].is-active {
    border-color: #7c3aed;
    box-shadow: inset 3px 0 0 0 #7c3aed;
}

.bug-report-type-card[data-report-type-card="maintenance"] .bug-report-type-icon,
.bug-report-type-card[data-report-card-tone="maintenance"] .bug-report-type-icon {
    background: #fef3c7;
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.30);
}
.bug-report-type-card[data-report-type-card="maintenance"].is-active,
.bug-report-type-card[data-report-card-tone="maintenance"].is-active {
    border-color: #d97706;
    box-shadow: inset 3px 0 0 0 #d97706;
    background: #fffbeb;
}

.bug-report-type-card[data-report-type-card="reimbursement"] .bug-report-type-icon,
.bug-report-type-card[data-report-card-tone="reimbursement"] .bug-report-type-icon {
    background: #e0f2fe;
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.30);
}
.bug-report-type-card[data-report-type-card="reimbursement"].is-active,
.bug-report-type-card[data-report-card-tone="reimbursement"].is-active {
    border-color: #0284c7;
    box-shadow: inset 3px 0 0 0 #0284c7;
    background: #f0f9ff;
}

.bug-report-type-card[data-report-type-card="idea"] .bug-report-type-icon {
    background: #dcfce7;
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.30);
}
.bug-report-type-card[data-report-type-card="idea"].is-active {
    border-color: #16a34a;
    box-shadow: inset 3px 0 0 0 #16a34a;
    background: #f0fdf4;
}

.bug-report-type-card[data-report-type-card="translations"] .bug-report-type-icon {
    background: #f3e8ff;
    color: #7e22ce;
    border-color: rgba(168, 85, 247, 0.30);
}
.bug-report-type-card[data-report-type-card="translations"].is-active {
    border-color: #9333ea;
    box-shadow: inset 3px 0 0 0 #9333ea;
}

.bug-report-type-card[data-report-card-tone="other"] .bug-report-type-icon {
    background: #fee2e2;
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.30);
}
.bug-report-type-card[data-report-card-tone="other"].is-active {
    border-color: #dc2626;
    box-shadow: inset 3px 0 0 0 #dc2626;
    background: #fff5f5;
}

.bug-report-type-card[data-report-card-tone="translations"] .bug-report-type-icon {
    background: #f3e8ff;
    color: #7e22ce;
    border-color: rgba(168, 85, 247, 0.30);
}
.bug-report-type-card[data-report-card-tone="translations"].is-active {
    border-color: #9333ea;
    box-shadow: inset 3px 0 0 0 #9333ea;
    background: #faf5ff;
}

.bug-report-type-card[data-report-card-tone="slowness"] .bug-report-type-icon {
    background: #fef3c7;
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.30);
}
.bug-report-type-card[data-report-card-tone="slowness"].is-active {
    border-color: #d97706;
    box-shadow: inset 3px 0 0 0 #d97706;
    background: #fffbeb;
}

.bug-report-type-card[data-report-card-tone="inconsistent"] .bug-report-type-icon {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.30);
}
.bug-report-type-card[data-report-card-tone="inconsistent"].is-active {
    border-color: #2563eb;
    box-shadow: inset 3px 0 0 0 #2563eb;
    background: #eff6ff;
}

.bug-report-type-card[data-report-card-tone="layout"] .bug-report-type-icon {
    background: #ede9fe;
    color: #6d28d9;
    border-color: rgba(124, 58, 237, 0.30);
}
.bug-report-type-card[data-report-card-tone="layout"].is-active {
    border-color: #7c3aed;
    box-shadow: inset 3px 0 0 0 #7c3aed;
    background: #f5f3ff;
}

.bug-report-type-card[data-report-card-tone="save"] .bug-report-type-icon {
    background: #ffedd5;
    color: #c2410c;
    border-color: rgba(249, 115, 22, 0.30);
}
.bug-report-type-card[data-report-card-tone="save"].is-active {
    border-color: #ea580c;
    box-shadow: inset 3px 0 0 0 #ea580c;
    background: #fff7ed;
}

.bug-report-type-card[data-report-card-tone="access"] .bug-report-type-icon {
    background: #fae8ff;
    color: #a21caf;
    border-color: rgba(217, 70, 239, 0.30);
}
.bug-report-type-card[data-report-card-tone="access"].is-active {
    border-color: #c026d3;
    box-shadow: inset 3px 0 0 0 #c026d3;
    background: #fdf4ff;
}

.bug-report-type-card[data-report-card-tone="login"] .bug-report-type-icon {
    background: #e0e7ff;
    color: #4338ca;
    border-color: rgba(99, 102, 241, 0.30);
}
.bug-report-type-card[data-report-card-tone="login"].is-active {
    border-color: #4f46e5;
    box-shadow: inset 3px 0 0 0 #4f46e5;
    background: #eef2ff;
}

.bug-report-type-card[data-report-card-tone="attachment"] .bug-report-type-icon {
    background: #ccfbf1;
    color: #0f766e;
    border-color: rgba(20, 184, 166, 0.30);
}
.bug-report-type-card[data-report-card-tone="attachment"].is-active {
    border-color: #0d9488;
    box-shadow: inset 3px 0 0 0 #0d9488;
    background: #f0fdfa;
}

.bug-report-type-card[data-report-card-tone="calculation"] .bug-report-type-icon {
    background: #dcfce7;
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.30);
}
.bug-report-type-card[data-report-card-tone="calculation"].is-active {
    border-color: #16a34a;
    box-shadow: inset 3px 0 0 0 #16a34a;
    background: #f0fdf4;
}

.bug-report-type-card[data-report-card-tone="notification"] .bug-report-type-icon {
    background: #fde68a;
    color: #a16207;
    border-color: rgba(234, 179, 8, 0.30);
}
.bug-report-type-card[data-report-card-tone="notification"].is-active {
    border-color: #ca8a04;
    box-shadow: inset 3px 0 0 0 #ca8a04;
    background: #fefce8;
}

.bug-report-choice-pill {
    position: relative;
}

.bug-report-choice-pill.is-active {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
}

.bug-report-image-preview {
    margin-top: 0.9rem;
    padding: 0.85rem;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: #f8fafc;
}

.bug-report-image-preview-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 4px;
    background: #e2e8f0;
    max-height: 240px;
}

.bug-report-image-preview-frame img {
    display: block;
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
}

.bug-report-image-preview-actions {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bug-report-image-preview-note {
    color: #64748b;
    font-size: 0.82rem;
}

.bug-report-image-editor-modal {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
}

.bug-report-image-editor-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1rem;
}

.bug-report-image-editor-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 18px;
    background: #fff7ed;
    border: 1px solid rgba(251, 146, 60, 0.18);
}

.bug-report-image-editor-toolbar-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.bug-report-image-editor-toolbar-actions .btn {
    flex: 1 1 120px;
}

.bug-report-image-editor-stage-wrap {
    min-width: 0;
}

.bug-report-image-editor-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 420px;
    padding: 1rem;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc, #eef2f7);
    border: 1px solid rgba(148, 163, 184, 0.18);
    overflow: auto;
    position: relative;
}

.bug-report-image-editor-stage canvas {
    display: block;
    max-width: 100%;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
    touch-action: none;
    cursor: crosshair;
}

.bug-report-image-editor-stage::after {
    content: '';
    position: absolute;
    inset: 16px;
    border-radius: 14px;
    border: 1px dashed rgba(249, 115, 22, 0.18);
    pointer-events: none;
}

.bug-report-toast-wrap {
    position: fixed;
    right: 24px;
    bottom: 92px;
    z-index: 1085;
    width: min(360px, calc(100vw - 32px));
}

.bug-report-toast {
    margin: 0;
}

/* ── Bug report: draggable floating panel on desktop ── */
@media (min-width: 992px) {
    #bugReportModal {
        background: transparent !important;
        pointer-events: none;
        /* acima do dock de chat (z-index 9990) p/ o rodapé (Voltar/Enviar)
           nunca ficar coberto */
        z-index: 9995 !important;
    }
    #bugReportModal .modal-dialog {
        pointer-events: all;
        position: fixed !important;
        margin: 0 !important;
        /* Centralizado por padrão (meio da tela). O drag troca para left/top em
           px + transform:none, então arrasta livre sem o offset do translate. */
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(460px, calc(100vw - 48px));
        max-height: calc(100vh - 96px);
        box-shadow: none;
    }
    #bugReportModal .modal-content.bug-report-modal {
        max-height: calc(100vh - 96px);
        background: #ffffff;
    }
    #bugReportModal .bug-report-windowbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.4rem 0.55rem;
        background: #ffffff;
        border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    }
    #bugReportModal .bug-report-windowbar-drag {
        cursor: grab;
        user-select: none;
        touch-action: none;
        /* grip centralizado na faixa, e a faixa toda é agarrável */
        justify-content: center;
        padding-left: 32px; /* compensa o botão X à direita p/ centrar o grip */
    }
    #bugReportModal .bug-report-windowbar-drag:active,
    #bugReportModal.is-dragging .bug-report-windowbar-drag {
        cursor: grabbing;
    }
    #bugReportModal .bug-report-modal .modal-header .btn-close {
        display: none;
    }
    #bugReportModal + .modal-backdrop {
        display: none !important;
    }
}

/* ── Bug report: multi-file attachment list ── */
.bug-report-files-list {
    margin-top: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bug-report-file-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 4px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    background: #f8fafc;
}

.bug-report-file-thumb {
    width: 46px;
    height: 46px;
    border-radius: 4px;
    overflow: hidden;
    background: #e2e8f0;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.bug-report-file-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bug-report-file-info {
    flex: 1 1 auto;
    min-width: 0;
}

.bug-report-file-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bug-report-file-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 99px;
    background: #dcfce7;
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.3);
    margin-top: 0.2rem;
}

.bug-report-file-actions {
    display: flex;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.global-notice-toast-wrap {
    position: fixed;
    right: 24px;
    top: 88px;
    z-index: 1090;
    width: min(420px, calc(100vw - 32px));
}

@media (max-width: 576px) {
    /* Decisão do dono: manter SEMPRE 2 tags de categoria por linha (não empilhar
       1/linha, que deixava o modal comprido demais). */
    .bug-report-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .bug-report-type-grid--compact {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }
}

.global-notice-toast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.global-notice-toast.is-hidden {
    opacity: 0;
    transform: translateY(-8px);
}

.global-notice-toast-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.global-notice-toast-copy {
    display: grid;
    gap: 4px;
}

.global-notice-toast-copy strong {
    color: #0f172a;
    font-size: 0.96rem;
    line-height: 1.2;
}

.global-notice-toast-copy span {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.45;
}

.global-notice-toast-close {
    border: 0;
    background: transparent;
    color: #64748b;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.global-notice-toast-close:hover {
    background: rgba(148, 163, 184, 0.12);
    color: #0f172a;
}

.global-notice-toast.is-success {
    border-color: rgba(34, 197, 94, 0.22);
}

.global-notice-toast.is-success .global-notice-toast-icon {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
}

.global-notice-toast.is-error {
    border-color: rgba(239, 68, 68, 0.22);
}

.global-notice-toast.is-error .global-notice-toast-icon {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.master-notice-modal-dialog {
    max-width: min(820px, calc(100vw - 32px));
}

.master-notice-modal-content {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.master-notice-modal .modal-backdrop,
.master-notice-modal.show {
    backdrop-filter: blur(3px);
}

.master-notice-card {
    border-radius: 28px;
    border: 2px solid var(--master-notice-border, #F87171);
    background: var(--master-notice-bg, #7F1D1D);
    color: var(--master-notice-text, #FFF7ED);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
    padding: 26px;
}

.master-notice-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.master-notice-eyebrow {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 900;
    font-size: 0.74rem;
    opacity: 0.82;
    margin-bottom: 8px;
}

.master-notice-title {
    margin: 0;
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    font-weight: 900;
    line-height: 1.1;
}

.master-notice-body {
    margin-top: 18px;
    white-space: pre-wrap;
    line-height: 1.7;
    font-size: 1rem;
}

.master-notice-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 22px;
}

.master-notice-close-btn {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    font-weight: 800;
    padding: 10px 18px;
}

.master-notice-close-btn:hover,
.master-notice-close-btn:focus {
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
}

.global-notice-toast.is-warning {
    border-color: rgba(245, 158, 11, 0.24);
}

.global-notice-toast.is-warning .global-notice-toast-icon {
    background: rgba(245, 158, 11, 0.14);

    .master-notice-card {
        padding: 20px;
        border-radius: 22px;
    }

    .master-notice-body {
        font-size: 0.95rem;
    }
    color: #b45309;
}

.global-notice-toast.is-info {
    border-color: rgba(59, 130, 246, 0.22);
}

.global-notice-toast.is-info .global-notice-toast-icon {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
}

@media (max-width: 768px) {
    .bug-report-fab {
        right: 16px;
        bottom: calc(var(--kimori-chat-bottom-clearance, 16px) - 64px);
        width: 48px;
        height: 48px;
    }

    .bug-report-fab span {
        display: none;
    }

    .bug-report-image-editor-layout {
        grid-template-columns: 1fr;
    }

    .bug-report-image-editor-stage {
        min-height: 280px;
        padding: 0.6rem;
    }

    .bug-report-toast-wrap {
        right: 16px;
        bottom: 76px;
        width: calc(100vw - 32px);
    }

    .global-notice-toast-wrap {
        right: 16px;
        top: 72px;
        width: calc(100vw - 32px);
    }
}

@media print {
    .global-notice-toast-wrap {
        display: none !important;
    }
}

.profile-page {
    padding-bottom: 24px;
}

.profile-hero {
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(0, 123, 255, 0.16), transparent 30%),
        linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
}

.profile-hero .card-body {
    padding: 28px;
}

.profile-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.profile-hero-title {
    font-size: clamp(1.9rem, 3.3vw, 2.8rem);
    margin-bottom: 8px;
}

.profile-hero-subtitle {
    color: var(--text-muted);
    max-width: 64ch;
    margin: 0;
}

.profile-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.95fr);
    gap: 22px;
    align-items: center;
}

.profile-identity-block {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.profile-avatar-large {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0b5fff, #00a8c8);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 800;
    box-shadow: 0 18px 30px rgba(11, 95, 255, 0.22);
}

.profile-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 600;
}

.profile-chip-primary {
    background: rgba(0, 123, 255, 0.12);
    color: var(--primary-color);
}

.profile-contact-line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    color: var(--text-muted);
    min-width: 0;
}

.profile-contact-line i {
    flex: 0 0 16px;
    width: 16px;
    color: var(--primary-color);
}

.profile-contact-line span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.profile-summary-card,
.profile-module-card,
.profile-history-summary,
.profile-side-card,
.profile-qr-card,
.profile-section-card {
    border-radius: 20px;
}

.profile-summary-card {
    padding: 16px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.profile-summary-card span,
.profile-side-list span,
.profile-history-summary span,
.profile-qr-meta span {
    display: block;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.profile-summary-card strong,
.profile-side-list strong,
.profile-history-summary strong,
.profile-qr-meta strong {
    display: block;
    color: var(--text-main);
    font-size: 1rem;
    margin-top: 4px;
}

.profile-summary-card small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
}

.profile-section-title {
    font-size: 1.2rem;
    font-weight: 800;
}

.profile-page .profile-notif-switch .form-check-input {
    width: 3em;
    height: 1.5em;
    margin-top: 0.15em;
    cursor: pointer;
    flex-shrink: 0;
}

.profile-page .profile-notif-switch .form-check-label {
    cursor: pointer;
    font-weight: 600;
    padding-left: 0.35rem;
}

.profile-page .profile-notif-dest-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.88rem;
    font-weight: 500;
    max-width: 100%;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

.profile-page .profile-notif-channel .profile-notif-switch {
    min-width: 11rem;
}

.profile-qr-card .card-body,
.profile-side-card .card-body,
.profile-section-card .card-body {
    padding: 24px;
}

.profile-qr-canvas {
    min-height: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: linear-gradient(145deg, #f8fbff, #eef6ff);
    border: 1px dashed rgba(0, 123, 255, 0.22);
}

.profile-qr-canvas canvas {
    max-width: 100%;
    height: auto;
}

.profile-qr-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.profile-empty-state {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 18px;
    background: #f8fafc;
    color: var(--text-muted);
}

.profile-empty-state i {
    font-size: 1.5rem;
    color: var(--secondary-color);
}

.profile-side-list {
    display: grid;
    gap: 14px;
}

.profile-history-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    background: #f8fbff;
    padding: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.profile-module-card {
    height: 100%;
    padding: 18px;
    background: linear-gradient(145deg, #fff, #f8fbff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
}

.profile-module-card strong {
    font-size: 1rem;
    margin-bottom: 6px;
}

.profile-module-card span {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.dashboard-page {
    padding-bottom: 26px;
}

.dashboard-hero {
    overflow: hidden;
    background:
        radial-gradient(circle at top left, rgba(0, 123, 255, 0.16), transparent 30%),
        linear-gradient(145deg, #ffffff 0%, #f7fbff 100%);
}

.dashboard-hero .card-body {
    padding: 28px;
}

.dashboard-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.9fr);
    gap: 18px;
    align-items: center;
}

.dashboard-title {
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    margin: 0 0 8px;
}

.dashboard-subtitle {
    margin: 0;
    color: var(--text-muted);
    max-width: 70ch;
}

.dashboard-chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.dashboard-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: var(--text-main);
    font-size: 0.82rem;
    font-weight: 700;
}

.dashboard-status-panel {
    display: grid;
    gap: 12px;
}

.dashboard-status-card {
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.92);
    padding: 16px 18px;
}

.dashboard-status-card span,
.dashboard-kpi-card span,
.dashboard-link-card small {
    display: block;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.dashboard-status-card strong,
.dashboard-kpi-card strong {
    display: block;
    margin-top: 4px;
    color: var(--text-main);
    font-size: 1.1rem;
}

.dashboard-status-card small {
    display: block;
    margin-top: 8px;
    color: var(--text-muted);
}

.dashboard-section-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.dashboard-kpi-card,
.dashboard-link-card,
.dashboard-shortcut-card {
    height: 100%;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.dashboard-kpi-card .card-body,
.dashboard-link-card .card-body,
.dashboard-shortcut-card .card-body {
    padding: 18px;
}

.dashboard-kpi-card {
    position: relative;
    background: linear-gradient(145deg, #ffffff 0%, #f9fbff 100%);
}

.dashboard-kpi-card::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--dashboard-accent, var(--primary-color));
}

.dashboard-kpi-card strong {
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.dashboard-kpi-card p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dashboard-kpi-card.is-primary { --dashboard-accent: #0d6efd; }
.dashboard-kpi-card.is-success { --dashboard-accent: #198754; }
.dashboard-kpi-card.is-warning { --dashboard-accent: #f59f00; }
.dashboard-kpi-card.is-danger { --dashboard-accent: #dc3545; }
.dashboard-kpi-card.is-info { --dashboard-accent: #0dcaf0; }
.dashboard-kpi-card.is-purple { --dashboard-accent: #6f42c1; }
.dashboard-kpi-card.is-slate { --dashboard-accent: #64748b; }
.dashboard-kpi-card.is-teal { --dashboard-accent: #14b8a6; }

.dashboard-link-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}

.dashboard-link-card .card-body {
    display: flex;
    gap: 12px;
    align-items: center;
}

.dashboard-link-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 110, 253, 0.08);
    color: var(--primary-color);
    flex: 0 0 42px;
}

.dashboard-link-label {
    font-weight: 800;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.dashboard-shortcut-card {
    background: var(--shortcut-bg, linear-gradient(145deg, #fff, #f7fbff));
    color: var(--shortcut-color, var(--text-main));
}

.dashboard-shortcut-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-shortcut-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.22);
    font-size: 1.1rem;
}

.dashboard-shortcut-card h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: inherit;
}

.dashboard-shortcut-card p {
    margin: 0;
    color: inherit;
    opacity: 0.88;
    font-size: 0.92rem;
}

.dashboard-shortcut-primary {
    --shortcut-bg: linear-gradient(145deg, #0d6efd, #4f8cff);
    --shortcut-color: #ffffff;
}

.dashboard-shortcut-success {
    --shortcut-bg: linear-gradient(145deg, #198754, #34b372);
    --shortcut-color: #ffffff;
}

.dashboard-shortcut-warning {
    --shortcut-bg: linear-gradient(145deg, #f59f00, #ffbd45);
    --shortcut-color: #ffffff;
}

.dashboard-shortcut-slate {
    --shortcut-bg: linear-gradient(145deg, #ffffff, #eef4fb);
    --shortcut-color: var(--text-main);
}

@media (max-width: 768px) {
    .login-page {
        padding: 14px;
    }

    .login-box-modern,
    .profile-hero .card-body,
    .profile-qr-card .card-body,
    .profile-side-card .card-body,
    .profile-section-card .card-body {
        padding: 20px;
    }

    .login-footer-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-page .page-actions,
    .dashboard-page .page-actions,
    .page-toolbar .page-actions,
    .cadastros-page-actions,
    .notifications-page-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .profile-page .page-actions .btn,
    .dashboard-page .page-actions .btn,
    .page-toolbar .page-actions .btn,
    .cadastros-page-actions .btn,
    .notifications-page-actions .btn {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        white-space: normal;
    }

    .profile-summary-grid,
    .profile-history-summary,
    .dashboard-status-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-hero .card-body {
        padding: 22px;
    }

    .dashboard-link-card .card-body {
        padding: 16px;
    }
}

@media (max-width: 992px) {
    .dashboard-hero-grid,
    .profile-summary-grid,
    .profile-history-summary,
    .profile-identity-block {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-hero-grid,
    .profile-hero-grid {
        grid-template-columns: 1fr;
    }

    .profile-identity-block {
        gap: 14px;
    }
}

@media (max-width: 576px) {
    .profile-summary-grid,
    .profile-history-summary {
        grid-template-columns: 1fr;
    }

    .dashboard-kpi-card .card-body,
    .dashboard-shortcut-card .card-body,
    .dashboard-link-card .card-body {
        padding: 16px;
    }

    .dashboard-status-panel {
        grid-template-columns: 1fr;
    }
}

/* Dashboard Layout */
.wrapper {
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
    position: relative;
    overflow-x: clip;
}

/*
 * Safari (iOS / iPadOS, and the desktop variant when collapsed-tabs are
 * shown) reports a non-zero `safe-area-inset-top` so the app chrome can
 * leave room for the notch/dynamic-island/overlay tabs. Other browsers
 * report 0, so adding this padding/extra-height is a no-op for them.
 *
 * We push the sticky sidebar shell down by the inset and shorten its
 * available height so the brand row never falls behind Safari's tab bar.
 */
.sidebar-sticky-shell {
    padding-top: env(safe-area-inset-top, 0px);
    height: calc(100dvh - env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
}
.messenger-page-shell,
.messenger-standalone-page {
    padding-top: var(--app-safe-top);
}

/* PWA instalado (Safari iOS): reforço do recuo no topo e nas laterais */
/* PWA: never leave the page-transition splash blocking the UI */
html.pwa-standalone #kimoriPageLoadOverlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html.pwa-standalone {
    --pwa-nav-bar-height: 40px;
}

html.pwa-standalone #content-header {
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

html.pwa-standalone .container-fluid-nav {
    gap: 10px;
    padding-left: max(10px, var(--app-safe-left), 12px);
    padding-right: max(10px, var(--app-safe-right), 12px);
}

@media (max-width: 991.98px) {
    html.pwa-standalone .container-fluid-nav {
        padding-left: max(8px, var(--page-padding-mobile), var(--app-safe-left), 10px);
        padding-right: max(8px, var(--page-padding-mobile), var(--app-safe-right), 10px);
    }
}

/* PWA instalado: faixa fina de navegação acima do header normal */
.pwa-nav-bar {
    display: none;
    align-items: center;
    width: 100%;
    min-height: var(--pwa-nav-bar-height, 40px);
    box-sizing: border-box;
}

html.pwa-standalone .pwa-nav-bar {
    display: flex;
    flex: 0 0 auto;
    padding-top: max(var(--app-safe-top), 6px);
    padding-bottom: 6px;
    padding-left: max(10px, var(--app-safe-left), 12px);
    padding-right: max(10px, var(--app-safe-right), 12px);
    background: var(--bg-white, #ffffff);
    border-bottom: 1px solid var(--border-color, rgba(15, 23, 42, 0.08));
}

@media (max-width: 991.98px) {
    html.pwa-standalone .pwa-nav-bar {
        padding-left: max(8px, var(--page-padding-mobile), var(--app-safe-left), 10px);
        padding-right: max(8px, var(--page-padding-mobile), var(--app-safe-right), 10px);
    }
}

/* Desktop/tablet: nav bar reposicionada inline dentro de .topbar-start (antes da busca).
   Sem isto, a barra herda width:100%/flex:0 0 auto da faixa "topo cheio" e força
   largura total mesmo estando ao lado da busca/atalhos, sobrepondo os ícones. */
html.pwa-standalone .pwa-nav-bar--inline {
    padding: 0;
    background: transparent;
    border-bottom: none;
    min-height: 0;
    width: auto;
    flex: 0 0 auto;
}

html.pwa-standalone .pwa-nav-bar--inline .pwa-nav-chrome {
    width: auto;
}

/* PWA instalado: barra voltar / avançar / atualizar / início / abrir no navegador */
.pwa-nav-chrome {
    display: none;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Barra de navegação do PWA: slim, plana (sem gradiente) e ocupando a largura
   total. "Abrir no navegador" vai para a direita; o resto fica à esquerda. */
html.pwa-standalone .pwa-nav-chrome {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

html.pwa-standalone .pwa-nav-chrome .pwa-nav-btn[data-pwa-nav="browser"] {
    margin-left: auto;
}

.pwa-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s, background-color 0.2s;
}

html.pwa-standalone .pwa-nav-btn:hover,
html.pwa-standalone .pwa-nav-btn:focus-visible {
    color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.72);
    outline: none;
}

.pwa-nav-btn:hover,
.pwa-nav-btn:focus-visible {
    color: var(--primary-color);
    background-color: #f8f9fa;
    outline: none;
}

.pwa-nav-btn:disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
}

.pwa-nav-btn[data-pwa-nav="refresh"]:active i {
    animation: pwaNavSpin 0.45s linear;
}

@keyframes pwaNavSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
    html.pwa-standalone .pwa-nav-chrome {
        gap: 1px;
        padding: 2px 3px;
    }

    html.pwa-standalone .pwa-nav-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
        font-size: 0.82rem;
    }

    html.pwa-standalone .pwa-nav-btn[data-pwa-nav="browser"] {
        display: none;
    }
}

@media (max-width: 767.98px) {
    html.pwa-standalone .pwa-nav-btn[data-pwa-nav="forward"] {
        display: none;
    }
}

:root {
    --app-z-sidebar: 1000;
    --app-z-header: 1030;
    --app-z-overlay: 1040;
    --app-z-modal-backdrop: 1050;
    --app-z-modal: 1055;
    --app-z-toast: 1080;
    /* iOS / Safari PWA — notch, Dynamic Island, home indicator */
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-right: env(safe-area-inset-right, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-left: env(safe-area-inset-left, 0px);
}

@media screen and (min-width: 1024px) {
    body.system-desktop-scaled {
        overflow-x: hidden;
    }

    body.system-desktop-scaled .wrapper {
        width: var(--system-desktop-min-width);
        min-width: var(--system-desktop-min-width);
    }

    body.system-desktop-scaled.system-desktop-transform-fallback .wrapper {
        max-width: none;
        transform: scale(var(--system-desktop-scale));
        transform-origin: top left;
        min-height: calc(var(--app-vh, 1dvh) * 100 / var(--system-desktop-scale));
        height: calc(var(--app-vh, 1dvh) * 100 / var(--system-desktop-scale));
        max-height: calc(var(--app-vh, 1dvh) * 100 / var(--system-desktop-scale));
    }

    /* app-scroll-lock pages never get system-desktop-scaled (see script.js). */
}

body.sidebar-no-scroll {
    overflow: hidden;
}

#page-content-wrapper {
    flex: 1 1 auto;
    width: auto;
    max-width: 100%;
    min-width: 0; /* Prevent flex overflow issues */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

/* Scroll-lock shell must not inherit viewport min-heights from the rules above. */
@media (min-width: 768px) {
    body.app-scroll-lock .wrapper {
        min-height: 0;
    }

    body.app-scroll-lock #page-content-wrapper {
        min-height: 0;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Global scroll-lock: viewport stays fixed, only the inner content scrolls.
   Works like the sidebar: the chrome (sidebar, topbar) does not scroll out
   of view; only the .content area scrolls within its allotted space.
   Disabled on small phones (≤767px), webos, standalone, minimal-standalone,
   print, and pages that define APP_DISABLE_SCROLL_LOCK.
   Tablets and larger (≥768px) get the full app-like locked-scroll experience.
   ────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    html:has(body.app-scroll-lock) {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.app-scroll-lock {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 100%;
        min-height: 0;
        overflow: hidden;
    }
    body.app-scroll-lock .wrapper {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        max-height: none;
        align-items: stretch;
    }
    body.app-scroll-lock .sidebar-sticky-shell {
        height: 100%;
        max-height: 100%;
        min-height: 0;
    }
    body.app-scroll-lock #page-content-wrapper {
        flex: 1 1 auto;
        align-self: stretch;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }
    body.app-scroll-lock #page-content-wrapper > #content-header {
        flex: 0 0 auto;
    }
    body.app-scroll-lock #page-content-wrapper > .app-footer,
    body.app-scroll-lock #page-content-wrapper > footer.app-footer {
        flex: 0 0 auto;
    }
    body.app-scroll-lock #page-content-wrapper > .content,
    body.app-scroll-lock #page-content-wrapper > .container-fluid.content,
    body.app-scroll-lock #page-content-wrapper > main.content,
    body.app-scroll-lock #page-content-wrapper > main {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: clip;
        overscroll-behavior: contain;
        scroll-behavior: smooth;
        /* Touch fix: on tablets (iPadOS Safari, >=768px) the body is locked
           (overflow:hidden) and THIS element is the only scroll container.
           Without momentum touch-scrolling + an explicit vertical touch-action
           the drag gesture is not captured and the page becomes unscrollable
           by touch (report #1275). Harmless on desktop/mouse.
           #2448: `pan-y` sozinho NÃO servia. touch-action é INTERSECTADO com o
           dos ancestrais, então `pan-y` aqui proibia o pan horizontal em TODO
           descendente — nenhuma tabela larga rolava pro lado por toque, mesmo
           com overflow-x:auto e touch-action:pan-x no próprio wrapper. `pan-x
           pan-y` mantém a captura explícita do gesto do #1275 (e segue sem
           pinch-zoom), só que agora sem bloquear o eixo X de quem está dentro.
           Este elemento tem overflow-x:clip, logo ele mesmo nunca rola de lado. */
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
    }
    /* Slim scrollbar so it doesn't visually clash with body scrollbar */
    body.app-scroll-lock #page-content-wrapper > .content::-webkit-scrollbar,
    body.app-scroll-lock #page-content-wrapper > main::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    body.app-scroll-lock #page-content-wrapper > .content::-webkit-scrollbar-track,
    body.app-scroll-lock #page-content-wrapper > main::-webkit-scrollbar-track {
        background: transparent;
    }
    body.app-scroll-lock #page-content-wrapper > .content::-webkit-scrollbar-thumb,
    body.app-scroll-lock #page-content-wrapper > main::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.18);
        border-radius: 8px;
    }
    body.app-scroll-lock #page-content-wrapper > .content::-webkit-scrollbar-thumb:hover,
    body.app-scroll-lock #page-content-wrapper > main::-webkit-scrollbar-thumb:hover {
        background: rgba(15, 23, 42, 0.32);
    }
}
@media print {
    /* Always allow normal flow when printing */
    html, body.app-scroll-lock { height: auto !important; overflow: visible !important; }
    body.app-scroll-lock #page-content-wrapper { height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; }
    body.app-scroll-lock #page-content-wrapper > .content,
    body.app-scroll-lock #page-content-wrapper > main { overflow: visible !important; }
}

/* Sidebar */
#sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    min-height: 100%;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    transition: margin-left 0.28s ease, transform 0.28s ease, box-shadow 0.28s ease;
    box-shadow: 2px 0 5px rgba(0,0,0,0.03);
    z-index: var(--app-z-sidebar);
    border-right: 1px solid var(--border-color);
    position: relative;
    align-self: stretch;
    overflow: visible;
}

.sidebar-sticky-shell {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wrapper.sidebar-collapsed #sidebar {
    margin-left: calc(var(--sidebar-width) * -1);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    z-index: var(--app-z-overlay);
}

.wrapper.sidebar-mobile-open .sidebar-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sidebar-header {
    padding: 0 20px;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border-color);
    flex: 0 0 var(--header-height);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    text-decoration: none;
    text-align: center;
}

.sidebar-brand-logo {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 38px;
    object-fit: contain;
}

.sidebar-header h3 {
    margin: 0 auto;
    text-align: center;
    font-size: 1.2rem;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: 0.5px;
}

.sidebar-brand:hover h3 {
    color: var(--primary-hover);
}

#sidebar ul.components {
    padding: 12px 8px;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Menu section order: controlled via inline style="order:N" from sidebar_menu_layout_json (settings/sidemenu). */

#sidebar ul li {
    margin-bottom: 2px;
}

#sidebar ul li a {
    padding: 7px 10px 7px 9px;
    font-size: 0.79rem;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: var(--sidebar-text);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    font-weight: 500;
    border: 1px solid transparent;
}

#sidebar ul li a i {
    margin-right: 7px;
    width: 14px;
    text-align: center;
    font-size: 0.76rem;
    color: var(--text-muted);
    transition: color 0.2s;
}

#sidebar ul li a:hover {
    background-color: #f8fafc;
    color: var(--primary-color);
}

#sidebar ul li a:hover i {
    color: var(--primary-color);
}

#sidebar ul li.active > a {
    background-color: color-mix(in srgb, var(--sidebar-active-bg) 72%, #ffffff);
    color: var(--sidebar-active-text);
    border-color: rgba(59, 130, 246, 0.08);
}

#sidebar ul li.active > a i {
    color: var(--sidebar-active-text);
}

#sidebar ul li.open > a.has-submenu {
    background-color: #f8fafc;
    color: var(--text-main);
    border-color: rgba(148, 163, 184, 0.12);
}

#sidebar ul li.open > a.has-submenu i,
#sidebar ul li.open > a.has-submenu .submenu-caret {
    color: var(--text-muted);
}

#sidebar ul li a > span.d-inline-flex {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    flex-wrap: nowrap;
    gap: 8px !important;
}

#sidebar ul li a > span.d-inline-flex > span:not(.badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

#sidebar [data-sidebar-badge-node="1"] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    background: rgba(226, 232, 240, 0.9) !important;
    color: #1e293b !important;
    border: 1px solid rgba(148, 163, 184, 0.26);
    box-shadow: none;
}

#sidebar ul li a [data-sidebar-badge-node="1"] {
    margin-left: auto !important;
}

/* Operacional (projects-works) section — light blue submenu, blue+gray when active */
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > a.has-submenu {
    background-color: #f0f7ff;
    color: #1e3a8a;
    border-left: 3px solid #93c5fd;
}
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > a.has-submenu .submenu-caret {
    color: #2563eb;
}
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"].open > a.has-submenu {
    background: linear-gradient(90deg, #dbeafe 0%, #cbd5e1 100%);
    color: #1e293b;
    border-left-color: #2563eb;
}
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > .submenu {
    background: #f5faff;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > .submenu > li > a {
    background-color: transparent;
}
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > .submenu > li > a:hover {
    background-color: #e0efff;
    color: #1d4ed8;
}
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #bfdbfe 0%, #cbd5e1 100%);
    color: #1e293b;
    border-left: 3px solid #2563eb;
}
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > .submenu > li.active > a i,
#sidebar ul li.sidebar-filter-section[data-section-id="projects-works"] > .submenu > li > a.active i {
    color: #1d4ed8;
}

/* Comercial e vendas (commercial-sales) section — light yellow submenu, amber when active */
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > a.has-submenu {
    background-color: #fff8db;
    color: #92400e;
    border-left: 3px solid #facc15;
}
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > a.has-submenu .submenu-caret {
    color: #d97706;
}
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"].open > a.has-submenu {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    color: #78350f;
    border-left-color: #d97706;
}
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > .submenu {
    background: #fffdf2;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > .submenu > li > a {
    background-color: transparent;
}
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > .submenu > li > a:hover {
    background-color: #fef3c7;
    color: #b45309;
}
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #fde68a 0%, #fef3c7 100%);
    color: #78350f;
    border-left: 3px solid #d97706;
}
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > .submenu > li.active > a i,
#sidebar ul li.sidebar-filter-section[data-section-id="commercial-sales"] > .submenu > li > a.active i {
    color: #b45309;
}

/* Fabricação e Produção (manufacturing) section — light red, red+gray when active */
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > a.has-submenu {
    background-color: #fff5f5;
    color: #7f1d1d;
    border-left: 3px solid #fca5a5;
}
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > a.has-submenu .submenu-caret {
    color: #dc2626;
}
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"].open > a.has-submenu {
    background: linear-gradient(90deg, #fee2e2 0%, #cbd5e1 100%);
    color: #1e293b;
    border-left-color: #dc2626;
}
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > .submenu {
    background: #fff7f7;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > .submenu > li > a {
    background-color: transparent;
}
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > .submenu > li > a:hover {
    background-color: #ffe4e4;
    color: #b91c1c;
}
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #fecaca 0%, #cbd5e1 100%);
    color: #1e293b;
    border-left: 3px solid #dc2626;
}
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > .submenu > li.active > a i,
#sidebar ul li.sidebar-filter-section[data-section-id="manufacturing"] > .submenu > li > a.active i {
    color: #b91c1c;
}

/* Gestão de Desenvolvedor (developer-management) section — preto, mesma ideia do operacional */
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > a.has-submenu {
    background-color: #f5f5f5;
    color: #0f172a;
    border-left: 3px solid #475569;
}
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > a.has-submenu .submenu-caret {
    color: #0f172a;
}
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"].open > a.has-submenu {
    background: linear-gradient(90deg, #1f2937 0%, #0f172a 100%);
    color: #f8fafc;
    border-left-color: #0f172a;
}
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"].open > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"].open > a.has-submenu .submenu-caret {
    color: #f8fafc;
}
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > .submenu {
    background: #f3f4f6;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > .submenu > li > a {
    background-color: transparent;
    color: #1f2937;
}
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > .submenu > li > a:hover {
    background-color: #e5e7eb;
    color: #0f172a;
}
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #1f2937 0%, #475569 100%);
    color: #f8fafc;
    border-left: 3px solid #0f172a;
}
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > .submenu > li.active > a i,
#sidebar ul li.sidebar-filter-section[data-section-id="developer-management"] > .submenu > li > a.active i {
    color: #f8fafc;
}

/* Gestão e Controle (management-control) section — light gray, gray when active */
#sidebar ul li.sidebar-filter-section[data-section-id="panel"] > a.has-submenu {
    background-color: #f5f9ff;
    color: #1e3a8a;
    border-left: 3px solid #60a5fa;
}

#sidebar ul li.sidebar-filter-section[data-section-id="panel"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="panel"] > a.has-submenu .submenu-caret {
    color: #3b82f6;
}

#sidebar ul li.sidebar-filter-section[data-section-id="panel"].open > a.has-submenu {
    background: linear-gradient(90deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border-left-color: #2563eb;
}

#sidebar ul li.sidebar-filter-section[data-section-id="panel"] > .submenu {
    background: #f8fbff;
    border-radius: 3px;
}

#sidebar ul li.sidebar-filter-section[data-section-id="panel"] > .submenu > li > a:hover {
    background-color: #eaf3ff;
    color: #1e40af;
}

#sidebar ul li.sidebar-filter-section[data-section-id="panel"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="panel"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border-left: 3px solid #2563eb;
}

#sidebar ul li.sidebar-filter-section[data-section-id="panel"] > .submenu > li.active > a i,
#sidebar ul li.sidebar-filter-section[data-section-id="panel"] > .submenu > li > a.active i {
    color: #2563eb;
}

#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > a.has-submenu {
    background-color: #f7f8fa;
    color: #334155;
    border-left: 3px solid #cbd5e1;
}
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > a.has-submenu .submenu-caret {
    color: #64748b;
}
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"].open > a.has-submenu {
    background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #1e293b;
    border-left-color: #64748b;
}
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > .submenu {
    background: #f8fafc;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > .submenu > li > a {
    background-color: transparent;
}
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > .submenu > li > a:hover {
    background-color: #eef1f5;
    color: #334155;
}
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #e2e8f0 0%, #cbd5e1 100%);
    color: #1e293b;
    border-left: 3px solid #64748b;
}
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > .submenu > li.active > a i,
#sidebar ul li.sidebar-filter-section[data-section-id="management-control"] > .submenu > li > a.active i {
    color: #475569;
}

/* Home (home) section — light gray */
#sidebar ul li.sidebar-filter-section[data-section-id="home"] > a.has-submenu {
    background-color: #f5f6f8;
    color: #475569;
    border-left: 3px solid #d1d5db;
}
#sidebar ul li.sidebar-filter-section[data-section-id="home"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="home"] > a.has-submenu .submenu-caret {
    color: #6b7280;
}
#sidebar ul li.sidebar-filter-section[data-section-id="home"].open > a.has-submenu {
    background: linear-gradient(90deg, #eceff3 0%, #dde3ea 100%);
    color: #334155;
    border-left-color: #9ca3af;
}
#sidebar ul li.sidebar-filter-section[data-section-id="home"] > .submenu {
    background: #f8fafb;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="home"] > .submenu > li > a:hover {
    background-color: #eef2f6;
    color: #475569;
}
#sidebar ul li.sidebar-filter-section[data-section-id="home"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="home"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #e5e7eb 0%, #dbe2ea 100%);
    color: #334155;
    border-left: 3px solid #9ca3af;
}

/* Gestão Financeira (financial-management) section — light green */
#sidebar ul li.sidebar-filter-section[data-section-id="financial-management"] > a.has-submenu {
    background-color: #eefbf3;
    color: #166534;
    border-left: 3px solid #86efac;
}
#sidebar ul li.sidebar-filter-section[data-section-id="financial-management"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="financial-management"] > a.has-submenu .submenu-caret {
    color: #16a34a;
}
#sidebar ul li.sidebar-filter-section[data-section-id="financial-management"].open > a.has-submenu {
    background: linear-gradient(90deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border-left-color: #22c55e;
}
#sidebar ul li.sidebar-filter-section[data-section-id="financial-management"] > .submenu {
    background: #f5fdf7;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="financial-management"] > .submenu > li > a:hover {
    background-color: #dcfce7;
    color: #15803d;
}
#sidebar ul li.sidebar-filter-section[data-section-id="financial-management"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="financial-management"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #bbf7d0 0%, #dcfce7 100%);
    color: #166534;
    border-left: 3px solid #22c55e;
}

/* Gestão de Estoque (stock-management) section — light gray */
#sidebar ul li.sidebar-filter-section[data-section-id="stock-management"] > a.has-submenu {
    background-color: #f5f6f8;
    color: #475569;
    border-left: 3px solid #d1d5db;
}
#sidebar ul li.sidebar-filter-section[data-section-id="stock-management"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="stock-management"] > a.has-submenu .submenu-caret {
    color: #6b7280;
}
#sidebar ul li.sidebar-filter-section[data-section-id="stock-management"].open > a.has-submenu {
    background: linear-gradient(90deg, #eceff3 0%, #dde3ea 100%);
    color: #334155;
    border-left-color: #9ca3af;
}
#sidebar ul li.sidebar-filter-section[data-section-id="stock-management"] > .submenu {
    background: #f8fafb;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="stock-management"] > .submenu > li > a:hover {
    background-color: #eef2f6;
    color: #475569;
}
#sidebar ul li.sidebar-filter-section[data-section-id="stock-management"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="stock-management"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #e5e7eb 0%, #dbe2ea 100%);
    color: #334155;
    border-left: 3px solid #9ca3af;
}

/* Gestão de Ponto (attendance-management) section — light blue */
#sidebar ul li.sidebar-filter-section[data-section-id="attendance-management"] > a.has-submenu {
    background-color: #eef7ff;
    color: #1d4ed8;
    border-left: 3px solid #93c5fd;
}
#sidebar ul li.sidebar-filter-section[data-section-id="attendance-management"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="attendance-management"] > a.has-submenu .submenu-caret {
    color: #3b82f6;
}
#sidebar ul li.sidebar-filter-section[data-section-id="attendance-management"].open > a.has-submenu {
    background: linear-gradient(90deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e3a8a;
    border-left-color: #2563eb;
}
#sidebar ul li.sidebar-filter-section[data-section-id="attendance-management"] > .submenu {
    background: #f7fbff;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="attendance-management"] > .submenu > li > a:hover {
    background-color: #e8f2ff;
    color: #1d4ed8;
}
#sidebar ul li.sidebar-filter-section[data-section-id="attendance-management"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="attendance-management"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #bfdbfe 0%, #dbeafe 100%);
    color: #1e3a8a;
    border-left: 3px solid #2563eb;
}

/* Gestão de Guenba (guenba-management) section — light red */
#sidebar ul li.sidebar-filter-section[data-section-id="guenba-management"] > a.has-submenu {
    background-color: #fff3f3;
    color: #991b1b;
    border-left: 3px solid #fca5a5;
}
#sidebar ul li.sidebar-filter-section[data-section-id="guenba-management"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="guenba-management"] > a.has-submenu .submenu-caret {
    color: #ef4444;
}
#sidebar ul li.sidebar-filter-section[data-section-id="guenba-management"].open > a.has-submenu {
    background: linear-gradient(90deg, #fee2e2 0%, #fecaca 100%);
    color: #7f1d1d;
    border-left-color: #dc2626;
}
#sidebar ul li.sidebar-filter-section[data-section-id="guenba-management"] > .submenu {
    background: #fff7f7;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="guenba-management"] > .submenu > li > a:hover {
    background-color: #ffe4e6;
    color: #b91c1c;
}
#sidebar ul li.sidebar-filter-section[data-section-id="guenba-management"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="guenba-management"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #fecaca 0%, #fee2e2 100%);
    color: #7f1d1d;
    border-left: 3px solid #dc2626;
}

/* Gestão de Comércio (logistics-management) section — light purple */
#sidebar ul li.sidebar-filter-section[data-section-id="logistics-management"] > a.has-submenu {
    background-color: #f7f2ff;
    color: #6d28d9;
    border-left: 3px solid #c4b5fd;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistics-management"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="logistics-management"] > a.has-submenu .submenu-caret {
    color: #8b5cf6;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistics-management"].open > a.has-submenu {
    background: linear-gradient(90deg, #ede9fe 0%, #ddd6fe 100%);
    color: #5b21b6;
    border-left-color: #7c3aed;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistics-management"] > .submenu {
    background: #faf7ff;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistics-management"] > .submenu > li > a:hover {
    background-color: #f3e8ff;
    color: #6d28d9;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistics-management"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="logistics-management"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #ddd6fe 0%, #ede9fe 100%);
    color: #5b21b6;
    border-left: 3px solid #7c3aed;
}

/* Gestão de Logística (logistica-management) section — off-white gray */
#sidebar ul li.sidebar-filter-section[data-section-id="logistica-management"] > a.has-submenu {
    background-color: #fbfcfd;
    color: #475569;
    border-left: 3px solid #e2e8f0;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistica-management"] > a.has-submenu i,
#sidebar ul li.sidebar-filter-section[data-section-id="logistica-management"] > a.has-submenu .submenu-caret {
    color: #94a3b8;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistica-management"].open > a.has-submenu {
    background: linear-gradient(90deg, #ffffff 0%, #f1f5f9 100%);
    color: #334155;
    border-left-color: #cbd5e1;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistica-management"] > .submenu {
    background: #fdfefe;
    border-radius: 3px;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistica-management"] > .submenu > li > a:hover {
    background-color: #f4f7fa;
    color: #475569;
}
#sidebar ul li.sidebar-filter-section[data-section-id="logistica-management"] > .submenu > li.active > a,
#sidebar ul li.sidebar-filter-section[data-section-id="logistica-management"] > .submenu > li > a.active {
    background: linear-gradient(90deg, #ffffff 0%, #eef2f7 100%);
    color: #334155;
    border-left: 3px solid #cbd5e1;
}

/* Sidebar section accent — controlled via settings (CSS variable --sm-accent on li) */
#sidebar ul.components > li.sidebar-filter-section.has-section-theme > a.has-submenu {
    background-color: color-mix(in srgb, var(--sm-accent) 10%, #ffffff);
    color: color-mix(in srgb, var(--sm-accent) 62%, #0f172a);
    border-left: 3px solid color-mix(in srgb, var(--sm-accent) 38%, #ffffff);
}
#sidebar ul.components > li.sidebar-filter-section.has-section-theme > a.has-submenu i,
#sidebar ul.components > li.sidebar-filter-section.has-section-theme > a.has-submenu .submenu-caret {
    color: var(--sm-accent);
}
#sidebar ul.components > li.sidebar-filter-section.has-section-theme.open > a.has-submenu {
    background: linear-gradient(90deg, color-mix(in srgb, var(--sm-accent) 14%, #ffffff) 0%, color-mix(in srgb, var(--sm-accent) 22%, #ffffff) 100%);
    color: color-mix(in srgb, var(--sm-accent) 68%, #0f172a);
    border-left-color: var(--sm-accent);
}
#sidebar ul.components > li.sidebar-filter-section.has-section-theme > .submenu {
    background: color-mix(in srgb, var(--sm-accent) 5%, #ffffff);
    border-radius: 3px;
}
#sidebar ul.components > li.sidebar-filter-section.has-section-theme > .submenu > li > a:hover {
    background-color: color-mix(in srgb, var(--sm-accent) 12%, #ffffff);
    color: color-mix(in srgb, var(--sm-accent) 55%, #0f172a);
}
#sidebar ul.components > li.sidebar-filter-section.has-section-theme > .submenu > li.active > a,
#sidebar ul.components > li.sidebar-filter-section.has-section-theme > .submenu > li > a.active {
    background: linear-gradient(90deg, color-mix(in srgb, var(--sm-accent) 24%, #ffffff) 0%, color-mix(in srgb, var(--sm-accent) 14%, #ffffff) 100%);
    color: color-mix(in srgb, var(--sm-accent) 65%, #0f172a);
    border-left: 3px solid var(--sm-accent);
}
#sidebar ul.components > li.sidebar-filter-section.has-section-theme > .submenu > li.active > a i,
#sidebar ul.components > li.sidebar-filter-section.has-section-theme > .submenu > li > a.active i {
    color: var(--sm-accent);
}

/* Footer */
.app-footer {
    margin-top: auto;
    padding: 12px 0;
    border-top: 1px solid var(--border-color);
    background: var(--bg-body);
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.app-footer > small {
    display: block;
    padding: 0 var(--page-padding);
    max-width: var(--content-max-width);
    margin: 0 auto;
}

/* Utilities override for Bootstrap */
/* Removed .card and .row overrides to let Bootstrap handle grid */

/* Top Navbar */
#content-header {
    position: sticky;
    top: 0;
    z-index: var(--app-z-header);
    background: var(--bg-white);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Keep menu toggle clear of notch / Dynamic Island (portrait + landscape PWA) */
    padding-top: var(--app-safe-top);
}

.navbar {
    height: var(--header-height);
    padding: 0;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    width: 100%;
}

.modal-backdrop {
    z-index: var(--app-z-modal-backdrop);
}

/* Quando o body está escalado via zoom global (system-desktop-scaled),
   100vw/100vh dentro do body ficam multiplicados pelo zoom, fazendo o
   backdrop não cobrir o viewport inteiro. Compensamos dividindo pela escala
   para que o escurecimento cubra a tela toda. */
body.system-desktop-scaled .modal-backdrop {
    width: calc(100vw / var(--system-desktop-scale, 1));
    height: calc(100vh / var(--system-desktop-scale, 1));
    min-width: calc(100vw / var(--system-desktop-scale, 1));
    min-height: calc(100vh / var(--system-desktop-scale, 1));
}

.modal {
    z-index: var(--app-z-modal);
}

body.system-desktop-scaled .modal {
    width: calc(100vw / var(--system-desktop-scale, 1));
    height: calc(100vh / var(--system-desktop-scale, 1));
}

/* report #2470: nesta app o <body> não é quem rola (body.app-scroll-lock trava o
   body e quem rola de verdade é #page-content-wrapper > .content). O Bootstrap só
   trava overflow do <body> ao abrir um modal, então num modal-dialog-scrollable,
   ao chegar no fim do .modal-body o scroll "vaza" (scroll chaining) pro .content
   por trás, que continua livre — a página atrás rola junto. Contendo aqui a rolagem
   para no próprio .modal-body. */
.modal-dialog-scrollable .modal-body {
    overscroll-behavior: contain;
}

.container-fluid-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-left: max(var(--page-padding), var(--app-safe-left));
    padding-right: max(var(--page-padding), var(--app-safe-right));
    padding-top: 0;
    padding-bottom: 0;
    gap: 16px;
    box-sizing: border-box;
}

.topbar-start {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

.topbar-lead {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 8px;
}

.topbar-sidebar-toggle {
    flex-shrink: 0;
}

.topbar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
}

html.pwa-standalone .topbar-lead {
    gap: 6px;
}

html.pwa-standalone .topbar-sidebar-toggle {
    margin-left: -2px;
}

html.pwa-standalone .topbar-main {
    gap: 8px;
    min-width: 0;
}

html.pwa-standalone .topbar-start {
    gap: 8px;
}

html.pwa-standalone .topbar-end.user-menu {
    gap: 4px;
}

.topbar-end {
    margin-left: auto;
    min-width: 0;
    flex: 0 1 auto;
}

.btn-toggle {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s, background-color 0.2s, transform 0.2s;
}

.btn-toggle:hover {
    color: var(--primary-color);
    background-color: #f8f9fa;
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.topbar-search-form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-search-form--inline {
    display: none;
    flex: 0 1 clamp(240px, 26vw, 380px);
    width: min(380px, 100%);
}

.topbar-search-open-btn {
    display: none;
    flex: 0 0 auto;
}

.topbar-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(72px, 12vh, 120px) 16px 24px;
    box-sizing: border-box;
}

.topbar-search-overlay[hidden] {
    display: none !important;
}

.topbar-search-overlay-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    margin: 0;
    padding: 0;
    background: rgba(15, 23, 42, 0.42);
    cursor: pointer;
}

.topbar-search-overlay-dialog {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #fff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.22);
    padding: 14px 14px 10px;
}

.topbar-search-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.topbar-search-overlay-title {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.topbar-search-form--overlay {
    width: 100%;
    flex: 1 1 auto;
    /* No overlay as sugestoes sao position:static, entao precisam ficar ABAIXO do input */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.topbar-search-form--overlay .topbar-search-icon {
    top: 23px;
    transform: translateY(-50%);
}

.topbar-search-form--overlay .topbar-search-input {
    min-height: 46px;
    font-size: 1rem;
    padding-left: 40px;
    padding-right: 12px;
}

.topbar-search-form--overlay .topbar-search-suggestions {
    position: static;
    margin-top: 8px;
    max-height: min(50vh, 360px);
    overflow-y: auto;
    box-shadow: none;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 12px;
}

body.topbar-search-overlay-open {
    overflow: hidden;
}

/* Atalhos — card único: expandido (ícones na fila) ou compacto (dropdown) */
.topbar-shortcuts-hub-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.topbar-shortcuts-hub-card {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    padding: 0 8px 0 3px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.topbar-shortcuts-hub-card.is-expanded {
    cursor: default;
    height: auto;
    min-height: 42px;
    padding: 6px 10px 6px 4px;
    overflow: visible;
}

.topbar-shortcuts-hub-card.is-expanded .topbar-shortcuts-hub-badge {
    display: none !important;
}

.topbar-shortcuts-hub-card.is-compact {
    cursor: pointer;
    min-width: 96px;
    padding-right: 10px;
    overflow: visible;
}

.topbar-shortcuts-hub-card.is-compact:hover,
.topbar-shortcuts-hub-card.is-compact:focus-visible,
.topbar-shortcuts-hub-card.is-compact.show {
    background: #f8fafc;
    border-color: rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    outline: none;
}

.topbar-shortcuts-hub-card.is-compact .topbar-shortcuts {
    display: none !important;
}

.topbar-shortcuts-hub-head {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.topbar-shortcuts-hub-card.is-expanded .topbar-shortcuts {
    border-left: 1px solid rgba(56, 189, 248, 0.22);
    padding: 4px 6px 4px 8px;
    margin-left: 4px;
    gap: 8px;
    overflow: visible;
}

.topbar-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding-right: 4px;
}

.topbar-shortcuts-hub-card.is-expanded .topbar-shortcut.sidebar-icon-shortcut {
    position: relative;
    z-index: 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    flex: 0 0 auto;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    isolation: isolate;
}

.topbar-shortcuts .topbar-shortcut.sidebar-icon-shortcut {
    position: relative;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    flex: 0 0 auto;
    border-radius: 10px;
}

.topbar-shortcuts .topbar-shortcut.sidebar-icon-shortcut i {
    font-size: 0.84rem;
}

.topbar-shortcut {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.topbar-shortcut i {
    font-size: 0.86rem;
}

.topbar-shortcut-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.18);
    pointer-events: none;
    z-index: 4;
}

.topbar-shortcuts-hub-card.is-expanded .topbar-shortcut-badge {
    top: -3px;
    right: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 0.56rem;
    line-height: 17px;
    border-width: 2px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
    z-index: 3;
}

.topbar-create-demand-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 8px;
}

.topbar-demand-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(37, 99, 235, 0.35);
    background: #2563eb;
    color: #fff;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 6px 16px rgba(37, 99, 235, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.topbar-demand-btn:hover,
.topbar-demand-btn:focus-visible {
    color: #fff;
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 10px 22px rgba(37, 99, 235, 0.34);
}

.topbar-demand-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.72rem;
}

.topbar-demand-btn-chevron {
    margin-left: 1px;
    font-size: 0.58rem;
    opacity: 0.8;
    transition: transform 0.16s ease;
}

.topbar-create-demand-wrap.show .topbar-demand-btn-chevron {
    transform: rotate(180deg);
}

.topbar-create-menu {
    width: min(370px, calc(100vw - 24px));
    max-height: min(680px, calc(100vh - 92px));
    margin-top: 10px !important;
    padding: 8px;
    overflow-y: auto;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18);
}

.topbar-create-menu-head {
    display: grid;
    gap: 2px;
    padding: 10px 11px 11px;
    border-bottom: 1px solid #eef2f7;
}

.topbar-create-menu-head strong {
    color: #0f172a;
    font-size: 0.9rem;
    line-height: 1.25;
}

.topbar-create-menu-kicker,
.topbar-create-menu-group {
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.topbar-create-menu-group {
    padding: 10px 10px 4px;
}

.topbar-create-menu-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 12px;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 1px 0;
    padding: 8px 9px;
    border-radius: 10px;
    white-space: normal;
}

.topbar-create-menu-item:hover,
.topbar-create-menu-item:focus {
    background: #f6f8fb;
}

.topbar-create-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 0.8rem;
}

.topbar-create-menu-item[data-tone="ticket"] .topbar-create-menu-icon { background:#fff7ed; color:#ea580c; }
.topbar-create-menu-item[data-tone="quote-os"] .topbar-create-menu-icon { background:#fefce8; color:#a16207; }
.topbar-create-menu-item[data-tone="quote-dx"] .topbar-create-menu-icon { background:#f5f3ff; color:#7c3aed; }
.topbar-create-menu-item[data-tone="purchase"] .topbar-create-menu-icon { background:#eef2ff; color:#4f46e5; }
.topbar-create-menu-item[data-tone="task"] .topbar-create-menu-icon { background:#ecfdf5; color:#059669; }
.topbar-create-menu-item[data-tone="event"] .topbar-create-menu-icon { background:#ecfeff; color:#0891b2; }
.topbar-create-menu-item[data-tone="preregistration"] .topbar-create-menu-icon { background:#faf5ff; color:#9333ea; }

.topbar-create-menu-copy {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.topbar-create-menu-copy strong {
    overflow: hidden;
    color: #172033;
    font-size: 0.79rem;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-create-menu-copy small {
    display: -webkit-box;
    overflow: hidden;
    color: #7b879b;
    font-size: 0.66rem;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.topbar-create-menu-arrow {
    color: #b2bdcd;
    font-size: 0.58rem;
}

.topbar-create-menu-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #0f172a;
    color: #fff;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
}

.topbar-create-menu-footer:hover,
.topbar-create-menu-footer:focus {
    background: #1e293b;
    color: #fff;
}

.topbar-shortcuts-hub {
    flex-shrink: 0;
}

.topbar-shortcuts-hub-mascot {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    margin-bottom: 1px;
    filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.18));
    transition: transform 0.2s ease;
}

.topbar-shortcuts-hub-mascot img {
    display: block;
    width: 30px;
    height: 30px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.topbar-shortcuts-hub-card.is-compact:hover .topbar-shortcuts-hub-mascot,
.topbar-shortcuts-hub-card.is-compact:focus-visible .topbar-shortcuts-hub-mascot,
.topbar-shortcuts-hub-card.is-compact.show .topbar-shortcuts-hub-mascot {
    transform: translateY(-2px) rotate(-4deg);
}

.topbar-shortcuts-hub-label {
    display: inline;
    white-space: nowrap;
    letter-spacing: 0.02em;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    color: #1e3a8a;
}

.topbar-shortcuts-hub-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    border: 1.5px solid #fff;
    pointer-events: none;
}

.topbar-shortcuts-hub-menu {
    min-width: 240px;
    max-width: min(92vw, 320px);
    max-height: min(62vh, 380px);
    overflow-y: auto;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.14);
}

.topbar-hub-menu-link.topbar-hub-menu-card {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 3px 0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.82rem;
    color: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow: inset 3px 0 0 rgba(59, 130, 246, 0.55);
}

.topbar-hub-menu-card.tone-blue,
.topbar-hub-menu-card.tone-default { background: #ffffff; }
.topbar-hub-menu-card.tone-demand { background: #ffffff; box-shadow: inset 3px 0 0 rgba(220, 38, 38, 0.55); }
.topbar-hub-menu-card.tone-purchase { background: #ffffff; box-shadow: inset 3px 0 0 rgba(234, 88, 12, 0.55); }
.topbar-hub-menu-card.tone-ai { background: #ffffff; box-shadow: inset 3px 0 0 rgba(8, 145, 178, 0.55); }
.topbar-hub-menu-card.tone-bug { background: #ffffff; box-shadow: inset 3px 0 0 rgba(217, 119, 6, 0.55); }
.topbar-hub-menu-card.tone-green,
.topbar-hub-menu-card.tone-emerald { background: #ffffff; box-shadow: inset 3px 0 0 rgba(22, 163, 74, 0.55); }
.topbar-hub-menu-card.tone-slate,
.topbar-hub-menu-card.tone-indigo,
.topbar-hub-menu-card.tone-sky,
.topbar-hub-menu-card.tone-violet { background: #ffffff; box-shadow: inset 3px 0 0 rgba(124, 58, 237, 0.55); }

.topbar-hub-menu-link:hover,
.topbar-hub-menu-link:focus {
    filter: brightness(0.98);
    color: #0f172a;
}

.topbar-hub-menu-link--demand strong {
    color: #1d4ed8;
}

.topbar-hub-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
}

.topbar-hub-menu-icon--primary {
    background: rgba(13, 110, 253, 0.12);
    color: #1d4ed8;
}

.topbar-hub-menu-icon i {
    font-size: 0.86rem;
}

.topbar-hub-menu-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar-hub-menu-copy strong {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-hub-item-badge {
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}

@media (max-width: 1400px) {
    .topbar-shortcuts-hub-card.is-expanded .topbar-shortcut.sidebar-icon-shortcut {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    .topbar-shortcuts-hub-card.is-expanded .topbar-shortcuts {
        gap: 7px;
    }
}

@media (max-width: 1280px) {
    .topbar-shortcuts-hub-card.is-expanded .topbar-shortcuts {
        gap: 6px;
    }

    .topbar-shortcuts-hub-card.is-expanded .topbar-shortcut.sidebar-icon-shortcut {
        width: 26px;
        height: 26px;
        min-width: 26px;
        min-height: 26px;
    }

    .topbar-shortcuts-hub-card.is-expanded .topbar-shortcut.sidebar-icon-shortcut i {
        font-size: 0.76rem;
    }
}

@media (max-width: 767.98px) {
    .topbar-demand-btn-label {
        display: none;
    }

    .topbar-demand-btn {
        width: 36px;
        min-width: 36px;
        padding: 0;
        justify-content: center;
    }

    .topbar-shortcuts-hub-card {
        height: 30px;
        min-height: 30px;
        gap: 4px;
        padding: 0 7px 0 3px;
        border-radius: 10px;
    }

    .topbar-shortcuts-hub-card.is-compact {
        min-width: 76px;
        padding-right: 8px;
    }

    .topbar-shortcuts-hub-head {
        gap: 4px;
    }

    .topbar-shortcuts-hub-mascot,
    .topbar-shortcuts-hub-mascot img {
        width: 22px;
        height: 22px;
    }

    .topbar-shortcuts-hub-label {
        font-size: 0.7rem;
    }

    .topbar-shortcuts-hub-badge {
        top: -3px;
        right: -1px;
        min-width: 16px;
        height: 16px;
        font-size: 0.54rem;
        line-height: 16px;
    }

    .topbar-shortcuts-hub {
        position: static;
    }

    .topbar-shortcuts-hub-menu,
    .topbar-shortcuts-hub-menu.dropdown-menu[data-bs-popper] {
        position: fixed !important;
        /* #2481: soma a altura real da tarja "本日の出勤を登録" (medida via JS,
           script.js syncTopbarClockBannerHeight) — sem isso o menu abria na
           mesma faixa da tarja e cobria os cartões (Komori AI, 開発管理 etc). */
        inset:
            calc(var(--app-safe-top) + var(--header-height) + var(--topbar-clock-banner-height, 0px) + 6px)
            max(var(--page-padding-mobile), var(--app-safe-right))
            auto
            max(var(--page-padding-mobile), var(--app-safe-left));
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: min(58vh, calc(100dvh - (var(--app-safe-top) + var(--header-height) + var(--topbar-clock-banner-height, 0px) + 18px)));
        margin: 0;
        transform: none !important;
        z-index: calc(var(--app-z-header) + 8);
        /* Sem moldura/card ao redor da lista no mobile — igual ao desktop, só os itens. */
        background: transparent;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        /* ⚠️ NÃO colocar `display` aqui. O Bootstrap esconde dropdown com
           `.dropdown-menu{display:none}` e revela com `.show`. Um `display:grid`
           no seletor BASE (dentro deste media query, com especificidade maior)
           anulava o `none` e o menu ficava PERMANENTEMENTE ABERTO no celular,
           flutuando `position:fixed` por cima do cabeçalho de TODA página do
           sistema — reproduzido em 390px no e-mail, nos contatos e em
           configurações. O layout de grade vale só quando está aberto. */
        grid-template-columns: 1fr 1fr;
        gap: 6px 8px;
        align-content: start;
    }

    .topbar-shortcuts-hub-menu.show,
    .topbar-shortcuts-hub-menu.dropdown-menu[data-bs-popper].show {
        display: grid;
    }

    .topbar-shortcuts-hub-menu .topbar-hub-menu-li--full {
        grid-column: 1 / -1;
    }

    .topbar-shortcuts-hub-menu .topbar-hub-menu-link.topbar-hub-menu-card {
        margin: 0;
        height: 100%;
    }

    .topbar-shortcuts-hub-menu .topbar-hub-menu-copy strong {
        font-size: 0.76rem;
    }
}

.topbar-search-icon {
    position: absolute;
    left: 12px;
    color: #64748b;
    pointer-events: none;
    font-size: 0.82rem;
}

.topbar-search-input {
    width: 100%;
    height: 34px;
    min-height: 0;
    border-radius: 9px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.94);
    padding: 0 12px 0 32px;
    font-size: 0.82rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.topbar-search-input:focus {
    border-color: rgba(11, 99, 246, 0.45);
    box-shadow: 0 0 0 3px rgba(11, 99, 246, 0.12);
    background: #fff;
    outline: none;
}

.topbar-search-suggestions {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    z-index: 1025;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
    overflow: hidden;
}

.topbar-search-suggestions-list {
    padding: 6px;
}

/* Cabeçalho discreto de origem ("de onde é") */
.topbar-search-group + .topbar-search-group {
    margin-top: 6px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    padding-top: 6px;
}

.topbar-search-group-title {
    padding: 4px 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}

/* 1 linha por resultado: ícone + título truncado + tag small */
.topbar-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-main);
}

.topbar-search-item > i {
    width: 16px;
    flex: 0 0 16px;
    text-align: center;
    color: #1d4ed8;
    font-size: 0.82rem;
}

.topbar-search-item-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-search-item-meta {
    /* não encolhe antes do título: a tag é o que desambigua o resultado */
    flex: 0 0 auto;
    max-width: 40%;
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-search-item:hover,
.topbar-search-item:focus-visible {
    background: #eff6ff;
    color: var(--text-main);
    outline: none;
}

.topbar-search-item:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(11, 99, 246, 0.45);
}

/* Telas estreitas: a tag cai pra 2ª linha (máx. 2 linhas) */
@media (max-width: 480px) {
    .topbar-search-item {
        flex-wrap: wrap;
    }

    /* base 0: senao o titulo longo "empurra" a si mesmo pra 3a linha e o icone fica sozinho */
    .topbar-search-item-label {
        flex: 1 1 0;
    }

    .topbar-search-item-meta {
        max-width: 100%;
        flex-basis: 100%;
        padding-left: 24px;
    }
}

.search-group-icon,
.search-result-icon,
.search-top-match-icon,
.search-shortcut-icon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #eff6ff, #f8fafc);
    color: #1d4ed8;
    flex-shrink: 0;
}

.search-result-copy,
.search-top-match-copy,
.search-shortcut-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.search-result-copy strong,
.search-top-match-copy strong,
.search-shortcut-copy strong {
    color: var(--text-main);
    font-size: 0.95rem;
}

.search-result-copy small,
.search-result-copy span,
.search-top-match-copy small,
.search-top-match-copy span,
.search-shortcut-copy small {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.topbar-search-suggestions-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    text-decoration: none;
    color: #1d4ed8;
    font-weight: 700;
}

.topbar-search-suggestions-footer:hover {
    background: #f8fafc;
    color: #1d4ed8;
}

.topbar-search-empty {
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.topbar-clock-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 5px 11px;
    margin-right: 8px;
    border-radius: 10px;
    border: 1px solid #ff8a00;
    background: linear-gradient(135deg, #ff8a00, #ff6a00);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(255, 122, 0, 0.20);
    animation: topbarClockPulse 1.4s ease-in-out infinite;
}

.topbar-clock-cta:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(255, 122, 0, 0.28);
}

.topbar-clock-cta-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.20);
    font-size: 0.82rem;
    flex: 0 0 auto;
}

.topbar-clock-cta-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.topbar-clock-cta-title {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.topbar-clock-cta-subtitle {
    font-size: 0.66rem;
    opacity: 0.92;
    margin-top: 1px;
}

.topbar-header-alert {
    display: block;
    width: 100%;
    color: #fff;
    background: linear-gradient(90deg, #ff8a00 0%, #ff6a00 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(255, 122, 0, 0.22);
}

.topbar-header-alert.topbar-header-alert-clock.is-offday {
    background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(79, 70, 229, 0.22);
}

.topbar-header-alert-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
    padding: 10px max(var(--page-padding), var(--app-safe-left)) 10px max(var(--page-padding), var(--app-safe-right));
    box-sizing: border-box;
}

.topbar-header-alert-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
    color: #fff;
    text-decoration: none;
}

.topbar-header-alert-main:hover,
.topbar-header-alert-main:focus-visible {
    color: #fff;
}

.topbar-header-alert-badge {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.topbar-header-alert-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
}

.topbar-header-alert-copy strong {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.1;
}

.topbar-header-alert-copy span {
    font-size: 0.76rem;
    opacity: 0.94;
    line-height: 1.2;
}

.topbar-header-alert-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 1 auto;
    flex-wrap: wrap;
}

.topbar-header-alert-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.topbar-header-alert-action:hover,
.topbar-header-alert-action:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
}

.topbar-header-alert-arrow {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.14);
}

.topbar-header-alert.is-in {
    background: linear-gradient(90deg, #ff8a00 0%, #ff6a00 100%);
}

.topbar-header-alert.is-out {
    background: linear-gradient(90deg, #ff8a00 0%, #ff6a00 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1), 0 8px 20px rgba(255, 122, 0, 0.22);
}

@keyframes topbarClockPulse {
    0%, 100% {
        box-shadow: 0 10px 24px rgba(255, 122, 0, 0.20);
        filter: saturate(1);
    }
    50% {
        box-shadow: 0 16px 34px rgba(255, 122, 0, 0.34);
        filter: saturate(1.08);
    }
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 14px;
}

#sidebar .menu-section {
    padding: 12px 15px;
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

#sidebar ul.submenu {
    list-style: none;
    padding: 2px 0 4px 0;
    margin: 0 0 3px 0;
}

#sidebar ul.submenu li a {
    padding: 5px 10px 5px 20px;
    font-size: 0.74rem;
    border-radius: 3px;
}

#sidebar ul.submenu li a.sidebar-access-link {
    color: #285f8f;
    font-weight: 600;
}

#sidebar ul.submenu li a.sidebar-access-link i {
    color: #5c7a96;
}

#sidebar ul.submenu li a.sidebar-access-link:hover {
    color: #1f4f78;
    background: linear-gradient(90deg, rgba(40, 95, 143, 0.10), rgba(248, 250, 252, 0.92));
}

#sidebar ul.submenu li a.sidebar-access-link:hover i {
    color: #1f4f78;
}

#sidebar ul.submenu li a i {
    margin-right: 6px;
    width: 13px;
    font-size: 0.7rem;
}

#sidebar ul.submenu li a.active {
    background: color-mix(in srgb, var(--sidebar-active-bg) 68%, #ffffff);
    color: var(--primary-color);
    border-color: rgba(59, 130, 246, 0.08);
}

#sidebar ul.submenu li a.sidebar-access-link.active {
    color: #1d4d78;
    border-color: rgba(40, 95, 143, 0.14);
    box-shadow: inset 0 0 0 1px rgba(40, 95, 143, 0.08);
}

#sidebar ul.submenu li a.sidebar-access-link.active i {
    color: #1d4d78;
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--sidebar-active-bg);
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.user-meta-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-main);
}

.user-meta-role {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.lang-selector {
    margin-right: 8px;
    position: relative;
}

.lang-selector::after {
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--text-muted);
    font-size: 0.62rem;
    opacity: 0.7;
}

.lang-selector select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 34px;
    padding: 0 26px 0 12px;
    border-radius: 9px;
    border: 1px solid rgba(148,163,184,0.20);
    background: rgba(15,23,42,0.04);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.lang-selector select:hover {
    background: rgba(15,23,42,0.07);
    border-color: rgba(148,163,184,0.32);
}
.lang-selector select:focus-visible {
    outline: 2px solid #0b63f6;
    outline-offset: 2px;
}

/* New dropdown-style language selector (replaces native <select>, since native
   <option> on Chrome/Edge desktop won't render colour emoji flags). */
.lang-selector-dropdown::after { content: none; }
.lang-selector-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px 0 10px;
    border-radius: 9px;
    border: 1px solid rgba(148,163,184,0.20);
    background: rgba(15,23,42,0.04);
    color: var(--text-main);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
    line-height: 1;
}
.lang-selector-toggle:hover {
    background: rgba(15,23,42,0.07);
    border-color: rgba(148,163,184,0.32);
}
.lang-selector-toggle:focus-visible {
    outline: 2px solid #0b63f6;
    outline-offset: 2px;
}
.lang-selector-toggle .lang-flag {
    width: 20px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.10);
    flex-shrink: 0;
}
.lang-selector-toggle .lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-selector-toggle .lang-caret { font-size: 0.62rem; opacity: 0.7; }
.lang-selector-menu {
    min-width: 180px;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(148,163,184,0.20);
    box-shadow: 0 12px 28px rgba(15,23,42,0.12);
}
.lang-selector-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 0.82rem;
}
.lang-selector-item .lang-flag {
    width: 22px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.10);
    flex-shrink: 0;
}
.lang-selector-item .lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-selector-item .lang-code { font-weight: 700; letter-spacing: 0.04em; min-width: 22px; }
.lang-selector-item .lang-name { font-size: 0.74rem; }
.lang-selector-item.active {
    background: rgba(11,99,246,0.10);
    color: #0b63f6;
}
.lang-selector-item.active .lang-name { color: #0b63f6 !important; opacity: 0.85; }
.topbar-lang-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.topbar-lang-current:hover {
    opacity: 0.88;
}
.topbar-lang-current:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.35);
    outline-offset: 3px;
    border-radius: 6px;
}
.topbar-lang-current .lang-flag {
    width: 20px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.10);
    flex-shrink: 0;
}
.topbar-lang-current .lang-flag svg { width: 100%; height: 100%; display: block; }

/* Header language dropdown (report #2074: voltou pro header como dropdown
   próprio, em vez de só abrir o menu do avatar). */
.topbar-lang-switch {
    position: relative;
    display: inline-flex;
    margin-right: 4px;
}
.topbar-lang-switch .topbar-lang-current { margin-right: 0; }
.topbar-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 140px;
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);
    z-index: 1050;
}
.topbar-lang-switch.is-open .topbar-lang-menu { display: flex; }
.topbar-lang-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
}
.topbar-lang-opt:hover { background: #f1f5f9; color: #1e293b; }
.topbar-lang-opt.is-active { background: rgba(11, 99, 246, 0.10); color: #0b63f6; }
.topbar-lang-opt .lang-flag {
    width: 20px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(15,23,42,0.10);
    flex-shrink: 0;
}
.topbar-lang-opt .lang-flag svg { width: 100%; height: 100%; display: block; }

.tpl-selector { margin-right: 4px; }
.tpl-selector-toggle .tpl-icon {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    opacity: 0.9;
}
.tpl-selector-item .tpl-icon {
    width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.user-name {
    font-weight: 600;
    color: var(--text-main);
    margin-right: 15px;
    display: flex;
    align-items: center;
    font-size: 0.95rem;
}

.user-name i {
    margin-right: 8px;
    font-size: 1.2rem;
    color: var(--text-muted);
}

.btn-logout {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1.1rem;
    padding: 5px;
    transition: color 0.2s;
}

.btn-logout:hover {
    color: #dc3545;
}

/* Topbar lock pill (replaces the inline user-info card). Compact icon+label
   variant — text shrinks to icon-only on narrow screens. */
.topbar-lock-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 9px;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.20);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-right: 8px;
    transition: background-color .15s, color .15s, transform .1s, border-color .15s;
}
.topbar-lock-btn i { font-size: 0.85rem; }
.topbar-lock-btn:hover {
    background: #0f172a; color: #fff;
    border-color: #0f172a;
    transform: translateY(-1px);
}
.topbar-lock-btn:focus-visible {
    outline: 2px solid #0b63f6; outline-offset: 2px;
}
@media (max-width: 768px) {
    .topbar-lock-btn-label { display: none; }
    .topbar-lock-btn { width: 34px; padding: 0; }
}

/* Sidebar user panel (moved from topbar). Anchored above the menu so
   it stays visible while the user navigates. */
.sidebar-user-panel {
    position: relative;
    margin: 8px 12px 6px;
    border: 1px solid #8fc9ff;
    border-radius: 0;
    background: #eef2f6;
    box-shadow: none;
    max-width: calc(100% - 24px);
    flex: 0 0 auto;
    z-index: 5;
}
.sidebar-user-trigger {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 0; background: transparent;
    text-align: left; cursor: pointer;
    color: var(--text-primary);
    border-radius: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.sidebar-user-trigger:hover { background: rgba(143,201,255,0.12); }
.sidebar-user-trigger:focus { outline: none; }
.sidebar-user-trigger:focus-visible {
    outline: 2px solid rgba(11,99,246,0.45);
    outline-offset: -2px;
    border-radius: 0;
}
.sidebar-user-avatar {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(11,99,246,0.18), rgba(11,99,246,0.06));
    color: #0b63f6;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8rem;
    overflow: hidden;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.7);
}
/* Avatar de identidade: preserva o enquadramento original em vez de tratá-lo
   como imagem de capa e ampliar/cortar rosto em fotos retangulares. */
.sidebar-user-avatar img { width:100%; height:100%; object-fit:contain; background:#24242a; }
.sidebar-user-meta { flex: 1 1 auto; min-width: 0; }
.sidebar-user-name {
    font-size: 0.84rem; font-weight: 700; color: #8fc9ff;
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.sidebar-user-role {
    font-size: 0.66rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.sidebar-user-chev {
    font-size: 0.7rem; color: var(--text-muted);
    transition: transform .15s;
}
.sidebar-user-panel.is-open .sidebar-user-chev { transform: rotate(180deg); }
.sidebar-user-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    display: none;
    flex-direction: column;
    gap: 2px;
    background: #eef2f6;
    border: 1px solid #8fc9ff;
    border-radius: 0;
    box-shadow: 0 12px 28px rgba(15,23,42,0.14), 0 2px 6px rgba(15,23,42,0.06);
    z-index: 100;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}
.sidebar-user-panel.is-open .sidebar-user-menu { display: flex; }
.sidebar-user-menu a, .sidebar-user-menu button {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: 0;
    background: transparent; border: 0;
    color: var(--text-primary);
    font-size: 0.82rem; font-weight: 500;
    text-decoration: none; cursor: pointer;
    text-align: left;
}
.sidebar-user-menu a:hover, .sidebar-user-menu button:hover {
    background: rgba(143,201,255,0.12); color: #0b63f6;
}
.sidebar-user-menu .sidebar-user-menu-sep,
.sidebar-user-menu hr.sidebar-user-menu-sep {
    height: 0;
    border: 0;
    border-top: 1px solid #8fc9ff;
    margin: 4px 6px;
    opacity: 1;
}
.sidebar-user-menu .is-danger { color: #b91c1c; }
.sidebar-user-menu .is-danger:hover { background: rgba(239,68,68,0.10); color: #b91c1c; }
.sidebar-user-menu i { width: 16px; text-align: center; opacity: .85; }
.sidebar-user-menu-language {
    position: relative;
    border-radius: 10px;
    transition: background-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.sidebar-user-menu-language.is-attention {
    background: linear-gradient(135deg, rgba(59,130,246,0.16), rgba(14,165,233,0.22));
    box-shadow: 0 0 0 1px rgba(96,165,250,0.6), 0 0 0 6px rgba(125,211,252,0.14);
    animation: sidebarLangAttentionPulse 1.1s ease-out 1;
}
@keyframes sidebarLangAttentionPulse {
    0% {
        transform: translateX(0);
        box-shadow: 0 0 0 0 rgba(125,211,252,0.24);
    }
    35% {
        transform: translateX(3px);
        box-shadow: 0 0 0 8px rgba(125,211,252,0.18);
    }
    70% {
        transform: translateX(-2px);
        box-shadow: 0 0 0 4px rgba(125,211,252,0.10);
    }
    100% {
        transform: translateX(0);
        box-shadow: 0 0 0 0 rgba(125,211,252,0);
    }
}
.sidebar-user-menu-badge {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.10);
    color: #0f172a;
    line-height: 1;
}

/* Harmonized sidebar badges (ON/OFF/BETA). */
.sidebar-user-menu-badge.sidebar-user-menu-badge--on {
    background: rgba(34, 197, 94, 0.14);
    color: #166534;
}
.sidebar-user-menu-badge.sidebar-user-menu-badge--off {
    background: rgba(100, 116, 139, 0.12);
    color: #334155;
}
.sidebar-user-menu-badge.sidebar-user-menu-badge--beta {
    background: rgba(59, 130, 246, 0.14);
    color: #1d4ed8;
}

/* Sidebar footer CTA (Marketplace) */
.sidebar-footer-cta {
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    margin-top: 10px;
}
.sidebar-marketplace-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(13, 110, 253, 0.18);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14), rgba(14, 165, 233, 0.10));
    color: #0f172a;
    font-weight: 800;
}
.sidebar-marketplace-btn:hover {
    border-color: rgba(13, 110, 253, 0.28);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.14));
}
.sidebar-marketplace-btn i {
    width: 16px;
    text-align: center;
    opacity: .95;
    color: #1d4ed8;
}
.sidebar-marketplace-btn-text {
    flex: 1 1 auto;
}

.sidebar-user-menu-template {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 2px 0;
}
.sidebar-user-menu-language {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    margin: 2px 0;
}
.sidebar-user-menu-language-label {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1;
}
.sidebar-user-menu-language-options {
    display: flex;
    align-items: center;
    gap: 5px;
}
.sidebar-user-menu a.sidebar-user-menu-language-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(148, 163, 184, 0.18);
    opacity: 0.7;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}
.sidebar-user-menu a.sidebar-user-menu-language-opt:hover {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(11, 99, 246, 0.24);
    opacity: 1;
}
.sidebar-user-menu a.sidebar-user-menu-language-opt.is-active {
    background: rgba(11, 99, 246, 0.12);
    border-color: rgba(11, 99, 246, 0.42);
    box-shadow: 0 0 0 2px rgba(11, 99, 246, 0.12);
    opacity: 1;
    transform: translateY(-1px);
}
.sidebar-user-menu a.sidebar-user-menu-language-opt.is-active::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #0b63f6;
    box-shadow: 0 0 0 2px #eef2f6;
}
.sidebar-user-menu-language-flag {
    width: 15px;
    height: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.10);
    flex-shrink: 0;
}
.sidebar-user-menu-language-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}
.sidebar-user-menu-template-label {
    flex: 0 0 auto;
    width: 16px;
    text-align: center;
    color: #64748b;
    font-size: 0.78rem;
    line-height: 1;
}
.sidebar-user-menu-template-options {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.sidebar-user-menu-template-options::-webkit-scrollbar {
    display: none;
}
.sidebar-user-menu-template-opt {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 4px 7px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.72);
    color: #334155;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sidebar-user-menu-template-opt i {
    width: auto;
    font-size: 0.68rem;
    opacity: 0.9;
}
.sidebar-user-menu-template-opt:hover {
    background: rgba(143, 201, 255, 0.18);
    border-color: rgba(11, 99, 246, 0.28);
    color: #0b63f6;
}
.sidebar-user-menu-template-opt.is-active {
    background: rgba(11, 99, 246, 0.12);
    border-color: rgba(11, 99, 246, 0.45);
    color: #0b63f6;
    box-shadow: inset 0 0 0 1px rgba(11, 99, 246, 0.08);
}
.sidebar-user-menu-template-code {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* "Meus" group label + tag-button row (report #2074: agrupa os itens
   pessoais sob um rótulo único e transforma ações on/off em botões-tag). */
.sidebar-user-menu-group-label {
    padding: 6px 10px 2px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
}
.sidebar-user-menu-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 6px;
}
.sidebar-user-menu a.sidebar-user-menu-tag,
.sidebar-user-menu button.sidebar-user-menu-tag {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    flex: 0 1 auto;
    padding: 5px 10px !important;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.72);
    color: #334155;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.sidebar-user-menu a.sidebar-user-menu-tag:hover,
.sidebar-user-menu button.sidebar-user-menu-tag:hover {
    background: rgba(143, 201, 255, 0.18);
    border-color: rgba(11, 99, 246, 0.28);
    color: #0b63f6;
}
.sidebar-user-menu-tag i { width: auto; font-size: 0.78rem; opacity: .85; }
.sidebar-user-menu-tag.is-on {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.10);
    color: #166534;
}
.sidebar-user-menu-tag .sidebar-user-menu-badge { margin-left: 2px; }

/* Main Content Area */
.content {
    padding: var(--page-padding);
    flex: 1;
    background-color: var(--bg-body);
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    overflow-x: clip;
}

.content > .container,
.content > .container-fluid,
.content > .row,
.content .card,
.content .standard-section-card,
.content .standard-filter-card,
.content .ops-table-wrap,
.content .table-responsive,
.content .table-scroll-wrapper {
    max-width: 100%;
    min-width: 0;
}


.content h1 {
    font-size: 1.75rem;
    margin-bottom: 10px;
    color: var(--text-main);
}

.content p {
    color: var(--text-muted);
    margin-bottom: 30px;
}

/* Cards */
/* Let Bootstrap handle card styles mostly */
.card {
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: var(--shadow-md);
}

/* kpi-label and kpi-value are custom, keep them */
.kpi-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.kpi-value {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 6px 0 0 0;
    color: var(--text-main);
}

.page-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.page-toolbar-copy {
    min-width: 0;
    flex: 1 1 320px;
}

.page-toolbar-copy h1,
.page-toolbar-copy .h1,
.page-toolbar-copy .h2,
.page-toolbar-copy .h3 {
    margin-bottom: 0.25rem;
}

.page-toolbar-copy .text-muted,
.page-toolbar-copy .muted,
.page-toolbar-copy p {
    margin-bottom: 0;
}

.page-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.page-toolbar .page-actions,
.profile-page .page-actions,
.dashboard-page .page-actions,
.cadastros-page-actions,
.notifications-page-actions {
    justify-content: flex-end;
}

.page-actions .btn,
.cadastros-page-actions .btn,
.notifications-page-actions .btn {
    --page-action-icon-bg: rgba(15, 23, 42, 0.08);
    --page-action-icon-color: currentColor;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 40px;
    padding: 0.55rem 0.9rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.page-actions .btn i:first-child,
.cadastros-page-actions .btn i:first-child,
.notifications-page-actions .btn i:first-child {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin: 0;
    background: var(--page-action-icon-bg);
    color: var(--page-action-icon-color);
    font-size: 0.82rem;
}

.page-actions .btn .badge,
.page-actions .btn .page-action-badge,
.cadastros-page-actions .btn .badge,
.notifications-page-actions .btn .badge {
    border-radius: 999px;
    padding: 0.22rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.page-actions .btn-primary,
.page-actions .btn-success,
.page-actions .btn-danger,
.page-actions .btn-secondary,
.page-actions .btn-info,
.cadastros-page-actions .btn-primary,
.cadastros-page-actions .btn-success,
.cadastros-page-actions .btn-danger,
.cadastros-page-actions .btn-secondary,
.notifications-page-actions .btn-primary,
.notifications-page-actions .btn-secondary {
    --page-action-icon-bg: rgba(255, 255, 255, 0.18);
    --page-action-icon-color: inherit;
}

.page-actions .btn-outline-primary,
.page-actions .btn-outline-secondary,
.page-actions .btn-outline-dark,
.page-actions .btn-outline-danger,
.page-actions .btn-light,
.page-actions .border,
.cadastros-page-actions .btn-outline-primary,
.cadastros-page-actions .btn-outline-secondary,
.cadastros-page-actions .btn-light,
.notifications-page-actions .btn-outline-secondary {
    --page-action-icon-bg: rgba(15, 23, 42, 0.06);
    --page-action-icon-color: currentColor;
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(148, 163, 184, 0.22);
}

.page-actions .btn:hover,
.cadastros-page-actions .btn:hover,
.notifications-page-actions .btn:hover {
    transform: translateY(-1px);
}

.page-actions.shortcut-toolbar {
    align-items: center;
    justify-content: flex-end;
}

.page-actions .shortcut-action-btn {
    white-space: nowrap;
}

.global-shortcuts-card.is-relocated {
    display: none;
}

.calendar-side-tabs .nav-link {
    min-width: 48px;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}

.table-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.table-toolbar .form-control {
    max-width: 320px;
}

.table-toolbar-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.standard-filter-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
    padding: 16px 18px;
}

.standard-filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(140px, 1fr));
    gap: 10px;
}

.standard-filter-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: end;
}

.standard-section-card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.empty-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.12);
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

.ops-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ops-hero {
    padding: 24px 26px;
    border-radius: 24px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
}

.ops-hero h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2.2vw, 1.95rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.ops-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.9fr);
    gap: 18px;
    align-items: start;
}

.ops-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.ops-subtitle {
    margin-top: 10px;
    color: var(--text-muted);
    max-width: 72ch;
}

.ops-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.ops-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ops-stat {
    padding: 16px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.ops-stat span {
    display: block;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.ops-stat strong {
    display: block;
    font-size: 1.85rem;
    line-height: 1;
}

.ops-hero-neutral {
    background: linear-gradient(140deg, #ffffff 0%, #f4f8ff 55%, #f8fafc 100%);
}

.ops-kicker-neutral {
    background: rgba(51, 65, 85, 0.1);
    color: #334155;
}

.ops-table-wrap {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.ops-table-wrap table {
    margin: 0;
}

.ops-table-wrap > .table-responsive,
.ops-table-wrap.table-responsive,
.ops-table-wrap > .table-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.ops-table-wrap > .table-responsive > table,
.ops-table-wrap.table-responsive > table,
.ops-table-wrap > .table-scroll-wrapper > table {
    width: max-content;
    min-width: 100%;
}

.ops-table-wrap th {
    white-space: nowrap;
}

.ops-table-wrap td {
    vertical-align: top;
}

.ops-title-link {
    color: var(--text-main);
    text-decoration: none;
    font-weight: 700;
}

.ops-title-link:hover {
    color: var(--text-main);
    text-decoration: none;
}

.search-page-shell {
    gap: 20px;
}

.global-search-hero {
    margin-bottom: 0;
}

.global-search-hero-grid {
    align-items: stretch;
}

.global-search-filter-card {
    display: flex;
    align-items: center;
}

.global-search-main-form {
    width: 100%;
}

.global-search-form-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.global-search-input-wrap {
    position: relative;
    flex: 1 1 auto;
}

.global-search-page-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.global-search-page-input {
    min-height: 48px;
    padding-left: 42px;
    border-radius: 16px;
}

.global-search-help {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.global-search-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.search-page-card {
    overflow: hidden;
}

.search-page-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.search-top-match-grid,
.search-shortcut-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.search-top-match-card,
.search-shortcut-card,
.search-shortcut-row,
.search-result-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-decoration: none;
    color: var(--text-main);
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 18px;
    padding: 14px 16px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.search-top-match-card:hover,
.search-shortcut-card:hover,
.search-shortcut-row:hover,
.search-result-card:hover {
    color: var(--text-main);
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.24);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
}

.search-shortcut-stack,
.search-group-stack,
.search-result-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-result-card {
    align-items: center;
}

.search-result-arrow {
    margin-left: auto;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-empty-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(29, 78, 216, 0.08);
    color: #1d4ed8;
    font-size: 0.82rem;
    font-weight: 700;
}

.search-page-empty-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 220px;
    background: linear-gradient(145deg, #ffffff, #eff6ff);
}

.ops-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.ops-main-cell {
    min-width: 320px;
}

.ops-ref-code {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--text-main);
    text-decoration: none;
}

.ops-ref-code:hover {
    color: var(--text-main);
    text-decoration: none;
}

.ops-ref-meta,
.ops-data-meta,
.ops-owner-copy small,
.ops-timeline small,
.ops-report-user small {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.ops-inline-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.ops-badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
    font-size: 0.74rem;
    font-weight: 700;
}

.ops-badge-soft-primary {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}

.ops-timeline {
    display: grid;
    gap: 8px;
    min-width: 170px;
}

.ops-timeline strong {
    display: block;
    font-size: 0.92rem;
    line-height: 1.2;
}

.ops-status.is-success {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

.ops-status.is-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
}

.ops-status.is-danger {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
}

.ops-status.is-info {
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.ops-status.is-slate {
    background: rgba(71, 85, 105, 0.1);
    color: #475569;
}

.ops-owner-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ops-report-user {
    display: grid;
    gap: 4px;
}

.ops-route-pill {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.08);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.standard-filter-grid-report {
    grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1.1fr) repeat(2, minmax(150px, 1fr)) minmax(190px, 0.9fr);
}

.ops-owner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 180px;
}

.ops-avatar,
.ops-avatar-fallback {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.ops-avatar {
    object-fit: cover;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.ops-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

/* Responsive Grid - REMOVED manual col-md-* definitions to use Bootstrap */

@media (min-width: 769px) and (max-width: 991.98px) {
    #sidebar {
        margin-left: 0;
        position: fixed;
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        height: 100dvh;
        max-height: 100dvh;
        z-index: 1050;
        transform: translateX(calc(var(--sidebar-width) * -1));
        overflow: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: var(--app-safe-top);
        padding-left: var(--app-safe-left);
        padding-bottom: calc(16px + var(--app-safe-bottom));
    }

    /* Keep the internal flex column chain alive on mobile so the menu list
       (ul.components) gets a bounded height and its overflow-y:auto engages.
       Without display:flex/flex/min-height:0 here, ul.components grows to its
       full content height and the items below the fold get clipped by
       #sidebar's overflow:hidden — i.e. the menu cannot be scrolled. */
    .sidebar-sticky-shell {
        position: relative;
        top: auto;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #sidebar .sidebar-menu-mode-panels {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #sidebar .sidebar-menu-mode-view {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .wrapper.sidebar-mobile-open #sidebar {
        transform: translateX(0);
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }

    #sidebar ul.components {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
}

@media (max-width: 768px) {
    #sidebar {
        margin-left: 0;
        position: fixed;
        top: 0;
        right: auto;
        bottom: 0;
        left: 0;
        height: 100dvh;
        max-height: 100dvh;
        z-index: 1050;
        transform: translateX(calc(var(--sidebar-width) * -1));
        overflow: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-top: var(--app-safe-top);
        padding-left: var(--app-safe-left);
        padding-bottom: calc(16px + var(--app-safe-bottom));
    }

    /* Keep the internal flex column chain alive on mobile so the menu list
       (ul.components) gets a bounded height and its overflow-y:auto engages.
       Without display:flex/flex/min-height:0 here, ul.components grows to its
       full content height and the items below the fold get clipped by
       #sidebar's overflow:hidden — i.e. the menu cannot be scrolled. */
    .sidebar-sticky-shell {
        position: relative;
        top: auto;
        height: 100%;
        min-height: 0;
        max-height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #sidebar .sidebar-menu-mode-panels {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #sidebar .sidebar-menu-mode-view {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .wrapper.sidebar-mobile-open #sidebar {
        transform: translateX(0);
        box-shadow: 0 0 20px rgba(0,0,0,0.2);
    }

    #sidebar ul.components {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .content {
        padding: var(--page-padding-mobile);
        padding-bottom: calc(var(--page-padding-mobile) + env(safe-area-inset-bottom, 0px));
    }

    .page-actions.shortcut-toolbar {
        width: 100%;
        justify-content: flex-start;
    }

    .page-actions.shortcut-toolbar .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .standard-filter-grid {
        grid-template-columns: 1fr;
    }

    .ops-hero-grid,
    .ops-stats {
        grid-template-columns: 1fr;
    }

    .container-fluid-nav {
        padding-left: max(var(--page-padding-mobile), var(--app-safe-left));
        padding-right: max(var(--page-padding-mobile), var(--app-safe-right));
    }

    .topbar-start {
        /* Extra gap when notch is on the left (landscape iPhone / iPad) */
        margin-left: max(0px, calc(var(--app-safe-left) - var(--page-padding-mobile)));
    }

    .user-info {
        margin-right: 8px;
    }

    /* Esconde apenas a busca INLINE da topbar no celular.
       O form do overlay tambem tem .topbar-search-form e nao pode ser morto aqui. */
    .topbar-search-form--inline {
        display: none !important;
    }

    .topbar-search-form--overlay {
        display: flex !important;
    }

    .global-search-stats,
    .search-top-match-grid,
    .search-shortcut-grid {
        grid-template-columns: 1fr;
    }

    .global-search-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .user-meta {
        display: none;
    }

    .lang-selector {
        margin-right: 4px;
    }

    .app-footer > small {
        padding: 0 var(--page-padding-mobile);
    }
}

.wrapper {
    /* Use `clip` (not `hidden`) so the wrapper does NOT become a scroll
       container on mobile. Otherwise body scroll never fires, breaking
       window-based features (sticky topbar, #appScrollTopButton, etc.). */
    overflow-x: clip;
}

@media (max-width: 991.98px) {
    .user-menu {
        gap: 4px;
    }

    .container-fluid-nav {
        gap: 10px;
    }

    .topbar-main {
        gap: 8px;
    }

    .topbar-clock-cta {
        min-width: 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        margin-right: 4px;
        gap: 0;
        border-radius: 12px;
        justify-content: center;
    }

    .topbar-clock-cta-icon {
        width: 28px;
        height: 28px;
        font-size: 0.92rem;
    }

    .topbar-clock-cta-copy {
        display: none;
    }

    .topbar-header-alert-inner {
        padding-left: max(var(--page-padding-mobile), var(--app-safe-left));
        padding-right: max(var(--page-padding-mobile), var(--app-safe-right));
    }

    .card-body {
        padding: 18px;
    }

    .btn-icon,
    .btn-toggle {
        width: 38px;
        height: 38px;
    }

    .search-top-match-card,
    .search-shortcut-card,
    .search-shortcut-row,
    .search-result-card {
        padding: 13px 14px;
    }
}

.container-fluid {
    width: 100%;
}

/* Sidebar accordion */
#sidebar ul.submenu {
    display: none;
}

#sidebar li.open > ul.submenu,
#sidebar li.active > ul.submenu {
    display: block;
}

#sidebar a.has-submenu {
    justify-content: space-between;
    gap: 8px;
}

#sidebar a.has-submenu .menu-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}

#sidebar a.has-submenu .menu-label > span:not(.badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

#sidebar a.has-submenu .submenu-caret {
    margin-left: 8px;
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}

#sidebar a.has-submenu .sidebar-info-trigger {
    margin-left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #2563eb;
    background: rgba(219, 234, 254, 0.92);
    border: 1px solid rgba(147, 197, 253, 0.5);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

#sidebar a.has-submenu .sidebar-info-trigger:hover,
#sidebar a.has-submenu .sidebar-info-trigger:focus-visible {
    background: rgba(191, 219, 254, 1);
    color: #1d4ed8;
    border-color: rgba(96, 165, 250, 0.65);
    outline: none;
}

#sidebar a.has-submenu .sidebar-responsible-stack,
#sidebar .sidebar-settings-group-label .sidebar-responsible-stack {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    flex: 0 0 auto;
}

#sidebar a.has-submenu .sidebar-responsible-avatar,
#sidebar .sidebar-settings-group-label .sidebar-responsible-avatar {
    width: 24px;
    height: 24px;
    margin-left: -6px;
    border-radius: 999px;
    border: 2px solid #ffffff;
    background: #dbeafe;
    color: #1d4ed8;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#sidebar a.has-submenu .sidebar-responsible-avatar:first-child,
#sidebar .sidebar-settings-group-label .sidebar-responsible-avatar:first-child {
    margin-left: 0;
}

#sidebar a.has-submenu .sidebar-responsible-avatar img,
#sidebar a.has-submenu .sidebar-responsible-fallback,
#sidebar .sidebar-settings-group-label .sidebar-responsible-avatar img,
#sidebar .sidebar-settings-group-label .sidebar-responsible-fallback {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#sidebar a.has-submenu .sidebar-responsible-avatar img,
#sidebar .sidebar-settings-group-label .sidebar-responsible-avatar img {
    object-fit: cover;
}

#sidebar a.has-submenu .sidebar-responsible-fallback,
#sidebar .sidebar-settings-group-label .sidebar-responsible-fallback {
    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#sidebar li.open > a.has-submenu .submenu-caret {
    transform: rotate(180deg);
}

#sidebar li.sidebar-central-menu > a.has-submenu {
    margin-top: 2px;
    padding: 7px 10px 7px 9px;
    font-weight: 650;
    color: #0f172a;
    background: linear-gradient(180deg, rgba(238, 244, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

#sidebar li.sidebar-central-menu > a.has-submenu:hover {
    background: linear-gradient(180deg, rgba(232, 240, 255, 0.96) 0%, rgba(245, 248, 252, 1) 100%);
    border-color: rgba(96, 165, 250, 0.16);
}

#sidebar ul.sidebar-central-submenu {
    margin-top: 2px;
    margin-left: 4px;
    padding-left: 6px;
    border-left: 1px solid rgba(148, 163, 184, 0.12);
}

#sidebar ul.sidebar-central-submenu > li > a.has-submenu {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.72);
    border-radius: 3px;
    box-shadow: none;
}

#sidebar ul.sidebar-central-submenu > li > a.has-submenu:hover {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.14);
}

#sidebar ul.sidebar-central-submenu > li.open > a.has-submenu {
    border-color: rgba(59, 130, 246, 0.14);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.025);
}

#sidebar ul.sidebar-central-submenu > li > ul.submenu {
    margin-left: 2px;
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] > .submenu > li.sidebar-settings-group {
    margin: 0;
    padding: 0;
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] > .submenu > li.sidebar-settings-group + li.sidebar-settings-group .sidebar-settings-group-label {
    margin-top: 6px;
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] .sidebar-settings-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px 3px 16px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
    user-select: none;
    pointer-events: none;
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] .sidebar-settings-group-label > span:first-child {
    min-width: 0;
}

#sidebar .sidebar-settings-group-label .sidebar-responsible-stack-group {
    margin-left: auto;
}

#sidebar .sidebar-settings-group-label .sidebar-responsible-avatar {
    width: 20px;
    height: 20px;
    border-width: 1px;
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] ul.sidebar-settings-group-items {
    display: block;
    margin: 0 0 2px 12px;
    padding: 0 0 0 8px;
    border-left: 2px solid rgba(148, 163, 184, 0.22);
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] ul.sidebar-settings-group-items > li > a {
    padding-left: 10px;
    font-size: 0.73rem;
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] ul.sidebar-settings-group-items > li > a::before {
    content: "–";
    display: inline-block;
    margin-right: 6px;
    color: rgba(148, 163, 184, 0.85);
    font-weight: 600;
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] ul.sidebar-settings-group-items > li > a.active::before {
    color: var(--sidebar-active-text);
}

/* #2095: grupo "sanfonado" (Ferramentas/Monitoramento da Divisão DX) — recolhido
   por padrão, abre no clique do rótulo. Reaproveita a classe .open já usada pelo
   accordion das seções/pela busca do sidebar (script.js). */
#sidebar li.sidebar-filter-section[data-section-has-groups="1"] .sidebar-settings-group--collapsible > .sidebar-settings-group-label {
    cursor: pointer;
    pointer-events: auto;
}

#sidebar .sidebar-settings-group--collapsible .sidebar-settings-group-caret {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.66rem;
    transition: transform 0.2s;
}

#sidebar .sidebar-settings-group--collapsible.open .sidebar-settings-group-caret {
    transform: rotate(180deg);
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] .sidebar-settings-group--collapsible > ul.sidebar-settings-group-items {
    display: none;
}

#sidebar li.sidebar-filter-section[data-section-has-groups="1"] .sidebar-settings-group--collapsible.open > ul.sidebar-settings-group-items {
    display: block;
}

#sidebar li.sidebar-prototype-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 6px;
    margin: 4px 0 0;
}

#sidebar .sidebar-prototype-divider-line {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(148, 163, 184, 0.26);
}

#sidebar .sidebar-prototype-divider-label {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sidebar-info-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
    z-index: 2050;
}

.sidebar-info-modal.is-open {
    display: flex;
}

.sidebar-info-dialog {
    width: min(100%, 520px);
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(191, 219, 254, 0.65);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.sidebar-info-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px 12px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.sidebar-info-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

.sidebar-info-head p {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

.sidebar-info-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
}

.sidebar-info-body {
    padding: 18px 20px 22px;
}

.sidebar-info-card {
    padding: 16px;
    border: 1px solid rgba(191, 219, 254, 0.75);
    border-radius: 16px;
    background: #fff;
}

.sidebar-info-copy {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #475569;
}

.sidebar-info-kicker {
    display: block;
    margin-top: 14px;
    margin-bottom: 8px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.sidebar-info-pill-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sidebar-info-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.72rem;
    font-weight: 700;
}

.sidebar-info-empty {
    font-size: 0.8rem;
    color: #64748b;
}

.sidebar-icon-shortcuts {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 2px 8px 0;
    margin: 6px 0 0;
    width: 100%;
    overflow-x: auto;
    flex: 0 0 auto;
}

.sidebar-icon-shortcut {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #0f172a;
    border: 1px solid var(--border-color);
    background: #f8fafc;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: box-shadow 0.14s ease, opacity 0.14s ease, border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}

.sidebar-icon-shortcut:hover {
    background: #f3f6fb;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06);
    opacity: 0.98;
}

.sidebar-icon-shortcut:active {
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
    opacity: 0.96;
}

.sidebar-icon-shortcut:focus-visible {
    outline: 2px solid rgba(0, 123, 255, 0.2);
    outline-offset: 2px;
}

.sidebar-icon-shortcut i {
    font-size: 0.92rem;
    line-height: 1;
}

.sidebar-icon-shortcut-demand { color: #b91c1c; }

.sidebar-icon-shortcut-purchase {
    color: #6d28d9;
}

.sidebar-icon-shortcut-ai {
    color: #155e75;
}

.sidebar-icon-shortcut-bug {
    color: #b45309;
}

.sidebar-icon-shortcut-preview {
    color: #0f766e;
}

@media (min-width: 1400px) {
    .topbar-search-form--inline {
        display: flex;
    }

    .topbar-search-open-btn {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .topbar-search-form--inline {
        display: none !important;
    }

    .topbar-search-open-btn {
        display: inline-flex;
    }
}

@media (max-width: 1280px) {
    .topbar-clock-cta-copy {
        display: none;
    }

    .topbar-clock-cta {
        padding: 5px 8px;
        margin-right: 6px;
    }
}

@media (max-width: 640px) {
    .topbar-header-alert-inner {
        gap: 10px;
        align-items: stretch;
        flex-direction: column;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .topbar-header-alert-main {
        width: 100%;
    }

    .topbar-header-alert-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .topbar-header-alert-badge,
    .topbar-header-alert-arrow {
        width: 30px;
        height: 30px;
        margin-top: 1px;
    }

    .topbar-header-alert-copy strong {
        font-size: 0.84rem;
    }

    .topbar-header-alert-copy span {
        font-size: 0.7rem;
    }
}

#sidebar .sidebar-icon-shortcuts + ul.components {
    padding-top: 6px;
}

#sidebar .sidebar-menu-mode-toggle {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 6px 16px 12px;
    flex: 0 0 auto;
}

#sidebar .sidebar-menu-mode-button {
    border: 0;
    background: transparent;
    color: #475569;
    border-radius: 10px;
    padding: 0;
    min-height: 34px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

#sidebar .sidebar-menu-mode-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: lowercase;
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, 0.9);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

#sidebar .sidebar-menu-mode-button-full {
    color: #1d4ed8;
}

#sidebar .sidebar-menu-mode-button-dev {
    color: #0f766e;
}

#sidebar .sidebar-menu-mode-button-easy {
    color: #b45309;
}

#sidebar .sidebar-menu-mode-button:hover {
    color: #1e3a8a;
}

#sidebar .sidebar-menu-mode-button:hover .sidebar-menu-mode-label {
    background: #eef2ff;
    border-color: rgba(37, 99, 235, 0.24);
}

#sidebar .sidebar-menu-mode-button.is-active {
    color: inherit;
}

#sidebar .sidebar-menu-mode-button-full.is-active .sidebar-menu-mode-label {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    color: #fff;
    border-color: rgba(29, 78, 216, 0.9);
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.2);
}

#sidebar .sidebar-menu-mode-button-dev.is-active .sidebar-menu-mode-label {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    color: #fff;
    border-color: rgba(15, 118, 110, 0.88);
    box-shadow: 0 10px 22px rgba(13, 148, 136, 0.18);
}

#sidebar .sidebar-menu-mode-button-easy.is-active .sidebar-menu-mode-label {
    background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
    color: #fff;
    border-color: rgba(234, 88, 12, 0.88);
    box-shadow: 0 10px 22px rgba(249, 115, 22, 0.18);
}

#sidebar .sidebar-menu-mode-panels {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#sidebar .sidebar-menu-mode-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

#sidebar .sidebar-menu-filter-box {
    padding: 12px 16px 10px;
    flex: 0 0 auto;
}

#sidebar .sidebar-icon-shortcuts + .sidebar-menu-mode-panels .sidebar-menu-filter-box,
#sidebar .sidebar-icon-shortcuts + ul.components,
#sidebar .sidebar-icon-shortcuts {
    margin-top: 6px;
}

#sidebar .sidebar-menu-filter-field {
    position: relative;
}

#sidebar .sidebar-menu-filter-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 0.78rem;
    color: #64748b;
    pointer-events: none;
}

#sidebar .sidebar-menu-filter-input {
    width: 100%;
    min-height: 38px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    padding: 9px 12px 9px 34px;
    font-size: 0.82rem;
    line-height: 1.2;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

#sidebar .sidebar-menu-filter-input::placeholder {
    color: #94a3b8;
}

#sidebar .sidebar-menu-filter-input:focus {
    outline: none;
    background: #fff;
    border-color: rgba(37, 99, 235, 0.45);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

#sidebar .sidebar-menu-filter-empty {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid rgba(251, 146, 60, 0.24);
    color: #9a3412;
    font-size: 0.76rem;
    font-weight: 600;
}

#sidebar .sidebar-filter-node[hidden] {
    display: none !important;
}

#sidebar .sidebar-menu-mode-view[hidden] {
    display: none !important;
}

#sidebar [data-menu-mode-view="novo"] li.sidebar-central-menu > a.has-submenu {
    padding: 7px 10px 7px 10px;
    font-size: 0.76rem;
    font-weight: 600;
}

#sidebar [data-menu-mode-view="novo"] ul.sidebar-central-submenu > li > a.has-submenu {
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 0.75rem;
}

#sidebar [data-menu-mode-view="novo"] ul.sidebar-central-submenu {
    margin-left: 4px;
    padding-left: 6px;
}

@media (max-width: 992px) {
    .sidebar-icon-shortcut {
        width: 36px;
        height: 36px;
    }

    #sidebar .sidebar-menu-mode-toggle {
        padding: 4px 12px 10px;
        gap: 8px;
    }

    #sidebar .sidebar-menu-filter-box {
        padding: 0 12px 10px;
    }

    #sidebar .sidebar-menu-mode-button {
        min-height: 32px;
        font-size: 0.72rem;
    }

    #sidebar .sidebar-menu-mode-label {
        font-size: 0.64rem;
        min-height: 22px;
        padding: 2px 8px;
    }
}

/* Sidebar section quick-action first item (desktop only) */
#sidebar ul.submenu li.sidebar-quick-action-item > a {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.73rem;
    border-radius: 8px;
    background: #eef4ff;
    border: 1px solid rgba(13, 110, 253, 0.22);
    margin-bottom: 2px;
    padding-top: 6px;
    padding-bottom: 5px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

#sidebar ul.submenu li.sidebar-quick-action-item > a i {
    color: var(--primary-color);
    font-size: 0.78rem;
}

#sidebar ul.submenu li.sidebar-quick-action-item > a:hover {
    background: #eef4ff;
    border-color: rgba(13, 110, 253, 0.22);
    color: var(--primary-color);
}

/* Topbar notifications */
.btn-icon {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    position: relative;
    font-size: 0.9rem;
}

.btn-icon:hover {
    background: #f8f9fa;
    border-color: var(--border-color);
    color: var(--text-main);
}

/* Debug mode button (cop + virus + label) */
.topbar-debug-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(15, 23, 42, 0.04);
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    line-height: 1;
}
.topbar-debug-btn:hover {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.14);
}
.topbar-debug-btn:active {
    transform: translateY(0.5px);
}
.topbar-debug-btn-mascot {
    display: block;
}
.topbar-debug-btn-virus {
    font-size: 0.92rem;
    color: #b91c1c;
}
.topbar-debug-btn-label {
    font-weight: 900;
    letter-spacing: .08em;
    font-size: 0.76rem;
}

.topbar-bell-btn {
    color: var(--text-main);
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.06);
    font-size: 1rem;
}
.topbar-bell-btn i { font-size: 1rem; line-height: 1; }
.topbar-bell-btn:hover { color: var(--primary-color); }
/* Amber bell when there are unread notifications; gray otherwise. Toggled
   server-side (topbar.php) and kept in sync by setNotifBadge() in script.js. */
.topbar-bell-btn.has-unread { color: #fbbf24; }
.topbar-bell-btn.has-unread i { color: #fbbf24; }
.topbar-bell-btn.has-unread:hover { color: #f59e0b; }

.notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    border: 2px solid var(--bg-white);
    box-sizing: border-box;
    pointer-events: none;
}

.dropdown-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 340px;
    max-width: min(380px, calc(100vw - 24px));
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    padding: 10px;
    display: none;
    z-index: 1200;
}

.dropdown-panel.active {
    display: block;
}

.dropdown-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 8px;
}

/* Notification tabs */
.notif-tabs {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.notif-tab {
    position: relative;
    background: none;
    border: none;
    width: 34px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    line-height: 1.3;
    flex: 0 0 34px;
}

.notif-tab:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-main);
}

.notif-tab.active {
    background: var(--primary-light, #eff6ff);
    color: var(--primary, #3b82f6);
}

.notif-tab-badge {
    position: absolute;
    top: -4px;
    right: -5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: 999px;
    background: #dc3545;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
}

.dropdown-panel-title {
    font-weight: 800;
    font-size: 0.95rem;
}

.dropdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 292px;
    overflow-y: auto;
}

.dropdown-item {
    padding: 4px 6px;
    border-radius: 10px;
    border: 1px solid transparent;
    min-width: 0;
}

/* IA models list contrast fixes */
.ai-settings-model-list .accordion-button {
    color: #0f172a;
    background-color: #ffffff;
    border-radius: 10px;
}
.ai-settings-model-list .accordion-button:not(.collapsed) {
    color: #0f172a;
    background-color: #ffffff;
    box-shadow: none;
}
.ai-settings-model-list .accordion .accordion-item {
    background-color: #ffffff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
}
.ai-settings-model-list .accordion-button .badge {
    color: #0f172a;
    background-color: #eef2ff;
    border: 1px solid #e5e7eb;
}
.ai-settings-model-list .accordion-body {
    background-color: #fafafa;
    border-top: 1px solid #f1f3f5;
}

.dropdown-item.notification-entry {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff;
    min-height: 36px;
    padding: 5px 6px;
}

.notification-entry-main {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}

.dropdown-item.notification-entry > a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.dropdown-item.notification-entry.unread {
    box-shadow: inset 3px 0 0 rgba(59, 130, 246, 0.82);
}

.dropdown-item.notification-entry.tone-slate { background: linear-gradient(135deg, #ffffff, #f8fafc); }
.dropdown-item.notification-entry.tone-blue { background: linear-gradient(135deg, #ffffff, #eff6ff); }
.dropdown-item.notification-entry.tone-indigo { background: linear-gradient(135deg, #ffffff, #eef2ff); }
.dropdown-item.notification-entry.tone-sky { background: linear-gradient(135deg, #ffffff, #f0f9ff); }
.dropdown-item.notification-entry.tone-green { background: linear-gradient(135deg, #ffffff, #f0fdf4); }
.dropdown-item.notification-entry.tone-emerald { background: linear-gradient(135deg, #ffffff, #ecfdf5); }
.dropdown-item.notification-entry.tone-amber { background: linear-gradient(135deg, #ffffff, #fffbeb); }
.dropdown-item.notification-entry.tone-orange { background: linear-gradient(135deg, #ffffff, #fff7ed); }
.dropdown-item.notification-entry.tone-red { background: linear-gradient(135deg, #ffffff, #fef2f2); }
.dropdown-item.notification-entry.tone-violet { background: linear-gradient(135deg, #ffffff, #f5f3ff); }
.dropdown-item.notification-entry.tone-pink { background: linear-gradient(135deg, #ffffff, #fdf2f8); }
.dropdown-item.notification-entry.tone-cyan { background: linear-gradient(135deg, #ffffff, #ecfeff); }

.notification-mini-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.15);
    flex: 0 0 auto;
    margin-top: 1px;
}

/* Link wrapper inside notification entries */
.notif-entry-link {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.dropdown-item:hover {
    background: #f8f9fa;
    border-color: var(--border-color);
}

.notification-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.notification-entry-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-left: 36px;
}

.notification-inline-form {
    margin: 0;
}

.notification-inline-btn {
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.69rem;
    line-height: 1.2;
}

.notification-title-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
}

.notification-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #334155;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
    flex: 0 0 auto;
    margin-left: auto;
}

.notification-title,
.notification-body {
    display: block;
    min-width: 0;
    overflow-wrap: normal;
    word-break: normal;
}

.notification-title {
    font-weight: 800;
    font-size: 0.76rem;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-entry-main > a {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.dropdown-panel-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}

.notification-body {
    font-size: 0.71rem;
    line-height: 1.3;
    color: var(--text-muted, #64748b);
    margin-top: 1px;
}

.notification-title-clamp,
.notification-body-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-title-clamp {
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.notification-body-clamp {
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

[data-notification-toast-container="1"].notif-toast-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: min(320px, calc(100vw - 18px));
    pointer-events: none;
}

/* Floating toasts — same visual language as #notificationsDropdown .notification-entry */
.notif-toast-entry {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    overflow: hidden;
    pointer-events: auto;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.notif-toast-entry.notif-toast-enter {
    opacity: 1;
    transform: translateY(0);
}

.notif-toast-entry.notif-toast-leave {
    opacity: 0;
    transform: translateY(-4px);
}

.notif-toast-entry.unread {
    box-shadow: inset 3px 0 0 rgba(59, 130, 246, 0.82), 0 6px 18px rgba(15, 23, 42, 0.1);
}

.notif-toast-entry.tone-slate { background: linear-gradient(135deg, #ffffff, #f8fafc); }
.notif-toast-entry.tone-blue { background: linear-gradient(135deg, #ffffff, #eff6ff); }
.notif-toast-entry.tone-indigo { background: linear-gradient(135deg, #ffffff, #eef2ff); }
.notif-toast-entry.tone-sky { background: linear-gradient(135deg, #ffffff, #f0f9ff); }
.notif-toast-entry.tone-green { background: linear-gradient(135deg, #ffffff, #f0fdf4); }
.notif-toast-entry.tone-emerald { background: linear-gradient(135deg, #ffffff, #ecfdf5); }
.notif-toast-entry.tone-amber { background: linear-gradient(135deg, #ffffff, #fffbeb); }
.notif-toast-entry.tone-orange { background: linear-gradient(135deg, #ffffff, #fff7ed); }
.notif-toast-entry.tone-red { background: linear-gradient(135deg, #ffffff, #fef2f2); }
.notif-toast-entry.tone-violet { background: linear-gradient(135deg, #ffffff, #f5f3ff); }
.notif-toast-entry.tone-pink { background: linear-gradient(135deg, #ffffff, #fdf2f8); }
.notif-toast-entry.tone-cyan { background: linear-gradient(135deg, #ffffff, #ecfeff); }

.notif-toast-entry .notif-entry-link {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 5px 26px 5px 6px;
    color: inherit;
    text-decoration: none;
}

.notif-toast-entry .notif-toast-dismiss {
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.notif-toast-entry .notification-title-clamp {
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.notif-toast-entry .notification-body-clamp {
    line-clamp: 1;
    -webkit-line-clamp: 1;
    margin-top: 1px;
}

.notif-toast-entry .notification-mini-icon i {
    font-size: 0.82rem;
}

.notif-toast-entry.tone-red .notification-mini-icon i { color: #dc2626; }
.notif-toast-entry.tone-amber .notification-mini-icon i,
.notif-toast-entry.tone-orange .notification-mini-icon i { color: #d97706; }
.notif-toast-entry.tone-green .notification-mini-icon i,
.notif-toast-entry.tone-emerald .notification-mini-icon i { color: #059669; }
.notif-toast-entry.tone-blue .notification-mini-icon i,
.notif-toast-entry.tone-indigo .notification-mini-icon i,
.notif-toast-entry.tone-sky .notification-mini-icon i { color: #2563eb; }
.notif-toast-entry.tone-violet .notification-mini-icon i,
.notif-toast-entry.tone-pink .notification-mini-icon i { color: #7c3aed; }
.notif-toast-entry.tone-cyan .notification-mini-icon i { color: #0891b2; }

.notif-toast-close {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 2;
    padding: 0;
    width: 14px;
    height: 14px;
    background-size: 8px;
    opacity: 0.4;
}

.notif-toast-close:hover {
    opacity: 0.8;
}

@media (max-width: 768px) {
    /* Cinto visual para toasts já montados antes de rotação/redimensionamento.
       Confirmações do app (.app-toast) continuam visíveis; só notificações somem. */
    .notif-toast-entry {
        display: none !important;
    }

    [data-notification-toast-container="1"].notif-toast-stack {
        width: min(288px, calc(100vw - 14px));
        gap: 5px;
        padding: 0.45rem !important;
    }
}

@media (max-width: 768px) {
    .dropdown-panel {
        position: fixed;
        top: calc(var(--header-height) + 8px);
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        margin: 0;
    }
}

.notification-body-clamp {
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.notification-feed-item {
    min-width: 0;
}

.notification-feed-head {
    gap: 12px;
}

.notification-feed-meta {
    flex: 0 0 auto;
}

.muted {
    color: var(--text-muted);
}

/* Tabs */
.tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.tab-btn {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-main);
    padding: 10px 12px;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.92rem;
}

.tab-btn.active {
    border-bottom-color: #fff;
    background: #fff;
    color: var(--primary-color);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}

.modal-overlay.active {
    display: flex;
}

.modal-overlay .work-history-dialog {
    width: 860px;
    max-width: 100%;
    background: var(--bg-white);
    border-radius: 14px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.modal-overlay .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
}

.modal-overlay .modal-title {
    font-weight: 900;
}

.modal-overlay .modal-body {
    padding: 16px;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

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

.mt-4 {
    margin-top: 1.5rem;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

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

.table th,
.table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    font-size: 0.95rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: middle;
}

.table .badge,
.table .btn,
.table .btn-group,
.table .form-control,
.table .form-select,
.table .text-nowrap,
.table th.text-nowrap,
.table td.text-nowrap {
    white-space: nowrap;
}

.table thead th {
    font-weight: 700;
    color: var(--text-main);
    background-color: #f8f9fa;
}

.table tbody tr:hover {
    background-color: #fafbfd;
}

.table-responsive,
.table-scroll-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.ops-table-wrap,
.finance-table-wrap,
.cadastros-table-list-wrap,
[class$="-table-wrap"] {
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.table-responsive > table,
.table-scroll-wrapper > table,
.table-responsive > .table,
.table-scroll-wrapper > .table {
    margin-bottom: 0;
}

@media screen and (max-width: 991.98px) {
    :root {
        --sidebar-width: 228px;
        --page-padding: 22px;
    }

    .container-fluid-nav {
        padding: 0 20px;
    }

    .sidebar-header {
        padding: 0 16px;
    }

    #sidebar ul.components {
        padding: 12px 8px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    #sidebar ul li a {
        padding: 7px 10px 7px 9px;
        font-size: 0.79rem;
    }

    #sidebar ul li a > span.d-inline-flex,
    #sidebar a.has-submenu .menu-label {
        gap: 7px !important;
    }

    #sidebar [data-sidebar-badge-node="1"] {
        min-width: 26px;
        padding: 3px 8px;
        font-size: 0.64rem;
    }

    .content {
        padding-bottom: calc(var(--page-padding) + 12px);
    }

    .page-actions.shortcut-toolbar {
        justify-content: flex-start;
    }

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

    .ops-hero-grid,
    .ops-stats,
    .global-search-stats,
    .search-top-match-grid,
    .search-shortcut-grid {
        grid-template-columns: 1fr;
    }

    .table-toolbar {
        align-items: stretch;
    }

    .table-toolbar .form-control {
        max-width: 100%;
    }

    .content .table-responsive,
    .content .table-scroll-wrapper,
    .content .ops-table-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .content .table-responsive > table,
    .content .table-responsive > .table,
    .content .table-scroll-wrapper > table,
    .content .table-scroll-wrapper > .table,
    .content .ops-table-wrap > table,
    .content .ops-table-wrap > .table {
        width: max-content;
        min-width: 100%;
        margin-bottom: 0;
    }

    .content .table-responsive > table th,
    .content .table-responsive > table td,
    .content .table-responsive > .table th,
    .content .table-responsive > .table td,
    .content .table-scroll-wrapper > table th,
    .content .table-scroll-wrapper > table td,
    .content .table-scroll-wrapper > .table th,
    .content .table-scroll-wrapper > .table td,
    .content .ops-table-wrap > table th,
    .content .ops-table-wrap > table td,
    .content .ops-table-wrap > .table th,
    .content .ops-table-wrap > .table td {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }
}

@media (max-width: 768px) {
    .table-responsive,
    .table-scroll-wrapper {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .table-responsive > table,
    .table-scroll-wrapper > table {
        width: max-content;
        min-width: 100%;
    }

    .table-responsive > .table,
    .table-scroll-wrapper > .table {
        width: max-content;
        min-width: 100%;
    }

    .ops-table-wrap,
    .ops-table-wrap.table-responsive,
    .ops-table-wrap > .table-responsive,
    .ops-table-wrap > .table-scroll-wrapper {
        max-width: 100%;
    }

    .table-responsive > table th,
    .table-responsive > table td,
    .table-responsive > .table th,
    .table-responsive > .table td,
    .table-scroll-wrapper > table th,
    .table-scroll-wrapper > table td,
    .table-scroll-wrapper > .table th,
    .table-scroll-wrapper > .table td,
    .ops-table-wrap > table th,
    .ops-table-wrap > table td,
    .ops-table-wrap > .table th,
    .ops-table-wrap > .table td {
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-success {
    background-color: rgba(40, 167, 69, 0.15);
    color: #1e7e34;
}

.badge-secondary {
    background-color: rgba(108, 117, 125, 0.15);
    color: #6c757d;
}

/* ============================================
   Kimori Page Load Overlay (kplo)
   ============================================ */
#kimoriPageLoadOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-body, #f0f2f5);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity 0.16s ease, visibility 0.16s ease;
}

#kimoriPageLoadOverlay.kplo-effect-slide-up {
    transform: translateY(0);
    transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
}

#kimoriPageLoadOverlay.kplo-effect-zoom {
    transform: scale(1);
    transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
}

#kimoriPageLoadOverlay.kplo-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#kimoriPageLoadOverlay.kplo-completing {
    pointer-events: none;
}

#kimoriPageLoadOverlay.kplo-effect-slide-up.kplo-hidden {
    transform: translateY(-6px);
}

#kimoriPageLoadOverlay.kplo-effect-zoom.kplo-hidden {
    transform: scale(1.03);
}

#kimoriPageLoadOverlay.kplo-gone {
    display: none;
}

.kplo-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 24px;
    max-width: 260px;
    width: 100%;
    text-align: center;
}

.kplo-logo {
    width: min(160px, 52vw);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: kplo-breathe 1.8s ease-in-out infinite;
}

.kplo-logo img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.kplo-logo-fallback {
    font-size: 3rem;
    color: var(--primary-color, #007bff);
}

@keyframes kplo-breathe {
    0%, 100% { opacity: 1;    transform: scale(1);    }
    50%       { opacity: 0.72; transform: scale(0.95); }
}

.kplo-bar-track {
    width: min(200px, 64vw);
    height: 3px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.kplo-bar {
    height: 100%;
    border-radius: 3px;
    background: var(--primary-color, #007bff);
    width: 0%;
    animation: kplo-progress 2.8s ease-out forwards;
}

@keyframes kplo-progress {
    0%   { width: 0%;  }
    20%  { width: 22%; }
    55%  { width: 58%; }
    85%  { width: 80%; }
    100% { width: 90%; }
}

#kimoriPageLoadOverlay.kplo-completing .kplo-bar {
    animation: none;
    width: 100%;
    transition: width 0.12s ease;
}

.login-page #kimoriPageLoadOverlay {
    background: linear-gradient(135deg, #edf3ff 0%, #dfe9f5 100%);
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE-FIRST GLOBAL GUARDS  (≤ 991px)
   ────────────────────────────────────────────────────────────────────────
   Defensive overrides that prevent ANY page (slim template, Bootstrap
   cards, custom shells, legacy modules) from spilling content past the
   viewport on tablets/phones.

   Strategy:
     1. Block-level "shell" elements (cards, panels, accordions,
        sl-shell, sl-panel, sl-hero) get max-width:100% + min-width:0.
     2. Bootstrap grid columns get min-width:0 so long unbroken strings
        (URLs, codes, kintone IDs) shrink instead of pushing the row.
     3. <table> elements lose their intrinsic width when not already
        inside a horizontal-scroll wrapper (.sl-table-wrap,
        .table-responsive). They are auto-wrapped by treating the table
        itself as a scroll container.
     4. Action rows (.sl-actions, .form-actions, .btn-group, .d-flex
        with btn children) always wrap.
     5. Buttons cap at 100% and break long labels (PT/JP) instead of
        being clipped by a parent with overflow:hidden.
     6. Form controls (input, select, textarea, input-group) never
        exceed the column width.
     7. The page-content-wrapper and .container-fluid get a hard
        max-width:100vw so a runaway child cannot create a horizontal
        scroll on the document itself.

   Pages that legitimately need wide content (e.g. canvas, 3D viewer,
   timeline) can opt out by adding the class .no-mobile-wrap to the
   element that should keep its intrinsic width.
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    /* 7. Hard viewport guard on the root chrome */
    html, body { max-width: 100vw; overflow-x: clip; }
    #page-content-wrapper,
    #page-content-wrapper > .content,
    #page-content-wrapper > .container-fluid,
    #page-content-wrapper > main,
    #page-content-wrapper > main > .container-fluid {
        max-width: 100vw;
        min-width: 0;
    }
    .container-fluid:not(.no-mobile-wrap) {
        max-width: 100vw;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* 1. Shell-level blocks */
    .card,
    .accordion,
    .accordion-item,
    .accordion-body,
    .sl-shell,
    .sl-panel,
    .sl-hero,
    .sl-filter-bar,
    .alert,
    .modal-content,
    .nav-tabs,
    .tab-content {
        max-width: 100%;
        min-width: 0;
    }
    .card > *,
    .card-body,
    .card-header,
    .card-footer,
    .sl-panel > *,
    .sl-hero > *,
    .accordion-body > * {
        min-width: 0;
        max-width: 100%;
    }
    /* Card content wrapping: long single-word strings break instead of
       widening the card. .sl-panel is intentionally excluded — applying
       word-break to the panel itself breaks table cell text layout. */
    .card-body, .sl-hero-titles {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    /* Cards/panels honor border radius — keep clipping internal.
       Use overflow:clip (not hidden) so no scroll container is created inside
       these elements, which would break iOS momentum scroll in descendants.
       .sl-panel is excluded: slim-list.css owns its overflow. */
    .card:not(.no-mobile-wrap),
    .sl-hero:not(.no-mobile-wrap) {
        overflow: clip;
    }

    /* 2. Bootstrap grid: shrinkable columns */
    .row { margin-left: 0; margin-right: 0; }
    .row > [class*="col-"] { min-width: 0; max-width: 100%; }

    /* 3. Tables: any <table> not already wrapped scrolls itself */
    .container-fluid table:not(.no-mobile-wrap),
    .card-body table:not(.no-mobile-wrap),
    .sl-panel table:not(.sl-table):not(.no-mobile-wrap),
    .accordion-body table:not(.no-mobile-wrap) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    /* #2448 — a tabela que JÁ mora dentro de um wrapper de scroll NÃO pode virar
       scroller ela mesma. Pela regra "3" acima ela ganhava display:block +
       overflow-x:auto + overscroll-behavior-x:contain. Como bloco ela não tem o
       que rolar na horizontal (o wrapper é que rola), e o `contain` corta o
       encadeamento do gesto: o dedo nunca chega no wrapper. No Android o arrasto
       lateral morria — o vertical continuava, porque overscroll-behavior-y segue
       `auto` e encadeia normalmente. Aqui ela volta a ser tabela de verdade e
       quem rola é o wrapper, que é o desenho original (o comentário logo abaixo
       já dizia isso, mas a regra "3" pegava antes por especificidade).
       Prefixo #page-content-wrapper só para vencer o `:not()` da regra "3". */
    #page-content-wrapper .sl-table-wrap > table:not(.no-mobile-wrap),
    #page-content-wrapper .table-responsive > table:not(.no-mobile-wrap),
    #page-content-wrapper [class$="-table-wrap"] > table:not(.no-mobile-wrap) {
        display: table;
        overflow: visible;
        overscroll-behavior-x: auto;
    }
    /* Slim-template tables already have .sl-table-wrap as scroll
       container — keep table itself as table for sticky thead. */
    .sl-table-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    /* Bootstrap's .table-responsive already handles this. Reinforce. */
    .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 4. Action rows always wrap on small screens */
    .sl-actions,
    .sl-form-actions,
    .form-actions,
    .btn-toolbar:not(.no-mobile-wrap),
    .btn-group:not(.no-mobile-wrap),
    .d-flex:not(.no-mobile-wrap):has(> .btn),
    .modal-footer,
    .card-body > .d-flex:has(> .btn) {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    /* 5. Buttons: never wider than parent; long text wraps */
    .btn:not(.no-mobile-wrap) {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.2;
    }
    .btn-group:not(.no-mobile-wrap) > .btn {
        flex: 1 1 auto;
    }

    /* 6. Form controls always fit */
    .form-control,
    .form-select,
    textarea.form-control,
    input.form-control {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .input-group:not(.no-mobile-wrap) {
        flex-wrap: wrap;
    }
    .input-group:not(.no-mobile-wrap) > .form-control,
    .input-group:not(.no-mobile-wrap) > .form-select {
        min-width: 0;
        flex: 1 1 0;
    }

    /* Modal: full-width on phone with safe inset */
    .modal-dialog:not(.modal-fullscreen):not(.no-mobile-wrap) {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
    .modal-body { max-width: 100%; min-width: 0; word-break: break-word; }

    /* Common dashboard "metric pill" rows: allow individual pill wrap */
    .sl-hero-metrics,
    .sl-pill-row {
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* Long unbroken text guards (codes, URLs, kintone IDs) */
    .sl-table tbody td,
    .card-body code,
    .card-body pre {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* ── High-specificity containment overrides ──────────────────────
       Module pages scope inline styles with two-class selectors
       (.stock-page .card, .fab-view-page .card-body, etc.) — specificity
       0,2,0 — which beats the generic guards above (0,1,0).
       Prefix with #page-content-wrapper (1,1,0) to guarantee containment
       properties always win. Only containment/overflow props belong here;
       visual styling (padding, font-size, color) stays overridable. */
    #page-content-wrapper .card:not(.no-mobile-wrap),
    #page-content-wrapper .accordion,
    #page-content-wrapper .accordion-item,
    #page-content-wrapper .accordion-body,
    #page-content-wrapper .sl-shell,
    #page-content-wrapper .sl-panel,
    #page-content-wrapper .sl-hero,
    #page-content-wrapper .alert,
    #page-content-wrapper .nav-tabs,
    #page-content-wrapper .tab-content {
        max-width: 100%;
        min-width: 0;
    }
    #page-content-wrapper .card-body,
    #page-content-wrapper .card-header,
    #page-content-wrapper .card-footer {
        min-width: 0;
        max-width: 100%;
    }
    #page-content-wrapper .row > [class*="col-"] {
        min-width: 0;
        max-width: 100%;
    }
    #page-content-wrapper .btn:not(.no-mobile-wrap) {
        max-width: 100%;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    #page-content-wrapper .form-control,
    #page-content-wrapper .form-select,
    #page-content-wrapper textarea.form-control,
    #page-content-wrapper input.form-control {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    #page-content-wrapper table:not(.no-mobile-wrap) {
        max-width: 100%;
    }
    #page-content-wrapper [class$="-table-wrap"],
    #page-content-wrapper .sl-table-wrap,
    #page-content-wrapper .table-responsive {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Phone-specific tightening (≤ 640px) ─────────────────────────── */
@media (max-width: 640px) {
    /* Reduce base .btn padding (operational/finance shells already
       override to smaller values with !important). This catches pages
       that use the base style only. */
    .btn:not(.btn-lg):not(.btn-xl):not([class*="btn-icon"]):not(.btn-close) {
        padding: 8px 14px;
        font-size: 0.9rem;
    }
    .btn.btn-sm {
        padding: 5px 10px;
        font-size: 0.82rem;
    }

    /* Page toolbar: stack title + actions vertically */
    .page-toolbar:not(.no-mobile-wrap) {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .page-toolbar:not(.no-mobile-wrap) .page-toolbar-copy { flex: 1 1 100%; }
    .page-toolbar:not(.no-mobile-wrap) .page-actions { width: 100%; }
    .page-toolbar:not(.no-mobile-wrap) .page-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Operational shell heroes — stack vertically.
       ⚠️ Column MUST come with nowrap: most heroes set `flex-wrap: wrap` for the
       desktop row, and column+wrap sent the actions into a SECOND COLUMN off the
       right edge (2026-09-21: buttons at x=546..727 in a 390px viewport, in 9
       modules). Children also drop their row flex-basis (e.g. `1 1 280px`), which
       in a column turns into a HEIGHT — the tall empty gap under the title. */
    [class$="-hero"]:not(.no-mobile-wrap),
    .sl-hero:not(.no-mobile-wrap),
    .finance-hero:not(.no-mobile-wrap) {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
    }

    /* KPI grids — 2 cols on phone */
    [class$="-kpis"]:not(.no-mobile-wrap),
    .tickets-kpis, .of-kpis, .fab-kpi-row,
    .lo-kpis, .pj-kpis, .delivery-kpis {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    /* Toolbar grids — single column on phone */
    [class$="-toolbar-grid"]:not(.no-mobile-wrap),
    .tickets-toolbar-grid, .poll-toolbar-grid,
    .master-ticket-filter-grid, .delivery-filter-grid {
        grid-template-columns: 1fr !important;
    }

    /* Board/kanban — single column on phone */
    .sl-board:not(.no-mobile-wrap),
    .tickets-board, .tk-board,
    .sl-tile-grid:not(.no-mobile-wrap) {
        grid-template-columns: 1fr !important;
    }

    /* All custom table-wraps: cap width */
    [class$="-table-wrap"]:not(.no-mobile-wrap) {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* High-specificity phone guards — mirror the 991px containment
       overrides but also tighten visual spacing. */
    #page-content-wrapper .card:not(.no-mobile-wrap) {
        overflow: hidden;
    }
    #page-content-wrapper .card:not(.no-mobile-wrap) > .card-body {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    #page-content-wrapper [class$="-hero"]:not(.no-mobile-wrap),
    #page-content-wrapper .sl-hero:not(.no-mobile-wrap) {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
    }
    #page-content-wrapper [class$="-hero"]:not(.no-mobile-wrap) > *,
    #page-content-wrapper .sl-hero:not(.no-mobile-wrap) > * {
        flex-basis: auto;
        min-width: 0;
        max-width: 100%;
    }
    #page-content-wrapper .sl-actions,
    #page-content-wrapper .d-flex:has(> .btn) {
        flex-wrap: wrap;
        gap: 6px;
    }
    #page-content-wrapper .sl-actions .btn,
    #page-content-wrapper .d-flex:has(> .btn) > .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .container-fluid:not(.no-mobile-wrap) {
        padding-left: 10px;
        padding-right: 10px;
    }
    .card-body { padding: 12px 14px; }
    .sl-hero { padding: 12px 14px; }
    .sl-panel > .card-body { padding: 12px 14px; }
    .sl-actions .btn { flex: 1 1 calc(50% - 6px); }
    .modal-dialog:not(.modal-fullscreen):not(.no-mobile-wrap) {
        margin: 0.4rem;
        max-width: calc(100vw - 0.8rem);
    }

    /* Operational KPI — 1 col on very small phones */
    [class$="-kpis"]:not(.no-mobile-wrap),
    .tickets-kpis, .of-kpis, .fab-kpi-row,
    .lo-kpis, .pj-kpis, .delivery-kpis {
        grid-template-columns: 1fr !important;
    }

    /* Filter grids collapse to 1 col */
    .finance-filter-grid:not(.no-mobile-wrap),
    .standard-filter-grid:not(.no-mobile-wrap),
    .sl-filter-bar:not(.no-mobile-wrap) {
        grid-template-columns: 1fr !important;
    }
    
    #page-content-wrapper .sl-filter-bar:not(.no-mobile-wrap) .sl-filter-wide {
        grid-column: auto !important;
    }

    /* High-specificity spacing for smallest phones */
    #page-content-wrapper .card-body { padding: 12px 14px; }
    #page-content-wrapper .sl-hero { padding: 12px 14px; }
    #page-content-wrapper .sl-panel > .card-body { padding: 12px 14px; }
    #page-content-wrapper .sl-actions .btn { flex: 1 1 calc(50% - 6px); min-width: 0; }
    /* Force shrink on flex containers so they don't break viewport */
    #page-content-wrapper .sl-hero-left { min-width: 0; flex: 1 1 100%; }
}

/* === Global rule: hide redundant stage-specific ticket codes ===
   The system identifies a ticket by a SINGLE code returned by ticket_display_code():
   - the raw Kintone record id if available, otherwise the "TKT-#####" slug.
   Stage-specific refs (project_ref, work_order_ref, purchase_order_ref, ticket_code)
   must NOT be rendered alongside that identifier. Pages that still emit them can
   add the `legacy-stage-code` class (or one of the variants below) and they'll be
   visually hidden in all views. */
.legacy-stage-code,
.legacy-stage-ref,
[data-legacy-code],
.ops-tag.is-code,
.ops-tag.is-project,
.ops-tag.is-os,
.ops-tag.is-po { display: none !important; }
/* When a wrapper only contained legacy refs, collapse trailing gap */
.ops-id-cell:has(> .ops-id-line + .legacy-stage-code:only-child) > .ops-id-line { margin-bottom: 0; }
/* === end global hide rule === */

/* === ajax-nav overlay (global) ============================== */
.ajax-nav-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 10500;
    display: flex; align-items: flex-start; justify-content: center;
    opacity: 0; transition: opacity .15s ease;
    background: linear-gradient(180deg, rgba(15,23,42,0.04), rgba(15,23,42,0));
    backdrop-filter: saturate(120%) blur(0.5px);
}
.ajax-nav-overlay.is-active { opacity: 1; pointer-events: auto; }
.ajax-nav-overlay .ajax-nav-spinner {
    width: 38px; height: 38px; margin-top: 18px;
    border-radius: 50%;
    border: 3px solid rgba(37, 99, 235, 0.18);
    border-top-color: #2563eb;
    animation: ajaxNavSpin 0.7s linear infinite;
    box-shadow: 0 8px 24px rgba(15,23,42,0.10);
    background: #ffffff;
}
@keyframes ajaxNavSpin { to { transform: rotate(360deg); } }
html.is-ajax-navigating { cursor: progress; }
html.is-ajax-navigating .container-fluid.content,
html.is-ajax-navigating main.app-content { opacity: 0.85; transition: opacity .12s ease; }
html.pwa-standalone.is-ajax-navigating .container-fluid.content,
html.pwa-standalone.is-ajax-navigating main.app-content {
    opacity: 1;
    transition: none;
}
@media (prefers-reduced-motion: reduce) {
    .ajax-nav-overlay .ajax-nav-spinner { animation-duration: 1.4s; }
    html.is-ajax-navigating .container-fluid.content,
    html.is-ajax-navigating main.app-content { opacity: 1; }
}
/* === end ajax-nav overlay === */

/* === app shell viewport lock (wins over page-local <style> blocks) =========
   Keeps sidebar, main column and docked chat tied to the live viewport height.
   Do not use 100vh/100dvh or body { zoom } on these nodes — they go stale on
   resize/PWA and fight page-specific overrides loaded in the body. */
@media (min-width: 768px) {
    html:has(body.app-scroll-lock) {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    html:has(body.app-scroll-lock) body.app-scroll-lock {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.app-scroll-lock .wrapper {
        display: flex !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.app-scroll-lock #page-content-wrapper {
        height: 100% !important;
        max-height: 100% !important;
        min-height: 0 !important;
    }

    body.app-scroll-lock #page-content-wrapper > .content,
    body.app-scroll-lock #page-content-wrapper > .container-fluid.content,
    body.app-scroll-lock #page-content-wrapper > main.content,
    body.app-scroll-lock #page-content-wrapper > main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
}

/* === app shell viewport lock — DESLIGADO NA IMPRESSÃO ======================
   O lock acima prende a altura ao viewport e usa overflow:hidden/auto. Isso é
   correto na TELA, mas no PAPEL cortava QUALQUER página longa na 1ª folha (a
   folha de ponto de 31 dias parava no dia ~18; só a parte visível ia pro PDF).
   Aqui tudo volta a ter altura automática pro conteúdo paginar de verdade.
   Especificidade tem que igualar/superar a do lock (`html:has(...) body...`). */
@media print {
    html:has(body.app-scroll-lock),
    html:has(body.app-scroll-lock) body.app-scroll-lock,
    html:has(body.app-scroll-lock) body.app-scroll-lock .wrapper,
    html:has(body.app-scroll-lock) body.app-scroll-lock #page-content-wrapper,
    html:has(body.app-scroll-lock) body.app-scroll-lock #page-content-wrapper > .content,
    html:has(body.app-scroll-lock) body.app-scroll-lock #page-content-wrapper > .container-fluid.content,
    html:has(body.app-scroll-lock) body.app-scroll-lock #page-content-wrapper > main.content,
    html:has(body.app-scroll-lock) body.app-scroll-lock #page-content-wrapper > main {
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        overflow-y: visible !important;
        display: block !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   MINI SIDEBAR / RÉGUA DE ÍCONES (colapsado) — desktop ≥ 1025px
   ──────────────────────────────────────────────────────────────────────────
   Antes: ".wrapper.sidebar-collapsed #sidebar { margin-left:-(--sidebar-width) }"
   escondia o sidebar inteiro (tudo-ou-nada). Agora, ao colapsar, o sidebar vira
   uma régua de ~66px mostrando só os ícones; no hover/focus de cada grupo abre
   um FLYOUT flutuante (position:fixed, escapa do overflow:hidden do shell) com o
   título do grupo + os itens. Mobile (≤991.98px) e a faixa fixed 992–1024px
   (layout-mobile-fix.css) NÃO são afetados — drawer/overlay intactos.
   ══════════════════════════════════════════════════════════════════════════ */

/* Cabeçalho do flyout (injetado por JS); escondido fora da régua. */
#sidebar .rail-flyout-title { display: none; }

@media (min-width: 1025px) {
    /* Régua: largura fixa pequena, volta pro fluxo (sem margin negativa).
       O #page-content-wrapper (flex:1 1 auto) reflui sozinho ocupando o espaço. */
    .wrapper.sidebar-collapsed #sidebar {
        min-width: var(--sidebar-rail-width);
        max-width: var(--sidebar-rail-width);
        margin-left: 0;
        overflow: visible;
    }

    /* ── Cabeçalho: só logo/inicial centralizado ── */
    .wrapper.sidebar-collapsed #sidebar .sidebar-header { padding: 0 6px; }
    .wrapper.sidebar-collapsed #sidebar .sidebar-header h3 {
        font-size: 0;
        letter-spacing: 0;
    }
    .wrapper.sidebar-collapsed #sidebar .sidebar-header h3::first-letter {
        font-size: 1.15rem;
        letter-spacing: 0;
    }
    .wrapper.sidebar-collapsed #sidebar .sidebar-brand-logo { max-height: 34px; }

    /* ── Caixa de busca do menu: sem espaço na régua ── */
    .wrapper.sidebar-collapsed #sidebar .sidebar-menu-filter-box { display: none; }

    /* ── Painel do usuário: só o avatar, centralizado na régua ──
       (sem o max-width/borda da base que deixavam a caixa torta à esquerda) */
    .wrapper.sidebar-collapsed #sidebar .sidebar-user-panel {
        margin: 8px auto 8px;
        max-width: none;
        width: auto;
        border: 0;
        background: transparent;
    }
    .wrapper.sidebar-collapsed #sidebar .sidebar-user-trigger {
        justify-content: center;
        padding: 4px 0;
    }
    .wrapper.sidebar-collapsed #sidebar .sidebar-user-meta,
    .wrapper.sidebar-collapsed #sidebar .sidebar-user-chev { display: none; }
    /* Menu do usuário vira flyout fixo à direita da régua (top setado por JS). */
    .wrapper.sidebar-collapsed #sidebar .sidebar-user-panel.is-open .sidebar-user-menu {
        position: fixed;
        left: var(--sidebar-rail-width);
        top: var(--rail-flyout-top, 70px);
        right: auto;
        width: 250px;
        border-radius: 8px;
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
        max-height: calc(100vh - var(--rail-flyout-top, 70px) - 12px);
    }

    /* ── Rodapé (marketplace): só ícone ── */
    .wrapper.sidebar-collapsed #sidebar .sidebar-footer-cta { padding: 10px 6px; }
    .wrapper.sidebar-collapsed #sidebar .sidebar-marketplace-btn {
        justify-content: center;
        padding: 9px 6px;
    }
    .wrapper.sidebar-collapsed #sidebar .sidebar-marketplace-btn i { margin: 0 !important; }
    .wrapper.sidebar-collapsed #sidebar .sidebar-marketplace-btn-text,
    .wrapper.sidebar-collapsed #sidebar .sidebar-marketplace-btn .sidebar-user-menu-badge { display: none; }

    /* ── Lista de menu: só ícones centralizados ── */
    .wrapper.sidebar-collapsed #sidebar ul.components { padding: 10px 6px; }
    .wrapper.sidebar-collapsed #sidebar .sidebar-prototype-divider-label { display: none; }

    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-filter-section > a.has-submenu,
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-central-menu > a.has-submenu {
        justify-content: center;
        gap: 0;
        padding: 10px 0;
        position: relative;
    }
    /* Esconde tudo menos o ícone na régua */
    .wrapper.sidebar-collapsed #sidebar ul.components > li > a.has-submenu .menu-label > span,
    .wrapper.sidebar-collapsed #sidebar ul.components > li > a.has-submenu .submenu-caret,
    .wrapper.sidebar-collapsed #sidebar ul.components > li > a.has-submenu [data-sidebar-badge-node="1"],
    .wrapper.sidebar-collapsed #sidebar ul.components > li > a.has-submenu .sidebar-menu-chip,
    .wrapper.sidebar-collapsed #sidebar ul.components > li > a.has-submenu .sidebar-dept-badge,
    .wrapper.sidebar-collapsed #sidebar ul.components > li > a.has-submenu .sidebar-responsible-stack {
        display: none !important;
    }
    .wrapper.sidebar-collapsed #sidebar ul.components > li > a.has-submenu .menu-label {
        justify-content: center;
        gap: 0;
        overflow: visible;
        flex: 0 0 auto;
        /* o label é nó de texto solto (não <span>); font-size:0 some com ele,
           o ícone é reampliado na regra abaixo */
        font-size: 0;
    }
    .wrapper.sidebar-collapsed #sidebar ul.components > li > a.has-submenu .menu-label i {
        margin: 0;
        width: auto;
        font-size: 0.98rem;
    }

    /* Na régua, NEUTRALIZA os fundos temáticos das seções (senão a seção ativa
       vira um bloco azul pesado — o "primeiro sempre selecionado" do bug). */
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-filter-section > a.has-submenu,
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-filter-section.open > a.has-submenu,
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-central-menu > a.has-submenu {
        background: transparent !important;
        border-left-color: transparent !important;
        background-image: none !important;
    }
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-filter-section > a.has-submenu:hover,
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-central-menu > a.has-submenu:hover {
        background: #f1f5f9 !important;
    }
    /* Realce: na seção ativa da página (.open) E na que está com o card aberto
       (.rail-flyout-open, por hover ou clique) — o ícone "acende". */
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-filter-section.open > a.has-submenu,
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-filter-section.rail-flyout-open > a.has-submenu,
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-central-menu.rail-flyout-open > a.has-submenu {
        background: var(--sidebar-active-bg) !important;
        box-shadow: inset 3px 0 0 var(--sidebar-active-text);
    }
    .wrapper.sidebar-collapsed #sidebar ul.components > li.rail-flyout-open > a.has-submenu .menu-label i {
        color: var(--sidebar-active-text);
    }

    /* ── FLYOUT: o submenu vira painel flutuante fixo ── */
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-filter-section > ul.submenu,
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-central-menu > ul.submenu {
        display: block;
        position: fixed;
        /* -3px: encosta na régua p/ não haver vão no trajeto ícone→card */
        left: calc(var(--sidebar-rail-width) - 3px);
        top: var(--rail-flyout-top, 0px);
        width: 268px;
        max-height: calc(100vh - var(--rail-flyout-top, 0px) - 10px);
        overflow-y: auto;
        overflow-x: hidden;
        margin: 0;
        padding: 8px;
        background: var(--sidebar-bg, #ffffff);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        box-shadow: 0 14px 40px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.08);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-6px);
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
        z-index: 1085;
        pointer-events: none;
    }
    /* Aberto por JS (hover/clique) via .rail-flyout-open; :focus-within abre por teclado. */
    .wrapper.sidebar-collapsed #sidebar ul.components > li.rail-flyout-open > ul.submenu,
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-filter-section:focus-within > ul.submenu,
    .wrapper.sidebar-collapsed #sidebar ul.components > li.sidebar-central-menu:focus-within > ul.submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Título do flyout (nome do grupo) */
    .wrapper.sidebar-collapsed #sidebar ul.components > li > ul.submenu > .rail-flyout-title {
        display: block;
        margin: 0 0 6px;
        padding: 2px 8px 8px;
        font-size: 0.7rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
        border-bottom: 1px solid var(--border-color);
        list-style: none;
    }

    /* No flyout, os itens/labels voltam a aparecer normalmente */
    .wrapper.sidebar-collapsed #sidebar ul.components > li > ul.submenu li a > span.d-inline-flex > span:not(.badge) {
        overflow: visible;
        white-space: normal;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDESIGN DO TOPBAR — cara de produto, alinhado ao sidebar novo
   ──────────────────────────────────────────────────────────────────────────
   - Botões-ícone numa só família "ghost" (hambúrguer, busca, sino, idioma, sair)
   - Busca preenchida estilo command-bar (fundo cinza, foco azul)
   - Atalhos: container suave + ícones sem "tile" boxy + contador slate (nº)
   - CTA primário plano + divisória separando as ações de ícone
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Botões-ícone: mesma família ghost ── */
.navbar .btn-toggle,
.navbar .btn-icon,
.navbar .btn-logout {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 0;
    border-radius: 9px;
    color: #475569;
    font-size: 1rem;
    border: 1px solid transparent;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.navbar .btn-toggle { font-size: 1.1rem; }
.navbar .btn-logout { font-size: 1.02rem; }
.navbar .btn-toggle:hover,
.navbar .btn-icon:hover {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.2);
    color: #1e293b;
}
.navbar .btn-logout:hover {
    background: #fef2f2;
    border-color: rgba(239, 68, 68, 0.22);
    color: #dc2626;
}

/* ── Busca preenchida (command-bar) ── */
.topbar-search-input {
    height: 38px;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 10px;
    box-shadow: none;
    font-size: 0.84rem;
}
.topbar-search-input:focus {
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.topbar-search-form--inline { flex: 0 1 clamp(260px, 30vw, 440px); }

/* ── Atalhos: container suave + ícones ghost (sem tiles brancos boxy) ── */
.topbar-shortcuts-hub-card.is-expanded {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 4px 6px 4px 0;
}
.topbar-shortcuts-hub-card.is-expanded .topbar-shortcuts {
    border-left-color: rgba(148, 163, 184, 0.28);
}
.topbar-shortcuts-hub-card.is-expanded .topbar-shortcut.sidebar-icon-shortcut,
.topbar-shortcut {
    border-radius: 9px;
    border-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
.topbar-shortcuts-hub-card.is-expanded .topbar-shortcut.sidebar-icon-shortcut:hover,
.topbar-shortcut:hover {
    background: #e9eef5 !important;
}
.navbar .topbar-shortcut i { color: #475569; }

/* Contador dos atalhos: mantém o número, em tom neutro slate (não vermelho) */
.topbar-shortcut-badge,
.topbar-shortcuts-hub-card.is-expanded .topbar-shortcut-badge {
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    top: -4px;
    right: -4px;
    font-size: 0.55rem;
    font-weight: 700;
    background: #64748b;
    color: #ffffff;
    border: 1.5px solid #f8fafc;
    box-shadow: none;
}

/* ── CTA primário plano + divisória ── */
.topbar-demand-btn {
    height: 38px;
    border-radius: 9px;
    font-weight: 600;
    border-color: #2563eb;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
}
.topbar-demand-btn:hover,
.topbar-demand-btn:focus-visible {
    background: #1d4ed8;
    transform: none;
    filter: none;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.22);
}
.topbar-actions-divider {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    align-self: center;
    flex: 0 0 auto;
    margin: 0 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   REFINO do dropdown de NOTIFICAÇÕES (sino) — flat/sério, alinhado ao resto.
   Tira o fundo tonal cheio das linhas (branco + hover sutil) e leva a cor do
   "tone" pro ícone (color-coding limpo). Mantém unread com barra + tinta leve.
   ══════════════════════════════════════════════════════════════════════════ */
#notificationsDropdown.dropdown-panel { border-radius: 12px; }
#notificationsDropdown .dropdown-item.notification-entry,
#notificationsDropdown .dropdown-item.notification-entry[class*="tone-"] {
    background: #ffffff !important;
    border-radius: 8px;
}
#notificationsDropdown .dropdown-item.notification-entry:hover,
#notificationsDropdown .dropdown-item.notification-entry[class*="tone-"]:hover {
    background: #f6f8fb !important;
}
#notificationsDropdown .dropdown-item.notification-entry.unread {
    background: #f7faff !important;
    box-shadow: inset 3px 0 0 #2563eb;
}
/* tom → ícone (fundo tintado leve + ícone colorido) */
#notificationsDropdown .notification-entry.tone-red .notification-mini-icon { background:#fef2f2; border-color:#fecaca; }
#notificationsDropdown .notification-entry.tone-red .notification-mini-icon i { color:#dc2626; }
#notificationsDropdown .notification-entry.tone-amber .notification-mini-icon,
#notificationsDropdown .notification-entry.tone-orange .notification-mini-icon { background:#fff7ed; border-color:#fed7aa; }
#notificationsDropdown .notification-entry.tone-amber .notification-mini-icon i,
#notificationsDropdown .notification-entry.tone-orange .notification-mini-icon i { color:#d97706; }
#notificationsDropdown .notification-entry.tone-green .notification-mini-icon,
#notificationsDropdown .notification-entry.tone-emerald .notification-mini-icon { background:#f0fdf4; border-color:#bbf7d0; }
#notificationsDropdown .notification-entry.tone-green .notification-mini-icon i,
#notificationsDropdown .notification-entry.tone-emerald .notification-mini-icon i { color:#059669; }
#notificationsDropdown .notification-entry.tone-blue .notification-mini-icon,
#notificationsDropdown .notification-entry.tone-sky .notification-mini-icon,
#notificationsDropdown .notification-entry.tone-indigo .notification-mini-icon { background:#eff6ff; border-color:#bfdbfe; }
#notificationsDropdown .notification-entry.tone-blue .notification-mini-icon i,
#notificationsDropdown .notification-entry.tone-sky .notification-mini-icon i,
#notificationsDropdown .notification-entry.tone-indigo .notification-mini-icon i { color:#2563eb; }
#notificationsDropdown .notification-entry.tone-violet .notification-mini-icon,
#notificationsDropdown .notification-entry.tone-pink .notification-mini-icon { background:#f5f3ff; border-color:#ddd6fe; }
#notificationsDropdown .notification-entry.tone-violet .notification-mini-icon i,
#notificationsDropdown .notification-entry.tone-pink .notification-mini-icon i { color:#7c3aed; }
#notificationsDropdown .notification-entry.tone-cyan .notification-mini-icon { background:#ecfeff; border-color:#a5f3fc; }
#notificationsDropdown .notification-entry.tone-cyan .notification-mini-icon i { color:#0891b2; }

/* ══════════════════════════════════════════════════════════════════════════
   REFINO do menu do usuário (dropdown da sidebar) — branco, arredondado,
   neutro (slate), consistente com o header/sidebar novos. Substitui o tema
   azulado antigo (borda #8fc9ff, fundo #eef2f6, cantos retos).
   ══════════════════════════════════════════════════════════════════════════ */
#sidebar .sidebar-user-menu {
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);
    padding: 6px;
}
#sidebar .sidebar-user-menu a,
#sidebar .sidebar-user-menu button {
    border-radius: 7px;
    color: #334155;
    font-weight: 500;
    padding: 8px 10px;
}
#sidebar .sidebar-user-menu a:hover,
#sidebar .sidebar-user-menu button:hover {
    background: #f1f5f9;
    color: #1e293b;
}
#sidebar .sidebar-user-menu i { color: #64748b; }
#sidebar .sidebar-user-menu .is-danger,
#sidebar .sidebar-user-menu .is-danger i { color: #dc2626; }
#sidebar .sidebar-user-menu .is-danger:hover { background: #fef2f2; color: #b91c1c; }
#sidebar .sidebar-user-menu .sidebar-user-menu-sep,
#sidebar .sidebar-user-menu hr.sidebar-user-menu-sep {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.18);
}

/* ── Redesign do dropdown do avatar (report #2102) ──────────────────────────
   1) Chip vermelho p/ "Sair" na linha de ações rápidas do cabeçalho.
   2) Navegação em linhas (Início/Ponto/Demandas/Tarefas/Relatórios/Drive).
   3) Grupo expansível "Relatórios" (abertura/fechamento suave).
   4-5) Grade de ferramentas + switches reais (Modo Apresentação/Debug).
   6) Seção Interface com seletores rotulados (Tema/Modo/Idioma). */
#sidebar .sidebar-user-menu-tag.is-danger { color: #dc2626; border-color: rgba(220, 38, 38, 0.3); }
#sidebar .sidebar-user-menu-tag.is-danger:hover { background: #fef2f2; border-color: rgba(220, 38, 38, 0.45); color: #b91c1c; }

.sidebar-user-menu-rows { display: flex; flex-direction: column; gap: 1px; padding: 2px 4px; }
#sidebar .sidebar-user-menu-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 9px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    width: 100%;
    box-sizing: border-box;
    font-weight: 500;
}
#sidebar .sidebar-user-menu-row:hover { background: #f1f5f9; color: #1e293b; }
#sidebar .sidebar-user-menu-row.is-active {
    background: rgba(37, 99, 235, 0.08);
    border-left-color: #2563eb;
    color: #1d4ed8;
    font-weight: 700;
}
#sidebar .sidebar-user-menu-row.is-active i { color: #2563eb; }
#sidebar .sidebar-user-menu-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#sidebar .sidebar-user-menu-row .sidebar-user-menu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 6px;
    overflow: visible;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(127, 29, 29, .2);
}

.sidebar-user-menu-group { display: flex; flex-direction: column; }
.sidebar-user-menu-group-toggle { cursor: pointer; }
.sidebar-user-menu-group-caret { font-size: 0.68rem; transition: transform 0.2s ease; }
.sidebar-user-menu-group.is-open .sidebar-user-menu-group-caret { transform: rotate(180deg); }
.sidebar-user-menu-subrows {
    max-height: 0;
    overflow: hidden;
    padding-left: 14px;
    transition: max-height 0.25s ease;
}
.sidebar-user-menu-group.is-open .sidebar-user-menu-subrows { max-height: 220px; }

/* Ferramentas: uma EMBAIXO da outra (coluna única) e em modo slim — pedido do dono.
   Em duas colunas o rótulo era cortado com reticências ("Mod…", "We… B…"); empilhado,
   cada ferramenta mostra o nome inteiro e a lista fica mais baixa mesmo com mais itens. */
.sidebar-user-menu-tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 2px 8px 6px;
}
#sidebar .sidebar-user-menu-tool-chip {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: auto !important;
    height: 30px;
    padding: 0 10px !important;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    color: #334155;
    font-size: 0.74rem;
    font-weight: 700;
}
#sidebar .sidebar-user-menu-tool-chip:hover {
    background: #f8fafc;
    border-color: rgba(37, 99, 235, 0.32);
    color: #1d4ed8;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
#sidebar .sidebar-user-menu-tool-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-menu-tool-switch { justify-content: space-between; }
.sidebar-toggle-switch {
    flex: 0 0 auto;
    width: 26px; height: 15px;
    border-radius: 999px;
    background: #cbd5e1;
    position: relative;
    transition: background-color 0.18s ease;
}
.sidebar-toggle-knob {
    position: absolute;
    top: 1.5px; left: 1.5px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25);
    transition: transform 0.18s ease;
}
.sidebar-user-menu-tool-switch.is-on .sidebar-toggle-switch { background: #22c55e; }
.sidebar-user-menu-tool-switch.is-on .sidebar-toggle-knob { transform: translateX(11px); }

.sidebar-user-menu-interface-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    margin: 2px 0;
}
.sidebar-user-menu-interface-label {
    flex: 0 0 auto;
    min-width: 84px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
}
.sidebar-user-menu-interface-static {
    font-size: 0.66rem;
    font-weight: 700;
    color: #94a3b8;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(148, 163, 184, 0.25);
}


/* ─────────────────────────────────────────────────────────────────────────────
   #2112 — 日報一覧（運行日報）: barra de rolagem horizontal SEMPRE à vista
   (modules/logistica/daily_flow_reports.php — lista principal #dfr-list-table)

   Problema: a lista tem ~17 colunas e a barra horizontal só aparecia no rodapé da
   página. Causa raiz: script.js embrulhava a tabela num 2º scroller interno
   (.table-scroll-wrapper) — corrigido lá; quem rola agora é o próprio #dfr-list-table.

   Solução:
   1) .sl-shell é grid com coluna implícita `auto` (= max-content): sem minmax(0,1fr)
      o item cresce até a largura da tabela e o container rolável nunca rola por
      dentro (a tabela vaza o painel e some sob o overflow-x:clip do main).
   2) altura máxima na área da lista: assim a tabela — E a barra logo abaixo dela —
      cabe na tela; o cabeçalho já é position:sticky, então continua fixo no topo.
   3) barra própria (DOM) logo abaixo da lista, montada por assets/js/script.js
      (bloco #2112): não depende do scrollbar do SO, então nunca some — nem no Mac.
      A nativa horizontal fica escondida quando a nossa está ativa (.dfr-hbar-host);
      sem JS, a nativa (overflow-x:scroll, estilizada) continua valendo.
   ───────────────────────────────────────────────────────────────────────────── */
.sl-shell:has(> #dfr-list-table) { grid-template-columns: minmax(0, 1fr); }

.sl-shell #dfr-list-table.dfr-table-wrap {
    max-height: min(70vh, 640px);
    overflow-y: auto;
    overflow-x: scroll;
    padding-bottom: 0;
    overscroll-behavior-x: contain;
    /* largura normal (não `thin`): a barra tem que ser fácil de VER e de arrastar */
    scrollbar-width: auto;
    scrollbar-color: #64748b #e2e8f0;
    scrollbar-gutter: stable;
}
.sl-shell #dfr-list-table.dfr-table-wrap::-webkit-scrollbar { height: 14px; width: 12px; }
.sl-shell #dfr-list-table.dfr-table-wrap::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 8px; }
.sl-shell #dfr-list-table.dfr-table-wrap::-webkit-scrollbar-thumb { background: #64748b; border-radius: 8px; border: 3px solid #e2e8f0; }
.sl-shell #dfr-list-table.dfr-table-wrap::-webkit-scrollbar-thumb:hover { background: #475569; }
/* com a barra própria ativa, esconde só a horizontal nativa (a vertical continua) */
.sl-shell #dfr-list-table.dfr-hbar-host::-webkit-scrollbar:horizontal { height: 0; }

/* barra própria — criada por assets/js/script.js, logo abaixo da lista */
.sl-shell .dfr-hbar {
    position: relative;
    height: 16px;
    margin: 6px 0 2px;
    border-radius: 999px;
    background: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.4);
    cursor: pointer;
    touch-action: none;
}
.sl-shell .dfr-hbar[hidden] { display: none; }
.sl-shell .dfr-hbar__thumb {
    position: absolute;
    top: 3px;
    left: 0;
    height: 8px;
    min-width: 44px;
    background: #64748b;
    border-radius: 999px;
    cursor: grab;
}
.sl-shell .dfr-hbar__thumb:hover { background: #475569; }
.sl-shell .dfr-hbar.is-dragging .dfr-hbar__thumb { background: #334155; cursor: grabbing; }

/* ===== Convite único para ligar o aviso do navegador (2026-08-22) =====
   Aparece uma vez, só para quem NUNCA decidiu sobre notificação, e some ao
   clicar em qualquer um dos dois botões. Não pede permissão: leva ao sino. */
.kimori-push-nudge {
    position: fixed; right: 18px; bottom: 18px; z-index: 900;
    width: min(320px, calc(100vw - 36px));
    background: #fff; color: #0f172a;
    border: 1px solid rgba(148,163,184,.28); border-radius: 14px;
    padding: 14px 16px; box-shadow: 0 18px 40px rgba(15,23,42,.16);
    font-size: 13px; line-height: 1.5;
    animation: kimori-push-nudge-in .25s ease-out;
}
@keyframes kimori-push-nudge-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kimori-push-nudge strong { display: block; margin-bottom: 6px; font-size: 14px; }
.kimori-push-nudge p { margin: 0 0 12px; color: #475569; }
.kimori-push-nudge-actions { display: flex; gap: 8px; justify-content: flex-end; }
.kimori-push-nudge-actions button {
    border-radius: 9px; padding: 7px 13px; font-size: 12.5px; font-weight: 600;
    cursor: pointer; border: 1px solid transparent;
}
.kimori-push-nudge-actions [data-nudge-ok] { background: #1d4ed8; color: #fff; }
.kimori-push-nudge-actions [data-nudge-no] { background: transparent; color: #64748b; }
/* O quiosque não tem sino e o convite nem chega a montar — mas se um dia tiver,
   ele não pode cobrir a interface de toque em tela cheia. */
@media (max-width: 520px) { .kimori-push-nudge { right: 10px; left: 10px; bottom: 10px; width: auto; } }